You can add these directives in the http, server, or location blocks of your NGINX config file, depending on your needs.

gzip on;
gzip_proxied any;
gzip_types text/plain text/css text/javascript text/xml application/xml application/xhtml+xml application/xml+rss;
gzip_disable "MSIE [1-6].";

Code breakdown:

1. gzip – Enable Gzip
2. gzip_proxied – Gzip all requests. See the list of parameters here – gzip_proxied
3. gzip_types – Types of content to gzip. Note that text/html is enabled by default, and will cause a warning if you add it here.
4. gzip_disable – Prevent compression to old versions of Internet Explorer.

Other Gzip Settings

There are a few other settings that can be used that I have not added here. Above is what I use, but you can customize it further. I don’t see any reason to change these from the default values, so I leave them alone.

gzip_comp_level

You can increase the level of compression, for the price of server work. The default level is 1, which is what most people use. It is generally agreed that raising gzip_comp_level is a performance anti-pattern, as it takes longer than the savings gained by the extra compression.

gzip_min_length

With this, you can set the minimum size file in bytes to gzip. The default is 20 bytes.

There are even more settings, but I don’t understand them very well, and based on the documentation they look likely to cause bugs, so I have left them out.

If you want to read more about Gzipping with your NGINX server, check out the official documentation.

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

NGINX Domain Redirects

For new websites, having the www before your domain is really not needed. Here is how to redirect the www version of your website to the cleaner, non-www version.

WWW to Non-WWW Redirect

server   {
   server_name www.domain.com;
   rewrite  ^/(.*)$  http://domain.com/$1 permanent;
}

Non-WWW to WWW Redirect

Alternately, if your site has been around a long time, and used the www version, you can make sure users are redirected to the www version.

server   {
   server_name domain.com;
   rewrite  ^/(.*)$  http://www.domain.com/$1 permanent;
}

NGINX Directory Redirect

You may need to redirect an entire directory of pages to another if you rename it. I tend to change the structure of this site quite often, so I’ve got a couple of them in my config file.

This directive goes within the main server block of your sites NGINX config.

   if ( $request_filename ~ old-directory/.+ ) {
       rewrite ^(.*) http://domain.com/new-directory/$1 permanent;
   }

If you are redirecting to top level pages on your site, use this:

   if ( $request_filename ~ old-directory/.+ ) {
       rewrite ^(.*) http://domain.com/$1 permanent;
   }

NGINX Single Page Redirect

When you rebuild a website, it’s common to remove pages, or rename them. If the page has links from other website, you don’t want users who click the link to land on a 404 Error page. The best thing to do in this case is to send the user to the next most useful page.

Use this directive in the server block to redirect single pages.

   if ( $request_filename ~ old-page/ ) {
      rewrite ^ http://jeffsebring.com/next-best-page/? permanent;
   }

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

Creating the Hidden Form using jQuery

In my footer template file, there is a div to wrap all the elements, one for the form itself, and a link to click and display the form. Note the use of do_shortcode function to show the form.

First, we need to print the html. Mine is in the footer.php template of the theme.

<div class="contact">
<div class="contact_form">
<?php echo do_shortcode( '[gravityform id="1" title="true" description="false"]' ); ?>	
</div>
<a class="contact_link" href="javascript:void(null);" title="Contact Support">Contact Support</a>
</div>

The form starts hidden, using a little css in the theme stylesheet:

.contact_form {
  display: none;
}

We also need some javascript. In case you don’t already have a file loading for your theme, here’s how to do it, and make sure jquery is loaded for you.

# Use the wp_enqueue_scripts hook to enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue', 99999);

# Callback function
function mytheme_enqueue()
{

	wp_enqueue_script( 'mytheme', get_stylesheet_directory_uri() . '/javascripts/theme.js', array( 'jquery' ), '', 'footer' );

}

In the theme’s javascript file we just included, we have a click event on the link, which both toggles the form div, and scrolls the page to the bottom, since it is in the footer.

