There are various ways to go about doing this, including using a Page Builder Plugin or using a DEV Tool like our Extender Pro Plugin, but in this tutorial I’m going with the basic custom coding approach so you can see how this all works at the foundation code level. And in this particular tutorial I’ll be creating 3 horizontal Widget Areas, but you can easily tweak the code provided to alter this configuration (i.e.. adding or removing Widget Areas). Also note that in my prep work for this tutorial I used our Freelancer DevKit Plugin to implement this code, but you can do so however you prefer.
Step 1: Register Your Widget Areas
The first thing you need to do is register your Custom WordPress Widget Areas by using the register_sidebar code shown below. Note that you’ll need to place this in a PHP file that executes on both the front-end AND the backend, which is why in my own testing I placed this code in the Child Theme’s functions.php file instead of the Front-End Functions file also found in DevKit compatible Child Themes.
Now that you’ve added this code you can manipulate it however you like to match your particular design needs. You can tweak the names, IDs, divs, etc.. and even add a description if you’d like which you’ll note at the bottom of the WP Codex article found
HERE.
Step 2: Check Your Widget Areas And Add Widgets To Theme
Now you can go to Appearance > Widgets in your WP Dashboard and check and make sure that your Footer Widget Areas are properly displaying there and ready to receive Widgets. If so then you can drag some Widgets into them so that something will display when we try and display them in the following step.
Step 3: Display Your Widget Areas
Now you need some code to actually display these Widget Areas on the front-end of your site. To do so we can utilize the many
WordPress Action Hooks found throughout the Freelancer Framework Theme. In this case we’re going to be using the freelancer_before_footer hook in the code shown below.
And again you’ll note that you can manipulate this code however you like to meet your specific needs, adding or removing Widget Areas, tweaking classes and IDs, and having full control over the HTML code that surrounds these Widget Areas (which is one of the great things about using pure custom coding when you can).
NOTE that the HTML code here used to wrap these Footer Widgets is made up of a grid system built right into the Freelancer stylesheet. You can see this grid in action on the Freelancer landing page about 3/4ths of the way down the page. These grid classes make it super easy to create full mobile-first/responsive grid layouts with just a few added bits of HTML code. And again, tweak as needed.
Step 4: Tweak The Design With Custom CSS
Finally it’s time to make those final style tweaks to ensure that your Footer Widgets perfectly match your current website design and needs. In this case I simply added a background, top border, and a few little width/padding tweaks to properly position the displayed content.
You’ll note that with this particular configuration your Footer Widgets should not only display properly on full size screens, but should also respond the screen size changes and even switch to a vertical display once the screen size narrows to a large tablet size. Even this “vertical switch” can be altered by changing the four instances of “md” in the display code classes to either “sm” or “lg”. (I’m referring to the grid-break-md class as well as the three instances of the grid-col-md-1-3 class). These small, medium, large class indicators determine how soon the horizontal display turns vertical, with the small meaning that the display has to narrow even more before this switch occurs.
Also note that if you change the number of Widget Areas you’d need to tweak the grid HTML code accordingly. So for example if you went with a four Widget configuration you’d change the three instances of the grid-col-md-1-3 class to grid-col-md-1-4 to account for the one added Widget Area. Simply put, the 1-3 or 1-4 indicates that the grid element in question is ONE of either THREE or FOUR total columns inside that particular grid ROW.
Conclusion…
Doing this “the old fashioned way” can be a bit more time consuming at first and involves a bit more of a learning curve then Page Builders and other Plugin aids, but the benefit is that you not only grow in your core knowledge of how both general web design and WordPress work, but you also enjoy a much greater lever of fine tuning control that is harder to come by with drag-n-drop solutions. But of course at the end of the day it’s all about what works best for YOU and what’s going to get you closer to reaching your online goals, whatever they may be. 🙂
Checkout my walkthrough of this process in the screencast below:
Follow & Share:
