Five Sass-y tricks to impress your friends

I am not ashamed to tell you that I was really reluctant to try Sass.

When you’ve been doing front-end development as long as I have (20 years this August), you know that there are new tools and techniques made available on an almost-daily basis. Most of them are fleeting at best, so I tend to wait until it looks like something is gaining some traction before I take the time to try it out.

But Sass won me over on the very first project I put it to work on and I’ve used it on practically every project since. Along the way, I’ve picked up some clever tricks that make life easier and development faster.

Here’s a small roundup of some of my favorites. Enjoy! Continue reading

Responsive sticky footer woes and fixes

Over the years, I must have used about a dozen different approaches to coding up a sticky footer, with varying degrees of success. I recently stumbled upon an elegant CSS3 solution and immediately put it to work on the theme on this site. But then I discovered some problems. Here’s how I fixed them.

What’s a sticky footer?

Alright, let’s say you’ve got a design that involves a big, chunky footer like the one on this site. If you have a page or a post that’s light on content, maybe just a few lines (like my contact page) and your site visitor happens to have a tall browser window, you don’t want that big footer hanging out in the middle of the screen. You want it down at the bottom of the browser window.

yes-no

That is the art of coding a sticky footer. Continue reading

Eight tips for improving responsive typography

Don’t underestimate the importance of well-done typography in making a website appear more professional, polished, and just plain nicer. But in the world of responsive design, we need to have a few extra tricks up our sleeve for accomplishing gorgeous web type. Here are eight things you can do to improve typography in your responsive designs: Continue reading

Animate text over images on hover without JavaScript

A couple of months ago, I published a tutorial showing how to show text over images on hover without using JavaScript. When I presented to an HTML5 Meetup Group a couple of weeks ago, I took that idea and ran with it, adding some extra special animations, and I’ll show you how to do it too. Here’s what we’ll be creating:

There are three animations happening simultaneously when you move your mouse over each image:

  1. A zoom effect on the image itself, created by scaling the image up 140%
  2. The text and its transparent black background fading in
  3. The text dropping in from the top

You’re free to use all of the animations or to remove 1 or 2 of them – it all depends on how you’d like your final product to look. Let’s take a look at how to accomplish this. Continue reading

How to Create an Alphabetical Index of Posts in WordPress

About a year ago, I was handed a design comp from a designer that required me to build out an alphabetical index for a custom post type in WordPress. You know, something like this:

WP Alpha Index

…where clicking on one of those letters would take you to a page showing only posts with titles starting with that letter. I managed to cobble together a solution that works pretty well. Not great, but passable. It involved writing quite a few custom functions – one to generate that bunch of links you see in that image above, one to register a query parameter so I could use it in WordPress, and then a few more functions to do the right queries in the database, a bunch of code in the template to make sure I was showing the right posts…and on and on. Continue reading

Place text over images on hover without JavaScript

Thanks to CSS3 and better and better browser support for it, we can accomplish things now with CSS that previously required fancy JavaScript work. In this tutorial, I’ll walk you through fading in text over an image on hover. Continue reading

How to Make a Local Copy of a WordPress Site in 5 Minutes or Less Without Dealing with Code, Terminal, or PHPMyAdmin

WordPress 3.8 was released today. Maybe you’d love to give it a try, but you’re not sure how it might work on your own site. Will it break any features on your site? Will your favorite plugin turn out to be incompatible? Chances are slim that you’ll run into any problems, but of course, you want to be absolutely sure before you upgrade.

How can you be sure? By making a local copy of your site to use for testing. By ‘local copy’, I mean a copy of your site that lives on your own computer instead of on a server. You’ll be the only one who can view it. Local copies are also great for adding new features, coding child themes, making adjustments to an existing theme and more. Think about all the things you can do with a WordPress site that you don’t necessarily want your site visitors to see in an unfinished or half-baked version. Continue reading

How to use Google Web Fonts in your WordPress theme

