WordPress Development for Beginners: Widgets and Menus

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:

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:

Loading gist 252f59763bf3f48194f4b8aae4388f82/gist]

WPMU DEV AccountPRO

Our best pro WP tools in one bundle

Try free for 7 days
30-day money-back

[gist file="footer"]565ceca84df03b866b29359aa774ed12/gist]

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.

[gist file="tamplate"]02ea222c6c19758da56762776d529c99/gist]

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:

[gist file="sidebar"]3e384557dbe9c91e2bf932aeb9d7cd6b/gist]

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!

[pic_full ]

[caption id="" align="aligncenter" width="735"]Our Theme sidebar. Our Theme sidebar.[/caption]

[/pic_full]

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
[pic_bg src="https://wpmudev.com/blog/wp-content/uploads/2016/01/widgets-wordpress.png"] [/pic_bg]

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:

[gist file="nav menu"]793462a921bfe167fc8425ea75dbfa45

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.

Putting together our menu.
Putting together our menu.

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:

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:
Daniel Pataki

Daniel Pataki Hello, I'm Daniel and I make things for the web. I'm the CTO at Kinsta and I write for a number of amazing publications like WPMU DEV and Smashing Magazine. In my spare time you'll find me playing board games or planning the next amazing office game like the not-at-all-destructive Megaball.