Loading Google Fonts from Theme Options

By Devin

Providing font options in a WordPress theme can be a significant design challenge.

It’s not quite as simple as just outputting a bit of inline CSS for font-family. Every font has unique meanlines and x-heights- so the font size, line heights and paddings for every font selector may need to be adjusted as well. A 1.2 line-height could be perfect in body text for “Helvetica Nueue”, but appear cramped with “Georgia”.

Unless you want to offer hundreds of options so that the user can also adjust these other css properties, it’s probably best to whittle down the font choices to a couple that look really great. I’d recommend adjusting the line heights and sizes automatically when the user makes a switch, which unfortunately, is a ton of extra work.

On a recent project I’ve been working on, I decided it wasn’t worth it. I kept the font face defaults and decided just give the user control over font colors and sizes. However, if you do want to offer your users that option, good on you.

What We’ll Cover

In this tutorial I won’t show how to adjust all the font properties- but I will suggest some ways to set up font options, and conditionally load Google fonts when a user has selected one.

In these examples I assume you’re using the Options Framework (theme or plugin version), but it should be fairly easy to use this code even if you’re building your own options panel from scratch.
Continue reading →

Infinite Scroll in WordPress

By Devin

Infinite scroll has become a standard feature in many web applications. Twitter and Facebook are the ones I use every day, but it’s also in a ton of Tumblr themes and Cargo Collective sites.

I feel WordPress themes has been slow to adopt infinite scroll- but after adding it to my site over the weekend I understand some of the complications.

Unlike Tumblr or Cargo Collective, WordPress (.org) users can use plugins to add all sorts of javascript to posts. On my site Syntax Highlighting is the main culprit (which I use to display code snippets), but many others have social buttons or lightboxed images.

When infinite scroll pulls in additional posts via ajax, it doesn’t load the javascript code from the header or footer of the post that might be needed to display js content (e.g. social buttons, formatted code, etc) properly. That puts theme authors in a bind. Infinite scroll may be a better end user experience, but it’s going to lead to more support requests during theme set up.

However, if you don’t use much javascript in your post content, or if you display excerpts on your index pages rather than full posts, I’d suggest trying it out.

The Infinite Scroll plugin recently had a complete rewrite, and I can now recommend using it again. If you use the plugin you should be able to set up infinite scroll for your theme in just a couple minutes.

I’ll also posted a tutorial about how to add Infinite Scroll to a theme without a plugin.

Useful Links:

Image Credit: Infinity Pool

WP Engine Hosting Review

By Devin

I’ve hosted most of my sites with BlueHost for over six years, but I recently migrated this one over to WP Engine. Mainly I was curious to see what the impact on page speed would be. As WP Theming has grown in traffic so have the load times– despite good caching, gzipped files, minified scripts and css, and sprited images.