Last year August, StudioPress released version 2.0 of its Genesis Framework embracing HTML5 and CSS3. Since then, StudioPress as well as other providers of child themes for the Genesis Framework have been updating their themes to take advantage of the HTML5/CSS3 innovations.
One of the themes concerned is StudioPress (in)SPYR, still one of my favorites and deployed on my (Dutch) blog wpZaken. Just as with previous editions, the current version 1.6.5 of (in)SPYR lacks a widgetized footer, however it does comes with a social footer presenting links to your profiles with Twitter, Facebook and Google+.
In the post How to Add a Widgetized Footer to the StudioPress (in)SPYR Child Theme, I show you how you can add such a footer regarding (in)SPYR version 1.2.
The folder structure and files involved have changed considerable starting the HTML5/CSS3 version 1.5. Because of that, the instructions in my earlier post are no longer valid.
In this post I will show you how you can add a widgetized footer to (in)SPYR v1.5 and up – the most current version is 1.6.5.
Please note that you will need a plain text editor to make the adjustments here below. My preferred editor is Sublime Text (3). Sublime Text is available for Windows, Linux and Mac, but not free. A free and good alternative for Windows is Notepad++. A popular and free editor for the Mac is TextMate. Depending the distribution, Linux users can opt for gedit, Geany or Kate – all free of course.
Adding the Widgetized Footer to (in)SPYR
Let us first have a look at the default, and only slightly changed, footer of the (in)SPYR theme:
The default (in)SPYR footer comprehends three parts:
- site title
- links to social networks
- footer credits
We are going to add a widgetized footer on top of the social footer.
When you open up the functions.php file of (in)SPYR child theme, you will notice only a few lines of code, so we have to dig a little bit deeper this time.
Browse to wp-content/themes/inspyr/inc and open the file header_footer.php.
Jump to line #122 or search for “// FOOTER” – without the quotes.
Beneath this line you add:
/*** Footer Widgets */
add_theme_support('genesis-footer-widgets',3 );Save the file, and switch over to the back-end of your WordPress install and navigate to Appearance >> Widgets. There your will actually discover that you have indeed added three footer columns.
In order to review your work, you will have to add some widgets and reload the front-end of your website. It should look something like this:
Optimizing CSS of the Widgetized Footer
As you will notice, the majority of the necessary CSS is already in place, it just needs some tweaking. That is exactly what we are going to do.
For the background of the widgetized footer, I prefer to use the background image also used for the social footer. This is the footer_bg.png file, located in the images folder of the child theme.
In case you follow along; open the style.css of the (in)SPYR theme and jump to line #534 – or search for /*** Footer Widgets */.
In the next line (#535) replace:
background-color:#f5f5f5;with:
background: url("images/footer_bg.png") repeat;Save the CSS file and reload the front-end.
In order to get rid of the two white lines, open a graphics editor like Photoshop, GIMP, or irfanview and remove the two top lines at the top of the footer_bg.png image.
When you prefer a division between the widgetized footer and the social footer, you can add the following at the end of line #535 – just before the closing bracket:
border-bottom: 1px solid #272727;
To increase the padding at the top and bottom of the widgetized footer, look for .footer-widgets .widget (line #537) and
replace:
padding: 0; with:
padding: 50px 0 20px 0; To give a little more emphasis to the widget titles, I have added the following code:
.footer-widgets .widgettitle {
border-bottom: 1px solid #272727;
font-family:"Georgia",serif;
font-style: oblique;
font-weight: normal;
color: #444;
font-size: 18px;
margin-bottom: 20px;
padding-bottom: 10px;
}You can add this just above the line that reads “/*** Comments */”.
Save your CSS file.
Of course, you can continue tweaking the CSS until you are happy with the results, but I guess we had a look at the most important components.
The Finalized (in)SPYR Footer
Your widgetized (in)SPYR footer with the additional CSS should now look like this:
Good luck adding the extended footer to your StudioPress (in)SPYR theme.
Leave a Reply