Saving the planet, one site at a time

When you need to create a new layout, for your SilverStripe site, it's so easy to create a new Page type. In small doses, this is ok. But the more Page types you create, the more choices your content editors have when creating a new page. The more classes you have muddying up your code completion. The more code you have to maintain.

Sometimes I need to create a new kind of page, and I need to ask myself this question; "What are you actually after?"

Often, all I need is a way to tie a unique URL to a unique template. Neither the template, nor the content it displays are going to change often. And I certainly don't want to add to the options content editors have when creating new, important pages.

You can find the code for this tutorial on Github.

Going green

Imagine my surprise, when Aaron Carlino announced a module to solve this very problem: Green. The module is well-documented, so I'm not going to go into too much detail here. Let me show you how simple it is to use. First, you need to install it:

composer require unclecheese/silverstripe-green

Then create a single new Page type:

use UncleCheese\Green\Controller;

class MyGreenPageType extends Page
{
    // ...alternatively GreenExtension('JSON')

    private static $extensions = [
        "GreenExtension('YAML')",
    ];
}

class MyGreenPageType_Controller extends Controller
{

}

This Page type is an anchor-point for the content and templates Green will load. Think of it like a RedirectorPage, but instead of going to a new URL, it loads custom markup.

Next, you need to define where Green looks for the content and templates it needs to load:

UncleCheese\Green\Green: 
  design_folder: "$ThemeDir/green"

You can put this in any old YAML config file you have. new-app/mysite/_config/config.yml is as good a place as any. The design_folder we've defined here will point to new-app/themes/simple/green. So, in there we can create the following files:

themes/
  simple/
    green/
      contact-us/
        index.ss
        content.yml
        page.css
        page.js

It's important to name the template index.ss and the content file content.yml (or content.json if you used the GreenExtension('JSON') extension instead). It's not important what you name the rest of the files though...

The *.css and *.js files are automatically loaded for the page. Content in content.yml is used in the template. Let's define some:

Title: "Contact Us"
Numbers:
  -
    Location: Wellington
    Number: +64 4 978 7330
  -
    Location: Auckland
    Number: +64 4 978 7330
  -
    Location: Melbourne
    Number: +61 3 8352 4431
  -
    Location: Hobart
    Number: +61 3 8352 4431
  -
    Location: London
    Number: +44 20 3637 5420

The only thing left to do is create the page, through the CMS:

You can learn more about this module, by watching the video introduction.

I'm really excited about this module, and I hope you find it as useful as I do. Have you needed to make one-off pages (like this), and been frustrated by the amount of code required to do so? Let us know in the comments!

Photo courtesy of Emory Allen.