Insert Breadcrumbs Code -Thesis Tutorial

Adding Breadcrumbs navigation in WordPress 3.0.1  theme -Thesis above the content without using plugins.

After i recommend to you to use Yoast Breadcrumbs plugin, to have breadcrumbs navigation easily, without adding some codes in your theme file, today, we will do the same to Thesis theme.


If you are Thesis users, you probably notice that this theme has a custom_functions.php file where you can add some additional functions. Using another theme? check out my tutorial breadcrumbs without plugin for another theme (I used Twenty Ten for the tutorial).

With Thesis hooks, it will make our work hell easier. Plus, Thanks for dimox.net, for the awesome breadcrumbs code that works very well.

Video:

So step by step adding breadcrumbs code to your Thesis theme: (or watch the video above)

1. Go to your dashboard, scroll down, and see “Thesis” -> “Custom File Editor”. Click it.

Thesis Custom File Editor option.

2. In “Thesis Custom File Editor” page, you can select, custom_css file or custom_functions.php, choose custom_functions.php file, hit “Edit selected file”.

Custom Functions in Pull Down Menu.

3. In the very bottom of custom_functions.php, give comments (optional to make you easier what code you have added), example i use:
//breadcrumbswithoutplugin

4. Next, go to http://dimox.net/wordpress-breadcrumbs-without-a-plugin,copy the code. (see image)

Copy all the code.

5. Paste it under //breadcrumbswithoutplugin (from step 4). Click “Big save ass button”.
6. Now we have to apply Thesis hooks to our function php file. To do this, right below the code from dimox.net, add this code:

add_action ('thesis_hook_before_content','dimox_breadcrumbs');

See Thesis hooks reference here: http://diythemes.com/thesis/rtfm/hooks/thesis_hook_before_content/

Image:

Add action code.

7. Save, and refresh your blog.
8. If you want to change “home” word to something else, change this code:

$name ='Home'; to $name ='Web6.org' for example.

9. For the css, you can play around with it.

This demo uses,

/*breadcrumbs*/
#crumbs {font-size:12px;}

Important: edit css file in Thesis, custom_css file.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. says

    Thanks for this tutorial..I have not set up Breadcrumbs yet and was planning to..but I find that it might clutter my single page top …But this is really handy for navigation..Will implement it as earliest as possible!!

    • says

      Hello Harsh,

      Yes, i guess for your theme, it will be a little bit too much navis, because you also have category lists pages, and google adsense ;)

      But there is nothing wrong to try i guess.

      Thank you for coming by!

    • says

      Hey Jim,

      Yes! I am aware of many ads in my blog, actually none complains about it, as they know i offer everything for free, no need to pay.

      So people can choose to pay and they may have clean tutorial blog somewhere or having ads which are normal in every blog, with no cost. Their choices, i don’t force people to visit my site :-D

      Oh my english, i am not a native English speaker, and we don’t need a perfect english to blog, no rules about that!

      Thanks for the feedback, i appreciate it.

      Kind regards.

  2. Gaurav Garg says

    Hi. i am Gaurav Garg
    And This Is very Useful Article i Love to Bookmark your Blog

    Thanks

  3. Carole says

    Hi, I want to add breadcrumb navigation to Twenty Twelve and have downloaded WP SEO by Yoast but I have no idea where I add the code in the header. Have you covered this before?

    Thanks
    Carole

Trackbacks