First Silverstripe Project

• A local development for Silversripe CMS is required to follow along. One can easily be set up by following the Docker and Silverstripe CMS tutorial.
• The Silverstripe extension and PHP Intelephense for VSCode is recommended.
• A static website or website template is recommended. Industrious by Templated will be used in this tutorial.

1. Create a Silverstripe CMS project by running the following in the directory containing the docker-compose.yml file from Docker and Silverstripe CMS.
   

   docker-compose run --rm silverstripe composer create-project silverstripe/installer .

2. Build your database by going to http://localhost:8080/dev/build.
3. Create a folder in mysilverstripeapp/themes directory. This folder will contain your Silverstripe templates and static files such as CSS, Javascript, fonts and images that are not managed through the CMS.
4. Add the name of your theme folder after $public in mysilverstripeapp/app/_config/theme.yml.

1. Create a templates folder in your theme folder and add a Page.ss file with the content of your static index.html page.
2. When visiting http://localhost:8080/?flush you should see an unstyled version of your static homepage.
3. Copy your assets from static website to your theme folder (CSS, Javascript etc.).
4. Expose the theme directories/ files that should be available to page visitors by adding them in an "expose" array in the "extra" section of your mysilverstripeapp/composer.json and running.

   docker-compose run --rm silverstripe composer vendor-expose

5. The exposed files are available at http://localhost:8080/_resources/themes/mythemedir/... References to stylesheets, javascript etc. should be updated accordingly.
6. Visit http://localhost:8080/?flush and you should see you page with the correct css and javascript.

By default, Silverstripe rewrites hash link (for example href="#menu"). This can cause issues with javascript that initiates event listeners based on hash links. These will either have to be rewritten, or hash link rewriting can be turned off by creating an app.yml file in mysilverstripeapp/app/_config with the following content.

It is good practice to split pages into smaller components. This makes a project easier to manage and allows components to easily be used in multiple places.

1. Create an Includes directory in your templates folder.
2. Cut the components from your Page.ss template and create .ss template files in your Includes directory.
3. Include the components that should be used on all your pages in your Page.ss template using <% include Header %>. (Header, navigation, footer etc.)
4. This should result in something similar to the code bellow.
5. Visiting http://localhost:8080/?flush should show you the base of your website without any page specific content.

1. Create a Layout folder in your templates directory.
2. Add a Page.ss file to your Layout directory with the generic page specific markup (Not already in the Page.ss in your templates root)
3. Add the Layout ($Layout) variable to your templates root Page.ss body. This is where page specific content will appear.
4. When visiting http://localhost:8080/?flush you should see your generic page

Replace the static links in the navigation with the following snippet.

 <% loop Menu(1) %>
   <li><a href="$Link">$MenuTitle</a></li>
 <% end_loop %>

This will loop through all top level pages that are set to display in navigation (Setting in Silverstripe admin) and create a navigation item.

Replace the static title and content section in your Layout/Page.ss file with the SIlverstripe fields $Title and $Content. These are fields that all Silverstripe pages get by default and are available to edit from the administrator interface.

When visiting http://localhost:8080/?flush  you should be able to navigate to default Silverstripe CMS pages and see their default content.

1. Create a Pages folder in your mysilverstripeapp/app/src directory.
2. Create a HomePage.php in your Pages folder and add the following content. This will create a new page type in the CMS called Home Page with a fields for Lead, Hero Video and Hero Image.
3. Build the database by going to http://localhost:8080/dev/build.

To upload large files, such as the hero background video, add the following lines to your mysilverstripeapp/public/.htaccess file.

php_value upload_max_filesize 20M
php_value post_max_size 50M

1. Create a HomePage.ss in your templates/Layout folder with the following content. This includes the components that were extracted from the static index.html
2. Update the Banner.ss file in your temlates/Includes folder with the CMS content variables.
3. When visiting http://localhost:8080?flush you should see a new homepage with a hero rendered with content from the CMS.

1. Log in to the admin interface using credentials admin:password (Set in docker-compose.yml) at http://localhost:8080/admin.
2. Click on Pages in the left section and click on Home.
3. Select the settings tab in the top right.
4. Select Home Page in the Page type dropdown.
5. Save page.
6. Select the Content tab and add desired content.

1. Install a field for selecting a highlight icon using

   docker-compose run --rm silverstripe composer require buckleshusky/fontawesomeiconpicker

2. Create a DataObjects folder in your myslilverstripeapp/app/src directory.
3. Add a Highlight.php in your DataObjects folder.
4. Add the following to your imports in HomePage.php.

   use SilverStripe\Forms\GridField\GridField;
   use SilverStripe\Forms\GridField\GridFieldConfig_RelationEditor;

