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