jQuery(document).ready(function() {

	$( '.contact_link' ).click( function() {

		$( '.contact_form' ).toggle( 'slow' );

		$('html, body').animate({scrollTop:$(document).height()}, 'slow');

	});

});

Showing Validation Errors

Now that we have our nifty hidden form that toggles open when the user clicks the contact link, lets make sure they see the confirmation and validation errors.

In our theme functions file, we will check to see if the form has been submitted using the superglobal $_POST array, which will contain the data from the form submission. The variable for your form, will be is_submit_1, the ’1′ being the id of the gravity form.

We simply check to see if that variable is set, and print some javascript in the footer if so. For just a couple of lines of scripting, that only shows when the form is submitted, I think embedding it is the best choice, but you can also put it in an external script to enqueue as well.

# Was this form submitted?
if ( isset( $_POST[ 'is_submit_1' ] ) ) :

# Print our javascript in the footer.
add_action( 'wp_footer', function()
{ ?>
<script>
jQuery(document).ready(function() {
	$( '.contact_form' ).toggle( 0 );
	$('html, body').animate({scrollTop:$(document).height()}, 0);
});
</script>
<?php }, 99999);

endif;

The script is identical to what we used to show the form on the click event, aside from the easing parameter. We don’t want to make people dizzy by scrolling all the way down the page. Change the easing parameter on both functions to 0.

This post is specific to Gravity Forms, but you can use the same techniques for any form.

I have a developer’s license for Gravity Forms, and it’s the best money I’ve ever spent on a plugin. Use the big red link below to get a support license if you don’t have one already -

Get Gravity Forms

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

Don’t Edit These Files

Unless you wrote a theme, plugin, or the WordPress core, don’t edit it. There may come a time when it is updated, or you need support, and your changes will be overwritten, or prevent support. The WordPress API gives you plenty of ways to get things done.

The two ways to interact with WordPress are plugins and themes. Themes handle the display of content, and plugins extend WordPress’s generation of content. In the case of themes, you will want to create a Child Theme. If you are already using a child theme skin designed for a framework that may be updated, you can create a plugin.

Google Web Font fans can also use my Google Web Fonts for WordPress Plugin to take care of all of this for you. Do it yourself types, keep reading.

Importing External Fonts, The Right Way

Using most web font services, you will need to link a css file in the header. You might be tempted to just open up the header.php, and paste it in. There’s a better way.

WordPress has a bunch of “actions” it runs in a particular order. These are designated for certain tasks, like adding stylesheets or Javascript files.

Every theme must contain the function wp_head, which is what most links in the header are printed through. There are a number of other hooks that are run through wp_head. The wp_enqueue_scripts hook is specifically used for printing links to stylesheets and scripts.

A the time of writing this post, my blog uses FontDeck for font licensing and delivery. When I selected my fonts, I was given a snippet like this to put in the document head:

<link rel="stylesheet" href="FONT_STYLESHEET" type="text/css" />

** I’ve replaced the actual link with FONT_STYLESHEET.

WordPress will create the link tag, so I just need FONT_STYLESHEET. Since this is a child theme I wrote, I’ll use it’s functions.php file to add the PHP code.

Using wp_enqueue_scripts

What we’ll do is use add_action, with the hook wp_enqueue_scripts, using a PHP Closure containing the wp_enqueue_style function. We will pass wp_enqueue_style arguments to tell it what stylesheet to link.

Here it is in action:

add_action( 'wp_enqueue_scripts', function() { # Hook into wp_enqueue_scripts with a closure

    wp_enqueue_style(
        'FONT_STYLESHEET_HANDLE', # replace with a name for your font stylesheet
        'FONT_STYLESHEET' # replace with url to your font stylesheet
    );

});

Importing Fonts in Stylesheets

Another way you can import fonts, is using the @import rule to import from your stylesheet directly. You will see this option in Google Web Fonts, and some other services. It’s as easy using @import as is as pasting the snippet, but not as good for performance ( See -Yahoo Performance Rules – Choose <link> over @import ).

