Create a banner image with a caption box

Normally we’ve created a banner image with captions differently in the past, but decided to do something a bit different.

As you may or may not realize, WordPress now has an “Image” widget. We added some custom CSS code to the theme so that when you add a caption to the widget, you get a special style applied which gives you an overlay caption. You can see this in action on the live demo for this theme, but here is a screenshot of what it looks like:

sp image widget caption

Nice done, but this is how you can do this by using the default WP Image widget:

  1. Go to Appearance >> Widgets
  2. Drag an Image widget into the “Banner” sidebar position (this is only for this sidebar position)
  3. Upload your image, and then with your widget still open, click the “Edit” button:
    sp image widget caption2
  4. Add this code to the caption field:
    sp image widget caption3 <span style="color:#fff;margin-bottom:10px">Working From the Coffee House</span><span style="color:#dfd8be">What could be better that enjoying your surroundings</span>
  5. If you want this image to link somewhere, you can fill in the “Link to:” field.
  6. Then click “Save

You can change the colours using HEX colour code to customize the caption to the colours in the photo, much like I did for the banner in the demo and screenshot. The HEX colour for the second line is the #dfd8be that you see in the code.

You can see how I added the custom style for colour by using:

style="color: #dfd8be" 

REMINDER – Just to remind you that this custom caption styling is only available when used in the Banner sidebar position.