Continuing our tutorial on how to make a WordPress theme: Now that the rest of the header is complete, it is time to style the menu.
Underscores already comes with a responsive menu, and if we reduce the screen width, the menu is replaced with a single “Primary Menu” button.
When you click it, the menu expands, and this is all handled with JavaScript and CSS.
Although the menu can be assigned from the WordPress dashboard, it is implemented from functions.php. If we scroll to a certain line in functions.php, we see the function that registers our primary menu – register_nav_menus():
Once this menu has been registered in functions.php, it has to be displayed in the header of our theme, and in particular, header.php. And if you scroll to the nav section of our header, just before the closing </header> tag, you will see the function that outputs the menu – wp_nav_menu().
You can also see the button with the class “menu-toggle”, which only displays below certain screen width, in our case 37.5em. If we want to control at what width the mobile menu displays, we can just edit the media query controlling the menu-toggle class. You can find it in the Menus section of our style.css file and it looks like this:
[code language="css" 1="true"]@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
}
[/code]
Here you can set the min-width to whatever you like.
I would also like to change the text of the button from “Primary Menu” to just “Menu”. This can be done directly into the esc_html_e function like so:
[code language="html" 1="true"]<?php esc_html_e( 'Menu', 'simple-portfolio' ); ?>
[/code]
Now that you know how the menu is implemented inside Underscores, it is time to start working on it so that it begins to resemble our design. At the moment it lacks any styles, except those that make it appear in a horizontal fashion and the dropdowns.
The theme already comes with all the selectors needed to make our theme look the way we want. We can either use them or write our own stiles. It is all up to us.
Let’s start by styling the outermost container. If you examine the nav section of our menu once again, either from the screenshot above or in your code editor, you will notice that it has a class of “main-navigation”. This means that if we target it, we will be applying styles directly to the menu. The “Menus” section of our theme already has a lot of rules that begin with that class. Some of the rules have styles applied to them, while others don’t. We can use them to add our own styles.
First I’ll add the background color #3b6a26 and apply the menu font from our design like this:
As you see, I’m adding styles to existing classes so that we don’t clutter our code needlessly.
Next, I’ll style the unordered list within the main navigation by setting its margin to auto and its maximum width to 70%, as it is in our original design:
In this way, we center the unordered list within our menu, set its maximum width according to our design and leave 15% of margins on both the left and the right side of our ul element.
It is now time to style the links themselves. Our original design calls for white links, top and bottom padding of 15px and left and right padding of 40px.
The result from our efforts on how to make a WordPress theme so far is quite similar to what we are after, although we are not required to use the default pages that come with the Theme Unit Test Data and can rename them according to our design instead.
Let’s rename “Page A” to “About”, “Page B” to “Services”, “Sample Page” to “Portfolio” and “About The Tests” to “Contact”. I’m assuming you know how to do that from the WordPress dashboard. Additionally, make a new empty page and call it “Home”, then assign it as a front page of your site from Settings -> Reading.
After you are done renaming the pages, go to Appearance -> Menus, create a new menu with the name “Main” and add the pages you just renamed to it. Also, don’t forget to assign it as a primary menu. The end result should look like this:
Reload your front page and examine your header.
And now, although we have made the necessary changes to the menu and it looks exactly as we want it to look at full width, the styles we have applied to the title of our blog no longer apply to it.
This happens because we have set out home page to be a static page - the “Home” page we just created and Underscores prints different markup in our header depending on whether we are displaying the blog index page, which it considers the home page of a site, or not.
The culprit of this problem is the following “if” function in the header of our theme:
Since we don’t need to check these conditions, we can remove most of this code and replace it with:
[code language="html" 1="true"]
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
[/code]
Now our full width header looks just the way we want it:
If your header title is underlined, just add the following code to the header section of your style.css:
[code language="css" 1="true"]
.site-branding h1.site-title a{
text-decoration: none;
}
[/code]
Our full width menu now looks great but we are not done here yet. If we hover over the “Contact” link, it immediately becomes obvious that the second level of our menu isn’t stilled. Let’s add the following rules to the existing classes in the Menu section of style.css:
[code language="css" 1="true"]
.main-navigation ul ul {
top: 3.3em;
}
.main-navigation ul ul li {
background: #7bc144;
}
[/code]
The result looks like this and now we have styled dropdowns with a different color from that of the main menu:
We would also want to style the hover and focus states of our menu links, and Underscores already comes with selectors for this purpose as well. You can find them below the styles we already applied:
[code language="css" 1="true"]
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
Now add a background color:
.main-navigation li:hover > a,
.main-navigation li.focus > a
{
background: #7bc144;
}
[/code]
Save and reload your page. As a result of the style we just added, a menu item should change its cover whenever you hover over it:
You can even stile the current page item so that you know on what page you currently are by adding a background color to the following rule set in your Menu section:
[code language="css" 1="true"].main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
background: #7bc144;
}
[/code]
Feel free to change the colors we already applied to whatever colors best suit you. To make a WordPress theme isn't sounding as scary as it did in the beginning, does it?
Here is a list of all the other parts to how to make a WordPress theme: part 1, part 2, part 3, part 5, part 6, part 7, part 8, part 9, part 10, part 11, part 12, part 13, part 14
