Creating a custom menu for WordPress

A time ago, one of my clients asked me to create a custom menu in a WordPress website. After some research, I didn’t found anything on the internet that I could use. So I had to write my own custom menu. Luckily I know a little PHP .

Goal

The goal of this custom menu is to show only the pages without the subpages. Once you click on a a menu item, text color changes. If you click on a menu item  that has subitems, it also have to show the subpages.

When you click on a subitem, text colour of the subpage AND of the parent page changes:

Why this custom menu?

For a certain website, we thought a long time about the user interface and the left menu. Because we wanted to keep things clear for visitors (it was a big multi language website), we needed a simple menu structure that collapsed when needed. The special thing on this website is that when a subpage is selected, the menu items of that subpage and its parent page must be highlighted. That’s why we designed this custom menu.

Usage

PHP code of the custom menu

<?php
//url
$begin_url='mysite.com'; /* change this !!! */

//PAGE OR SUBPAGE?
$ancestors = get_post_ancestors($post->ID);
$niv = 1; // -> page
if((!empty($ancestors[0]))AND(empty($ancestors[1]))) $niv=2; // -> subpage
if($niv==1){ //PAGES
$result1 = $wpdb->get_results("SELECT ID, post_name, post_title FROM $wpdb->posts
WHERE post_parent = '' AND post_status='publish' ORDER BY menu_order");
if($result1){
echo '<ul class="menu">';
foreach ($result1 as $row1) {
//is the current item (page) selected?
$selected1='';
if($row1->ID==$post->ID){
$selected1=' class="selected"';
}//if($row1->ID==$post->ID)
echo '<li><a'.$selected1.' href="/'.$begin_url.'/'.$row1->post_name.'/">'.$row1->post_title.'</a>';
//does this page has subpages?
if($row1->ID==$post->ID){
$result2 = $wpdb->get_results("SELECT ID, post_title,post_name FROM $wpdb->posts
WHERE post_parent = ".$post->ID." AND post_status='publish' ORDER BY menu_order");
if($result2){
echo '<ul>';
foreach ($result2 as $row2) {
echo '<li><a href="/'.$begin_url.'/'.$row1->post_name.'/'.$row2->post_name.'">'.$row2->post_title.'</a></li>';
}//foreach ($result2 as $row2)
echo "</ul>";
}//if($result2)
}//if($row1->ID==$post->ID)
echo '</li>';
}//foreach ($result1 as $row1)
echo '<li class="trein"><a href="/'.$begin_url.'/">&nbsp;</a></li>';
echo "</ul>";
}//if($result1)
}//if($niv==1)
if($niv==2){ //SUBPAGES
$result1 = $wpdb->get_results("SELECT ID, post_title,post_name FROM $wpdb->posts
WHERE post_parent = '' AND post_status='publish' ORDER BY menu_order");
if($result1){
echo '<ul class="menu">';
foreach ($result1 as $row1) {
//is the current item (page) selected
$selected1='';
if($row1->ID==$ancestors[0]){
$selected1=' class="selected"';
}//if($row1->ID==$ancestors[0])
echo '<li><a'.$selected1.' href="/'.$begin_url.'/'.$row1->post_name.'/">'.$row1->post_title.'</a>';
if($row1->ID==$ancestors[0]){
$result2 = $wpdb->get_results("SELECT ID, post_title,post_name FROM $wpdb->posts
WHERE post_parent = ".$ancestors[0]." AND post_status='publish' ORDER BY menu_order");
if($result2){
echo "<ul>";
foreach ($result2 as $row2) {
//is the current item (subpage) selected?
$selected2='';
if($row2->ID==$post->ID){
$selected2=' class="selected"';
}//if($row1->ID==$post->ID)
echo '<li><a'.$selected2.' href="/'.$begin_url.'/'.$row1->post_name.'/'.$row2->post_name.'/">'.$row2->post_title.'</a></li>';
}//foreach ($result2 as $row2)
echo "</ul>";
}//if($result2)
}//if($row1->ID==$ancestors[0])
echo '</li>';
}//foreach ($result1 as $row1)
echo '<li class="trein"><a href="/'.$begin_url.'/">&nbsp;</a></li>';
echo "</ul>";
}//if($result1)
}//if($niv==2)
?>

CSS code of the custom menu

#menu_left.empty {
height: 29px;
}

#menu_left ul.menu li a {
display: block;
width: 170px;
height: 25px;
color: black;
padding-left: 5px;
padding-top:8px;
background-color: #CC6600;
margin:0px;
text-transform:uppercase;
text-decoration: none;
border-bottom: solid 1px #ff9933;
}

#menu_left ul.menu li a.selected,
#menu_left ul.menu li a:hover,
#menu_left ul.menu li a:active {
color: white;
}

#menu_left ul.menu li a:hover{
background-color: black;
}

#menu_left ul.menu li ul {
margin: 0;
padding: 0;
}

#menu_left ul.menu li ul a {
width: 160px;
padding-left: 15px;
font-size:10px;
text-transform:none;
}

How to use this custom menu in your own WordPress website?

You can easely use this custom menu, just add this code to your website. It’s a good idea to create a menu.php page. Also don’t forget to add the css code.  It’s important to use this code together with some CSS code, this will define how your custom code will look like.

If you want to change the look of the custom menu, you can do this by changing the CSS code.

Keep in mind:

• the menu stands within a div, I called it “menu_left”. You can change this div name but then you have to change it in the php and the css code.
• there is a class “selected” that is added so you know which item is selected

Conclusion

When building websites, this is a nice menu to use. I have been using it for multiple clients and they all are very enthousiast about it. The fun thing is that you can customize it the way you like, if you know some php and / or css.

This custom menu adds some extra usability your visitors wil appreciate.

Related Posts