WordPress: Adding a Different Banner to Each Page

Wordpress Banner Different PagesA banner or slideshow at the top of the page in WordPress is a pretty common design. Sometimes your client will choose a theme that already has this installed with options, but at some point, you might need to add this option into a theme. This is actually easier done than you’d expect.

The Goal and Why

We’re going to create different slideshows for each page that will automatically be loaded into the top header area, before each individual page content. We also want to make it reasonably easy for the client to edit, since that’s the reason you’re using WordPress in the first place.

Why add extra coding? If you’re trying to have a different banner or slideshow on each page, but you want it to load outside the page’s “content” area, you’ll need to do something. Instead of using jQuery to move things around, this method uses custom fields.

Step 1 – Install the Custom Field Template Plugin

We’re going to be using custom fields, but we’ll want a little more power over them then WordPress currently provides. The Custom Field Template Plugin gives you the power to do almost anything with the custom fields, including loading different ones into different pages.

Download the Custom Field Template from the WordPress site and upload the zip file to the Plugins -> Upload. Once it’s installed, confirm that it is active.

Go to Settings -> Custom Field Template to start creating. Using Template #0, first give this one a Title. The next five options will allow you to add these custom fields (that we’re going to create) into certain pages – just choose whatever makes most sense for you. I usually use a Page Template File Name, and create a separate template for only the pages with a banner/slideshow on the top. BUT, if all of your pages will have that on top, or if you have another way of delineating, use whatever works.

Next you’ll see the Template Content section, which will have something like this (you can copy and paste this in there):

[Slideshow]
type = text
size = 45
label = Revolution Slider Alias:

The name in the square parenthesis is the name to the left for this particular item, or it could be the name for a group of items. Here we’ll just use it for one item. Whatever you call this, we’ll be using this name below. The type is a input area, called “text”. The size is the width of the box. The label is what will show up directly above this input area.

Get rid of any other coding, and scroll down to click the button “Update Options”.

If you go to edit a page you added this to (using Templates or pages, or whatever option you chose out of the 5), you’ll see the Custom Field show up underneath the main page area. If you don’t, go to Screen Options (upper right, tab), and put a check mark in the Custom Fields option.

You’re almost 1/2 way there!

Creating a Slideshow/Banner

This section is really up to you. Install your favorite slideshow and/or banner plugin that provides a shortcode. Want to create your own shortcode? Check out this simple tutorial: How to Create and Use a Shortcode in WordPress.

All you’ll really need to complete this tutorial is a Shortcode for any slideshow/banner. Once you’ve created a slideshow and have the shortcode ready, go to one of those pages you want the slideshow on and enter ONLY THE OPTIONS in the custom field area. Save that page.

Note: Do not enter the entire shortcode. If your shortcode is something like this [ shortcode id=6 ], only enter the 6, as that’s the only thing that will change.

Step 2 – The Coding in the Back End

All custom fields for each page will show up in the PHP function “get_post_meta()”. So we’re going to find the custom field we’re using and get the value of it.

This PHP can be added into any Div and styled in any way you wish.

 $slideshowName = 'rev_slider '.get_post_meta($post->ID, Slideshow, true);
echo do_shortcode('['.$slideshowName.']');

This coding is the hardest part of the tutorial, but don’t worry, it’s only two lines!

The first line we create a variable and put together our shortcode. Since you don’t want the client to have to remember the shortcode, you’ll want to “build” that shortcode here. The total shortcode would normally be

[ rev_slider homepage ]

where “homepage” is the title of the slideshow. Most shortcodes have something like ID=6 or Name=homepage, so you’ll need to customize this to what your shortcode requires to work. Make sure that whatever you named the custom field (step 1, in the square parenthesis – I used “Slideshow”) shows up in the second variable passed to the “get_post_meta()” function – basically, replace “Slideshow” with whatever you named your custom field.

This first line is where you build the shortcode. If you’re having problems, echo the variable “$SlideshowName”. The text of the shortcode will show up on the front end and you can figure out if you’re building it correctly.

For example, let’s say your shortcode only required an ID number of the slideshow/banner. That ID number, which we put into the custom fields as “Slideshow” is now within the “get_post_data()” function, and can be referenced by using “get_post_meta($post->ID, Slideshow, true)”. To build your shortcode, you’d need to do this:

 $slideshowName = 'nameofShortcode ID='.get_post_meta($post->ID, Slideshow, true);

Beginners: If you’re new to PHP, see PHP variables and operators for some basic information. Also, a period in PHP allows different items to be added onto the ones before – we combined text (within the ‘ ‘) and a variable (get_post_meta) by using a period to create a long string in PHP.

And finally, LINE 2.

echo do_shortcode('['.$slideshowName.']');

This line actually executes that nice little shortcode we added. In WordPress, to make a shortcode work in PHP, you use “echo do_shortcode()”. Then just encase the text within the square parenthesis like a normal shortcode, and there you go!

In reality, the computer sees this:

echo do_shortcode('[nameofShortcode ID=6]');

Summary

And now you’ve got a nice little slideshow showing up at the top of your page! Add some pretty CSS and your client will think you’re amazing!*

*not actually, most clients will have no idea this takes extra coding in WordPress… but at least you’ll feel pretty proud of yourself!

Comments