How to add breadcrumb in wordpress

What Will I Learn?

• You will learn how to add a breadcrumb to your website / blog or online store.
• You will learn how to change the breadcrumb that comes by default.

Requirements

• Need to have the CMS Wordpress platform plugin.
• Plugin installed and activated from TablePress.
• Code editor.
• Understand some of the PHP language.

Difficulty

• Basic

Tutorial Contents

This plugin is very useful to tell the user which page you are on. On quite extensive sites where there are quite a few subpages it is very helpful to have the path covered to know where you are.

After having installed and activated the plugin it is necessary to put a line of code in our theme header.php

So we have to go to:

1. Go to the menu "Appearance"
2. Click in submenu "Editor"
3. Click in Theme Files > Theme Header (Header.php)
4. Put this string of code below:

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

Save the theme and after this step already has the breadcrumb on your site.

Now I will configure the breadcrumb to my liking and explain the rows of the settings.
If we go to the code of our project. We have to go to the folder where we installed wordpress.

MyFolder > wp-content > plugins > breadcrumb-trail > inc > breadcrumbs.php
My folder: This is the place where I installed wordpress for this project.

We have to find this section of code in file breadcrumbs.php:

    $defaults = array(
            'container'       => 'nav',
            'before'          => '(',
            'after'           => ')',
            'browse_tag'      => 'h1',
            'list_tag'        => 'ul',
            'item_tag'        => 'li',
            'show_on_front'   => true,
            'network'         => false,
            'show_title'      => true,
            'show_browse'     => true,
            'labels'          => array(),
            'post_taxonomy'   => array(),
            'echo'            => true
        );

In these parameters I'm just putting a "(" before the breadcrumbs and a ")" after. However, if you want you can change the settings of the other parameters and check how it is on your site.

If we want to change more things in our breadcrumbs we have to find this piece of code in same page breadcrumbs.php .

$defaults = array(
            'browse'              => esc_html__( 'Test:', 'breadcrumb-trail' ),
            'aria_label'          => esc_attr_x( 'Breadcrumbs', 'breadcrumbs aria label', 'breadcrumb-trail' ),
            'home'                => esc_html__( 'Home', 'breadcrumb-trail' ),
            'error_404'           => esc_html__( '404 Not Found', 'breadcrumb-trail' ),
            'archives'            => esc_html__( 'Archives', 'breadcrumb-trail' ),
            // Translators: %s is the search query.
            'search'              => esc_html__( 'Search results for: %s', 'breadcrumb-trail' ),
            // Translators: %s is the page number.
            'paged'               => esc_html__( 'Page %s', 'breadcrumb-trail' ),
            // Translators: %s is the page number.
            'paged_comments'      => esc_html__( 'Comment Page %s', 'breadcrumb-trail' ),
            // Translators: Minute archive title. %s is the minute time format.
            'archive_minute'      => esc_html__( 'Minute %s', 'breadcrumb-trail' ),
            // Translators: Weekly archive title. %s is the week date format.
            'archive_week'        => esc_html__( 'Week %s',  'breadcrumb-trail' ),
            // "%s" is replaced with the translated date/time format.
            'archive_minute_hour' => '%s',
            'archive_hour'        => '%s',
            'archive_day'         => '%s',
            'archive_month'       => '%s',
            'archive_year'        => '%s',
        );

In this piece of code I just changed to test to check how it appears in breadcrumb.

As you can see our breadcrumb I am in the format of (test: page1 / page2).

If for example you want to modify the separator between the pages you have to go to:
MyFolder > wp-content > plugins > breadcrumb-trail > breadcrumb-trail.php

Find these lines of code:

.trail-items li::after {
    content: "\002F";
    padding: 0 0.5em;
 }

Change de code line content:

content: "\003e";

Now it will look like this:

This plugin is handy to use however you need to understand a little bit of the PHP language if you want to predefine your breadcrumb.

Curriculum

In my curriculum find tutorials on wordpress as it is my daily work tool. Many more will be made.

• Tutorial: How to create a data table with filters and Import & Export data table (Wordpress)
• Tutorial: How to use Lazy Load in Wordpress
• Tutorial: How to use EU Cookie Law (Wordpress)
• Tutorial: How to use tawk.to in wordpress
• Tutorial: Wordpress: Album and Image Gallery Plus Lightbox
• Tutorial: Wordpress: WP Multilang
• Tutorial: How to use disabe comments plugin
• Tutorial: How to use duplicate pages plugin (Wordpress)

---

Posted on Utopian.io - Rewarding Open Source Contributors

---