Unfortunately, the way their responsive menus work can be a little clunky on smartphones. They tend to push the content down in the viewport and dominate way too much screen real estate for my taste. The menu items also tend to be a bit difficult to mash with my fat fingers. In an effort to create a more user-friendly (and fat finger-friendly) mobile responsive menu, I decided to add a small amount of jQuery and clean things up a bit for smartphone visitors.

It should be noted that this tutorial assumes you are using a Nav in the #Header widget area. If you are using a Primary or Secondary Nav, a few things will need to be changed in order for it to work correctly. This tutorial also assumes that your Genesis child theme is already using responsive design. If it isn’t, you’re going to need to go through some additional steps before using this tutorial.

If you don’t already have one, create a folder called lib

Inside that folder, create another folder called js

Inside your js directory, create a new file called general.js and paste the following code into it:

Keep in mind that the #menu-main-menu selector will probably need to be changed to whatever ID your primary navigation is using. Once you’re finished with that, you’re going to need to load your new JavaScript file. Let’s do this the WordPress way by creating a new php file inside the lib directory.

We’ll call your new file theme-js.php and paste the following code into it:

This file is also where you would load any additional JavaScript files your theme needs. If you need to load more JavaScript files, simply add them using the same method I’ve used for general.js. You should also try to use WordPress conditional tags whenever possible to prevent your scripts from loading when they aren’t necessary. Speed matters!

Once you’ve saved your theme-js.php file, you’re only a few steps away from creating your awesome Genesis mobile responsive menu! Next, we’re going to add a bit of code to your theme’s functions.php file.

When you add the following code, make sure you place the
require_once(CHILD_DIR.'/lib/theme-js.php');
line under the
require_once( TEMPLATEPATH . '/lib/init.php' );
line at the top of your functions.php file. The rest of the code can be added farther down in functions.php

Here’s the code you’ll need to add to your functions.php file:

I’ve added the code for the menu toggle to the genesis_header_right hook which will place it in the header widget area above my menu. If your menu is in another location, you’ll probably want to move the toggle to a different hook. I recommend using the genesis visual hook guide to help you choose the best location.

Now, the rest is mostly up to you. There are some essential CSS rules that you’ll need to declare in order for this to work correctly. Add the following to your style.css stylesheet:

Update: Genesis 2.0 Has Made some Changes.

If you’re using 2.0, Use These Styles:

If you’re using Genesis 1.x, Use These Styles:

At this point, you’re basically done, but you’ll still need to style your new menu to fit your theme. My advice is to choose your breakpoints wisely and remember to scale around your content rather than cater to particular device widths. Popular device resolutions will constantly change, so try to focus on making your content usable and aesthetically pleasing at any screen size.

There are a few things about this method that bug me, particularly the fact that you have to use an !important declaration. If anyone has a better method for creating a menu using responsive design in Genesis, please let me know! If you have any questions, leave a comment or send me a message through our contact form.

The post Creating a Mobile Menu Using Responsive Design in Genesis appeared first on FAT Media.

So… what do the two have to do with each other? Well, not a whole lot, except we’ve got three free tickets to WordCamp San Francisco and we’re in need of some earth-shattering questions to ask John. We really want to get his views about how Ghost will impact the WordPress ecosystem and I think asking the WordPress community is the best way to do that. Soooo… being the pragmatist that I am, I figured why not kill two birds with one stone? Here’s the deal:

How to Get Two Free WordCamp San Francisco 2013 Tickets

Getting your two free WordCamp San Francisco tickets is pretty easy. All you have to do is fill out this form with a question for John. Keep in mind that we’re looking for the best of the best here. Make sure your question is insightful, far-reaching, and hard-hitting. We won’t be pulling any punches, that’s for sure! We’ll review all the submissions and whoever writes our favorite question wins the tickets. Simple, right?

We’ll be announcing the winner of the free WCSF tickets live on the air on July 23rd at 10am EST. Don’t forget to watch so you can find out if you’re the lucky person who gets to head to WordCamp for free. Please let us know if you don’t need both tickets and we’ll give the second one to the runner up.

Entries are closed. Thanks Everyone!

The post Free WordCamp San Francisco 2013 Tickets + Bacon appeared first on FAT Media.

If you’re familiar with CSS, creating a fixed header, which is also known as a sticky header, is pretty straightforward. Because we build almost everything with the Genesis Framework, my code will be geared towards that, but it could be easily modified to work with any WordPress theme.

The first thing you need to do to create a fixed header is assign a fixed position to your header element. If you’re using Genesis 2.0, the code to do this should be almost identical to what I’m publishing.

If you’re using an older version of Genesis or another WordPress theme, this code will need to be modified slightly. For instance, on an older version of Genesis you would target #header rather than .site-header. In other themes your header’s selector could be just about anything, but searching through the code to find it shouldn’t take too long.

Get Your Fixed Header Positioned Correctly:

