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