So you’ve been working hard on your WordPress theme since day 1, and right now you are checking the final touch before releasing it to the public or selling it. Before that, you need to check if you’re theme is capable of handling certain blogging problems that may arise.
In my early days of learning about WordPress Themes, I never consider adding functionality to my themes. I just did it without even thinking about user experience and never supported certain features that could help my clients.
One of these features is having a drop down menu, and additional menu that they might need on their theme. Having a drop down is easy to add, for this tutorial we will use twentytwelve as our base theme which is currently the best theme (I think). Twentytwelve is already supporting dropdown menu, we will use their code to our theme that doesn’t even support it.
Today we will learn about
- wp_nav_menu
- insert it into our theme
- use twentytwelve as base
First thing to do is make a back up of your theme and WordPress site, it would be better if you can do this on your local server.
Open your theme folder and look for functions.php, open it on your editor and search ( CTRL+F) ‘register_nav_menu’ just to make sure we won’t be creating a duplicate functions.
If you’re theme doesn’t have it (I hope so), add this line at the bottom of your functions.php file
// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'primary', __( 'Primary Menu', 'ThemeName' ) );
Change the ‘ThemeName’ with the name of your theme and save it. This function will give us the ability to use the navigation menu that was introduced on WordPress 3.3
Next is open your header and search for the navigation div or li and comment it out, for example:
<nav id="navigation"><?php PHP NAVIGATION CODE HERE FROM YOUR THEME?></nav>
We will comment it out, just add these ‘//’ at the beginning of ‘<?php //’
And we will use our new WordPress menu code, like this
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
To help you understand, theme_location according to codex “The function displays the menu assigned to that location”.
The other one is menu_class – “CSS class to use for the containing div element which forms the default menu, or the ul element when a custom menu is configured in the admin interface.”
Now that we already have that set up, we will add those pages in our dashboard. Login and set it up on Apperance > Menu and set those pages as drop down.
Put the menu name of our navigation, I put primary so you won’t be confused, hit save menu after.
On the left side, we can see the theme locations. This is where we assign our menu if we have more than one. For now set it to primary and save.
We will set out navigation like these, it’s easy as drag ‘n drop interface. Hit save after.
If you check your website now, it doesn’t look right. That’s because we are still missing the CSS styling for our navigation.
Add this code on your style.css
/* Navigation Menu */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover {
color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
Now, check your site and hover over your navigation. Here’s what I have on twentytwelve theme
Now you may need to tweak the CSS code since the styling may vary on the theme you were using, you can use the Web Developer Tools as Firefox addon to get it sorted.
Since our theme can support drop down feature, we can add as many drop downs we want. Just remember that having a lot of stuff on the navigation will ruin your user experience.
If you’re stuck on some steps or can’t figure out the add this on your theme, hit me up in the comments and I will try my best to help you out.
0 yorum:
Yorum Gönder