Add Simple Social Icons to Your Site Footer

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.

Reposition the Genesis Simple Share Buttons

Last week was a monumental week for the Genesis community, as we made the Genesis Simple Share plugin available for our users to download. It was a long time in the making, and we are thrilled that it’s out in the open.

We’ve had some really good feedback since the release, and I’ve been asked a few questions on usage. What better way to address those questions out in the open so that all of you can benefit.

This tutorial will cover a question that Sridhar Katakam asked:

Is there a function to display the buttons so we can place where needed?

Through the Genesis Simple Share settings page, you have the option to display the buttons before the entry content, after the entry content or in both places. This is handled via filters, but there’s a way to display them elsewhere.

Go into the settings page and set the Icon Display Position to null, which is the default option. This will result in the icons being displayed in neither location. Don’t worry, we’re going to output them manually through a custom function.

Below is the code to reposition the Genesis Simple Share buttons:

Please note that this function overrides any options you may have in the settings page. In other words, this is where you control which social media services (and in which order) are output. Just look for the array in the code provided above.

You can place the Simple Share buttons on any of the available Genesis hooks. Sridhar placed them in the footer of his Genesis Customizations site.

For more information, check out the Genesis Simple Share Usage Tips wiki page that was put together by Nick Croft.

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.

Google Font Combinations That You’ll Love

It’s no secret the days of custom web fonts have been around for a while. What started out by Typekit and Adobe is now being finished by Google.

There is a lot of buzz going on these days with web design and custom fonts, and more than likely you’ve seen some typography that you’d die to use. Some of these are paid fonts, which costs you money.

In walks Google Web Fonts – and all of your miseries go away. Below you will see 5 examples of Google Font combinations you should start using.

1. Montserrat and Neuton

Montserrat and Neuton Google Fonts Combination

2. Roboto Slab and Roboto

Roboto Slab and Roboto Google Fonts Combination

3. Lato and Merriweather

Lato and Merriweather Google Fonts Combination

4. Playfair Display and Open Sans

Playfair Display and Open Sans Google Fonts Combination

5. Oswald and Quattrocento

Oswald and Quattrocento Google Fonts Combination

Loading Google Fonts

If your website is powered by the Genesis Framework and would like to add Google Fonts, the process is extremely simple. Trust me, it really is.

Below is the code you should use to properly add Google Fonts:

Reposition Primary Navigation

You may have recently noticed that some of the StudioPress themes have been developed creatively when it comes to primary and secondary navigation menus.

You can blame me for this, but there’s a good reason for it. I don’t think that there are many instances where three menus should be placed on a website.

If you think about it, there are many themes that allow for a menu to be placed in the site header widget area, along with two horizontal locations below that — the primary and secondary navigation.

If you’re using three menu locations, you’re doing something wrong.

There, I said it … and it might sound harsh, but the reality is that three navigation menus is a huge distraction on your website. You can easily place all of your links into two (or even one) menu by using multi-level techniques.

The Alternative Solution

Developing a theme for mass distribution is sometimes a challenge, but there are things I can do to eliminate decisions or possible scenarios.

One of those things is the concept of removing the site header widget area and replacing it with the primary navigation menu. Consider this a method of “forcing” users to display their menu there, and eliminating any other options.

This is also a great solution for developers who build custom sites, and want to remove the possibility of their clients going in there and messing things up.

The first thing you’ll want to do is to remove the site header widget area. Below is the code to remove the widget area in the site header:

By doing this, your client (or any of our users) will no longer see the site header widget area as an option in the Widgets screen of the WordPress dashboard.

The next step is to move the primary navigation into that spot. Below is the code to reposition the primary navigation menu to the site header:

There’s a pretty good chance that you’ll need to do some styling with CSS once you’ve moved the primary navigation to the site header. It might not be much, but there possibly a few tweaks here or there you might consider.

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.

Display a Call-to-Action Button

I love writing Genesis tutorials that are in response to questions I’ve been asked a number of times. One of those questions is “how do I display a call to action button like the Get Free Content item in your menu?”

I’m going to show you how you can style a Genesis menu item so that it looks like a call-to-action button. I’ll be using the Download Theme link that’s found in the Mobile First theme as an example. Here’s a screenshot of that:

Assign a CSS Class

When you create a custom menu, you have the option to add a CSS class to the link. This gives you the chance to style that link specifically with CSS.

Make sure that you have the CSS Classes option enabled in the Screen Options tab that can be found in the upper right hand corner of the screen.

In my example, I applied a highlight class to my Download Theme link. Here’s a screenshot that shows exactly what that would look like:

Genesis Menu CSS Class

Styling the Button

Now that you’ve given your menu item a custom class, you need to style it. Below is the CSS that I used to display a call-to-action button in the Mobile First theme.

It’s worth noting that the CSS you see above might need to be tweaked a bit depending on the usage and how your theme is currently styled. At the very least, this should give you a place to start, however.

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.