Silverstripe 3.1 Custom Siteconfig with slider email and more. Part 1

Over 2 parts, I will teach you how to create a custom slider on your website. I will also go through data obects so you can add other fields on your design such as Facebook URL, Google+ URL, Email, Phone number and so on.

In part 1, we will cover the Master Slide jQuery download, upload them to our website and write the custom siteconfig. In part 2, we will actually add the slider to our website homepage.

1. Lets add file named CustomSiteConfig.php under mysite/code/ folder with code:

class CustomSiteConfig extends DataExtension {

	private static $has_many = array( 
		'Slides' => 'Slide' 
	private static $db = array(
		'Email' => 'Text',
		'Phone' => 'Text',
		'GooglePlus' => 'Text',
		'Facebook' => 'Text',
	private static $has_one = array(
		'LogoImage' => 'File'

	public function updateCMSFields(FieldList $fields) {
		$config = GridFieldConfig_RecordEditor::create();
		$sliderfield = GridField::create( 
		$fields->addFieldToTab('Root.Slider', $sliderfield);
		$fields->addFieldToTab("Root.Main", new UploadField("LogoImage", "Logo picture"));
		$fields->addFieldToTab("Root.Main", new TextField("Email", "E-mail aadress"));
                $fields->addFieldToTab("Root.Main", new TextField("Phone", " Phone number"));
                $fields->addFieldToTab("Root.Main", new TextField("GooglePlus", "Google plus site url"));
                $fields->addFieldToTab("Root.Main", new TextField("Facebook", "Facebook site url"));

2. Now lets make the dataobject Slide by adding file named Slide.php under mysite/code/ folder with code:

class Slide extends DataObject {

	private static $db = array ( 
		'Link' => 'Varchar(255)', 
		'Name' => 'Text',
		'Durnation' => 'Text'
	private static $has_one = array ( 
		'SiteConfig' => 'SiteConfig', 
		'Image' => 'Image', 
	private static $summary_fields = array(
	public function getCMSFields() {
		$fields = parent::getCMSFields();
		$fields->addFieldToTab('Root.Main', TextField::create('Link'));
		$fields->addFieldToTab('Root.Main', TextField::create('Name'));
		$fields->addFieldToTab('Root.Main', TextField::create('Durnation'));
		$sizeMB = 6; // 2 MB 
		$size = $sizeMB * 1920 * 1080; // 2 MB in bytes
		$uploadField = UploadField::create('Image', 'Slide Image');
		$fields->addFieldToTab('Root.Main', $uploadField);
		return $fields; 

I added name because then you can sort the slides easier in backend and also some javascript sliders need unique names in div class to work.

3. Now lets add the slide and other fields to siteconfig for that we need to add this line below to mysite/_config.php :

Object::add_extension('SiteConfig', 'CustomSiteConfig');

4. Because I want the slider to only work on the homepage I also add a file called Homepage.php under mysite/code/ folder with code:

 * Defines the HomePage page type
class HomePage extends Page {
   static $db = array(
   static $has_one = array(
class HomePage_Controller extends Page_Controller {

5. Dev/build your code using in your browser address line, it will add the fields to Siteconfig

6. Go to and fill the fields
6. Go to tab slider and add slider with images, names and link to pagesadd-slides

7. Download Master Slider jquery and upload the folder named masterslider  to themes/yourtheme/ folder

In next part we add the slider and other stuff like logo, email, phone and so on to  to homepage and theme files.

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *