This week I found myself in need of upgrading a WordPress theme I was working on from the old “list_pages” style of menus to the newer, WordPress 3.0 custom menus. I ran into the problem of a serious lack of documentation, not for the new menus themselves, but what to actually change in order to make the upgrade possible.
Luckily, I figured it out. Starting from here, which is a fairly well written tutorial on what the new code is, and working backwards from the theme I was working with, I was able to piece together the specifics. I figured I’d share, just on the off chance someone might find this useful.
First step is to take a look at the theme you’re using, or planning to use and get familiar with how and where the current menu is being called from. Since we’ll be replacing it shortly, it’s probably handy to know where to start.
In this example, I’m using the theme Twicet by Kriesi which I purchased from ThemeForest a while back and has yet to be upgraded by the author.
The first thing we’ll be changing is the functions.php file. Some themes call multiple functions files and may even be in separate directories. So you’ll have to find your primary one and make the changes there.
Since the new WP3 style menus are a completely new function, we have to add it and register it, so that WordPress knows what to do with it.
In your functions.php file, add the following:
add_action( 'init', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) ); }
Now that’s we’ve added the function, we might as well do something with it. In your WordPress 3 dashboard, under ‘Appearance’, there should now be a new link called “Menus”. If your previous theme didn’t support dynamic menus, this option would have been hidden. Since we just added the function to our function.php, it’s now visible!
Feel free to experiment with it and get used to it. It’s probably best to add a couple pages/links to your menu so that after we complete the next step, something will actually appear on your site. If you haven’t made a menu and you continue on, you won’t see anything until you do.
Next we’ll replace the old method of listing pages in your navigation with the new one. Normally this can be found in your header.php file. You’re looking for a line that reads something along the lines of…
<?php wp_list_pages( ); ?>
That’s the old way of listing pages in a navigation, it was literally a “list” of the pages, in order, with some styling applied.
Replace that line with the following:
<?php wp_nav_menu(); ?>
This is the most basic call of the function. You can read more about adding additional menus (if your theme uses more than one) and what’s required for that by reading the tutorial I had mentioned at the top of this post.
So, now we’ve added the function AND called the function into action. We may as well make it look like something.
In my theme I knew I needed to style the menus in a certain way. I added two divs around it, one as a wrapper, in order to get the effect I was looking for. Each div is then styled in my CSS, which I’ll get to in a second. From here on out, these examples apply to the Twicet theme I had mentioned before, but the principles can be applied just about anywhere.
So, in my header, my code looks like this:
<div class="navwrap"> <ul id="menu"> <?php wp_nav_menu(); ?> </div>
I have the “navwrap” div, then a “menu” div, then my menu.
The “navwrap” serves to display the background image for my menu, and the “menu” div is the text styling of the links themselves.
Also, since my theme uses two separate CSS files, I had to adjust both of them.
My first CSS file, style.css, is used primarily for positioning. My second file, style5.css is used for colors and text styles.
style.css
.navwrap{
font-size:12px;
height:50px;
right: 5px;
line-height:50px;
padding-right:18px;
position:absolute;
top:32px;
z-index:6;
}
.menu{
float:left;
height:50px;
line-height:50px;
padding-left:13px;
}
.menu ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:50px;
z-index:5;
list-style-image: none;
}
.menu a{
height:33px;
display:block;
padding:0 21px;
text-decoration:none;
text-align:center;
line-height:28px;
outline:none;
z-index:35;
position:relative;
float:left;
}
.menu li:hover ul ul, .menu li:hover ul ul ul,.menu li:hover ul ul ul ul{
display:none;
}
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul{
display:block;
}
That basically tells both the “navwrap” and the “menu” where to be, but doesn’t really style the text any. At this point the menu is mostly likely just basic text with bullets. Make sure you add the following if they’re showing up as a bullet-list:
#menu li{ list-style-type:none; list-style-image: none; }
#menu ul{ list-style-type:none; list-style-image: none; }
Now we need to style the text of the menu. Since “menu” is the name of the div I’ve put everything inside of, it’s what I’ll be styling. If you marked it as something different, use the appropriate class names.
In my style5.css, I have the following:
/*navigation*/
.navwrap{
background:transparent url(../images5/menu.png) no-repeat scroll right bottom;
}
.menu a{
color: #9f9f9f;
}
.menu ul {
border:1px solid #DFDFDF;
border-top:none;
}
.menu li ul a{
border-bottom:1px solid #fff;
border-top:1px solid #DFDFDF;
}
.menu ul a, .menu ul li{
background-color:#fff;
background-image:none;
}
.menu ul a:hover, .menu ul a:focus {
background-color: #3b5987;
color:#fff;
}
.menu a:hover, .menu a:focus {
color: #fff;
}
.menu{
background:transparent url(../images5/menu.png) left top no-repeat;
}
The background images might not be specific to your needs, but for me, I have one long menu image, cut into two piece, and using the “left top” and “right bottom” CSS tricks, I’m able to display both sides of it to make a complete menu. This is the reason I have two divs in my header instead of just one.
So, in the end, it’s really pretty easy to upgrade your menus to the new system. There’s just a couple steps:
- Add the new functions to functions.php
- Change list_pages to the new nav_menu tag in your header.php
- Enclose your new menu with a basic div
- Update style.css with new styles for your new menu div
That’s it. Good luck with your upgrade!
Recent Comments