Creating different banners with caption boxes

When you see the live demo site for Opportune, you will notice I have a banner image showing on the front page. This tutorial will help you to add one to your page like I did. Although there are a few ways you can do this, I will help you based on my method. There are plugins that lets you install an image or banner widget, allowing you to upload and set an image, but we are adding a caption box so this will require a text widget because we need to add some HTML code.

Prepare your Image

When you prepare an image for your banner, you can use this as a guideline:

  • Front Page banner images are normally bigger for a showcase effect. The size I am using on the demo is 2560 x 700 pixels. This will accommodate large screens, but will adjust in size as the screen becomes smaller.
  • Inner Page images are smaller, so I would recommend something like 2560 pixels in width, but your site can also be any height you want. 

Maximum size for a Banner Image = 2560 pixels in width, but your height can be anything you want. If you use the boxed layout for the site, then you can make your width the width of the boxed setting you choose. For example, if you select the boxed size of 1920px, then your image only need to be the maximum of 1920px and not 2560px.

banner caption example

Upload Your Banner Image

Now it’s time to begin adding our content by using a text widget, which is how I did the live demo site. 

  1. Go to Media >> Add New
  2. Upload your front page banner image and then click on the text link “Edit“.
  3. At the top right section of your image edit screen is a File URL field. Click inside that and copy that URL and save it somewhere because we will need it soon.

Prepare Your Text Widget

  1. Now to to Appearance >> Widgets, and drag a text widget into the “Banner” sidebar box.
  2. Title it !Front Page Banner (with an exclamation mark right in front so that our title is hidden on the front-end). This is from the “Remove Widget Titles” plugin that lets you hide the widget title.

Add This Code…

Now we need to copy & paste some HTML code so that our Caption Box will float above the image and give us our captions.

<div style="position:relative;"> <img src="/image.jpg" alt="a short description /> <a href="#"> <div class="banner-caption-content"><h1 class="banner-caption-content-title">Caption Title</h1><div class="banner-caption-content-subtitle">This is your caption content</div></div> </a> </div>

Now we need to replace some content in our HTML code you see above.

/image.jpg – Replace this with the copied File URL you saved when you uploaded your image
# – Change this symbol to an actual URL link if you want this image to link to something
a short description
– Change this to be your own short description for the image
Caption Title – Change this caption title to your own.
This is your caption content – Change this to your own caption

Using the WordPress Custom Header Method

This one is a bit different because it’s using the WordPress custom header feature that has been part of WordPress for many years. It’s not quite as flexible as the above tutorial gives you, but it does give you an alternate option. I will add this tutorial in the next one…

WordPress Custom Header