About Wireframe

What is Wireframe, where did it come from, who is it for – and what sets it apart from all the other ProcessWire output strategies, or output frameworks, out there?

What is Wireframe?

If you've been around ProcessWire for a while, there's a good chance that you're familiar with the concept of output strategies. This concept simply refers to the way you organize your template files – the files that typically contain both markup and business logic for your site.

Wireframe is an output framework for ProcessWire. It provides a way to build ProcessWire powered sites using a model-view-controller inspired architecture, proper separation of concerns, and other software development best practices.

Wireframe is easy to get started with, and provides developers a solid foundation for building all types and sizes of websites.

Who is it for?

Using Wireframe is easy, so technically it's a tool for anyone interested in developing a website (or a web app) using ProcessWire. That being said, if you're just interested in taking an existing site profile and making slight modifications to the front-end and calling it a day, you may be better off looking at other solutions.

On the other hand if you're interested in applying a software development mindset to ProcessWire site development, you're quite likely going to enjoy using Wireframe.

Show me the code!

If you're like me, by now you're probably itching to see some code. Wireframe has a bunch of important components: Controllers contain code, Layouts define the basic "frame" for front-end views, and View Scripts provide a way to render page-specific content.

Bootstrap file

Bootstrap file is responsible for initiating the Wireframe module. You can use this file to pass variables to Wireframe – these become available in the View, and you can access them from all your layout, view, and partial files.

/site/​templates/​wireframe.php

<?php namespace ProcessWire;
  
// init Wireframe
$wireframe = $modules->get('Wireframe');
$wireframe->init();
  
// render the page (the render method takes an array of optional arguments
// for use in the View)
echo $wireframe->render([
    'lang' => 'en',
]);

Controller

Controllers are optional components, basically something to mediate between View and Model (latter of which usually means ProcessWire itself). In Wireframe the Controllers are where your business logic belongs. Controllers are named after templates: the controller for the home template should be called HomeController, and so on.

/site/​templates/​controllers/​HomeController.php

<?php
  
namespace Wireframe\Controller;
 
/**
 * HomeController is the Controller for the home template
 */
class HomeController extends \Wireframe\Controller {
  
    /**
     * Init method gets executed automatically
     */
    public function init() {
        // Send a list of child pages to the View
        $this->view->children = $this->page->children;
    }
  
    /**
     * Regular methods become accessible as params in the View, which includes
     * both Layout and View Scripts.
     *
     * @return string
     */
    public function login_status() {
        // Pass user name to the view
        $out = 'Not logged in';
        if ($this->user->isLoggedin()) {
            $out = "Logged in as {$this->user->name}";
        }
        return $out;
    }
}

Layout

Layout files – of which your site can have only one, none at all, or multiple – are usually where the "shared parts" of your pages live. Wireframe promotes this pattern instead of including separate header, footer, etc. partials in all of your view scripts for the sake of maintainability. (Your layout files can, of course, include as many partials as you need.)

/site/​templates/​​layouts/​default.php

<!doctype html>
<html lang="<?= $this->lang ?>">
    <head>
    ...
    </head>
    <body>
        <?= $placeholders->default ?>
    </body>
</html>

Views

Views are specific to a single template, and usually represent a single page when it's rendered on the site. Each template may have multiple views, which allows you to define as many different ways to access your content as you might need. For an example, your home template might have a default HTML view for regular site visitors, an RSS view, and a JSON view for some sort of API to consume.

/site/​templates/​​views/​home/​default.php

<h1><?= $page->title ?></h1>
  
<div class="body">
    <?= $page->body ?>
</div>
  
<div class="login-status">
    <?= $this->login_status ?>
</div>
Back to top