WordPress Theme Tutorial – Custom Menus & More!

  • Author:xnite
  • Date:2014/10/15

WordPress custom menusIn my last post, I showed you the basics to making your own WordPress theme, this time I would like to dive a little deeper into what makes a WordPress theme such as custom menus and widget areas.

I find it surprising that many themes still don’t support custom menus, however after this tutorial you will not only understand how to implement these into your own theme, but also how to modify other themes to also support custom menus.

I will be assuming that you have already read and followed the guidelines set out in my previous post, and that you have even gone ahead and tinkered around a bit on your own.

As usual, if you need any extra help feel free to leave a comment and myself or someone else may be able to assist you.

The first thing that I want to focus on here is a custom menu, it’s probably one of the easiest things that we can do & luckily if you don’t know how to create your own drop down menu CSS MenuMaker has taken the liberty of helping designers add their menus into their themes. To save time, I will use CSS menu maker as an example, but if you already know how to make a menu then you could easily take these steps to implement your own.

Custom Menus

The first step is to add your Menu into the location of the theme files where you want it. I’m a fan of horizontal drop down menus so I’ll be placing this into my header.php file. Per the last post, my header.php file already looks like this

	
	

I will simply change the header.php over to this instead

	
	
		


After modifying the template pieces, we need to tell WordPress about our new custom menu in functions.php, this will make it a menu that we can select as a menu location in the theme customization page. Without this, people who use your theme will be forced to use the default menu (typically automatically adds your top level pages and home link), and as a result people who are looking to maximize customization of their site will not use your theme and you probably won’t be so happy with it either. This has been a feature for as long as I can remember but unfortunately you will notice that some themes simply do not support it. If you are deviating from the guide here and NOT using CSS Menu Maker, then you can just worry about the register_nav_menu portion of this code, and skip out on the walker portion in the code above.


To use menus from CSS Menu Maker, you will need to grab a copy of their WordPress Walker Class and include it into your functions.php file (near the top somewhere should be good). You can find information about how to implement their menus to WordPress here, but we are going to make a few minor alterations to their examples to add the custom menu location support.

 'menu_item_parent', 'id' => 'db_id' );
  
  function start_lvl( &$output, $depth = 0, $args = array() ) {
	$indent = str_repeat("\t", $depth);
	$output .= "\n$indent

    \n"; } function end_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "$indent
\n"; } function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; /* Add active class */ if(in_array('current-menu-item', $classes)) { $classes[] = 'active'; unset($classes['current-menu-item']); } /* Check for children */ $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID)); if (!empty($children)) { $classes[] = 'has-sub'; } $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $id . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'> '; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } function end_el( &$output, $item, $depth = 0, $args = array() ) { $output .= "</li>\n"; } } ?>

If you have done everything correctly, you should be able to download any menu from CSS Menu Maker and extract it to yourthemefolder/cssmenu/ and it will pull the menu in to your theme.

Widget Areas

Something that you would come to expect from any WordPress theme is widgets. We can use widget areas for all sorts of stuff, I have personally pondered the idea of including widget areas above & below posts to allow people to include their ad code, and generally speaking if you have a sidebar you are going to want to use it for widgets. Some themes also include widgets in the footer or even have 3+ column themes which have widget areas all over the place. The fact of the matter is, you are going to want a widget area, and so I’m going to show you how to do that without ripping your hair out.

The first thing you need to do, is decide where you want your widget area to be, for me this is going into the sidebar, and while I would advise against throwing it right into the meat of your template, you may decide that you want a side bar on some pages and not others, so for simplicity sake we will just work with index.php as an example. Simply add a bit of code to your theme wherever you want the sidebar to be located, it should look something like this



When we are done, we will need to move back over to functions.php and register our new widgets area. Add a bit of code similar to this to your functions.php file.

<?php
    register_sidebar(array(
	'name'=> 'Right Sidebar',
	'id' => 'Right Sidebar',
        'before_widget' => '

', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ));

That’s it, you are done! Be sure to modify your HTML & style sheet(s) to how you see fit and your dream theme will soon come to life before your very eyes!
As always, if you need any extra help do not hesitate to contact me via the comments system.
I am also aware that I didn’t cover every possible detail of writing themes but you should have a pretty good idea of how it is done. If you need a reference sheet check out the WordPress codex documentation & feel free, of course, to ask questions.

Robert Whitney
I'm a geek, gamer and breaker of things. I'm a programmer by day and an apache attack helicopter by night. Some would call me their spirit animal.
Opinions expressed here, even 💩 ones, are my own and do not represent those of my employer or associates.
Referral Links

Using my referral links is the best way to help me pay for my projects and development servers and get something out of it for yourself.

Copyright©2011 - 2018, Robert Whitney; All rights reserved.