Comments Template

Building Custom WordPress Theme

Continue work on your single post page template, now paying attention to the comments.php template.

Custom Menus

By default, the main menu for most WordPress themes comes from an alphabetical listing of your static pages, such as this:

Default WordPress Menu

However, in most case we need to take control of our menu. We can, using custom menus. We can include or exclude all manner of categories, individual posts or pages, tag groups, or even external links. We can even create new menu areas and give them their own custom menu items. Let’s start with creating a custom menu for the existing main menu area.

Go to Appearance > Menus.WordPress Custom Menus

To view what other kinds of items are available to add to the menu besides Pages, Links, and Categories, click the Screen Options button in the upper-right. Tick a check box, and a new sub-panel will appear for it.WordPress Custom Menus

Enter a new menu name and click one of the Create Menu buttons.WordPress create new custom menu

New text will appear for your custom menu. You can choose whether to automatically add new top-level pages to this menu. You should also select which menu region this menu will inhabit.

WordPress create new custom menu

In the column, start selecting items to Add to Menu.

WordPress create new custom menu

Here’s the custom menu with some post categories and a menu region selected. Click Save Menu.

WordPress create new custom menu

To add a special link that’s not available from the sub-panels, use the Links subpanel. Enter the URL and the text that you want to appear in the menu. For “home” I just enter a forward slash as the URL.

WordPress create new custom menu

Also note that you can click-and-drag to change the order of the menu items, and you can twirl a menu item open in order to change the text on the button.

WordPress create new custom menu

You can even create dropdowns by indenting a menu item under another. Your theme will need to have the styling in place to make dropdown menus function.

WordPress create new custom menu

Lucky for us, the Bones themes does come equipped for dropdown menus.

WordPress Bones theme dropdown custom menu

Test your menu. If the links are broken, make sure you have Pretty Permalinks set (Settings > Permalinks.) Also make sure you actually have content in place for the menu item chosen.

Making a New Menu Region

Sometime we need more place to put menus than our theme comes with. Sometimes we even like to place submenus on some parts of our site and not in others. In these cases, we need to register a new menu.

Below is an example of how this can be done. I have highlighted in green the text which you would replace with your own menu region names.

Step 1: Register the Menu Region

In functions.php, add the following PHP code to the bottom, before the closing ?> PHP tag. It creates a function called register_my_menu (you can change this function name), tells the function to register a new menu, and then commands WordPress to run the function. The first bit of green text is the actual region name. The second bit of green text is how you want the region identified in the Custom Menus dashboard.

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
add_action( 'init', 'register_my_menu' );
Step 2: Make and Assign a New Custom Menu

If you go to Appearance > Menus now, you should see your new menu region available.

WordPress register menu region

Create a new custom menu.

WordPress register menu region custom menu

Add items to it, assign it to your new menu region, and save it.

WordPress create new custom menu

Step 3: Insert the Menu Region into a Template File

Determine where you want to your menu to appear, and which template will be involved. In my case, I need to add it to the very top of the page in header.php.

The following code will spit out the default menu code in the location you placed it. The text in green matches the name I assigned to this menu region in functions.php in Step 1.

<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Here’s where I placed my code:

Screen Shot 2013-12-10 at 4.50.13 PM

Here’s my new menu at the top of my site, ready to style.

Screen Shot 2013-12-10 at 4.51.31 PM

Notice all the <div> and <ul> markup that was automatically generated by WordPress. That should give you plenty of selectors for your CSS.

WordPress menu markup Firebug

Find more about custom menus at: