Infinite Scroll in WordPress

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 Infinity Pool comes close, but it’s not as cool cousin, Infinite Scroll. CC Image. )

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.

Ben Balter made a fork of the popular Infinite-Scroll plugin which is excellent. It’ll hopefully get merged into the .org plugin version soon (which I can’t recommend using in its current state). If you use Ben’s version of the plugin you should be able to set up infinite scroll for your theme in just a couple minutes. You can also see it in action on his site.

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

Useful Links:

WP Engine Hosting Review

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.

Page Speed

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):

This Google Page Speed graph shows that page speeds were 1.47 seconds faster after the migration, which is 25% improvement.

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

Color Palettes with the Options Framework

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

Options Framework 1.0

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.

Options
Image from Creative Commons

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

Theming the Image Post Format

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.

In the most recent version of Portfolio Press, I ended up styling the image format to look like this:
Continue reading

Custom Design on WordPress.com

If you want a highly customized theme for your WordPress site the only option is to self-host, right? Not so fast…

I just finished a small project for Bluefin Software redeveloping their blog. They wanted to stay with WordPress.com hosting because of its ability to scale and low maintenance. And incredibly, by using just the custom design upgrade and widget areas in the Coraline Theme, it was possible to build exactly what their designer had envisioned.
Continue reading

Ajax Themes

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

Cleaning Up the TimThumb Hack

Tim Thumb Hacker

Several of my websites were hacked this week using the TimThumb exploit. The issue has been known for a couple weeks now.

Although I had updated the majority of sites and had notified former clients, I still hadn’t gotten to some of the smaller sites yet- like my girlfriend’s food blog.

And word to the wise, your girlfriend’s food blog should always be top priority.

Hackers are using a variety of techniques to hijack WordPress sites right now, but this is how I cleaned up the ones on my server.
Continue reading