Hey there, I'm Jonathan, a freelance digital consultant, specialising in UX/UI Design.

I help companies design and develop beautifully simple user interfaces. I work with a huge variety of clients including companies like, Smith & Nephew, KLM, Durex and the National Aids trust.

Free minimal responsive theme for Perch CMS (Part 2)

Posted By Jonathan Clift on 11 August 2014

I've now finished working on my free minimal responsive theme for Perch CMS. The first thing to say is that I call it a "Theme" but as I mentioned in Part 1, perch doesn't really offer theme support so what I'm really doing here is just talking you through how you can apply this design into the Perch CMS framework. I'm going to make the assumption that you have already purchased a Perch license and have it installed on the server you wish to run it from.

Firstly download the required files (HTML structure, CSS, JavaScript etc)

Once your default perch installation is up and running, the next thing to do is to download my zip file which contains the HTML structure, CSS, JavaScript and perch template files that you need. You can see in my screenshot below that this will include things like an index.php which has all the HTML structure and perch_content tags to get going with.

Perch Theme - CMS

Copy the appropriate files into the same locations on your Perch setup

The next thing to do is to copy the files in the download into there respective locations on your perch setup. You'll need to do the following copy css, js, img folders and place them in the root of your site. Then copy index.php and place that in the root of your site too. Finally I've provided a couple of "perch content templates" which you just need to copy into the same location on your site. So copy portfolio-thumbnails.html and contact_form.html into perch/templates/content folder.

Download and install additional Perch apps and editors

I make use of 2 addons to the Perch CMS which are Perch Forms and the CKEditor plugin. Both these need to be downloaded from the official Perch website and installed as per their instructions.

Perch CMS website

Finally you need to setup the content regions so that you can input data

If you navigate to the root of your perch installation via your web browser, this will register the editable regions within the Perch admin. Login to perch and you will see lots of new regions to configure for the Home/Index page. You now need to configure these regions the same as the screenshot below to ensure users can enter the right data. Perch Theme Regions

Add your content and you should be ready to go

Once you've setup all the regions you just need to add your content and you should be ready to go.

Download the files and take a look at the live demo

Download the perch theme files take a look at the live version here.

A few additional notes

The first thing is that I'm making the assumption whoever is following this guidance has some knowledge of using Perch already and is just looking to make use of the design I've created. This is not a comprehensive guide of how to setup and use Perch, any Perch specific guidance can be found over on their official docs or the official forums. Secondly, please note that I renamed my perch folder to 'cms' and therefore the runtime include at the top of the index.php page is cms/runtime.php, obviously this will need to be set the root folder you create which will be 'perch' as default. Finally, any questions feel free to put them in the comments or contact me on twitter as I'm more than happy to help out if I can.