Guide to Styling the WP-PageNavi WordPress Plugin

If you’re not familiar with the WP-PageNavi WordPress plugin, it allows you to replace normal previous/next navigation with a more advanced, numbered paging navigation. This is a feature I’ve included on a number themes I’ve developed, including RS16, Blogwave, RS17, and Bright Spot.

RS16 PageNavi

In this tutorial, I’m going to go over how to:

  • Install WP-PageNavi and properly integrate it in your theme.
  • Two methods to disable and/or override default plugin styles.
  • An overview of the HTML markup output by WP-PageNavi
  • Finally, how to alter the look of your page navigation through CSS

Read the rest of this entry »

How To Make Old WordPress Themes Compatible With New Versions

So you want to make your old WordPress themes compatible with newer versions of WordPress. With WordPress 3.0 right around the corner, theme compatibility is something on a lot of people’s minds. It’s pretty simple: do absolutely nothing.

I’ve been making WordPress themes since around WordPress 2.3 was released, and guess what? Those themes still work today and there’s nothing I need to do to keep them working with newer versions of WordPress.

  • Will they have threaded comment functionality (circa 2.7)? Nope, they probably still have “single level” comments though.
  • Will it use post_thumbnails to handle post thumbnails (circa 2.9)? Nope, but not every theme makes use of post thumbnails anyway.
  • Will they have the new navigation menus, custom header and background images introduced in the upcoming WordPress 3.0? Nope, and keep in mind not every theme will have a need for custom background or header images.

Most of these features I would consider optional. With maybe the exception of threaded comments or the new menu system, a lot of themes won’t even need or be designed around things like custom post thumbnails or header images.

Read the rest of this entry »

Seamless Image Rollovers Using CSS

Have you ever noticed how sometimes when you hover over an image, it goes blank for a second, and then it loads the hover image? When you roll back over though, everything is seamless.

Here’s an example of what I mean using my Underground ladder image (broken into two pieces).

This is because there are two separate images that need to be loaded, and the second one (on hover) takes extra time to load when the hover effect is triggered.

In this post, I’m going to show you how to eliminate that delay using a CSS technique that loads the entire image at once, and displaying a portion of it.

Read the rest of this entry »