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.
You can add a parent and wrapper selector but you don’t need to.
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.
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.
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.
Brad Dalton says
Try this code and use the class for the nav menu which you can grab using Firebug http://wpsites.net/web-design/css-code-to-add-a-ribbon-background-to-any-element/
I would love to add this ribbon look to my genesis theme’s navigation, is there a way to do this? I have intermediate skills in CSS and HTML but I’m not familiar enough with the genesis code to figure out where to place this. Thanks!! 🙂