Import Fonts with @font-face

What you will see if you look at one of these external stylesheets is ‘@font-face’ rules, importing the fonts from the provider’s server, to the browser. You will do the same when using fonts hosted on your webserver.

Here’s an @font-face rule for one of my favorite serifs:

@font-face  {
   font-family:'ProcionoRegular';
   src:url("../fonts/Prociono-Regular-webfont.eot");
   src: local('☺'),
      url("../fonts/Prociono-Regular-webfont.eot?#iefix") format("embedded-opentype"),
      url("../fonts/Prociono-Regular-webfont.woff") format("woff"),
      url("../fonts/Prociono-Regular-webfont.ttf") format("truetype"),
      url("../fonts/Prociono-Regular-webfont.svg#ProcionoRegular") format("svg");
   font-weight:normal;
   font-style:normal
}

Javascript Font Loaders

Some web font services like Typekit use a javascript font loader to load fonts. These are a little different to implement. They will also give you a little snippet of HTML for the head of your document. Since it’s not just a single stylesheet link, we will use the wp_head hook itself to print it.

Like before, we will use add_action, but this time hook into wp_head, and use a closure for the callback to print the HTML.

Here is an example of how to implement a Typekit font kit:

add_action( 'wp_head', function() { ?>

   <script type="text/javascript" src="http://use.typekit.com/CHANGE_THIS.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<?php });

By now, you presumably have your web fonts imported, and available for use in your stylesheets, regardless if the service or method you chose to deliver them.

If you want more options for what fonts you can use, check out my article on How to make your own @font-face web font kit.

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

Just because a particular method of providing a user interface has been popular in the past doesn’t mean it’s even usable today. The hardware people are using to access the websites you are building will continue to change and evolve far faster than you can anticipate.

Websites of the Future

As responsible people who build websites ( I don’t think designer or developer are accurate anymore, got a new Pronoun? ), we have to start accepting the chaos. I don’t want to build websites that won’t work in 2 years when a new way to interact with them is standard.

We’ve gotten past the flash. Everyone hows why that is evil now. The next evil doer, in my opinion is the mission critical hover state.

Design Critical Menus

Every website has a goal, or set of goals. The main menu of a website is generally going to be critical to these goals, and where the dropdown menu lives.

I treat the masthead of a website as the most valuable piece of real estate. The ONLY links or text to go in the header should be something you need to have available on every page of the site.

What Menu?

The elephant in the room here is that touch devices don’t have a hover state. Your dropdown menu will never be seen from a phone or touch computer.

When you consider that the hover state only works with a cursor, there are a lot of fairly common design techniques that fall apart.

Links will always work

One of the most important elements of the web is the hyperlink. This is what makes it a web.

Dropdown menus revolve around the CSS :hover state, and often jQuery, and are essentially a hack. For quite a while, they were a great way to tuck away a submenu. That was when the only device to really interact with a website was a full sized PC or laptop. The little smart phones before the iPhone could browse, but nobody really expected to be able to use a website efficiently with one.

Obviously, there are many websites that need complicated menus and ways to divide choices without overwhelming users. The way to proceed is with good, old fashioned CLICK, and a little more creativity. Only display what you really need. The website doesn’t have 20 high priority goals.

Use things like the jQuery UI Accordion which requires a click to display the contents, and indicate that there are contents without a hover.

Back to Reality

There are going to be many clients who continue to require these horrible things. The best we can do is inform them of why they aren’t the best idea today, and find alternatives that provide better results. Given the rise in use of tablet computers like the iPad, this isn’t very difficult when compared to a design that didn’t take them into consideration.

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

Modernizr creates an html class if the feature is available in the browser rendering the page. Just wrap your styles with the selector for the feature you’re using like so:

.textshadow {
    .widget h3 {
        text-shadow: -1px -1px 0 #aaa, 2px 2px 5px #3a3a3a;
    }
}

If you really want to go the extra mile for performance, use Modernizr’s built in YepNope.js conditional loader to load feature specific stylesheets or Javascript only when they can be used.

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

Writing every day

I’m one of these pathetic bloggers who really enjoys writing, but doesn’t do it much. I’ve got plenty of great excuses too:

• I’m busy working
• I need to finish “insert one of my many side projects here”
• Usually three paragraphs in, I realize how dumb of an idea the post I’m writing is.
• I want to stay “on-topic” with what I’ve written about before
• Someone else wrote about it better

Ok, these are all really lame reasons to not write. The real reason is that I haven’t gotten into the habit of doing it. It’s always hard work to form new habits.

A journal will be a great way for me to get in the habit of writing every day. By putting my thoughts on paper, I will solidify, and give more respect to my ideas, and life in general. Hopefully this will lead me to share more ideas here on my blog.

Look at your thoughts

One of the biggest benefits of a journal, in my eyes, is that it gives you a chance to actually look at your thoughts. Both the act of writing them down, and reading them can give you a new perspective on them. Some things you think one day might seem ridiculous the next.

For this reason, I’ve decided to start each day by reading the previous day’s entries, and commenting on them. By forcing myself to look at what I was thinking, I can review the conclusions I may have come to. We all know hindsight is 20/20, but how much do we use it to our advantage? How can we give our ideas, activities and thoughts more measured attention? Start a personal journal.

In order to reference entries in comments, and make it easy to review, I’m using a simple numbering method, combined with symbols. Each day starts at 01 ( I doubt I’ll ever need 3 digits in a day ), and may prefix the number with a symbol to signify what the entry is relevant to.

Writing on paper

As a web developer, I spend A LOT of time typing. I write code and emails all day for a living and fun ( the emails aren’t as fun as the code ). The last thing I want to do is write a personal journal into text files. Aside from my affection for stationary and fine pens, the act of handwriting has a quality of it’s own that I really enjoy.

Creative people often forget how beneficial it can be to exercise different parts of their mind. Working with your hands, and the control needed for handwriting can be a sort of meditation. You are forced to pause and formulate your thoughts more. For a computer geek like me, typing doesn’t require any thought. Words spill from my fingers onto the mechanical switches of my klackity Tactile Pro sometimes faster than I can compose them well.

Make a commitment, use an ink pen

When I first picked up the journal to start writing in it, I started with a pencil. I thought it would be good to be able to rewrite, and make sure it’s neat and tidy. That was a big mistake. I spent about 20 minutes writing and erasing before stopping, and getting a pen.

There is something telling about the way you write. Some people make a career out of analyzing handwriting. Perhaps over time, I will be able to look at the way I write each day as a journal entry in itself, telling me things about myself at the time of writing them that I might not be aware of, or wouldn’t write. Was I having trouble staying in the lines, was my script nice, or sloppy? Did I write in it after a few beers?

I also decided I want it to be perfect in the way that it is just what I wrote at the time, no erasing or editing. Don’t pull a George Lucas on your journal. You deserve the original article when you look at it later.

Whitelines Squared

Of course, starting a journal, I need something to write in. Having a ridiculous fetish for paper products, my needs were pretty specific.

My journal needed to fit the following criteria:

• hardbound
• clean black cover
• book ribbon
• heavy graph paper
• environmentally friendly
• size A5 ( 6 x 8.5 inches )

With this in mind, the Amazon navigation lead me to the Whitelines Hard Bound A5 Notebook. It has everything I wanted, aside from the clean black cover, but the orange stripe doesn’t bother me, as it’s using Futura, and the orange is a nice contrast to the black cover. It’s not surprising that they would be so beautiful, and enjoyable to write in. Whitelines was founded by a Swedish designer named Olof Hansson.

The killer feature of the Whitelines, is the . . . white lines. Instead of a high contrast blue grid on white, the paper is shaded light gray, with white lines. I find that the white lines provide guidance, but are not too demanding, or distracting. The words are what stand out, not your guidlines.

Though I am not really a stickler about recycled paper or finding out “how the sausage is made”, I prefer to give my money to companies who take responsibility for themselves. Whitelines makes the following statement about their paper processing:

And not only is Whitelines working harder to support you and your ideas, but it is working harder to support the environment; the paper is processed and printed in a mill in the South of Sweden with zero carbon emissions.

If you are considering starting a personal journal, I hope this pushes you over the edge. When you’re old, looking back at your life, you’re more likely to wish you had started a journal than to think it was a waste of time.

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

What is happening is that the server has not received any data, and your session timed out.

There is an easy command that takes care of this when you connect:

ssh -o ServerAliveInterval=60 username@domain.com

This will send the server a bit every 60 seconds if you don’t, keeping your connection alive indefinitely.

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

This is a great alternative to moving to a separate part of your file or switching files and finding the right place in your media query for your new rule.

Compass Nested Media Queries

by jeffsebring Fork it on Github

Compass Nested Media Queries

⇒ nested_media_queries.scss

#sidebar    {
    width: 100%;

    @media only screen and ( min-width: 480px; )    {
        width: 33.33333%;
        float: right;
    }
}

Jeff Sebring - WordPress Consulting & Development ✦ Spokane

I’ll continue to update this Gist as needed for my own use. Feel free to fork it.

Responsive WordPress Core Theme Styles

by jeffsebring Fork it on Github

Responsive WordPress Core Theme Styles

⇒ responsive_wordpress.css

/**
 * Responsive WordPress Core Theme Styles
 * http://jeffsebring.com/responsive-wordpress-images/
--------------------------------------------------- */

.sticky,
.bypostauthor,
.gallery-caption {
   display: normal;
}

.alignnone {
   margin: 1em 1em 1em 0;
}

.aligncenter,
div.aligncenter {
   display:block;
   margin: .5em auto;
}

.alignright {
   float:right;
   margin: 0 0 1em 1em;
}

.alignleft {
   float:left;
   margin: 0 1em 1em 0;
}

.aligncenter {
   display: block;
   margin: 1em auto;
}

img,
img[class*="align"],
img[class*="wp-image-"] {
   max-width: 100%;
   height: auto;
}

img.wp-smiley {
   border: none;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;
}

img.alignright {
   margin-left: 1em 0 1em 1em;
}

img.alignleft {
   margin: 1em 1em 1em 0;
}

img.aligncenter{
   display: block;
   margin: 1em auto;
}

img#wpstats {
   display: block;
   margin: 0 auto;
}