5. Add the following relation to Highlights in your HomePage.php. (Bellow $has_one)
   

   private static $has_many = [
     'Highlights' => Highlight::class,
   ];

6. Add the following before "return $fields" inside your HomePage.php getCMSFields method to add a field for Highlights.

   // Add grid field for highlights
   $gridFieldConfig = GridFieldConfig_RelationEditor::create();
   $highligthsField = GridField::create('Highlights', 'Highlights', $this->Highlights(), $gridFieldConfig);
   $fields->addFieldToTab('Root.Highlights', $highligthsField);

Update highlights template to include the CMS highlights. This will add the CMS content field in the top section, check if any highlights exists and add them with title, icon and content from the CMS.

1. Build database by going to http://localhost:8080/dev/build.
2. Log in to CMS at http://localhost:8080/admin.
3. Click on Pages in the left section and click on Home.
4. Click on the highlights tab and add highlights. Remember to publish any highlights you want to be visible.
5. When visiting http://localhost:8080?flush, you should be able to see your highlights.

1. Add the following to the imports of your HomePage.php.

   use SilverStripe\Forms\CompositeField;
   use SilverStripe\Forms\HeaderField;
   use SilverStripe\Forms\HTMLEditor\HTMLEditorField;
   use SilverStripe\Forms\TextField;

2. Add the following to the $db in your HomePage.php.

   'CTAHeading' => 'Varchar',
   'CTAContent' => 'HTMLText',

3. Add the following to the $has_one in your HomePage.php.
   

   'CTAImage' => Image::class,

4. Add the following to the $owns in your HomePage.php.

   'CTAImage',

5. Add the following after "$fields->addFieldToTab('Root.Highlights', $highligthsField);" in the getCMSFields method of your HomePage.php
   

   // Add field for CTA section
   $ctaCompositeField = CompositeField::create([
    HeaderField::create('CTA'),
    TextField::create('CTAHeading'),
    HTMLEditorField::create('CTAContent'),
    UploadField::create('CTAImage', 'CTA background image'),
   ]);
   
   $fields->addFieldToTab('Root.Main', $ctaCompositeField, 'Metadata');

6. Build your database by going to http://localhost:8080/dev/build.
7. Add CTA content to your home page in the CMS.
8. Modify your CTA.ss file to use the content from the CMS.
9. When visiting http://localhost:8080?flush, you should see your new CTA section.

Unlike highlights, testimonials will be global and managed from its own tab in the left section of the CMS (using model admin).

1. Create a Testimonial.php in your data object directory.
2. Create a ModelAdmin folder in your mysilverstripeapp/app/src directory.
3. Create a TestimonialsModelAdmin.php in your ModelAdmin folder.
4. Build your database.

1. Add the following method to your Page.php in mysilverstripeapp/app/src directory. This will make testimonials available for use in your templates.

   // Return all testimonials
   public function getTestimonials() {
    return Testimonial::get();
   }

2. Modify your Testimonial.ss to use the CMS data.
3. Add your testimonials in the CMS.
4. When visiting http://localhost:8080?flush, you should see your testimonials.

The left settings tab (Site config) in the CMS is used to manage some site wide settings such as site name. In the Site config we will add a footer tab where social media links etc. are managed.

1. Create an Extensions folder in the mysilverstripeapp/app/src directory.
2. Add a SiteConfigExtension.php in the Extensions folder.
3. Add an extensions.yml to your mysilverstripeapp/app/_config directory.

In order to select which pages are displayed in the footer section, a "Show in footer" option will be added in the settings tab of all pages.

1. Add the following in the $db in your Page.php.

   'ShowInFooter' => 'Boolean',

2. Add the following methods to your Page.php. This will add a checkbox for the "Show in footer" option and make these pages available for use in the templates.
   

   public function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Settings', CheckboxField::create('ShowInFooter'), 'ShowInSearch');
    return $fields;
   }
   
   // Return all pages where ShowInFooter is set to true
   public function getFooterPages() {
    return Page::get()->filter(['ShowInFooter' => true]);
   }

3. Build your database and add a few pages to the footer in the CMS.

Modify your Footer.ss template to use the CMS content. The $SiteConfig variable is used to access fields from the CMS Settings tab where the footer settings and more are available.

1. Replace the index.html in the href attribute with /.
2. (Optional) Add $SiteConfig.Title as the text node. This will display the site name set in the Settings tab of the CMS.

Some images used in CSS are replaced with inline styling and images from the CMS, these image links should be removed from the CSS files.