How To Add A Ribbon To Your Website

Update: New post about how to add a ribbon to any element in any theme.

There’s different ways to add ribbons in WordPress.

The most common location would be your header.

To do this, you could use a ribbon image or CSS.

An image would be more reliable as far as cross browser issues go unless you can find a tool which does a good job like CSS3D.

If you use a image, you’ll most likely have to resize it meaning the quality won’t be the best unless its in vector format.

I’ll show you how to create a ribbon using a CSS ribbon generator and add it to any location your theme offers a action hook.

Design Your Ribbon

First step is to generate the CSS and HTML code.

The easiest way to do this is to use one of the examples.

Configure Elements

You can add a parent and wrapper selector but you don’t need to.

Colors

Here you can choose the main color for your ribbon and a color for the edges which would most likely be a bit darker than the main color.

 

Sizes

Here you’ll want to grab the size of your header area which you can get by going to Appearance > Header.

There’s a few more sizes you might want to add depending on where you want the 3D effect.

Generate Code

Once you’re happy with the design of your ribbon its time to generate the code.

You’ll get a large block of CSS 3 which you copy and paste into your child themes style.css file.

To display the ribbon in your theme, you can paste the code into a template file like your header.php or single.php file. This is not the best way to do things unless your themes doesn’t use actions hooks.

Display Ribbon Using Hook

If you’re using a premium theme framework like Genesis, Thesis or Woo, you can easily paste the HTML for your ribbon in the location your want it to display.

Add some text, an image or anything else you want to display within your ribbon.