Breadcrumbs for the CGBlog and News module

  Previous article Next article  

At I wanted a breadcrumbs trail as a navigational aid for the visitors. A breadcrumb trail tracks and displays each page viewed by a visitor of the website displaying a hierarchy of the current page in relation to the website's page structure.

But I also wanted to have it in "pretty urls"... Ugh, it is difficult to satisfy myself ;)

So I had to think of a method that creates URLs like and show breadcrumbs like:

You are here: Home » Showcase » Blog » CMS Can Be Simple

Or in more general terms:

You are here: Home » Blog » Category page » Detail page

To adapt the default CMSMS breadcrumbs template seems to be the first step, but it looked to complex to me. It should be simpler to do in my opinion...

  How to use

In order to use this method the default {content} block has to be parsed by the Smarty template engine in the top of the Core::Page template. Read the following article for a more extended tutorial: Base CMS Made Simple page template with automated metatags.

Example Core::Page template
    {$content = "{content}" scope=global} <------ Pay attention
{/strip}<!DOCTYPE HTML>
<html lang="en">
    <head> </head>
        <header> </header>
        <nav> </nav>
            {$content} <------ Pay attention
        <footer> </footer>

Create for each category a page with the CGBlog category tag:

{CGBlog category='category-name'}

The page structure will be:

1. home
2. blog
- 2.1 detailpage (not in navigation)
- 2.2 category-1
- 2.3 category-2
- 2.4 category-3

Note the page alias should be the lowercase category name and instead of spaces a dash (-)
Example: Business and Finance » business-and-finance

At this point we have the nice URL and breadcrumbs trail:

You are here: Home » Blog » Category page

Now lets display the detail page in the breadcrumbs list!

Go to the CMSMS Design Manager and open your Core::Page template and search for the breadcrumbs tag:


Change the breadcrumbs call with some if-else logic like:

<div class="breadcrumbs">
  {if empty($page_breadcrumbs)}{nav_breadcrumbs}{else}{$page_breadcrumbs|default:''}{/if}

What happens here?
By default the regular CMSMS breadcrumbs will be shown, but if $page_breadcrumbs has a value than that will be displayed instead.

In the detailtemplate of the CGBlog or News module we can build the alternative breadcrumbs trail... Add in the top of the template something like:

{if $entry->categories}{$category = $entry->categories[0]['name']}{/if}

{$page_breadcrumbs = "You are here: {cms_selflink page='home' text='Home'}&nbsp;&raquo;&nbsp;{cms_selflink page='blog' text='Blog'}&nbsp;&raquo;&nbsp;{cms_selflink page=$category|lower|munge_string_to_url text=$category}&nbsp;&raquo;&nbsp;{$entry->title}" scope=global}

In the first line I pick the first category name.
When I add some line breaks to the code in the second line, you can see better what happens there. You can also see how I create an URL from the category name!

{$page_breadcrumbs = "
You are here: {cms_selflink page='home' text='Home'}&nbsp;&raquo;&nbsp;
{cms_selflink page='blog' text='Blog'}&nbsp;&raquo;&nbsp;
{cms_selflink page=$category|lower|munge_string_to_url text=$category}&nbsp;&raquo;&nbsp;

It will generate the HTML code to build:

You are here: Home » Blog » Category page » Detail page

This method works without problems for the News module because the module doesn't allow posts to be attached to multiple categories. But the CGBlog module does, in that case only the first category will be used. You can also use this method for other modules that have summary and detail views.

  Working example

Buy Me A Coffee

  Comment Form


Click here to open the form


  1 Comment

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Breadcrumbs for the CGBlog and News module

  Article optimized for CMSMS 2.x

  Last tested in: CMSMS 2.2.19
  Last updated: 23-06-2018
  Comments: 1

Buy Me A Coffee


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!