Enable Breadcrumbs

Breadcrumbs are secondary navigation that help users understand where they are on the website.

To add breadcrumbs to your site, use the function:

wpc_get_breadcrumbs();

Function Options

The function accepts an array of arguments:

$args = array(
    'class-ol'        => 'breadcrumbs',
    'class-li'        => 'breadcrumb',
    'class-link'      => 'breadcrumb__link',
    'class-current'   => 'breadcrumb__current',
    'class-separator' => 'breadcrumb__separator',
    'separator'       => '‣',
    'taxonomy'        => 'category',
    'display_current' => 'true',
    'label_home'      => 'Home',
    'label_search'    => 'Search Results for “%s”',
    'label_404'       => 'Page not found',
);

where:

  • class-ol – class for tag ol
  • class-li – class for tag li
  • class-link – class for link
  • class-current – class for current element
  • class-separator – class for separator
  • separator – The separator between breadcrumb items.
  • display_current – Whether or not to display the current page. Default true.
  • taxonomy – The taxonomy that you want to output in the breadcrumb trail when you’re on a single post (or post type). Default category.
  • label_home – Label for the home item.
  • label_search Label for the search results page.
  • label_404 – Label for 404 page

Returned HTML

The function outputs the following structure:

<ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs" class="breadcrumbs">
    <li property="itemListElement" typeof="ListItem" class="breadcrumb">
        <a class="breadcrumb__link" property="item" typeof="WebPage" href="https://wpcoder.pro/">
            <span property="name">Home</span>
        </a>
        <meta property="position" content="1">
    </li>
    <li class="breadcrumb__separator">/</li>
    <li property="itemListElement" typeof="ListItem" class="breadcrumb">
        <a class="breadcrumb__link" property="item" typeof="WebPage" href="https://wpcoder.pro/category/web-items/">
            <span property="name">Web Items</span>
        </a>
        <meta property="position" content="2">
    </li>
    <li class="breadcrumb__separator">/</li>
    <li property="itemListElement" typeof="ListItem" class="breadcrumb breadcrumb__current">
        <span aria-current="page">Floating Buttons</span>
    </li>
</ol>

Live Example

You can see a simple breadcrumbs demo here:
CodePen Example

PHP Code Example
Breadcrumb PHP code

HTML Code Output
Breadcrumb HTML code