Posted on 7th June 2014 by Andi Wilkinson
Posted in Web DevelopmentTagged , , ,
roots installation

New Roots Installation – How to set it up

LEGACY. Roots is now Sage.

This post looks at Roots installation. Developing with WordPress as a Content management tool can save you hours of time. Far from being just a blogging platform, it is now host to at least a quarter of new sites on the web. I currently use WordPress for most of the sites I develop. I’m a big fan of how easy it is to manage content at the back end. For a developer, however, the front end can be a little more tricky as I discovered.

After looking into many frameworks for development, such as the 960 Grid, Underscores, Bootstrap to name a few, I stumbled across Roots. It is basically a blank set of theme files based on the mark up for the HTML5 Boilerplate, incorporating Twitter Bootstrap and a host of other features. Dubbed as one of the best Bootstrap starter themes, It can give you a head start in structuring and organising your project.

So, here are my top tips on basic setup before you start writing your first theme.

Setting Up Your Roots Installation

I am going to assume you develop locally using MAMP, WAMP or suchlike. If you don’t you really should. It will save you eons of time. so firstly set up a new database on your localhost.

next, download the latest version of WordPress from wordpress.org.  Its best to unzip it directly to where you store your local sites, so that you don’t lose any hidden files. Next, rename the whole WordPress folder to the name of your site.

Download the starter theme

Next you want to download the Roots starter theme – you can get this on Roots Github Page – they are forever improving it, so make sure you have the latest version, though there is no need to update. Unzip this directly into the themes folder of WordPress. Next, rename the folder to whatever creative flight of fancy takes you for your theme name.

Go to the path for your local installation, if you are using MAMP then it may be localhost:8888. If you have MAMP Pro which I would recommend, then you can set up a separate URL for each site you are working on locally. Lets just assume you are using MAMP. Your path would be localhost:8888/mynewsite/ – This should take you to the famous WordPress install screen.

how to install wordpress screen

The database will be the name of the database you have just created in MAMP.  For a Roots installation the username is root and the password is root. The database host is localhost and the table prefix you can change to something more secure if you wish. There are many thoughts on whether or not it is necessary to do this. I will leave that to your research but I always do it for good measure.

On your wp-config file, generate new authentication keys from this link

Next Steps

Go into your Roots theme and write your theme info into the style.css.  – Here’s an example.

/*
Theme Name:         Jam Bam Thankyou Ma'am
Theme URI:          www.creativjam.com
Description:        Jam Bam Thankyou Ma'am is a Bespoke WordPress Template built for the client. ME!
Version:            1.0
Author:             CreativJam Limited, Andonette Wilkinson
Author URI:        http://blog.creativjam.com

License:           Licenced for use by ME on this site only. 
License URI:       http://blog.creativjam.com
*/

change the screenshot. – you can make one for each theme you create, or you can be really lazy like me.

You will need to install grunt via the terminal. – You can find out how to do this here. Then go to the path of your website in the terminal, it will be something like this (hopefully) cd ~/Desktop/WebDev/ProjectName/wp-content/themes/themename. type npm install and watch grunt install.

*Update – If this doesn’t work, you may want to head over to Node and install Node!

at this point, i copy my standard set of plugins across from my last project file to this one. I just find it easier to do it this way. Look out for another post later on my most used plugins. When all this is done, I can activate the theme and any plugins I will be using to develop with.

Style Sheets

all of your styling is done via the app.less file. If you have installed grunt, then just type in ‘grunt watch’ and any changes you make in your less file will be output to the main.min.css each time you save. Don’t know any Less? Luckily less files accept normal css language too. But seriously, I recommend you get to grips with it for speeding up your workflow.

if you really don’t know how to do this right now then just add style sheet so you can see an instant reflection of the style changes. – to do this add the css file to lib/scripts under the existing main-min.css.  To test its working add a 1 pixel solid border to all elements (*) – even though thats a bit hacky, I will admit, I did this the first couple of times before I got to grips with Less.

now this is all done, you are ready to start writing all your lovely code. – Have a look at some more tips for roots on my other blog post