Add Ribbon To Slider Images For Tagging Your Best Stories

I’ve already written several posts about how to add ribbons to different parts of a WordPress theme but never to images in a slider.

Here’s what this tutorial produces:

Its a simple ribbon with the text ‘Best Stories’ you can easily change to anything you like.

The ribbon background color is also easy to change simply by opening it up in your favorite graphic design tool like Paint.net for Windows or GIMP for Mac users.

Here’s the ribbon image.

The Code

If your theme doesn’t already include a slider widget, you can create one from your functions file using this code below. Otherwise, simply add the one line of code for the new div class you can see i added before the widget code.

echo'<div class="best-stories">Best Stories</div>';

Full Code

Notes

1. I used the free Genesis Responsive Slider.
2. Ribbon image added to child themes images folder. Make sure the path, file name and extension match what you have in the CSS code.
3. Tested on the Executive Pro StudioPress theme.
4. Media Queries not included.
5. To change the position of the ribbon, modify the values for the top & right properties in the CSS code.

You could also use this tutorial as a guide to tag featured images for featured posts you want to highlight.

More Posts About Using Ribbons

• Add Date Ribbon To Entry Time In Genesis Sample Theme
• Add CSS Corner Ribbon To Page or Post Content