Next steps

Step 3 – go get a framework

I am going to assume that you have already researched what framework you are going to use so that I have don’t have to sit here for three weeks while you make up your mind.

Download the framework and extract it into the templates folder. Most frameworks that I have used (like Bootstrap and Foundation) tend to use directories called css and js so these wont conflict with the scripts and styles directories already there. You can throw those out, by the way, though you need to keep the errors directory.

Depending on what framework you have chosen you should now have a templates directory that looks something like:

/site/
   templates/
      css/
      errors/
      js/
      img/
      sass/
      ​less/

Step 4 – Referencing CSS and JS

The only real difference between using a framework in the genuine root of a website and using one for ProcessWire is the paths needed for referencing the various bits and pieces. Once those are set you can proceed as normal.

Most installs of frameworks I have seen include notes on how you should set out your HTML before adding any structure, especially in regards to referencing and CSS and JavaScript. You can use that guide as is, but you need to change the URLs slightly.

The ProcessWire API comes complete with a value $config->urls->templates – this is the web path to the templates directory. So all that is required is to use that value as part of the reference.

Simply use the following in your <head>:

<link rel="stylesheet" type="text/css" href="<?php 
  echo $config->urls->templates; ?>css/bootstrap.min.css" />

And for JavaScript:

<script type="text/javascript" src="<?php 
  echo $config->urls->templates; ?>js/bootstrap.min.js"></script>

The actual details of what needs to be referenced will be in the particular framework documentation.

I suggest you follow the recommendations about what should be in the <head> of the template and what should be at the end, just before the </body> tag – I normally put JavaScripts at the end to make the page load more efficiently.

If you do use the supplied head.inc and foot.inc in the default ProcessWire profile, remember to delete the existing references as you will confuse everyone – especially my dog.

Step 5 – There isn’t one!

And that is it – you have installed your framework and are ready to lose yourself in the design process. But just to finish off, here are some useful notes if you are new to frameworks:

Next: Useful notes  »


  1. Introduction
  2. Next steps
  3. Useful notes