Once you’ve done that, you should have a functional sticky header in your WordPress theme. Unfortunately, everything will still look a bit screwed up at this point. In order to make sure your theme’s fixed header looks good and functions correctly, you need to figure out how tall your header is in pixels.

In Genesis, most of the newer child themes have a header with a fluid height. This makes it much easier to adapt your CSS as the viewport scales down. You technically could assign a fixed height to your header, but then you’ll probably have to modify it via media queries in order for the mobile version of your site to function correctly.

This isn’t usually necessary and doesn’t follow the Mobile First methodology. Your best bet is to let the header inherit its height from the elements inside it. These include the logo and in our case the primary site navigation.

The bad news is that in order to figure out your header’s height using this method, you’re going to need to do a little math. Horrible, I know. Before you start crying, chill. It’s pretty easy.

For our site, the tallest element in the header is the logo, which has a max-height of 81px. The height for the logo was calculated by figuring out the height of the individual navigation items including top and bottom padding. You’ll likely need to take a similar approach on your site, depending on how your header is structured.

If you’re afraid of math, you could also do this visually by playing with the padding on your site’s body (lawl) until it matches the header element’s height and everything looks correct. In any event, once you’ve figured out the height of your WordPress theme’s sticky header, you’ll need to…

Add the Correct Padding to the Body for your Fixed Header

If you’re rocking Genesis 2.0 you should be pretty much all set at this point. If not, you might have some issues with clearing your floats. If your site looks screwed up or you need to assign overflow:hidden to your header, you probably need to add some float clearing.

I feel like a broken record, but the latest version of Genesis really does kick ass. They’ve added the following CSS after the standard reset to make clearing floats the old fashioned way obsolete.

Shiny New Float Clearing Awesomeness

You could modify your theme to follow a similar approach, or you could bite the bullet and make the move to the Genesis Framework. It’ll make your life easier, I promise.

Shameless Plug for Our New Service:

If you’re running an older version of Genesis and would like to add HTML5 support, mobile responsiveness, and other badassery, give us a shout at Genesis Update. We’ll be happy to get you all fixed up with Genesis 2.0. Just sayin.

Well, that about wraps this post up I think. If you have any trouble implementing your fixed header or if you have suggestions for improving ours, please let us know in the comments!

The post How to Create a Fixed Header in WordPress appeared first on FAT Media.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

If you’re going to use font icons, the Font Awesome CDN version is wise choice for a number of reasons. Because the icons are served out using a global content delivery network, they’ll load quickly no matter where your website visitors are. Plus, because the Font Awesome CDN is used by tons of other sites, there’s a good chance your visitors will already have it cached in their browser. Mo’ speed!

There are a few different ways to use the Font Awesome CDN in WordPress. You could use a plugin, but I think the simplest method is to enqueue NetDNA’s BootstrapCDN directly into your theme. It’s really easy to add to just about any WordPress theme.

Add the Following Code to Your Theme’s functions.php File:

Need to Support IE7? Use This Code Instead:

If you need to add IE7 support, you can do it the WordPress way. Thanks to my friend Travis Smith who originally posted the code to check for IE versions. If you don’t already read his blog, go check it out. He’s got a ton of great resources.

IMO supporting IE7 is a bad idea in general, but if the person footing the bill disagrees, here’s how you can include support for IE7:

And that’s pretty much it. Once you’ve got the Font Awesome CDN loaded into your WordPress theme you can start adding scalable, retina-friendly font icons until your heart’s content.

It’s Like Icon Magic!

Neat, eh? Here’s a complete list of all the available Font Awesome icons you can use. If you have any questions or comments, leave ‘em bellow.

The post Add Font Awesome CDN to WordPress Without a Plugin appeared first on FAT Media.

So, Why Bother Making a Plugin at All?

Building a lot of custom functionality into a WordPress theme is generally considered bad practice. There are a number of arguments against doing it, but the one that resonates with me has to do with portability and future-friendliness. If a site owner decides to change the theme on their website, they will lose any custom functionality built into their current theme. This includes custom post types, custom taxonomies, and everything else that has been built into that theme.

Building a bunch of functionality into a theme forces a site owner to either continue using their current theme, or pay someone to port the functionality over to a new theme or (if they’re lucky) a plugin. That’s not cool.

Some people argue that building functionality into a theme is ideal because it’s usually faster and it means more money for you. Since your client has come back to you again and again for changes and updates, you’re basically guaranteed repeat business! Sounds great, right? Maybe… but what happens when your client learns about the difference between a plugin and a theme? What happens when they realize that you’ve basically been holding them hostage? Is that really a situation you want to find yourself in? Is the extra business worth your reputation?

Here’s an Idea: Just Do a Good Job!

If you do quality work, your clients will come back to you and they will pay you well. If you care about your business, I think you should always try to do your best. To me, doing your best includes making it easy for other developers to continue where you left off. Besides, when your client comes back to you for more of your awesome WordPress development, it’ll be much easier to make changes and additions to your own work. A little extra work in the beginning can save you countless hours down the road.

