Hi, I'm a web developer and blogger from Russia. My nickname is Dimox.
Sorry for my English, it's not my native. Read more about me and my blog.

WordPress Breadcrumbs Without a Plugin

WordPress Breadcrumbs Without a Plugin

Breadcrumbs is an important element of a web site navigation, which boosts his usability. Especially it concerns to a sites with a complex structure. Unfortunatelly, I don’t use breadcrumbs on my sites, may be because their structure is very simple or because I could not find a way of making breadcrumbs, suitable for me.

I have seen a different ways of a breadcrumbs implementation on WordPress sites, but not one of them I does not like, because all of them does not display a full chain of links. So I have created my version of WordPress breadcrumbs without a plugin.

Yes, there is a ready plugins for WordPress breadcrumbs, but I prefer to use a short code snippets, which doing the same.

Features of my version of WordPress breadcrumbs

  • Displays a full chain of links to the current page. For example, if the current post is in a second level category, so breadcrumbs will looks like this:

    Home » Category » Subcategory » Post Title

    But all, what I have seen, displays only such an option (excluding plugins):

    Home » Subcategory » Post Title

    The same applies to pages and subpages. For example, for a 3rd level page breadcrumbs will looks like this:

    Home » Page Level 1 » Page Level 2 » Page Level 3

  • Breadcrumbs is appearing on a following types of WordPress pages:

    • paged navigation (like sitename.com/page/2/);
    • category archive;
    • tag archive;
    • daily archive;
    • monthly archive;
    • yearly archive;
    • author archive;
    • custom post type;
    • single post page;
    • single page;
    • attachment page;
    • search results;
    • 404 error page.
  • adding a page number (if archive page is second or more);

  • custom symbol of delimiter;

  • custom text for a ‘Home’ link;

  • current crumb styling;

  • integrated microdata from Schema.org.

WordPress breadcrumbs function (last updated: 2017.21.01)

Simply paste this function into the functions.php file of your theme (excluding <?php) and then paste the following code in a place of your theme, where breadcrumbs must appearing:

<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

All that remains to do for now, is to design your breadcrumbs with CSS. You can use .breadcrumbs for styling breadcrumbs block and .breadcrumbs .current for styling a current crumb.

You can also look at breadcrumbs video tutorial, which show you how to install this function on TwentyTen WordPress theme.

Function works on WordPress 3.0 or higher.

Cоmmеnts (651):
  1. 1

    Hi, we translate the Breadcrumb with a javascript. but now i have a problem with the language additional code.

    German is ok:
    http://gasserceramic.ch/ziegelei/rapperswiler-rot/
    i can go back to “Ziegelei”: http://gasserceramic.ch/ziegelei

    but in other language we have this mistake:
    if you go back to Ziegelei you see this… http://gasserceramic.ch/?lang=frziegelei%2F
    (http://gasserceramic.ch/ziegelei/rapperswiler-rouge/?lang=fr)

    is there a possibility to set a fix URL or to define that the language-additional is at the end of a string? / URL?

Соmmеnt раgеs: « 1 11 12 13
Lеаvе а Соmmеnt

© 2009–2017 Dimox.net  •  Privacy Policy