How did I go with updating a WordPress theme to Roots when using IIS

This post is written by a total newbie, to other total newbies and I am not going to be pretending I know “The shit”.

I found this spanking new WordPress theme today http://roots.io/ It is based on Bootstrap 3.0 and it is just a starter template, it is well written and has a big community. I thought I will give it a go and since I am inpatient and prone to risky behaviors, I thought it is a great idea to install it on my life blog straight away. Who needs development environment! Not to mention I was not particularly attached to my current template

First off : how to install it. I found these instructions as written in foreign language to me. But i did not give up, I dig and dig and dig, and came up with these steps:

1. Start from downloading latest Roots theme from Github from here. You just take zip file, look for Download ZIP

2.Once you downloaded a file, unpack it and rename.

3.Open style.css and modify theme name etc. just to recognize your new theme.

 /*
Theme Name:         SharePoint farmer roots theme
Theme URI:          http://roots.io/
Description:        Roots is a starting WordPress theme made for developers that's based on HTML5 Boilerplate and Bootstrap. <a href="https://github.com/retlehs/roots/contributors">Contribute on GitHub</a>
Version:            0.1
Author:             Anna 
Author URI:         http://sharepointfarmer.com/

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/

4.Download node.js and install it  – that is luckily simple Wizard installation. It is prerequisite to install Grunt, that will be generating some minimized files for us.

5.Open command prompt or terminal. Navigate to the folder with your WordPress Roots theme.

6.Run this command to activate administrative mode, it will ask you for your administrator’s password, same that you use when installing software:

sudo -s

7.Run command :

npm install -g grunt-cli

Now it will run for a while, the screenshot below is showing errors, they are due to the fact that I did not run sudo for the first time, this was the outcome

installing grunt

8. After running this, run

npm install

9. Copy entire theme folder to your WordPress server to the /wp-content/themes folder

The new theme will be available in wp-admin > Appearance, if you preview it, you will find no styles, just plain html.

I was stuck on that because I was quite scarred to Apply the theme that does not work, but curiosity took people to the moon before, so I thought I will also give it a go.

I applied the theme and it was broken. It was because of URL rewrites, my pages could not find css and js files under a theme folder. To solve it, update your web.config for IIS server or htaccess file for Linux server.

The code for web.config is here.

Here is the code anyway, replace roots-sharepointfarmer-template with how you named your theme folder :

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Roots Rewrite CSS" stopProcessing="true">
<match url="^assets/css/(.*)" ignoreCase="false" />
<action type="Rewrite" url="/wp-content/themes/roots-sharepointfarmer-template/assets/css/{R:1}" appendQueryString="true" />
</rule>
<rule name="Roots Rewrite JS" stopProcessing="true">
<match url="^assets/js/(.*)" ignoreCase="false" />
<action type="Rewrite" url="/wp-content/themes/roots-sharepointfarmer-template/assets/js/{R:1}" appendQueryString="true" />
</rule>
<rule name="Roots Rewrite IMG" stopProcessing="true">
<match url="^assets/img/(.*)" ignoreCase="false" />
<action type="Rewrite" url="/wp-content/themes/roots-sharepointfarmer-template/assets/img/{R:1}" appendQueryString="true" />
</rule>
<rule name="Roots Rewrite Plugins" stopProcessing="true">
<match url="^plugins/(.*)" ignoreCase="false" />
<action type="Rewrite" url="/wp-content/plugins/{R:1}" appendQueryString="true" />
</rule>
<rule name="WordPress Rewrite" patternSyntax="Wildcard">
<match url="*" />
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="index.php" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>

After that, the theme styles are working.

It looks rather ordinary but here is where the journey begins.

Not it is finally time to build dev environment.

Note: steps 4-8 are only necessary if you plan to update your theme as it is just a preparation to future build process. You could skip them and just copy the whole theme to your server without one modification.

 

 

 

One Response to “How did I go with updating a WordPress theme to Roots when using IIS”

  1. Mark Gavalda

    Thank you thank you thank you! You saved me with the rules file, I was pulling my hair out to set up a Roots based theme on an IIS server!

    Reply

Leave a Reply