How to Add Widgets to WordPress Theme’s Footer (oblique and other themes)

starting out this page, I chose the awesome Oblique WordPress theme to be the base visual for my home. Yes, the Immortan Joe actually runs on a theme designed for fashion designers – how about that!? Well, one could argue he’s the ultimate fashion creation, and so’s the rest of the movie, so maybe it’s kinda fitting.

He just beat Lady Gaga to it

I was very happy with the theme and the way I could bend it to adjust the site looks, however as I went to tamper with widgets and tried to add some widgets to the bottom of the site, I realized this theme doesn’t really support any widgets at the bottom! So, obviously some hacking was in order if I were to add some.

Adding widget areas to the bottom of your theme

A quick google search let me know that there were quite a few plug-ins available to help you add widgets to bottoms of your posts and pages, but not a single one that made it possible to add them to the bottom of your whole site if your theme wasn’t supporting it. So much for the quick&easy.

I did think about blindly trying the Monster Widget plug-in, but that thing is huge and it’s made up for testing, not publishing purposes, so I went on looking.

Further research brought me to an awesome tutorial “How to Add Widgets to WordPress Theme’s Footer” which explains in great detail how to do this manually, and it’s actually a piece of cake to implement.

Modifying the code for custom design

It would be nice to have a plug-in for this and I’m definitely going to think about how to create and implement one myself, but this bit of coding makes things very customizable and flexable.

The tutorial supports 3 separate widget areas at the bottom, but it can easily be remodeled to allow for as many as you like. For my current needs three was just what I needed, though I tweaked the .css to fit the general design of this site:


coming soon!

And I also modified the footer.php file with some additional stuff to make the widget section follow the inclined design of the Oblique theme:


coming soon!

I’m still not 100% happy with how the colors blend at the bottom of the page, but I’m sure I’ll work that out eventually.

As for the widgets themselves, once your code is in place the additinal widget areas show up in the back end of the theme (the theme customizer, and the widgets tool) where you can easily drag&drop actual widgets into them. And that’s it! Except… for One more thing:

Creating a Child theme

My first step to this, though, was to create a child theme. I don’t think creating a child theme is absolutely necessary, and this is why I mention it only now. A lot of design customization can be achieved without one, but with a child theme in place:

  • the design seems to be a much cleaner job
  • the backup is a lot more transparent
  • my own code is safer when the original theme is updated

While the first two are strictly my opinion and a personal preference, that last one is 100% accurate: if a theme update affects the files you manually modified, it can remove or mess up your code and even break your site. Using a child theme allows for the original theme to be updated independantly, without affecting the modifications you made to the child theme.

However I did have to conclude that the necessary modifications to the functions.php file still have to be made in the parent theme, which highly annoys me. I will definitely have to find a work around that will allow me to place all the code in the child theme. If you have any ideas or guidelines, please leave me a comment!

If you are new to the concept of child themes and how to implement one, I suggest you check out the official docs page which is quite user friendly and up to date.

In order to create a child theme, I created the following styles.css file:


@import url('../oblique/style.css');

/*
Theme Name: Oblique Child
Theme URI: http://
Description: Oblique child theme
Author: Me
Version: 0.0.1
Template: oblique
*/

Leave a Reply

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