Adjusting the CMS interface in Silverstripe
Tags: php, silverstripe
Published: 2021-12-30 16:22:40

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` 
```twig
<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.  
  
```twig
<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>
```

Having done this, we now have an excellent little link to go straight here to DEV and read an article about web development 😉

![Side navigation with a link to dev.to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh1cvjosd9y2b3ivlz0f.png)

## Additional readings
* [Silverstripe CMS architecture](https://docs.silverstripe.org/en/4/developer_guides/customising_the_admin_interface/cms_architecture/)
* [Silverstripe CMS components](https://silverstripe.github.io/silverstripe-pattern-lib/?selectedKind=Admin%2FActionMenu&selectedStory=Single&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fnotes%2Fpanel)