Since launching my new design a few weeks ago, I’ve been asked a couple times how I placed the social icons in my footer — specifically how I have them overlapping the white content area and the black footer.
In typical Genesis fashion, it’s a really easy thing to do. For reference the code I provide will show you how to display them on the Mobile First theme. See the screenshot below for an example of how this will look.
Before you get started, make sure that you have downloaded and installed the Simple Social Icons plugin for WordPress. You’ll need this, ya dig?
Register Widget Area
The first step in getting the Simple Social Icons to show in your site footer is to register a widget area that will be used for placement.
Below is the code that will register a social footer widget area:
Hook Widget Area
Now that you’ve registered your social footer widget area, you’ll need to hook it inside the markup of the site footer.
Below is the code that will hook the widget area where it needs to be:
Style the Social Footer
Lastly, you’ll need to add a little CSS to your style sheet to position the Simple Social Icons. The code below will help “pull up” the icons so that there’s an overlap with the two containers and control the spacing between them.
Below is the CSS that you should add to your style sheet:
I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.