A Quick Overview

ProcessWire is both a CMS and a development framework that is designed for creating powerful websites that can manage content in the way the client and/or developer needs.

It is not an instant plug-n-play system such as Wordpress or Joomla and does require some basic development work to create a website – especially if it is installed with the Blank profile as you should have already done.

ProcessWire does not require a huge number of plugins for most of what can be developed. Most functions can be created easily using the API and so be dedicated for the site being developed. This produces a leaner and far more powerful solution and one that is not reliant on third party development.

How it works

For a full technical explanation, I strongly suggest locking yourself in a bar for the night with Ryan Cramer who invented ProcessWire.

Here, however, is a very non-technical breakdown on how it is used.

There are four core elements to a ProcessWire site:

  • Fields
  • Templates
  • Template Files
  • Pages

Note the important differences between Templates and Template Files below.

Fields

Fields in ProcessWire have two meanings. They are the input fields in a form that are filled in by the user and they are dedicated tables in a database where the data is stored.

When you create a new field in ProcessWire you create a new database table, whatever type of field they are.

Once a field is created it can be reused by any number of templates, though it can only appear in each template ONCE. You can have twenty text fields in a template, but they must be twenty DIFFERENT text fields, i.e, text fields with different names.

Templates

Templates define groups of fields and are used for creating records – pages, in our case.

In their most basic form they are the form used to create a particular page, but they are also used for defining rules that are then applied to the pages created with those templates, such as familial relationships and permissions.

Template Files

Template files are php files stored in the templates folder of the ProcessWire installation. These define any markup used to display and manipulate the data stored in pages using Templates. Template Files are normally associated with a specific template.

Note: Templates do not require a template file if they do not require markup, for instance, if they are just being used for site settings or for a selector. More about that shortly.

Pages

Pages are unique data collections created using a Template. By data collections, I mean they are a collection of data stored in field database tables.

Unlike other CMS, ProcessWire does not have a single huge “Content” database table where all the page content is stored. This is fine for articles, but if you need to create a website that has a large variety of content types and structures, this sort of approach is limiting and confusing.

Instead, each field has its own table and the page, defined by its Template, simply collates the various fields it needs.

In consequence, a page is as equally useful as the carrier of a hundred complex fields for a data-heavy page on the website as it is as nothing more than a title to be used in a dropdown selector on a template.

The page is only a storage device, nothing more.

Those four elements, used together, will make up all of your website one way or another. It is very versatile and extensible and can handle and index a huge amount of data quickly and efficiently.

Modules

There is one other area and that is modules. For the most part, modules are tools that add power and flexibility to ProcessWire.

Unlike many other CMS, they are not normally used for things like JQuery galleries, since these are so easy to build using any JQuery plugin that you find on the internet, but rather they are used for things like Hanna Code, Listers, Sitemaps, text formatters and many other uses that add functionality to the site administration and templates.

For more information, please read about Modules in the documentation

What you have installed

The ProcessWire installation consists of two main directories:

  • Wire
  • Site

The wire directory is known as the core and is where all the main functions of ProcessWire exist.

DO NOT EDIT THE WIRE DIRECTORY!

When you update ProcessWire, the wire directory is completely replaced. If you make changes here they will be lost. However, there is no need whatsoever to edit this directory – nothing to see here!

The site directory is unique to your websites. Within the site directory are your templates, assets, modules and configuration file. When the ProcessWire core is updated, the contents of this directory are left untouched.

Everything you need to do for your site, will be done here.

Within the site directory there are three directories and a file:

  • assets
  • modules
  • templates
  • config.php

The config.php file holds some basic configuration data like database information and more can be added that is site specific. This file must be left where it is.

The assets directory contains all your images, media files and anything else uploaded in relation to a page, plus logs, cache and sessions. In this tutorial you will not need to touch this directory.

The modules directory stores any additional modules that you install specific to this website. It also includes a directory for CKEditor – this is not the main js (that is within the Wire directory), but allows you to do some central configuration and install any plugins not already installed.

The templates directory is your main place of work. This is where you will store you templates files, css, js and anything else to do with the display of your data. It contains the following:

  • errors directory – this contains a 500.html error page (which you can customise) and a readme. We can ignore this directory for this tutorial.
  • scripts – you can put javascript in this, or anything you like. If you would rather delete it and create a js directory instead, be my guest!
  • styles – another optional directory. Feel free to replace it with a css directory if you would like. Or one called Fred, if you prefer.
  • admin.php – if you don’t have this, you cannot log in to admin. DON’T DELETE IT OR EDIT IT.
  • basic-page.php - this is an example template file. We may well use it, since it is there. But you don’t have to.
  • home.php – this is the template for your home page. You need it so DON’T DELETE IT.
  • Readme – chuck it out. Or read it if you want to know why you are throwing it away.

As you can see, the contents of the templates directory looks pretty much like the root of a static site – HOLD ON TO THAT THOUGHT as it will serve you well!

Changing Admin Theme

Before we progress further, I want to change the default admin theme to the Reno admin theme. This is the theme I will be using throughout the tutorial. It ships with the basic installation, but is not currently installed.

Login to the admin of your site and navigate to Modules > Core

At the top of the list is the default admin (already installed) and the Reno theme, which needs to be installed. Click on the install button and install the theme.

Each user can now select between the default or the Reno theme. However, if you would like to make the Reno theme default for all users, open the /site/ directory and edit the config.php file

Scroll down to the end of the file and add the following line right at the end:

$config->defaultAdminTheme = 'AdminThemeReno';

Save the file and the Reno theme is now the default for all users.

So, let’s create a site, he said in a patronising tone.

Next: Stage One – Creating Some Site Settings »


  1. A Quick Overview
  2. Stage One – Creating Some Site Settings
  3. Site Structure and the Template directory
  4. The HTML website
  5. Panels from other pages
  6. Test Your Knowledge

Comments

  • Chris

    Chris 3 years ago 50

    HI,

    I think there is a small error in the require_once, which is missing the quotes and threw an error for me.
    Changing it in fixed it for me.

  • Edward

    Edward 3 years ago 20

    Nice and easy to follow tutorial. Just discovered process wire today and am already in love with it. Thanks

  • Attila

    Attila 3 years ago 50

    Field duplication is under "Actions", not "Advanced".

  • Bryson

    Bryson 2 years ago 00

    When creating the image_single field, if it's left as default (as the tutorial describes), it returns an image array. An array breaks the use of image_single->size(). Changing the field's max files value to 1 fixed this. The tutorial should specifically indicate that. Thanks to the forums for the answer. Existing code above works when modified to image_single->eq(0)->size().

  • Arthur Prather

    Arthur Prather 2 years ago 00

    Above head.inc replace with only if includes.inc are inside includes folder. Thank you for wonderful tutorial.

  • Barbara

    Barbara 9 months ago 00

    Had to take a couple of the ul and li out of the CSS. You do not need "ul #menu" or "li .sub-menu" since the #menu is the id for the ul and .sub-menu is the class for li.

    Other than that it was a really good tutorial and thanks for helping me learn!

  • Vika

    Vika 4 months ago 00

    Thank you Joss! It was really helpful, clear and easy to follow, adapt and change.
    That's what I built with your help (and I never learned php before)
    http://www.pointof.biz/PointOf/

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.