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.

Let’s get started.

Missed a tutorial in our WordPress Development for Beginners series? You can catch up on all five posts here:

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: <div id="site-sidebar">This is my sidebar</div>

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

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

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

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.

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’s 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

in to pull in your widgets Use get_sidebar() to include the sidebar in the appropriate place

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).

Further Reading and Study

There are many of requirements a theme must meet to be considered for inclusion in the WordPress Theme Directory. We’ve only just scratched the surface and you should now have enough knowledge to start picking away at adding more functionality to your theme. I recommend installing the Theme Check plugin, which will analyze your theme and show you what needs to be done to meet the WordPress Theme Review Team’s requirements.

A few things you should add include a 404 page, perhaps a dedicated view for search results, pagination and a number of other elements everyday websites use all the time, like an about page and contact page. Once you’ve pinned down all the requirements you might want to use the theme customizer to allow any future users of your theme to select their own colors and other options.

We’ve covered the basics of theme development and there’s much more to learn, but as long as you practice you should do just fine. That’s how I learned: bit by bit.

Check back next week for the final post in this series, WordPress Development for Beginners: Building Plugins.

In the meantime, you should:

Review last week’s post in this series, WordPress Development for Beginners: Building Themes

Keep brushing up on your PHP – review WordPress Development for Beginners: Learning PHP and check out our recent post Learning PHP, Deeply: 8 Resources for WordPress Developers for more PHP resources

Continue building on your theme. You’ll get stuck, you’ll get frustrated and you’ll make errors that will takes ages to fix, but that’s all perfectly normal. Work through it – it’s all part of the learning process

Did you find this tutorial helpful? Why do you want to learn WordPress development? What do you want to know more about? Let us know in the comments below.

Tags: