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.

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.

If you’ve ever wanted to reverse the post order on your Genesis powered website, there are a number of ways you could do it. My friend Jonathan Perez posted a method which I don’t recommend for a number of reasons.

The simplest way to reverse the post order on the Genesis Framework, or any WordPress-powered website for that matter, is to use a helpful function called pre_get_posts. The ubiquitous Bill Erickson has a detailed post about how you can use pre_get_posts to do all kinds of neat stuff besides changing the post order.

If all you’d like to do is reverse the posts for post archives on your Genesis website, you can paste this directly into your functions.php file:

Reverse the Post Order on All Standard Genesis Post Archives:

You could easily modify this code to reverse the post order in other situations. For example, you could reverse the post order for only custom post type archives, or only a particular category archive.

Hold Up, What About The Blog Page Template?!

If you use the Genesis blog page template on your site, you’ll need to add an extra bit of code to functions.php to reverse the post order. According to Bill, it’s probably not such a good idea to use it anyway.

@realFATmedia @tnorthcutt @SureFireWebServ It's a mistake left in genesis for legacy reasons. Always use settings > reading

— Bill Erickson (@BillErickson) July 6, 2013

If you’re dead set on using the Genesis blog page template for some reason, here’s how I would reverse the post order:

Reverse the Post Order on the Genesis Blog Page Template:

In my opinion, using pre_get_posts is a much more efficient and modular approach than the one published by Jonathan. If you disagree or have a better way to accomplish this, let me know in the comments and I’ll update my code!

The post Reverse the Post Order on the Genesis Framework 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.