How to easily add a widget area to WordPress

How to easily add a new widget area to WordPress - Bent Corner

Does your WordPress theme not have enough widget areas? Do you want to add a widget to an area that does not have a widget area? No problem. This is a simple, easy-to-follow tutorial showing how to add a widget area to WordPress.

Step One

How to easily add a widget area to WordPress - Bent Corner
Open up an FTP client and go to the themes folder on the web site’s server and select the child theme for your website. If you are not using a child theme, you really should, but I’m not going to tell you how to run your life.

Then, move a copy of functions.php and style.css to your desktop. In Filezilla, this means selecting the files in question and simply dragging them to the desktop.

You can keep local copies of a child theme’s files on your computer, but I prefer to grab fresh copies off the server if I need them. With local copies, you sometimes run the risk of customizing older versions of the child theme’s files. When you grab copies of the server, that will not happen. Reload the website to make sure there’s not an error in the PHP, which will result in the dreaded white screen of death.

How to easily add a widget area to WordPress - Bent Corner
The graphic novel White Death by Robbie Morrison and Charlie Adlard. Oddly enough, not about PHP errors in WordPress.

Step Two

Open functions.php in the editor of your choice. Go to the bottom of the file and add the following code:

You will want to rename name_of_widget_area to something that will identify your new widget area in the code. You will also want to rename “Name of Widget Area” to something that will identify your new widget area on the Appearance > Widgets screen in WordPress.

Once you’ve done that, save functions.php and move it back to the server.

Step Three

Go to Appearance > Widgets in WordPress. You should now see your new widget area.

Go back to your FTP client and navigate to the file where you want to place the new widget. I’m using the default Twenty Sixteen WordPress theme as the parent theme, and Claire Brotherton’s most excellent child theme for Twenty Sixteen.

Since I wanted to add an extra widget area under the author area and above the comments section on single posts, I grabbed a copy of content-single.php using my FTP client and moved it to my desktop. I then added the following code at the bottom of the entry-content division, where I wanted the new widget area to appear.


The heart of the modification is line 3. It is what inserts the new function added to functions.php in step three into the theme. I placed the code in an aside with after-author-info as the ID as well as the class.

Step Four

Now it’s only a matter of making the new widget area look pretty. Open the style.css file you moved to your desktop in Step One and at the bottom of the file, add new CSS selectors for what you named the new ID and another for the new class. Then style them as needed. This is what I added to my style.css:

You’ll need to move the modified style.css to your server to see your changes.

Once you’re done, go ahead and delete the files you moved over to your desktop. If you need them again, go into your FTP client and grab fresh copies.

In Conclusion

There’s really no limit to the number of widgets you can add to WordPress. I’ve seen some non-blog websites where almost everything is added as a widget. I don’t think I would ever do that, but the possibility exists.

If you have any questions, please post a comment.

About Me

My name is Rick Rottman and I live in Maryland. This is my blog. If you'd like to know more about me, check out my About page.

Leave a Reply

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