In this tutorial, we will look at how to display the number of child pages within a menu. This is ideal for projects that have categories, and could be used for blogs, ecommerce categories, directories, or other similar projects.

Example

Check out the directory on CMSGuide.info. It shows the number of listings for each category. We accomplished this simply by creating a custom template for the auto-nav block.

CMSGuide.info/guide/directory

Although this was built with 5.6, this tutorial should also work just fine with 5.7.

STEP 1: Create a Custom Template

First, we need to set up a custom template for the auto-nav block. This will be used to render a list of pages that will show the number of their child pages at the next level down.

Let's assume you're using a theme package to be used with 5.7.x. Go to /concrete/blocks/autonav and copy the view.php file. Here, we'll call our template "num_child_pages".

Then paste the file into /packages/theme_package/blocks/autonav/templates/num_child_pages.

STEP 2: Modify View File

Now, let's modify the view.php file. Look for the following code (approximately line 117):

foreach ($navItems as $ni) {

After it, copy and paste the following:

$numChildren = $ni->cObj->getNumChildren();

This adds support for showing the number of child pages. Basically, it is looking for how many child pages there are beneath the parent.

Now, replace line 120:

echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $ni->name . '</a>';

with this:

echo  '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes  .'">' '. $ni->name . ($numChildren > 0  ? ' (' . $numChildren . ')' : '') . '</a>';

This looks to see if the number of child pages is greater than 0, and if so, display the number.

STEP 3: Apply Custom Template

Now, all you have to do is apply the custom template, and you should see something like the example above!

You can apply the same logic to other blocks, such as Page List and Topic List.

Loading Conversation