img[class*="align"],
img[class*="wp-image-"],
   .gallery .gallery-icon img {
   border: none;
}

.wp-caption {
   margin-bottom: 1em;
   margin-left: 0;
   max-width: 96%;
   text-align: center;
}

.wp-caption img {
   display: block;
   margin: 0 auto;
}

.wp-caption-text {
   position: relative;
   font-size: .8em;
}

.gallery {
   margin: 0 auto;
}

.gallery .gallery-item  {
   margin: 0;
   float: left;
   text-align: center;
   width: 33%;
}

.gallery a img {
   border: none;
}

.gallery-columns-4 .gallery-item {
   width: 25%;
}

.gallery-columns-4 .gallery-item img {
   width: 100%;
   height: auto;
}

.comments ol    {
   padding-left: 0;
}

.comments ol li {
   margin: 0;
}

.comment-author {
   padding: 0;
   text-decoration: none;
}


@media only screen and (max-width: 800px) {

   embed,
   object {
      max-width: 100%;
   }

}

@media only screen and ( max-width: 650px ) {

   .gallery-columns-3 .gallery-item {
      width: 33.33%;
   }

   .gallery-columns-3 .gallery-item img {
      width: 100%;
      height: auto;
   }

}

@media only screen and (max-width: 480px) {

   .gallery-columns-2 .gallery-item {
      width: 50%;
   }

   .gallery-columns-2 .gallery-item img {
      width: 100%;
      height: auto;
   }

}

Jeff Sebring - WordPress Consulting & Development ✦ Spokane