zastica

One day I decided that I needed to browse categories on my site. So, with the help of Tobias, I set out to code it up. Then someone asked I could write up how it works, and here it is.

Step 1: Rename Categories List

The name categories list is better served in the new DS we will create for these entries, so rename the current Categories List data source to Categories - All. If you're not using the existing list, skip this step.

Step 2: Create the Categories List data source

Create a new data source, and name it Categories List. Set the source to Entries, and tick Return empty result set.... Under the filter options, set Category to $cat and Publish to yes. Include the elements date, title, and categories, and set the sorting to Descending. Then save.

Step 3: Create the category page

Create a new page and name it Category. Set the master to whatever you normally use, and enter /cat for the url schema. You can either choose to hide this page from your navigation or not, but I prefer to keep it hidden. Under the data source XML, select Categories List and Categories - All.

Then setup the xsl for the page.

            <xsl:choose>
    <xsl:when test="$cat = ''">
    </xsl:when>
    <xsl:otherwise>
    </xsl:otherwise>
</xsl:choose>

          

Step 4: Add links

Now we want to add the links to the category page to our entries, so modify the Entries utility. First off, we want t new template for the categories, so put this at the bottom of the utility.

            <xsl:template match="categories/item">
    <a href="{$root}/category/{@handle}/"><xsl:value-of select="."/></a>
    <xsl:if test="position() != last()">, </xsl:if>
</xsl:template>

          

And where the categories are normally called from, replace that with this

            <p class="filed-under">Filed Under: <xsl:apply-templates select="fields/categories/item"/></p>

          

Now you should see the links on the entries page, and if you click on a category link and view the debug page and you can see it's pulling data correctly.

Step 5: Fill out the xsl for the Category page

There's two cases we need to consider. The first is when no category is specified. In that case, we want to print out all the categories and how many entries are in that category. (This goes in the first <xsl:when> above.

            <h2>All Categories</h2>
<ul>
<xsl:for-each select="categories-all/options/option">
    <li class="entry"><a href="{$root}/category/{@handle}/"><xsl:value-of select="." /></a>
    <xsl:text> - </xsl:text>
    <em>(<xsl:value-of select="@entry-count" />)</em>
    </li>
</xsl:for-each>
</ul>

          

The second case is when a category is specified. We want to print entry titles with links to the entry. This goes in <xsl:otherwise>.

            <h2>Category - <span class="capitalize"><xsl:value-of select="$cat" /></span></h2>
<xsl:if test="categories-list/error">
    <p><xsl:text>There are no entries in this category.</xsl:text></p>
</xsl:if>
<ul class="entries">
<xsl:for-each select="categories-list/entry">
    <li class="entry"><a href="{$root}/entries/{@handle}/"><xsl:value-of select="fields/title" /></a>
    <xsl:text> - </xsl:text>
    <span class="date">
    <xsl:call-template name="get-month">
        <xsl:with-param name="date" select="date"/>
    </xsl:call-template>
    <xsl:text> </xsl:text>
    <span>
        <xsl:call-template name="get-day">
            <xsl:with-param name="date" select="date"/>
            <xsl:with-param name="format" select=" 'short' "/>
        </xsl:call-template>
    </span>
    <xsl:text>, </xsl:text>
    <xsl:call-template name="get-year">
        <xsl:with-param name="date" select="date"/>
    </xsl:call-template>
    </span>
    </li>
</xsl:for-each>
</ul>

          

Once saved, you can navigate to a category and see all the entries in that category.