Getting started

With the instructions on this page you should get your Wireframe based project up and running with ease. You may also want to check out the boilerplate site profile, which is an out-of-the-box Wireframe setup with some useful front-end-related features built-in.

Installing and setting up Wireframe

Wireframe is a ProcessWire module with some additional classes included. The process of getting started involves installing the Wireframe module, and then setting up the templates directory structure. Below you'll find step-by-step instructions for that.

  1. Make sure that you have a recent version of ProcessWire installed.

    Wireframe requires a recent version of ProcessWire to work properly. Check out the requirements page for more details. (If you try to install Wireframe on a site that doesn't fill those requirements, ProcessWire will inform you about this.)

  2. Install the Wireframe ProcessWire module.

    You can download or clone the module files from the GitHub repository, or you can use the built-in module installer in the ProcessWire admin to install the module. For more details on installing a ProcessWire module, see module installation intructions.

  3. Set up the Wireframe directories within the /site/templates/ directory, or install a new site using the site-wireframe-boilerplate site profile.

    If your site already has identically named files or folders, you can rename the included files to something else, as long as you also adjust the paths in config settings ($config->wireframe) accordingly. See Wireframe.module.php for more details.

  4. Copy wireframe.php from the Wireframe module directory to /site/templates/.

    This is the file that bootstraps Wireframe. If you want to pass variables to Wireframe during init or render phases, you can directly modify this file.

  5. Set the value of the Alternate Template Filename setting of templates you want to route through Wireframe to 'wireframe'.

    This will redirect requests for pages using those templates through the Wireframe bootstrap file. Since this solution is based on the Alternate Template Filename setting, you can use it for only a subset of your templates. In case you want to use other output strategies for other templates, that's perfectly fine.

Learn more about using Wireframe from the docs

Back to top