FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!

Combining wp_list_categories with wp_list_pages




To create a navigation menu for my current project, I have decided the best way to do it is using the the wp_list for both categories AND pages.

The obvious way to do it would be like so:
Code:
<ul id="navigation">
<?php wp_list_pages('title_li=' ); ?>
<?php wp_list_categories('title_li='); ?>
</ul>
The way that these are displayed by default is by title alphabetically, and thats fine, but obviously having to separate calls for the lists, there is going to be a A-Z,A-Z problem.

So the challenge today is to combine the two and being able to output an ascending alphabetical order...

My first thought was jQuery, and it came up wonderfully.

Adding this code to the header
Code:
<script type="text/javascript">
jQuery(document).ready(function ($) {
var mylist = $('#navigation');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });
});
</script>


Took me around about 30 minutes to come to the solution, but it's now in my head, and now on this blog Smile



2 blog comments below

Aha .... the reply has been activated. Well done! Have you incorporated it in a Website yet?
deanhills on Sat May 18, 2013 6:57 pm
@deanhills this has been incorporated in the template of the wp theme, but not on an active website.

it will be in time, and if you come across a site that uses this method you will notice that there is a split second that when the site loads to when the jQuery gets activated and puts the "ul" into alphabetical order.
medesignz on Sun May 19, 2013 1:03 am



FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.