Monday , 20 November 2017
Home / Programming / WordPress / Themes / Creating Widget Areas – WordPress Theme Tutorial
Creating Widget Areas
Creating Widget Areas

Creating Widget Areas – WordPress Theme Tutorial

This tutorial is a part of the WordPress Theme tutorial series. If you would like to see the whole series and the order in which you should follow them, then click here.

Let’s start creating widget areas in our WordPress theme. We will have a total of 5 widget areas. One will be our sidebar and the other 4 will be put in the footer. Creating a widget area is very simple.

Registering A Widget Area

Open up your functions.php file and add this bit of code.

The register_sidebar() function is a function provided by WordPress. This function takes in 1 argument. It’s an array of arguments. This is where we can set up some settings for our sidebar. There a couple of arguments we can set, but we’ll only be using the ones we need. Let’s go over each one

  • name – The name for our sidebar. We will discuss what the __() function does in another tutorial.
  • id – A unique id name for our sidebar. This ID must be in lowercase letters.
  • description – A short summary of WordPress widget area.
  • before_widget – Any HTML markup that should be inserted before the widget is created.
  • after_widget  Any HTML markup that should be inserted after the widget is created.
  • before_title – Any HTML markup that should be displayed before the title is displayed.
  • after_title – Any HTML markup that should be displayed after the title is displayed.

If you would like more information about the register_sidebar() function, then click here. Now that we’ve registered our sidebar, let’s display it. Create a file called sidebar.php. Inside your index.php, delete the the lines from <!– sidebar –> to the closing </div> tag. Here’s what you should be deleting.

Replace that code with this.

The get_sidebar() function works the same as the get_header() and the get_footer() functions. It looks for a file called sidebar.php. Inside your sidebar.php file, add this bit of code.

As you can see, we’ve significantly decreased the amount of code needed in our files.  We’re doing a simple if statement check. We use the function_exists() function to check if the function dynamic_sidebar() exists. This is to prevent any errors from occurring. We also run the function dynamic_sidebar() and see if the sidebar named Primary Sidebar is an actual registered sidebar. If it’s not, then it’ll return false and nothing will happen. If it is true, then any widgets associated with this sidebar will be displayed. You pass in the name of the sidebar you defined in the register_sidebar() function. Let’s test this out.

Go to Appearance > Widgets and try dragging some widgets. Next, go to your site and see if it displays properly. You should see something like this.

Creating Widget Areas
Creating Widget Areas

Let’s create the widget areas for our footer. Open up your functions.php file again and add this bit of code.

Nothing new here, we’re just registering 4 new sidebars. Let’s open up our footer.php file and replace the code between the div tags with the extra-wrap id with this bit of code.

Once again, nothing new here, but simply copy and pasting code. We just change the names for each sidebar we registered. You can go to the widgets panel in WordPress and add widgets into these areas.

Why create multiple sidebars instead of 1 for the footer?

Sidebars are created going up and down not side to side. So, we have to create 4 different sidebars for our widgets. You can adjust this if you have experience with HTML and CSS.

Conclusion

Our theme is starting to look like a real WordPress theme. We still got a long way to go, but creating WordPress themes is relatively easy as WordPress takes care of most of the dynamic parts. As a designer, that leaves you to focus on mostly the HTML and CSS parts.

About Jasko Koyn

Check Also

How to add JavaScript in your WordPress Themes

How to add JavaScript in your WordPress Themes

We have some javascript in our theme. So, let’s learn how to add JavaScript in …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link