Random Header for WooThemes’ One Pager

I’ve had a soft-spot for WordPress for some time now. My affinity for it grew quite a bit in the last year, having worked with some very impressive and talented individuals on architecting a SaaS website publishing platform. I’ve also been enjoying digging deeper into the inner-workings of WordPress on recent projects and ended up making a plugin while I was setting up this site. No rocket science here, but expect others could use it—or adapt it to their purposes.

This site uses The One Pager theme from WooThemes—although I’ve made a number of modifications. I liked its simplicity and large header image…but it was screaming out to have some variation. I wanted to use the header to vary the look of the site and share some of the photos I’ve taken. Unfortunately, the stock theme has a static header image…so it was a no-go out of the box.

After some investigation and coding, the header is no longer static. You’ll see it in all its glory here on the site…a random header is shown on page-load with a caption down in the bottom-right. You can download the plugin or read on to learn about how it does what it does. While it was made for this specific theme, it could easily be modified to work for others.

[icon name=icon-cloud-download]Download Plugin

How it Works

WooThemes setup the One Pager theme to set the URL of the header image in CSS within the HEAD tag. That’s easy enough to override, but we need a way to define and randomize what is placed in there. Some searching found a number of functional (as well as tried-and-tested) solutions. Most of these were either overkill or required management of the images outside of WordPress. While researching, I also learned that WordPress has Custom Header support that can be activated—so I opted to build around that. It allows header images to easily (and natively) be managed from within the Admin, cropped to the specific size that a theme needs and randomized upon display.

WordPress’ Custom Header Functionality

First, we need to setup the custom header arguments and activate support for it. We can use these arguments to define our theme’s recommended header image size (1920 x 500 for One Pager). You can see some of the other arguments in the list and read more about them at the Codex. Once activated, the custom header functionality can be accessed in the Admin under Appearance->Header.

Add Some Options To Display the Captions

I wanted to make it simple to turn the caption functionality on and off–and add some custom CSS to tweak how the captions are displayed–so let’s add some options fields to handle that. While I’ve modified their code a bit, much of the inspiration for adding options to WordPress’ Custom Header functionality came from this helpful post at illuminatikarate.com.

Bring it All Together & Display The Header Image

As I mentioned, this particular theme sets the header image in CSS within the HEAD tag, so we’ll just override that. But while we’re in the CSS, we might as well use the CSS Content property and ::after pseudo-element to drop our caption on the page. It makes it easier than having to mess with the template code and still gives us easy styling options using that CSS option field we setup earlier.

Make It Yours

Once installed, you can easily select or upload your header images by going to Appearance -> Header. Be sure you also remove the header image within The One Pager settings at “Theme Options -> Header -> Header Background Image since this will override the plugin.

To set a caption, just select the image in your media library and enter the caption you’d like. Keep the caption simple and note that the plugin will strip HTML since the content property won’t recognize it natively.

You’ll also want to define your CSS within the settings field we setup. For the One Pager theme, the caption content is placed after the Header element. You’ll want to set float:left; or float:right; in that settings field to place the caption accordingly. Of course, you can also tweak the color, font etc. Here’s the CSS I’m using:


Random Header for WooThemes’ One Pager

2 Responses

  1. Thanks, Sophia.

    Here are a few things to look into.

    • Be sure the “Header Background Image” within The One Pager “Header” settings is left blank. If this is set, it will override the plugin. (Sorry–I don’t think I mentioned this in my post originally).
    • To randomize the headers, you’ll upload the images within Appearance -> Header. Once you’ve uploaded more than 1, be sure to select “Random”.

    Let me know if this helps.