Of course there are plugins for using Google Web Fonts on your WordPress site, but if you’re developing a theme, chances are you’d like your typography choices to be tied to your theme, not dependent on a plugin. Here’s how to use Google Web Fonts in your theme.

First, head over to Google’s Web Fonts site and pick out the fonts you’d like to use. Use the tools on the left side to narrow down the options because there are a lot. For this blog, I knew I wanted a chunky serif font for the headers and blog title, so I picked serif from the Categories dropdown and then moved the thickness slider over to the right.

Searching for a thick serif

That handily narrowed down 617 choices to just 5. You’ve got quite a few options for previewing the fonts – you can view a word, a sentence, a paragraph, or a poster. You can choose from some pre-selected preview text or you can type in your own, and you can also select a font size.

Preview choices for Google Web Fonts

Once you’ve found a font you’d like to use, just click the Add to Collection button.

Click the Add to Collection button to choose a font

Yes, you could add dozens of fonts to your collection. But you won’t, right? Because you know that just because you can, doesn’t mean you should. Try to limit yourself to a maximum of three. Two is better. For performance reasons, I still like to use an old-fashioned web-safe font for body text and save the web fonts for headers and other elements that need special emphasis or attention. Be careful about the legibility of your fonts – there’s no use using some snazzy font if it means your site visitors can’t read what you’re writing.

As you add fonts to your collection, you’ll see them listed in the blue section at the bottom. Once you’ve got the fonts in your collection you’d like to use, just click the Use button.

Use your selected collection of fonts

And you’ll be whisked off to a screen with 4-step instructions on how to use the fonts. If you’d like to download your choices to use in a graphics editing program to produce a comp or maybe a fancy screenshot.png for your theme, you can do that by clicking the Download Fonts button at the top right. If you just want to use your font in your theme, then you don’t have to download your collection.

In step one, you can select which weights or styles you want include in your collection and in step two, you can select which character sets you want to include. You can also see the impact your font collection will have on your page speed.

Now, in step three is where things get tricky. Step three gives us code to add to our websites – three different options. Go ahead and select the Standard option, but we’re going to deviate from Google’s instructions a bit at this point to follow WordPress best practices for adding styles to our WordPress theme. In the code for the standard option, just copy the URL that’s listed as the href attribute for the <link> tag.

Copy the URL in the href attribute

Then, open up your theme’s functions.php file. We’ll create a function for loading the CSS that we’ll be using with our theme:

See that ggl prefix on my function? That’s a WordPress best practice. Always prefix your WordPress function names to reduce the chances that they’ll collide with some other function in a theme, child theme, or plugin.

Now, inside that function, we want to register our stylesheet from Google:

We’ll use the wp_register_style WordPress helper function. The first parameter is a handle, or shorthand, that we can use to refer to this stylesheet later on in our code. The second parameter is the path to the file. We’re using the URL we got from Step 3 in Google’s instructions.

Next up, we’ll enqueue our main stylesheet for our theme. You didn’t put a <link> tag in the <head> section of your header.php file, did you? If you did, go and remove it. Then enqueue your stylesheet in your functions.php file:

Here we’re using the wp_enqueue_style WordPress helper function. It’s got the same parameters as wp_register_style. First we assign our stylesheet a handle. Second, we get the path to our stylesheet. Handily, WordPress provides us with a function, get_stylesheet_uri(), that we can use to get the path to our theme’s style.css file. Third, we list dependencies. Our style.css file is dependent on the Google Web Fonts stylesheet, so we pass in the handle we assigned to that stylesheet when we registered it.

Finally, we’re going to use the wp_enqueue_scripts action hook to call our function:

Now we’re all done with functions.php and there’s only one thing left to do to use our Google Web Font. Step four of Google’s instructions for using the web font will show you what values you’ll pass to the font-family property to use your font. I want to set all of my headers in Holtwood One SC:

And I want to set my site description in Rouge Script:

That’s all there is to adding Google Web Fonts to your WordPress theme. Remember, with great power comes great responsibility. Use them responsibly!