This post has a WordPress child theme download and shows how to use three menu’s with the Twenty Eleven theme, we will often see themes with a top menu, main menu and footer menu, the changes to add another two menus are moderate.
We used two template parts for the navigation, created some styles so we have the active menu item highlighted, centred the footer menu and made it Internet Explorer 7 compatible
The Child Theme
We have made the child theme downloadable, in the download there is a copy of the Digital Raindrops child theme with additional files for the menus, the additional code is commented in the files so the functions can be copied to another child theme.
In the file:
functions.php – two lines to add the two new menus
header.php – two lines to add the top menu, one for ie.css
footer.php – two lines to add the footer menu
navigation-header.php – Top Menu new file template part
navigation-footer.php – Footer Menu new file template part
custom-styles.css – Styles for the new menus
ie.css – style to make a centered menu IE7 compatible
style.css – child theme stylesheet
You may download the file here or visit the All Downloads page for other files.
Ok we have downloaded the theme so let us upload and activate it, we navigate to Admin > Appearance > Themes
We select the [ Install Themes ] tab and upload and activate the downloaded child theme
We can now see our active theme has changed to our child theme, nothing will have changed and our website will look just like the Twenty Eleven theme.
Since the twenty ten theme WordPress has built into the themes support for custom menus, in the next few steps we will look at these and setup some test menus for our theme.
We navigate to Admin > Appearance > Menus, we will see that no Custom Menus exists so we need to create one, we enter a new Menu Name called “Top Menu” and press Create Menu
We will notice a new box on the left telling us we have three theme locations and our theme supports three menus, we have three locations, Top Menu, Footer Menu and Primary Menu, and a message to select menu items to add to our Top Menu.
We select some pages to add to our top menu, press “Add to Menu”, we can drag and drop these item in any order we want, to create a child menu item we drag the item to the right, the parent page setting is ignored in custom menus, we “Save Menu”.
Our Top Menu and Footer Menu will not show on our theme until we tell WordPress where we want our menu’s to show, so we add our “Top Menu” to the “Theme Location” that will show in the header area and “Save”.
Now we can visit our theme to see our new simple menu, in the top right of our theme, this is styled in the file custom-style.css in the child theme.
Main Primary Menu
We now have some of the same pages in our Top Menu and our Primary Menu, we want to add different item here so we create a new menu with different items, here we are using the main menu for categories, we can mix, pages, posts, categories and custom URL’s on any of our menus, we create a new menu and Save Menu, we add Categories and Save menu, we then add Theme Locations > Primary Menu > Main Menu, just like we done for our top menu.
Lets now have a look at our two menus, top menu with site information, main menu with our categories
We wanted our footer menu to be centred below any widgets and above the footer notice, we added a border above to give the menu its own space in our theme.
Here is our Footer Menu without any footer widgets, it sits nice below the post.
Then we can see our footer menu below some footer widgets, added from the Admin > Appearance > Widgets
We hope that adding additional menus will make our themes more flexible, where we are in charge of the menus and not restricted.
We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.
All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.
Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.
This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.