Create a Ribbon in WordPress Using CSS & HTML

Everyone loves ribbons but there’s not many tutorials on how to create them manually rather than install another plugin.

Add Css code to your custom style.css file in your child theme or your custom css file in your parent theme.

There’s 2 steps that need to be completed to make the ribbon display:

Step 1) Add a large block of css code to your child theme’s or parent theme’s custom style.css file

Step 2) Add a few lines of html code to your html editor

FCC Ribbon Manager Plugin

If you’re not into code, try installing a plugin.

Make sure you upload a .gif image for the ribbon as MS I.E has a problem with .PNG transparency.

Ribbon Code Builder

UIParade offer a free ribbon builder which is a better option than using plugins in my opinion. Check out there ribbon builder.

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.