Upgrade wp_list_categories() to wp_nav_menu()
in Functions
as how-to, WordPress, wp_list_categories, wp_nav_menu
In this third installment in the upgrade to wp_nav_menu() series of posts, I will be dealing with moving from wp_list_categories() to wp_nav_menu().
Let’s start with the same basic outline and list the default options for each function. We will start with wp_nav_menu() 1 first:
wp_nav_menu( array(
'menu' => '',
'container' => 'div',
'container_class' => '',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => '',
'theme_location' => ''
) );
We follow with wp_list_categories() 2, 3 which is often wrapped in a <ul class=”menu”> tag:
<ul class="menu">
wp_list_categories( array(
'include' => '',
'exclude' => '',
'exclude_tree' => '',
'child_of' => 0,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC',
'use_desc_for_title'=> 1,
'number' => NULL,
'hierarchical' => true,
'show_count' => 0,
'pad_counts' => 0,
'style' => 'list',
/* 'style' set to list "creates list items for an unordered list" */
'show_option_all' => '',
'show_option_none' => __('No categories'),
'show_last_update' => 0,
'feed' => '',
'feed_type' => '',
'feed_image' => '',
'current_category' => 0,
'taxonomy' => 'category',
'title_li' => __( '' ),
/* 'title_li' set to '' for menus from the default 'Categories' */
'echo' => 1,
'depth' => 0,
'walker' => 'Walker_Category'
) );
</ul>
Here is the break-down of the wp_list_categories() default options from above:
'include'– not used'exclude'– not used'exclude_tree'– not used'child_of'– not used'hide_empty'– not used'orderby'– not used'order'– not used'use_desc_for_title'– not used'number'– not used'hierarchical'– not used'show_count'– not used'pad_counts'– not used'style'– not used'show_option_all'– not available'show_option_none'– not available'show_last_update'– not available'feed'– not available'feed_type'– not available'feed_image'– not available'current_category'– not available'taxonomy'– not available'title_li'– not used'echo'– similar to wp_nav_menu(); true versus 1 as value'depth'– same as wp_nav_menu()'walker'– see below for additional notes
Although there are great many options available to be used with wp_list_categoires() most are not used (as noted in the list above) in place of the user interface of wp_nav_menu() found under Appearance | Menu in the dashboard. The options that are marked as “not available” are currently not directly supported by wp_nav_menu() without the application of filters. The last few options remaining match up almost exactly with wp_page_nav() in a similar fashion as was shown with wp_list_pages().
Just like the wp_list_pages() consideration, the wp_nav_menu() fallback_cb option may be set to 'fallback_cb' => 'wp_list_categories'. This backward compatibility may also be addressed with a custom function as was noted, too.
Note: In most cases you would leave the wp_nav_menu() 'walker' option set to its default NULL although wp_list_categories() uses its own default walker class.
Going Home
as bloginfo, get_bloginfo, WordPress, wp_list_categories, wp_list_pages, wp_page_menu
Creating text links back to the home page, or front page, of a blog are done in many ways. Many themes use the blog Title as a link back to the home page. It is also very common for the menu or navigation bar to link to the home page. This article will cover some examples of links for going home.
Let’s start with an obvious example: a link from the blog title back to the home page.
<a href="http://wpfirstaid.com/">WP First Aid</a>
The above example is very, very basic … let’s dress it up a bit:
<h1 class="blog-title"><a href="http://wpfirstaid.com/" alt="Going Home: WP First Aid">WP First Aid</a></h1>
Now we have a title using the h1 element and a CSS class of blog-title with some alt text letting the reader know where the link will be going. This is better but how does this help you? Let’s make use of WordPress’ built in functions to make this example more generic and easily transferable.
<h1 class="blog-title"><a href="<?php bloginfo('url'); ?>" alt="Going Home: <?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
This example makes use of the WordPress function bloginfo(). Here is a link to the WordPress codex for this function; and, here is a link to the get_bloginfo() function which provides additional details.
Our next example is adding a home page link to a navigation bar. Many navigation bars are generated with one of three WordPress functions: wp_list_pages(), wp_page_menu(), or wp_list_categories(). The wp_page_menu function uses a value that creates a home page link, for example:
<?php wp_page_menu('show_home=1'); ?>
The wp_page_menu function includes all the available parameters of the wp_list_pages function and also includes wrapping the output in an unordered list.
To add a home page link into a theme using the wp_list_pages function you may look at the following example for guidance:
<ul>
<li><a href="<?php bloginfo('url'); ?>" alt="Going Home: <?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></li>
<?php wp_list_pages(); ?>
</ul>
Adding a home page link to a navigation menu created with the wp_list_categories function is very similar. Let’s take a quick look at it below.
<ul>
<li><a href="<?php bloginfo('url'); ?>" alt="Going Home: <?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></li>
<?php wp_list_categories(); ?>
</ul>
The only difference in the above two examples are the function call. The links we added to the home page are almost identical to the the link example we used for the blog title.
Feel free to use any of the above examples in your own works. Of course, there could be additional CSS elements needed to work with your theme’s style but I will leave that as an exercise for you … or feel free to contact us with more complex code requirements.
