WordPress menu integration tutorial
In the following tutorial I will try to explain how to integrate menus created via the horizontal and vertical menu builder, but only for WordPress pages, not for categories or archives.
WordPress vertical page menu integration
The horizontal menus are for top level pages and the vertical menus are for sub-pages, but only the first level, since this is limited by the menu builders. Go to the demo blog I have created that showcases what we will try to achieve with this tutorial.
WordPress horizontal page menu integration
As you can see in these two images, its to look pretty good and if I am capable of explaining it well, you should be able to do this without breaking a sweat, though you might come to realise, that you have put to much confidence in my skills as a tutorial writer.
Anyway let’s get going.
Horizontal menu
CSS
The first thing you need to do, is to create a menu using the horizontal menu builder and get the css code and the image, don’t bother with the html code, because you won’t be needing it, as WordPress generates this code for us. You could also just copy the full css code below, if you are using menu images generated by CSS Menu Builder.
Now you should have something that looks like this:
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li a.active, .menu li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span, .menu li a.active:hover span{background:url('topMenuImages.png') 100% -90px no-repeat;}
This is the standard css code that the menu builder generates, and this works for most purposes, but in the case of WordPress, we will have to modify it a little bit. WordPress adds the css classes to the list (<li> tag), where cmb adds them to the a tag <a>. Furthermore as it is not possible to add your own classes to the WordPress PHP function, we will have to change our active class to use their current_page_item and so that the top level menu will also be active when a sub-page is viewed, we will also have to add the class current_page_ancestor. Lucky for us, this only needs to be applied to the last two lines of the css code, which handles the active state.
.menu li.current_page_item a, .menu li.current_page_item a:hover, .menu li.current_page_ancestor a, .menu li.current_page_ancestor a:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('images/topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li.current_page_item a span, .menu li.current_page_item a:hover span, .menu li.current_page_ancestor a span, .menu li.current_page_ancestor a:hover span{background:url('images/topMenuImages.png') 100% -90px no-repeat;}
As you can see in the above code example, I removed the active class from the a tag and added the WordPress class name to the list tag. Furthermore I added the following lines .menu li.current_page_ancestor a, .menu li.current_page_ancestor a:hover to the code that handles the displaying a tag and .menu li.current_page_ancestor a span, .menu li.current_page_ancestor a:hover span to the code that handles the displaying span tag.
So the full css code for the horizontal top level WordPress page code, should now look like this:
.menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('images/topMenuImages.png') repeat-x;}
.menu li{padding:0; margin:0; list-style:none; display:inline;}
.menu li a{float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('images/topMenuImages.png') 0px -30px no-repeat;}
.menu li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url('images/topMenuImages.png') 100% -30px no-repeat;}
.menu li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span{background-position:100% -60px;}
.menu li.current_page_item a, .menu li.current_page_item a:hover, .menu li.current_page_ancestor a, .menu li.current_page_ancestor a:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('images/topMenuImages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li.current_page_item a span, .menu li.current_page_item a:hover span, .menu li.current_page_ancestor a span, .menu li.current_page_ancestor a:hover span{background:url('images/topMenuImages.png') 100% -90px no-repeat;}
Please note that you also need to change the image path, so that it points to the right directory, in this case, the default WordPress theme has a folder called images.
WordPress code
Now that we have the css code ready, we will move on to the WordPress code, that will display the page list, that we will be styling.
By default WordPress does not put the a span tag inside the a tag and their function does not provide a way to enable this, which is the way to make it possible to use the sliding doors effect. But luckily for me, and maybe also for you, I found this fantastic tutorial over at hackwordpress.com that shows us how to do this. By using the PHP function preg_replace on the output of the WordPress wp_list_pages function, we can add the span tag inside the a tag.
So the full WordPress code looks like this:
<ul class="menu">
<?php echo preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('echo=0&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;depth=1&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;title_li='));?>
</ul>
As you can see, we look for the list and a tags from the code generated by the wp_list_pages function and inside the a tag we add the span tag. You might also notice that inside the wp_list_pages function we have added some variables. We have told the function not to add a title to the list and that the depth of the menu should only be one. In regards to the echo=0, this tells the wp_list_pages function whether to display the generated items or return them as a HTML text string. By setting this to 0, we ask it to return it as a HTML text string that we can work with.
I added this code to the bottom of my header.php file in the default theme folder, so that it would be right after the header image, but you can place it anywhere you feel it fits your design. Furthermore I placed mine inside a div block, to contain and position it.
Well that’s it, we have now finished creating the horizontal menu integration for WordPress pages, for more on the wp_list_pages function, that will also be used in the next part, please visit the WordPress Template Tags documentation.
Vertical menu (sub-menu)
CSS
So once again you should go to the vertical menu builder and build the menu you want to have on your blog and get the CSS code and the image or just copy the CSS code from below. And again just discard the HTML code, as you won’t be needing it.
The standard CSS code from the CSS Vertical Menu Builder looks like this:
.menu{margin:0; padding:0; width:190px; list-style:none;background:rgb(255,255,255);}
.menu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.menu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.menu li a:hover{background:url('verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:40px;}
And again we need to change it a bit, but here the change only concerns one line, which is the second line from the bottom, as this does not take advantage of the sliding doors technique. In this case the reason for the span tag, is to vertically align the text, that is why it has the line-height set to 40 pixels, as this is the height of the menu. And as before we add the current_page_item class to the list and remove the active class from the a tag, so it looks like this.
.submenu li.current_page_item a, .submenu li.current_page_item a:hover{background:url('images/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
You might notice that I also changed the main class name, from menu to submenu, this is because I now have two menus from the generators on the site and the classes should be different.
So the full CSS code for the Vertical sub-page menu, which could also be used as a top menu, if you use the above WordPress code, looks like this:
.submenu{margin:0 -10px 0 0 !important; padding:0; width:190px; list-style:none;background:rgb(255,255,255);}
.submenu li{padding:0; margin:0 0 1px 0; height:40px; display:block; }
.submenu li a{text-align:left;height:40px; padding:0px 25px; font:16px Verdana, Arial, Helvetica, sans-serif; color:rgb(255,255,255); display:block; background:url('images/verMenuImages.png') 0px 0px no-repeat; text-decoration:none;}
.submenu li a:hover{background:url('images/verMenuImages.png') 0px -40px no-repeat; color:rgb(255,255,255);}
.submenu li.current_page_item a, .submenu li.current_page_item a:hover{background:url('images/verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.submenu li a span{line-height:40px;}
As I just mentioned, if you want to have a vertical page menu for the top level pages, you should use the above WordPress menu code and change submenu back to menu or what ever name you want.
WordPress code
The WordPress code for the sub-page menu example is a little bit more complicated than top-page code and the version I will be showing here, which is more or less copied from the WordPress documentation, only concerns WordPress installations 2.0.1 or newer. If you want the code for earlier versions, please go to the WordPress documentation regarding the wp_list_pages. Furthermore this code snippet will also be using the hackwordpress.com sliding doors hack.
Here is the WordPress code I added to my sidebar.php page:
<?php
if($post->post_parent) {
$children = preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('title_li=&amp;amp;amp;amp;child_of='.$post->post_parent.'&amp;amp;amp;amp;echo=0&amp;amp;amp;amp;depth=1'));
} else {
$children = preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$2><span>$3</span></a>',wp_list_pages('title_li=&amp;amp;amp;amp;child_of='.$post->ID.'&amp;amp;amp;amp;echo=0&amp;amp;amp;amp;depth=1'));
}
if($children) {
echo"
<ul class=\"submenu\">\n".
$children
."</ul>\n";
} ?>
The first if -else statement checks to see if it the page has a parent page, if so it displays the sub-pages of the parent page, which in this case would be the actual sub-page, else it diplays the current page’ sub-pages. To me, this looked a bit weird at first, but after reading the code a few times, it started to make sense. If you are on a parent page, it displays the sub-pages, but if you are one the sub-page, the normal code would try to display the sub-pages of the sub-page, that is why we instead display the sub-pages of the sub-page parent-page, so that the sub-page is still displayed.
Again we use the preg_replace function to add the span tag inside the a tag and in the wp_list_pages function we put the depth to 1, because of the limits of the menus generated via CSS Menu Builder. We also set the title_li to nothing to clear the parent list <ul> tag and remove the default title of the list. Last we add the child_of variable. In the if section we set it to the parent of the post, and in the else section we set it to sub-pages of the post.
The second if statement checks if the first statement found any sub-pages, if so, it displays them in an unsorted list to which we have added the class submenu, as that was what we called it in the CSS section.
Ok, I guess that takes care of this tutorial, I hope I explained it more or less understadable, though should you have any doubts, corrections or comments, you can leave them below or contact me via the contact page.
Here is a list of the resources and a link to the final result:
