Adjusting the CMS interface in Silverstripe

Today we are learning more about the CMS called Silverstripe. I've written about it before when we built the first components of a review site. In a follow up to this article we will see how we can get around having to type out all the book information manually, but before we can do that we need to learn how we can expand the functionality of the CMS interface. So here are a few simple tricks at hand given a standard Silverstripe installation (v4)

Add a link to the admin page

Silverstripe provides us with a template variable called $AdminURL which we can use to create a link to the admin page. So how we could add a link to the admin page with the simple theme (which is the default theme for Silverstripe) would look like this:

.\themes\simple\templates\Includes\Navigation.ss

<nav class="primary">
    <span class="nav-open-button">²</span>
    <ul>
        <% loop $Menu(1) %>
            <li class="$LinkingMode"><a href="$Link" title="$Title.XML">$MenuTitle.XML</a></li>
        <% end_loop %>
        <li><a href="$AdminURL" title="Admin">Admin</a></li>
    </ul>
</nav>

Add a link in the CMS navigation menu

We can adjust the vertical CMS navigation menu which is located at the left in the admin interface. This menu usually contains navigation to administrate pages, campaigns, files, etc. This menu is called LeftAndMain MenuList. Its appearance and content is rendered with the template vendor\silverstripe\admin\templates\SilverStripe\Admin\Includes\LeftAndMain_MenuList.ss. We can inject our own template by populating same "namespace". By doing this, SilverStripe will prioritize our template - be it just a partial template. Here is how we do that:

Copy the template LeftAndMain_MenuList.ss
Create these nested folders in the .\app folder: templates\SilverStripe\Admin\Includes\
Paste the template into the templates\SilverStripe\Admin\Includes\ folder.

As you may have recognized, we now have same folder structure in the app\templates folder as we found in the vendor\silverstripe\admin\templates\. This is all that it takes to inject our own template into the CMS interface. Currently though, we would not see any difference as we just did a copy and paste. So what we will do next is modify our template.

<ul class="cms-menu__list">
    <% loop $MainMenu %>
        <li class="$LinkingMode $FirstLast <% if $LinkingMode == 'link' %><% else %>opened<% end_if %>" id="Menu-$Code" title="$Title.ATT">
            <a href="$Link" $AttributesHTML>
                <% if $IconClass %>
                    <span class="menu__icon $IconClass"></span>
                <% else_if $HasCSSIcon %>
                    <span class="menu__icon icon icon-16 icon-{$Icon}">&nbsp;</span>
                <% else %>
                    <span class="menu__icon font-icon-circle-star">&nbsp;</span>
                <% end_if %>
                <span class="text">$Title</span>
            </a>
        </li>
    <% end_loop %>

    <%-- Let's add a link to DEV here --%>
    <li>
        <a href="https://dev.to">
            <span class="menu__icon font-icon-circle-star">&nbsp;</span>
            <span class="text">DEV</span>
        </a>
    </li>
</ul>