Tuesday, 24 September 2013

First Time: Roots Wordpress Theme Development

Bootstrap provides some powerful assistance when it comes to styling and responsive layouts. Combine this with the ease of developing a user-friendly and featured system with WordPress and the result is Roots.

 

A first experience with Roots

Roots provides a few directions on how to get started which I'm currently working through. The first thing you notice is that this is installed like many other themes. First you need to install WordPress by creating a database and running its installer. Using Apache I can create a virtual host:

Listen 8081

<VirtualHost *:8081>
 DocumentRoot /var/www/html3
</VirtualHost>  

Now that path on my Linux system is available at http://127.0.0.1:8081, or http://localhost:8081. After installing 'node.js' and grunt, I can drag the Roots theme into the WordPress templates folder, after which I can install the template from the administrator panel. Of course, I edited 'style.css' to reflect that this site was to be authored by myself.

Once I had activated the Roots theme, none of the default CSS styling was appearing. At first I thought I had run into a common Roots problem which was widely discussed on a few forums. My Apache logs showed that 404 Not Found errors were being generated for JavaScript and CSS files. My '.htaccess' file in the WordPress root folder indicated that certain URL paths should be rewritten to route to other paths on the webserver. It seemed these rewrites weren't occurring, so I thought perhaps mod_rewrite was missing from Apache. A quick phpinfo() found that Apache had rewrite as a loaded module.

To make a long story short I had to update my Apache virtual host configuration file and restart the server:

Listen 8081

<VirtualHost *:8081>
 DocumentRoot /var/www/html3
 <Directory /var/www/html3>
  AllowOverride All
 </Directory>
</VirtualHost>

I'll update this as I continue my peek into Roots.

Credit is due to: Online syntax highlighting