We all feel the pain of having to customize our page menus for pretty much any WordPress theme. Sure, there are plugins that give you control over this, but it shouldn’t be so hard.
There are several methods that people have been trying to overcome this one frustrating thing with WordPress, but the method I’m describing here is easy and requires little coding.
In this tutorial, I’m going to show you how to completely widgetize your menu. I’m actually using this very method in my upcoming redesign of Theme Hybrid, and I’m the kind of person that feels more than comfortable diddling with code.
The setup
I’m going to make an assumption that your theme has been updated to use the latest WordPress functions — themes like Hybrid and Thematic make use of this.
Your theme needs to use the wp_page_menu() function to add its page menu. While this isn’t a requirement to widgetize your menu, I’ll be using it here.
Open your theme’s functions.php file and drop this code in:
<?php
register_sidebar( array(
'name' => 'Page Menu',
'id' => 'page-menu',
'before_widget' => '<div id="page-nav">',
'after_widget' => '</div>',
'before_title' => false,
'after_title' => false
) );
add_filter( 'wp_page_menu', 'my_page_menu' );
function my_page_menu( $menu ) {
dynamic_sidebar( 'page-menu' );
}
?>That’s all the code you must add to your theme. Your page menu is now completely widgetized.
Adding widgets to your page menu
Of course, you’ll want to add a list of pages now. Head over to the Widgets page in your WordPress admin. Select the Page Menu widget area.
From this point, you have several options:
- Make an unordered list in the text widget.
- Use the Widgets Reloaded plugin for complete control over pages.
- Use the Hybrid theme, which has a cool pages widget.
- Find another widget that allows greater control over pages.
A few notes about this method
If your theme does not use the wp_page_menu() function, replace your theme’s menu code with this:
<?php wp_page_menu(); ?>I think it goes without saying, but just in case — don’t add a title to your widget. That’ll likely screw up your page menu. You might also need to change the ID of page-nav to match your theme’s CSS.
If you are using my Hybrid theme, I’ve put up a tutorial on the support forums on how to use the Superfish JavaScript for drop-downs with this technique.
Thanks for the info. I always find it hard to work with widgets but I am still a noob at it all anyways. I just have a problem figuring out where to put the extra lines of codes usually since I understand php enough to edit pages and such. I am sure this will help.
Bryan — Now, go back and read the post. Where does it say to add the code?
Does it work with 2.3 versions ? my site is still use wordpress 2.3 Thanks
iGuzz, you should really upgrade your Wordpress installation please see
http://codex.wordpress.org/Upgrading_WordPress
You are missing out on a lot of functions and security using such an old installation.
Thank you for your sharing! It’s good for me. Bye
This is exactly what I need. I’m thinking about using the NAVT plugin and this for an article sometime in the future for complete control over a WP menu. Now if Widget Logic had an graphical interface instead of conditional tags!
iGuzz — Nope, it won’t work with anything pre-2.7. But, as David mentioned, you seriously need to upgrade. WordPress 2.3 is a huge security risk.
anontanan — I’m happy it’s a good solution for you.
Cristi — Let me know if you write that article. I’m always interested in alternative ways of configuing the page menu.
Justin, could I suggest that you amend:
'before_widget' => '<div id="page-nav">'to include the unique widget identifiers and classes provided by WordPress by default:
'before_widget' => '<div id="page-nav %1$s" class="%2$s">'I explained the reasons why this is necessary in one of my earlier posts about best practices for WordPress themes and widgets.
Kaspars — Ninety-nine percent of the time, I’d completely agree with you. However, in this case, I’m looking to specifically add a certain ID to my page nav. And, you can’t have two IDs for an element as you have in your code.
Of course, you could add the unique identifiers, move
page-navover to being a class, and get along just fine.I even had this same discussion with myself before writing this tutorial. For now, I’ll leave the above code as is. If someone needs the generated ID and class added, they can just copy your code.
Hello
how do you do if you have english / french website do you define this in array?
Justin, you are right, one cannot have two ID per tag. It probably was my widgetized part of brain thinking — “no widget can exists with proper IDs”
However, I found another drawback of this method — it overwrites all
wp_page_menucalls, which means that one cannot have another menu in the footer, for example, that also useswp_page_menu.That said, the best solution would be to use your Widgets Reloaded plugin and turn those menu calls inside the theme files into widgetized areas.
Thank you so much for this information.
I had to fix a WP blogsite sidebar and this was exactly what I needed.
Love the concept of this, but if the primary purpose of using WordPress and WP themes (for me) is to try to avoid coding. So, needless to say, I am not quite there. I used a theme called Lifestyle for my site. Been very pleased with what I have been able to accomplish in the last week. I am looking to add some widgetized pages that can publish specific posts and thumbnails (rather than manually entering photos/links); however, even after watching the video and reading this post (and spending a few hours yesterday editing the functions.php), I can’t quite figure out where to place the code (although I am very very close). Any guidance would be greatly appreciated. I get the sense it’s not that hard but I get an error when I post all the code. When I only post a few lines in the logical place it seems like it “half-works” (as might be expected).
As I learn more I will always remember that I started here. Thank you for all the info I can put it to use in my business plan.Our site please check us out
Hi!
I am trying to implement this method on a project right now, and I’d have question about it: if I wanna have different widgetized menus, how do I do?
Do I simply have to call
and
in the code, and add different sidebars, with different names, and different functions as follows:
Is that it?
Hey, love the premise of this code. I’ve tried it out, the sidebar appears in the widgets menu in the site admin, only nothing seems to have changed on the front end when widgets are added.
Any ideas on how to get it to work/what needs fixing? The code works with WP3.0 custom menus, right?
Same problem here. (I admit I’m totally new to wordpress)