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 is a popular way to dynamically load fresh content into a site as a user scrolls down through it. It’s also quite easy to code into a WordPress theme. Here’s a quick walkthrough of how to do it: Continue reading →
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.
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.
I’ve hosted most of my sites with BlueHost the last six years, but I recently migrated this one over to WP Engine. I was mainly curious to see what the impact on page speed would be. As WP Theming has grown in traffic so have load times– despite good caching, gzipped files, minified scripts and css, and sprited images.
The home page of the site had a page speed score of 96% before the migration and roughly 81% after. No theme code changed and the only plugin removal was W3 Total Cache. However, load times improved significantly (as measured by Google):
You’ll notice average page speed is 1.47 seconds faster, which is a significant 25% improvement. I’d venture to guess the numbers might be even more impressive for someone who had not already worked to optimize load times. Continue reading →
I recently collaborated on a project with Brian Casel, another WordPress developer, who wanted options for selecting preset color palettes in the Options Framework.
The idea is that a user could choose a color palette (light,dark,vibrant) from a select box or image radio button- and all the color pickers would fill with those presets. The user could then override any of those preset colors if they choose. Continue reading →
Although this is the “milestone” 1.0 release for the Options Framework there aren’t any major changes for end users in this version. It’s more of a developer release, providing additional filters and hooks.
If your theme currently works, it should be fine after this release too. But I would love for any developers who use it to test it out and make sure. Continue reading →
Working with post formats in WordPress can be challenging because of the lack of structured data. For instance, just because a user selects an “image” post format, there’s no guarantee that an image was actually attached to the post.
Alex King has created a plugin and submitted a couple patches, but until the WordPress UI catches up we as theme developers need to be a little creative.
I’ve recently been working on a website that needs to track external link clicks in Google Analytics. This is something that the WordPress.com stats plugin does by default, but not Google. In order to track external links with Google Analytics, you’ll need to set up a custom tracker event. Continue reading →
Ajax is a great method for loading new content onto a web page without having to do an entire page refresh. It’s sometimes used in WordPress themes for paging, loading in full content after an excerpt, or dynamically displaying new comments as they are posted.
Ajax can also be used to load more significant amounts of content, but it gets more complicated. URLs don’t update by default, which is important if someone wants to bookmark that particular post or share it. Browser navigation buttons for “Back” and “Forward” can also be an issue.
Thankfully there are HTML5 methods for dealing with browser history and states, and an awesome jquery plugin that provides some fallback for older browsers. This tutorial will walk you through the code required for a theme that makes extensive use of ajax and also point you to some live demos. Continue reading →
WordPress is a constantly maturing platform. Just over a year ago I wrote a tutorial about creating custom post types for events- but huge improvements around advanced meta data queries made my previous approach seem hackish. This post is a much revised update with code examples. Continue reading →