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:

Could not embed GitHub Gist 3c3913bf38d812d434a2: API rate limit exceeded for 72.10.51.26. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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:

Could not embed GitHub Gist 830af5f08174fd33af8b: API rate limit exceeded for 72.10.51.26. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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.

Could not embed GitHub Gist 1d41de5ae786e3b5aad7: API rate limit exceeded for 72.10.51.26. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

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.

Genesis Simple Share Plugin

Please read: The Genesis Simple Share plugin has been moved to the WordPress plugin repository. You can now download it there.

Many of you with a keen eye have spotted some social media sharing buttons on a few our sites such as Copyblogger and StudioPress. Some of you have even noticed them at the bottom my posts here as well.

I’ve been asked by a number of people if they are available or how they can get their hands on them. In most cases, I sent the plugin via email and mentioned that we were internally testing it for our Rainmaker Platform.

We’ve always been generous with our customers and today is no different. I’m very pleased to announce that the Genesis Simple Share plugin is now available for everyone to download for free.

When downloading the plugin, please understand that it is in beta version. This means there’s a chance something might not work quite right. If that’s the case, just get in touch with me and I’ll relay it on to our team.

Let’s all thank Nick Croft and Rafal Tomal for building such a beautiful plugin. Give them a follow on Twitter if you aren’t already.

Genesis Simple Share Options

One of the great features with the Genesis Simple Share plugin is that it’s easy to setup. We built an extremely simple options page for you.

Just enable the social media buttons that you want to show on your blog posts. You can even rearrange the order you want them to display as well.

Genesis Simple Share Plugin
Increase visibility with the Genesis Simple Share plugin.

We’ve provided a few options for displaying the buttons. You can choose between a small bar, medium bar or have them in a box. You get to choose if you want them before your content, after your content or in both places.

Updated: Now you have the ability to reposition the Simple Share buttons.

Genesis Simple Share Plugin Settings
Configure your sharing buttons with a simple settings page.

You might be wondering how to customize the Genesis Simple Share buttons. Below is the CSS that I used to change from the branded social media colors that come by default to a single color that matches my website.

Could not embed GitHub Gist cedfba7d9a39f48986a0: API rate limit exceeded for 72.10.51.26. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)