Random Header for WooThemes’ One Pager
WordPressI’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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Let's setup the custom-header arguments $defaults = array( 'default-image' => '', 'random-default' => false, 'width' => 1920, 'height' => 500, 'flex-height' => false, 'flex-width' => false, 'default-text-color' => '', 'header-text' => false, 'uploads' => true, 'wp-head-callback' => '', 'admin-head-callback' => '', 'admin-preview-callback' => '', ); // And activate support for the custom-header functionality add_theme_support( 'custom-header', $defaults ); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// Add the custom header options hook so we can do add some other things to that admin page. add_action('custom_header_options', 'custom_header_caption_options'); // Let's add two additional option fields to the custom-header page to manage the caption functionality. // A checkbox to turn the header caption on or off and a textarea to enter custom CSS for the caption display. // Credit to for most of this code https://illuminatikarate.com/blog/add-your-own-options-to-wordpress-custom-header-image-screen/ function custom_header_caption_options() { ?> <table class="form-table"> <tbody> <tr valign="top" class="hide-if-no-js"> <th scope="row"><?php _e( 'Show Caption?' ); ?></th> <td> <p> <input type="checkbox" <?php if (get_theme_mod('eb_show_header_caption', '')=='yes'){echo 'checked="yes" ';} ?>name="eb_show_header_caption" value="yes" /> </p> <p class="description">Turning on captions will display the "caption" text associated with the image. Set this at upload or in the Media library.</p> </td> </tr> <tr valign="top" class="hide-if-no-js"> <th scope="row"><?php _e( 'Custom Caption CSS:' ); ?></th> <td> <p> <textarea rows="6" cols="50" name="eb_header_caption_css" id="eb_header_caption_css"><?php echo esc_attr( get_theme_mod( 'eb_header_caption_css', 'float: right; color: white;' ) ); ?></textarea> </p> <p class="description">Customize the CSS of the caption. Be sure to set float:left; or float:right;</p> </td> </tr> </tbody> </table> <?php } // Then we need to save the options. // Again, credit to https://illuminatikarate.com/blog/add-your-own-options-to-wordpress-custom-header-image-screen/ add_action('admin_head', 'save_the_options'); function save_the_options() { if ( isset( $_POST['eb_show_header_caption'] ) || isset( $_POST['eb_header_caption_css'] ) ) { // validate the request itself by verifying the _wpnonce-custom-header-options nonce // (note: this nonce was present in the normal Custom Header form already, so we didn't have to add our own) check_admin_referer( 'custom-header-options', '_wpnonce-custom-header-options' ); // be sure the user has permission to save theme options (i.e., is an administrator) if ( current_user_can('manage_options') ) { set_theme_mod( 'eb_show_header_caption', $_POST['eb_show_header_caption'] ); set_theme_mod( 'eb_header_caption_css', $_POST['eb_header_caption_css'] ); } } return; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Now we'll display the header image and the caption using CSS placed in the page HEAD (same as One Pager was already doing) add_action( 'wp_head', 'random_header_image' ); function random_header_image() { $captioncss = ''; $showcaption = get_theme_mod('eb_show_header_caption', 'Default Value'); $captioncss = get_theme_mod('eb_header_caption_css', 'Default Value'); ?> <style type="text/css"> #header { background-image: url(<?php header_image(); ?>);} <?php /* If the caption display was selected in the admin, we'll add the content in through the CSS :after selector to keep things simple. And we'll strip out any HTML in there just in case... */ if ($showcaption == 'yes') { ?> #header:after {content:'<?php $attachment_id = get_custom_header()->attachment_id; $attachment = get_post( $attachment_id ); if ( count( $attachment->post_excerpt ) ) echo wp_kses($attachment->post_excerpt, array())."'; ". $captioncss; ?> } <?php } echo '</style>'; } ?> |
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:
|
1 2 3 4 5 6 |
float: right; color: white; text-transform: uppercase; font-size:0.857em; position:relative; left:15px; |
Enjoy.
Thanks, Sophia.
Here are a few things to look into.
Let me know if this helps.
Eric-