HTML to WordPress Theme Tutorial: Step 3 – Menus, Widgets and Functions

HTML to WordPress Theme Tutorial: Step 3 – Menus, Widgets and Functions

We’re now at the final part of our three part series on creating your first WordPress theme from static HTML.

So far, you’ve taken your index.html file, turned that into a PHP file, added template tags and split it up into theme template files. You then created extra template files to display different content types.

In this final part we’re going to finish the process of making your theme work. We’ll do the following:

  • Create a functions file with some essential theme functionality.
  • Add widget areas in the sidebar and footer.
  • Add a navigation menu that users can populate via the Menus screen in the WordPress admin.

What You’ll Need

To follow along with this post, you’ll need a few tools:

  • A development installation of WordPress, preferably on your local machine.
  • A code editor.
  • The code you created in parts one and two of this series – if you don’t have that, you can download the files I’m using.

Make sure you do this work on a development site, not a live site – you don’t want the world to see your theme until it’s ready.

Creating and Populating the Functions File

A theme functions file isn’t a template file – it isn’t used to display content. Instead, it contains functions which will be used by WordPress to set up your theme and your site.

If you find yourself adding lots of extra functionality to your functions file, you should create a plugin instead. However there is some functionality you have to add via functions.php, and that’s what we’ll be adding here.

Note: If you want to learn more about this file, check out our ultimate guide to the theme functions file.

Setting Up The Theme

One of the jobs the functions file does is theme setup. This includes things like enabling navigation menus and featured images.

In your theme folder, create a new file called functions.php and open it. Add an opening <?php tag at the top (don’t add a closing one at the bottom, WordPress doesn’t need one and it’ll minimzse the chances of getting an error if you add line breaks after it).

Now add this code to your file:

This adds:

  • translation
  • support for post formats
  • support for post thumbnails in posts and pages
  • RSS links support
  • a navigation menu.

Now finish off the translation setup by opening your stylesheet. Add this line in the commented out text at the top:

This tells WordPress what the text domain is for this theme so it can be used with any code that you make available for translation. For more on this, see our guide to making themes ready for translation. You may notice that I’ve included one piece of text in the functions file already that includes internationalization. This is for the navigation menu’s name in the admin screens.

Finally, your function is hooked to the after_setup_theme hook, without which it will not fire.

So the theme is now set up and we have a navigation menu we can populate. However, it won’t display on the site yet. Let’s correct that.

Adding a Navigation Menu

Right now, the menu is a hard coded list. Let’s replace that with a function that’ll display the menu we create in the WordPress admin screens.

Open your header.php file and find the code for the menu:

Replace that with this:

This will generate a navigation menu. Try adding a menu via the menus screen now (after saving your header and functions files).

Here’s my menu in the admin:

Menus page in WordPress admin

And on the front end of my site:

Menu displaying on site

Adding Widget Areas

The next step is to add widget areas to our sidebar and footer. This will replace the hard coded content that’s already there.

Registering Widget Areas

First we need to register the widget areas in our functions file. Open that and add this:

This registers four widget areas: one in the sidebar and three in the footer, which we’ll place side by side. You’ll now be able to populate them via the admin screens but they won’t show up on the site. That’s because we need to add them to the template files.

To understand how this code works, see the Codex page on the register_widget() function.

Adding a Widget Area to the Sidebar

First let’s add our sidebar widget. Open your sidebar.php file and find this code:

Replace all that with a check to see if the widget area is populated and if so, to output the widget area and its content (i.e, whatever widgets you add):

Now save and close the file.

When you refresh your site, you won’t see anything in the sidebar. Add some widgets via the Widgets admin screen and they’ll show up.

Adding the Widget Areas to the Footer

Now let’s add the three widget areas to the footer.

Open the footer.php file and find this code:

This checks for each of the three footer areas in turn and if they’re populated, outputs them. I’ve added CSS classes to float the widget areas side by side and make them the correct width. This is all contained in my theme’s stylesheet.

Final Step – Metadata

Now we have our widgets and menus in place. The final step in the functions file is to add title metadata support. This will help search engines identify what the page is about. We’re also going to add metadata to our header on the page, in the header.php file.

Adding Site Title Metadata for SEO

Open your header.php file. Find this line and remove it:

If you’re using your own static file, yours may be different, but that’s what I’ve got in mine.

Open your functions.php file. Find the big function you added first, with all the setup functionality in it. Add this inside the function:

Save and close your functions file. That’s all you need to do – you don’t have to add anything to your header.php file.

Adding Site Metadata in the Header

We still haven’t set our theme up so that the title in the header is automatically generated instead of being hard coded. Let’s fix that.

In your header.php file, find this line:

Edit it to read like this:

This will automatically populate the header with the information you add via the Settings screen.

The Final Theme

Now let’s take a look at our site with the theme complete:

Our site with widget areas, a menu and the correct header information

That’s looking good! Of course if you’ve been working from your own static HTML yours will look quite different. You may need to spend a bit of time tweaking your CSS to make sure you’re targeting all of the elements that are output by WordPress.

You’ve now created your first WordPress theme. Give yourself a resounding pat win the back! This is the start of your WordPress development career. You can now add more code to your theme if you need it (using our guides), create more template files if you want to, and start using it. Good luck!

Do you feel more confident about coding your own themes now? Let us know in the comments!

Rachel McCollin

Rachel McCollin Rachel is a freelance web designer and writer specializing in mobile and responsive WordPress development. She's the author of four WordPress books, including WordPress Pushing the Limits, published by Wiley.