How To Add Side Menus To A WordPress Theme
You’ve most likely seen side menus on a mobile theme. You tap on an icon and the menu slides across from the left or right; tap on the icon again and it slides back.
Whilst a staple of menu theme design, side menus offer something for all themes.
And they are dead easy to implement. I’ll show you how.
To implement side menus, I’m going to stand on the shoulders of Alberto Valero and his Sidr plugin for jQuery.
Sidr has all the smarts to easily implement left and right menus. Its building blocks are:
- a DIV containing the HTML for the side menu
- a link with the href set to the side-menu DIV’s id – this toggles the display of the side menu, that is showing and hiding the menu
- Javascript to hook the Sidr functionality to the link
Sidr is capable of handling multiple side menus both on the left and right. When a menu is shown, the main content slides in the same direction. So, clicking on the link for a right-hand menu will slide “out” the menu to the left and scroll the main content left.
I’m going to walk you through adding a left and right side menu to the Twenty Thirteen theme just so you can see how it works. Once you know how, you can get creative with them.
UPDATE: I’ve now included an extended plugin at the bottom of the article that will automatically add two new widget-capable sidebars, so all you need do is add the links to toggle the display to your theme.
Here’s what we are going to go through:
- Add the Sidr library to WordPress
- Add the HTML for the side menus
- Add a couple of links to toggle the display of the side menus
- Add the Javascript to hook up the Sidr functionality
Step 1 will be done with a plugin whilst Steps 2 to 4 will be updating the theme. Remember, if you want to keep your original theme safe, make a child theme and add the changes to the child theme.
Okay, let’s get started.
Step 1 – Install the Plugin
Download and save the plugin to your computer and then upload it on your site’s Plugins > Add New page. Once loaded, activate it.
All the plugin does is add the Sidr javascript files and the default CSS to each of your website’s pages.
The Side default CSS is added above the theme CSS, so if you need to change any of the Sidr styles you can do so by adding your own to the theme CSS.
Step 2 – Add the HTML for the Side Menus
To keep things nice and simple for now, we are just going to hook into the wp_footer action and add some static code to the footer.
Open up functions.php and add the following code:
function sidr_footer() {
// output the static html for the side menus
echo ‘ <div id=”sidr-left”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
</ul>
</div>
<div id=”sidr-right”>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
</ul>
</div>’;
}
add_action( ‘wp_footer’ , ‘sidr_footer’ );
This simply inserts the HTML for two very basic side menus just before the <body> tag.
Step 3 – Add Side Menu Toggle Links
These links are purely for demonstration purposes. For a real theme, you’ll want to integrate them properly into your theme but here we just need to get them onto the page.
Go back to functions.php and add the following below the HTML code in the sidr_footer function that you added in Step 2:
/* output the two links */
<a href=”#sidr-left” class=”sidr-left-link”>LEFT</a>
<a href=”#sidr-right” class=”sidr-right-link”>RIGHT</a>
Notice that the href attributes on the link match the classes for the side menu DIVs.
Originally, this script used ids but using classes enables other elements to control the appearance of the menus – having a close button in the menu itself, for example.
Although we are not aiming for any artistic prizes, we still want to style these links so that we can at least see them properly.
FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.
FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.
Open up style.css and add the following to the bottom:
/* sidr links style */
.sidr-left-link {
display: block;
background: #ffffff;
position: absolute;
top: 30px;
left: 20px;
padding: 10px;
border: 2px solid #000000;
color: #000000;
font-weight: bold;
}
.sidr-right-link {
display: block;
background: #ffffff;
position: absolute;
top: 30px;
right: 20px;
padding: 10px;
border: 2px solid #000000;
color: #000000;
font-weight: bold;
}
Step 4 – Hook Up the Sidr Functionality
Our last step is to hook up the links so that clicking on them toggles the display of the side menus.
Again, go back to the functions.php and add this code underneath the HTML for the two links that you created in Step 3:
/* hook up the Sidr functionality */
<script language=”javascript”>
jQuery(document).ready(function($){
// hook up the left side menu
$(“.sidr-left-link”).sidr({
name: “sidr-left”,
side: “left”
});
// hook up the right side menu
$(“.sidr-right-link”).sidr({
name: “sidr-right”,
side: “right”
});
});
</script>
Here you can see that sidr function is being attached to each link. We tell the sidr function what the id of the DIV is (sidr-left and sidr-right) and which direction it is sliding from.
That’s all there is. Open your site in a browser and you should see two large white boxes in the header with LEFT and RIGHT. Click on them to toggle the display of the side menus.
Actually Making Them Useful
This demo is pretty bland but it’s not hard to see how useful side menus could be especially for tablets and small devices.
Adding Dynamic Menus
To properly use them for menus, you want to output the menu dynamically by using a call to wp_nav_menu referencing a menu that you can manage in the admin section.
Replace the sidr-left code you added in Step 2 with this code to output the primary menu from Twenty Thirteen
echo ‘ <div id=”sidr-left”> ‘;
wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) );
echo ‘ </div> ‘;
If you want to display an entirely new menu then you need to register it first. Add this code to the functions.php
function sidr_new_menu() {
// This theme uses wp_nav_menu() in one location.
register_nav_menu( ‘side-menu-left’, __( ‘Sidebar Left Menu’, ‘twentythirteen’ ) );
}
add_action ( ‘after_theme_setup’ , ‘sidr_new_menu’);
This will create a new menu location in the Appearance > Menus admin interface where you can add your links.
Change the theme_location in the call to wp_nav_menu to side-menu-left to output the new menu.
Adding New Widget-Capable Sidebars
There’s no reason why you cannot use a new sidebar as a side menu with all the benefits that come from being able to use widgets.
To set up a new sidebar add the following to your functions.php:
function sidr_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Right Hand Sidebar’, ‘twentythirteen’ ),
‘id’ => ‘sidr-right’,
‘description’ => __( ‘Right Hand Side Menu’, ‘twentythirteen’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );
}
add_action( ‘widgets_init’ , ‘sidr_widgets_init’ );
You should now see a new Right Hand Side Menu location in Appearance > Widgets admin screen. Add a couple of test widgets to the sidebar and then back in functions.php replace the sidr-right HTML that you added in Step 3 with the following:
if ( is_active_sidebar( ‘sidr-right’ ) ) :
echo ‘ <div id=”sidr-right” class=”sidebar-container” role=”complementary”>
<div class=”widget-area”>’;
dynamic_sidebar( ‘sidr-right’ );
echo ‘ </div><!– .widget-area –>
</div><!– #sidr-right –>’;
endif;
Refresh your site and click on the LEFT and RIGHT links to discover side menus with left-hand menus and right-hand widgetized sidebars.
That’s just a couple of examples of how side menus could be used. I’m sure that there are plenty more you can think of, especially for smaller devices.
With Alberto’s code side menus are really very easy to add to any theme, so if you can see a use case for them, there’s really nothing to stop you from implementing them.
Image credit: Alberto Valero
Tags:
Chris Knowles A WordPress pro, Chris has a bent on hacking WordPress, content management, and online media.