Adding Breadcrumbs to VibrantCMS and OverEasy

Written by Magnus Jepson on December 19, 2008 Uncategorized.

This tutorial was written by one our awesome forum ninjas – Jordan Hatch.

Both VibrantCMS and Over Easy are themes which turn WordPress into a Content Management System. Using a plugin and some template hacking, we’re going to integrate breadcrumbs into these themes.

First, you’ll need to download and install the Yoast Breadcrumbs plugin, and you can configure it in the Settings menu. It’s quite simple, and gives you a lot of customisation over what is displayed on your site. Time to get into some coding.

Adding the Breadcrumbs

There are quite a few files we will need to modify to add in the breadcrumbs. We will be adding the same lines of code to each of the following files:

  • archive.php
  • page.php
  • single.php
  • tag.php

Let’s open archive.php and add the breadcrumbs to that file.

If you are using VibrantCMS, you will need to find this line:

If you are using OverEasy, then you will need to look for this line:

After, add:


Upload to your site and view any category or archive page, and you should see the breadcrumbs showing at the top of your page. If not, go back and check that you have done the steps correctly.

Now, you will need to add the breadcrumbs code to the other three files mentioned above. You should add it in the same place as before.

Styling the Breadcrumbs

At this point, the breadcrumbs have no styling at all. However, we have given our code we added a class attribute, and so we can add styling to change the link colours, the font size, positioning, and lots more.

To do this, we will need to change style.css and add the following lines to the end:

/* ---- BREADCRUMBS ---- */

.breadcrumbs {
	
}

For example, if we would like to change the size of the text to 12px, we would change the CSS to this:

.breadcrumbs {
	font-size: 12px;
}

You could even add a border to your breadcrumbs:

.breadcrumbs {
	font-size: 12px;
	padding: 3px;
	border: 1px solid #ccccff;
}

You can experiment with CSS styling to completely transform how your breadcrumbs look. The plugin is completely flexible too, and so you can change what text is displayed and where the breadcrumbs are shown.

cta-banner-10-product-page-v2_2x

9 Responses

  1. Joost de Valk
    December 19, 2008 at 8:59 am #

    Cool, thanks for linking to my plugin Magnus!

  2. Magnus Jepson
    December 19, 2008 at 10:16 am #

    Thanks for making it 🙂

  3. Paul Kondo
    December 20, 2008 at 5:12 pm #

    I just added it easily to Fresh News and it worked fine. And I’ve never edited php code until an hour ago!

    The only minor hitch is that when I “copied to clipboard,” it didn’t like that. It worked perfectly when I copied it using the “view plain.”

    Thanks for the tutorial.

  4. Jasleen
    December 23, 2008 at 7:43 am #

    Cool trick! Keep it up!

    Cheers!
    J

  5. james kockelbergh
    January 1, 2009 at 11:25 am #

    Can I do the same with the Gazette theme i purchased a day or two ago? if so how can it be done. I have installed the plugin on my server but cannot get any results. What am I doing wrong. My blog is still under construction, basically just the shell online. http://www.menorcatraveler.com

  6. james kockelbergh
    January 1, 2009 at 12:27 pm #

    Solved the problem.

  7. Nicola Bird
    January 10, 2009 at 1:54 am #

    stupid question – what on earth are breadcrumbs?

  8. Remo Knops
    February 4, 2009 at 9:03 pm #

    I’m struggling a little with the position of the breadcrumbs in the overeasy theme. It’s now at the bottom of a blogpost, while I would like it above the title of a post.

  9. Francesco Magalini
    April 15, 2009 at 1:53 am #

    Thanks for the tutorial. I use the OverEasy Theme, I also add the code in page-full.php

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment
%d bloggers like this: