Create a breadcrumb navigation for a WordPress site

To create a breadcrumb navigation for a WordPress site, where you want to include the parent page's title and links, you can use custom PHP code. Here's how you can implement it:

Code to Add Breadcrumb Navigation with Parent Page Support

You can add the following code to your WordPress theme's functions.php file or create a custom plugin:

function custom_breadcrumbs() {
    // Options
    $separator = ' » ';
    $home_title = 'Home';

    // Get the query & post information
    global $post;

    // Do not display on the homepage
    if (is_front_page()) {
        return;
    }

    // Start the breadcrumb with a link to home
    echo '';
}

How to Use:

  1. Add the above function to your functions.php file.
  2. Call the breadcrumb function in your theme's template files (e.g., header.php or page.php) where you want the breadcrumbs to appear:
if (function_exists('custom_breadcrumbs')) custom_breadcrumbs();

Styling the Breadcrumbs

You can add the following CSS to style the breadcrumbs:

.breadcrumbs {
    font-size: 14px;
    margin-bottom: 20px;
}
.breadcrumbs a {
    text-decoration: none;
    color: #0073aa;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs span {
    color: #333;
}

Features:

  1. Parent Pages: Automatically includes parent pages in the breadcrumb trail.
  2. Category Support: For posts, includes the category in the breadcrumbs.
  3. Customizable Separator: You can change the $separator variable to use a different symbol.

Let me know if you need additional customization or have further questions!

No comments:

Post a Comment