This is a beginner’s guide to ProcessWire; everything you need to know about creating your own websites with this popular PHP-based CMS.
Introducing ProcessWire
ProcessWire is a PHP based, open source CMS, built around a “jQuery-inspired API” which makes “content management easy and enjoyable”. ProcessWire allows you to build with, and on-top of the API, making it ideal for blogs, portfolios, stores, news sites and even as an API endpoint for external apps and websites (made with PW showcase). It has a robust CMS admin that is simple enough for lay users to understand, free from distracting bells and whistles. In short, it presumes little and gives you access to change nearly everything if needed.
ProcessWire has an active community and boasts paid and free modules for the most common front-end and admin functionality. I’ve also found that asking (politely) on the forums can yield new modules or module help for your specific use case.
One of the many reasons I’ve personally stuck with PW is its flexibility when theming. It allows me to create fully AJAX driven websites, with clean url fallbacks at lightning speed.
This tutorial will guide you through the stages of installing your first ProcessWire website, and give a brief tour of some of PW’s functionality.
Note: This tutorial does assume some knowledge on your part. It assumes you are familiar with buying a domain and creating a MySQL database on a service like plesk, mamp, your own web server or similar. It also assumes you have access to upload files to the server or local filesystem.
Installing ProcessWire
For this there are some minimum requirements:
- A Unix or Windows-based web server running Apache (although I’ve been able to get PW working on Nginx also)
- PHP version 5.3.8 or newer with PDO database support
- MySQL 5.0.15 or greater
- Apache must have
mod_rewriteenabled - Apache must support .htaccess files
- PHP’s bundled GD 2 library
Tip: Not sure whether you have the above requirements? ProcessWire will run a check during the installation process.
Begin by downloading the latest stable version of PW from processwire.com/download/, unzip and upload the contents to your site folder. The first time you access the site via a web browser you will be directed to /install.php where you’ll be guided through the install screens:
Site Installation Profile
Beyond the welcome screen you’ll be introduced to “Site Profiles”. These are a combination of the site theme, modules, configuration and assets. PW comes with some pre-made profiles, but it also means you can prepare profiles for quick exports and installs of sites of your own.
At this point I would choose site-default from the list. This will give you a basic theme with no extra modules and a few pre-made pages.
Compatibility Check
PW will automatically check your system for requirements. You’re aiming to have all of these checkboxes green if possible, however you can proceed to the next page if needed (e.g. if you are running Nginx instead of Apache).
Connection
The next page you’ll encounter asks for your MySQL database credentials, folder permissions and domain names. It will automatically fill in the current domain that you’ve accessed the installer through. If successful, PW will notify you of the successful access of the database and allow you to add an admin user and admin URL (I find this hugely useful as you’re not stuck with a default URL like /wp-login or /user. I tend to opt for /admin or /cms instead of the default /processwire).
Bingo! You have your first ProcessWire site, together with an admin section and an admin user.
ProcessWire Admin
ProcessWire CMS comes packaged with everything you need to create and modify pages, install modules, create users and set permissions.
Let’s have a look around. Go to your new site admin (e.g. yourURL.com/processwire) and enter your admin user details.
The first page you will see is the Pages section or Page Tree. From here you can view all the pages in your PW installation, and by clicking on a page title it’ll display any child pages and enable you to edit the content. The Page Tree is your portal to find, move, or delete pages, along with accessing page content.
Using the Page Tree you can easily set associations between content by making a page a subpage or child of another (e.g. About page with a child of Contact Info or Shop with a child of Item 1).
By clicking edit next to a page title you will enter the edit page. Here you can change any content associated with the page. Unlike many CMS systems, it’s fast and easy to add new content fields to a page template. Need a new field to add contact information? No problem: create a new field on the settings page and add it to a template.
Tip: always remember to click save to submit any content changes.
Some pages may only have a Title field (which every page must have by default), while other page templates (e.g. a “shop_item_template”) may have lots of information that can be separated into separate fields (e.g. fields for: Title, Price, Description, Amount in Stock, Colours, Weight, Sizes etc...). ProcessWire gives you the tools to adjust your CMS’s templates as needed and even export/import them.
Settings
The settings page in the PW admin allows administrator users to alter fields and templates. As eluded to, “fields” are containers for content and “templates” allow you to add fields and permissions to pages. For example you may have a “homepage” template that has different content fields than the basic-page template used on all other pages on your site.
Modules
The Modules page allows you to inspect settings for installed modules and (like WordPress) find and install new modules from PW’s modules directory.
Access
The last section by default in the CMS admin is Access. Here you can create new users and set user types with differing permissions.
Tip: you can set high level permissions for a user role from the Roles page in Access. However, for more granular control of a specific template, click the Access tab when editing a specific template in the settings section.
ProcessWire Themes
ProcessWire encapsulates its theme files in the folder /site/templates. Here you will find all the PHP templates files, JavaScript and CSS files. PW gives you access to the CMS content and functions through some predefined PHP variables such as $page (the current page) and $pages (to access content on other pages). The PW cheatsheet is a great place to quickly grab code and information you might need for a specific function or echo content.
Unlike other CMSs (I’m looking a you Drupal) there is no specific way to theme, you can use PHP together with any tools you wish and set up your own structures within the template files.
That said, there are two common strategies for theming in PW:
- template-based
- delayed output
Template-based sees each template file (i.e. basic-page.php, notice it has the same name as our CMS template name basic-page from earlier) including common head and footer PHP .inc files above and below the HTML and PHP for that page.
With delayed output (now default in PW for site-default theme) your current page template (e.g. basic-page.php) passes content to a _main.php file which includes any external files once (like head.php or footer.php) and constructs the HTML page.
Tip: as PW is flexible, find a way of theming you find comfortable with and run with it. And remember it’s always good to share your experiences with others on the forums.envato.com.
Wrapping up
You’ve installed your first ProcessWire CMS website, had a wander around the CMS admin, and looked briefly at themes.
Next Steps
Find more ProcessWire tricks, tips and tutorials with us at Envato Tuts+ in the near future, on subjects like theming, module making and more. Meanwhile you can find more information on the ProcessWire forums.
