WordPress Development for Beginners: Widgets and Menus

Widgets and menus are generally your first port of call when making customizations to a WordPress site. Not only do they allow you place and display content anywhere on your site (that is widget-ready, of course, in the case of widgets) but they’re also noteworthy features for any potential users of your themes.

While adding widgets and menus to your theme ultimately involves some coding expertise, the actual PHP needed is straightforward to implement. Once you’ve got your head around the logic you can then put your CSS skills to use styling how your sidebars and menus look and feel.

This is the fourth post in our five-part series for beginners, teaching you the fundamental concepts of WordPress development so you can take the leap from tinkerer to developer. By the end of the series, you will be able to create your own rudimentary themes and plugins, and flesh them out with your own features.

In this tutorial, you’ll learn how to code and customize your own sidebars and menus. We’ll also delve into coding custom queries for more complex functionality.

Note: For this series, it’s important that you already have a thorough understanding of HTML and CSS as both of these languages are essential building blocks when working with WordPress.
Missed a tutorial in our WordPress Development for Beginners series? You can catch up on all five posts here:

Continue reading, or jump ahead using these links:

Working with Widgetized Areas

What many people call sidebars are actually widgetized areas. Sometimes they do indeed display in the sidebar area, but this isn’t always necessarily the case.

Widget areas can be displayed anywhere on your site and where exactly is really up to you as the theme developer. You might want to display one widget in the footer, another underneath a post, one hidden behind a menu, and so on.

You also need to tell WordPress that you plan on creating a widgetized area. This is called registering a sidebar and makes the user interface show up in the admin.

In part three of this series, WordPress Development for Beginners: An Introduction to Theme Development, we created a functions.php file. Let’s make the main content for the theme we’ve been working on a bit narrower and add a second column for the sidebar. We’ll register the sidebar first so add the following to your functions.php file:

If you don’t understand the add_action() bit don’t worry, we haven’t covered it yet! (We’ll look at it in the next post in this series, WordPress Development for Beginners: Building Plugins.

The meat of the matter is in the mat_widget_areas() function. We use the register_sidebar() function to tell WordPress all the details of our widgetized area.

The name and description parameters will be displayed in the admin user interface, so make them descriptive! Each widget will be wrapped in the code provided in the before and after widget parameters. Use %1$s as a placeholder for the ID and %2$s for any classes and WordPress will generate these automatically.

Once you’ve saved this code, you should see the new Widgets sub-section display within the Appearance menu and our widget area should show up with the given details.

So far so good. You can now add widgets to this widgetized area as you normally would, but it won’t show up anywhere since we haven’t added it to our theme code just yet.

Create a sidebar.php file and add the following to it:


This is my sidebar

We’ll need to modify our header and footer files to accommodate a sidebar. The structure we’ll be looking for is the following:

Loading gist 3daf60076c594afa6bb8

To implement this, we need to open the #site-container div in the header and close it in the footer. We’ll also need to include our sidebar in the footer. It contains the #site-sidebar element.

Here is the final form of the header and footer files for reference:

As you can see, the sidebar file can be pulled in using the get_sidebar() function. At this point, you should see “This is my sidebar” under your content but by adding some styling we can put the sidebar next to our content.

Here are the modifications I’ve made and the new additions and modifications in code form:

I modified #site-content to decrease the max-width to 525px and added a left float
I added #site-sidebar giving it a 220px width, 22px border, a border radius and white background just like the content and I floated it to the right
I added #site-container making it as wide as the cumulative width of the content and sidebar and centering it.
I added a clear rule to the footer to force it below the floated elements.

The last piece of the puzzle is to tell WordPress to display all the widgets assigned to our sidebar. This can be done with the dynamic_sidebar() function, adding the ID of our sidebar as the first parameter.

Here’s what the sidebar.php file looks like in the end:

The test theme should now show a narrower content area and a small widget area on the right displaying the chosen widgets. It’s ugly, but nothing a little CSS later can’t fix!

Widgets: What We’ve Learned

That might have been a bit overwhelming if this was your first time implementing a sidebar so let’s recap.

To add a sidebar to WordPress you need to add the following steps:

Register the sidebar using register_sidebar()
Use dynamic_sidebar() in sidebar.php to pull in your widgets
Use get_sidebar() to include the sidebar in the appropriate place
Use CSS to style your work

Working with Menus

Menus are similar in their logic to widgetized areas. You first need to register them so they show up in the WordPress admin and then add them to your theme using a function.

Let’s start by registering a new menu in our functions.php file:

This function allows you to add multiple menus by adding members to the array. The array key is the name of the theme location and the value is the name of the menu itself.

Once you’ve done this you can start assembling a menu. Make sure to add some items and then assign the menu to the Our Awesome Header Menu” location, as pictured below.

Wherever you want to output the menu, simplu use the wp_nav_menu() function. I’ll be adding it to the header file right under the #site-header element, like so:

The wp_nav_menu() function takes a bunch of parameters you can use to control the output. The theme location is what really matters for us, though. Take a look at the function documentation in the WordPress Codex for a more in-depth explanation.

Finally, I’ll add some basic styling to make things half-presentable. Excuse the ugliness – it can all be taken care of with some carefully crafted CSS (though that’s not the main focus of this article).