Get all themes with lifetime updates for 95 USD. View all promotions

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:

bw banner 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:
    bw image widget
  4. Add this code to the caption field:
    bw image widget caption <span>An amazing trip to Iceland</span><span style="color: #d3b38d">a real experience for photographers</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 #d3b38d that you see in the code.

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

style="color: #d3b38d" 

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