The SEO Framework · KB

★︎ Start with TSF
  • Extensions
  • Documentation
  • Pricing
  1. Home
  2. Knowledge Base
  3. TSF
  4. Breadcrumb shortcode

Breadcrumb shortcode — Contents

  • Basic syntax
    • Separator attribute
    • Home attribute
    • Class attribute

Breadcrumb shortcode

Published on November 22, 2023
Revised on February 15, 2024

TSF v5.0 added breadcrumbs to every post, page, term, and archive. These are outputted for search engines via structured data, but you can also output them directly on your site via a shortcode.

Basic syntax

The most basic form of the shortcode, [tsf_breadcrumb], which will look like this:

  1. Home
  2. Knowledge Base
  3. TSF
  4. Breadcrumb shortcode

Separator attribute

You can add a custom separator to the breadcrumb. [tsf_breadcrumb sep="👉"] will look like this:

  1. Home
  2. Knowledge Base
  3. TSF
  4. Breadcrumb shortcode

Please note that the separator is added via the CSS content property. HTML-encoded entities, like •, won’t work. And, because WordPress sometimes outputs backward solidi (\) incorrectly, you may need to add two backslashes to use CSS-encoded Unicode. So, for a bullet (•), you’d have to use [tsf_breadcrumb sep="\\2022"].

WordPress is perfectly capable of storing Unicode since version 4.2. So, to work around all these issues, we recommend inserting special entities directly. [tsf_breadcrumb sep="•"] will look like this:

  1. Home
  2. Knowledge Base
  3. TSF
  4. Breadcrumb shortcode

Home attribute

You can add also rename the first breadcrumb entry, “Home.” [tsf_breadcrumb home="TSF Home"] will look like this:

  1. TSF Home
  2. Knowledge Base
  3. TSF
  4. Breadcrumb shortcode

You can combine the syntax and also change the separator. [tsf_breadcrumb home="TSF Home" sep="⇒"] will look like this:

  1. TSF Home
  2. Knowledge Base
  3. TSF
  4. Breadcrumb shortcode

Class attribute

Finally, you can change the class. You’ll need this if you want to output a different type of separator (we did that without telling you for the examples above). The syntax is as follows, and is meant for developers that implement custom CSS: [tsf_breadcrumb class="my-example-class"].

Filed Under: API, Content, The SEO Framework

Other articles

  • The SEO Framework

    • Robots.txt blocks
    • Constant reference for The SEO Framework
    • Filter reference for The SEO Framework
    • Common plugin update issues
    • Headless mode
  • API

    • Using filters

Commercial

The SEO Framework
Trademark of CyberWire B.V.
Leidse Schouw 2
2408 AE Alphen a/d Rijn
The Netherlands
KvK: 83230076
BTW/VAT: NL862781322B01

Twitter  GitHub

Professional

Pricing
About
Support
Press

Rational

Blog
Privacy Policy
Terms and Conditions
Refund Policy

Practical

Documentation
TSF on WordPress
TSF on GitHub
TSFEM on here
TSFEM on GitHub
Feature Highlights

Rank higher in 2025 › The SEO Framework