Alright, enough of this soap box crap. You’re probably here to find out how to get the URL of a WordPress MU Plugin’s directory, so I’ll explain how I like to do it. This code should also work in a standard plugin.

How to Define the MU-Plugins Directory URL

While MU Plugins are great, they also have a few issues. One problem I’ve run into is that there isn’t a very straight-forward way to get the plugin URL inside of your plugin files. In order to simplify things, I like to define some reusable URL constants and use them throughout my plugin.

I typically define my URLs in the main plugin file using a WordPress function called plugins_url. You can learn more about how to use plugins_url correctly in the codex.

Here’s an example:

Once you’ve defined the plugin URLs, you can then use them throughout your plugin. For instance, you could use your defined URLs to include a JavaScript file in your must-use plugin.

Here’s an example:

That’s pretty much it! Because of the way mu-plugins work, you’ll also need to place a file directly in the mu-plugins directory in order to load your main plugin file.

Here’s an example of how to do that:

The codex has a good rundown of the other issues with the mu-plugins directory. It’s also worth nothing that any plugin in the mu-plugins folder will run on your entire network if your are using WordPress Multisite. Thanks to Andrea R from WordPress eBooks for reminding me to mention this.

If you have any questions or suggestions for how to improve my code or my explanation, please leave them in the comments.

The post How to Get the WordPress MU Plugin Directory URL appeared first on FAT Media.

Genesis Simple Sidebars

The Genesis Simple Sidebars plugin is essential for anyone who wants to control the content of their website or blog. It allows you to conditionally place different content in the sidebar areas of your site without writing any code. Need to display different widgets on a particular post or page? Just create a new simple sidebar and choose it from a drop-down menu. Simple!

Genesis Featured Widget Amplified

The Genesis Featured Widget Amplified is a really killer plugin by Nick the Geek. It replaces the default Featured Widget included in the Genesis framework and adds the ability to display custom post types and custom taxonomies. It also lets you exclude items by Term ID and supports pagination, plus a number of other useful options. To truly appreciate how much ass this plugin kicks, you’ll need to install and use it yourself.

Genesis Title Toggle

Crafting an awesome headline for your posts and pages is extremely important. Unfortunately, sometimes using the Page title input for your awesome title can make managing your content difficult. Using the Genesis Title Toggle plugin lets you stop the title from being displayed so you can name your page whatever you want and still have a custom, high-impact title.

Genesis Simple Hooks

One of the best things about Genesis is the ability to use hooks and filters to quickly and easily modify content throughout your website. Genesis Simple Hooks makes this process even easier by letting you add html and php code directly in the WordPress admin panel. We typically don’t use this plugin and opt for adding things manually, but if you’re less familiar with code or just prefer to work directly in the Admin panel, this will definitely help you you.

Genesis Visual Hook Guide

The Genesis Visual Hook Guide is a great companion for the Simple Hooks plugin. It adds a drop-down menu to visually display the various hooks available in Genesis. Being able to inspect the hook areas visually can make the process of adding and removing content from your site significantly easier.

Genesis Simple Menus

The Genesis Simple Menus plugin allows you to select different secondary menus for specific pages and posts on your website. Sometimes you may need to add additional menu items in a particular area of your site that aren’t relevant to any other areas. With this plugin you can easily do this without coding anything!

Column Shortcodes for Genesis Themes

Column Classes are another great feature of Genesis. They allow you to quickly split up your content into responsive column blocks and keep everything very organized. The Column Shortcodes for Genesis Themes plugin adds some easy-to-remember column shortcodes for you to use when writing your posts and pages. Now you don’t have to remember any HTML or CSS!

Genesis Grid

The Genesis Grid plugin by Bill Erickson allows you to easily display all of your posts using the built-in Genesis Grid function. It also allows you to control featured image sizes and a number of other options. There are also some advanced options for developers to hook into for displaying things more granularly.

Genesis Printstyle Plus

Want to make sure your content is readable when printed? Just install the Genesis Printstyle Plus plugin and call it a day. You can even add custom print styles by adding a CSS file to your child theme’s root directory. Make sure you read the plugin documentation for more info.

Genesis Connect for WooCommerce

WooCommerce is a powerful e-commerce plugin for WordPress created by WooThemes. If you’re selling products on your WordPress website you should consider using WooCommerce. The Genesis Connect for WooCommerce plugin adds some essential functions to Genesis so that there are no issues when displaying WooCommerce store, product, and account pages.

Well, that’s our list of the best Genesis plugins! What do you think? Did we miss a super-awesome plugin that you use on every site you’ve ever created? Do you hate one of the Genesis plugins we listed? Let us know in the comments!

The post Ten of the Best Genesis Plugins appeared first on FAT Media.