Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

The Aesthetic Of Non-Opinionated Content Management: A Beginner’s Guide To ProcessWire

Systems for managing content are more often than not rather opinionated. For example, most of them expect a certain rigid content structure for inputting data and then have a specific engraved way of accessing and outputting that data, whether or not it makes sense. Additionally, they rarely offer effective tools to break out of the predefined trails if a case requires it.

ProcessWire1 is a content management system (CMS) distributed under the Mozilla Public License version 2.0 (MPL) and MIT License. It is designed from the ground up to tackle the issues caused by exactly this kind of opinionatedness (which, inevitably, results in frustrated developers and users) by being — you guessed it — non-opinionated. At its heart, it is based on a few simple core concepts and offers an exceptionally easy-to-use and powerful API to handle content of any kind. Let’s get right into it!

Further Reading on SmashingMag: Link

The Admin GUI Link

After installing6 ProcessWire (which requires PHP 5.3.8+, MySQL 5.0.15+ and Apache), you will see the home page of the default admin GUI:

Screenshot of ProcessWire’s admin GUI.7
The admin GUI has a pretty simple structure. It’s also fully responsive, so it will look slightly different on big screens.

Note: The pages you see in the hierarchical page tree (more on that later) are there because I chose the “Default (Beginner Edition)” website profile during the installation process. This is totally optional. You could also start with a blank website profile, which lets you build everything from scratch.

You can actually choose from8 many admin themes, although for ProcessWire 2.6+ the default theme or Reno theme is recommended. Because Reno comes prepackaged with every ProcessWire installation, switching to it is pretty easy: Just install it and select it in your user profile.

Screenshot of “Reno” theme.9
Installing a new theme for the admin GUI is easy. This one is called Reno. (View animated GIF version10)

Let’s have a quick look at the main back-end navigation:

Screenshot of the main navigation in the back-end.11
  • “Pages”
    This is the entry point of the admin GUI. It features the hierarchical page tree and, thus, all of your website’s content in the back end.
  • “Setup”
    This is the place to set up the general data model architecture of your installation through templates and fields (more on that later). This is also where ProcessWire modules often add an entry for their specific functionality and user interface — for example, visualizing log messages right in the admin GUI or managing all of the different languages when dealing with multi-language content.
  • “Modules”
    This is where you manage all of your website’s modules. Think of ProcessWire modules as WordPress plugins: They extend and customize the system.
  • “Access”
    Here is where you manage users, user roles and user permissions.

Three Simple Core Concepts Link

The core concepts that form the overall data model architecture of ProcessWire are exactly three: pages, fields and templates. Let’s look at each one by one.

Everything Is a Page: Or, One Page Tree to Rule Them All Link

A page in ProcessWire can generate a regular page in the front end of your website, ready to be visited by your users (like “Home” and “About” in the screenshot above). But a page can also exist solely in the back end, with no front-end counterpart — for example, a hidden settings page where you store the global slogan, logo and copyright notice of your website. When I say “everything is a page” in ProcessWire, I mean it. Heck, even the main navigation links in the admin GUI are made out of hidden pages in the hierarchical page tree!

Screenshot that shows that even the back-end navigation is made out of pages.12
In ProcessWire, everything is a page. Even the main navigation and sub-navigation are made out of pages from the hierarchical page tree.

This is so meta that I’m reminded of a certain Xzibit meme13. But let’s leave it at that.

The concept of a page being visible only in the back end is pretty powerful because it opens up a whole world of possibilities on how to structure and access data through other pages (your imagination being the only limit). You could build a massive product catalog, or an intranet application with hundreds of thousands of items based on a complex page hierarchy, or just a simple blog with the usual blog categories and tags (every category and tag being a page in the page tree).

Joss Sanglier14, a distinguished member in the ProcessWire community, breaks down the concept of pages to this15:

[I]n ProcessWire pages are […] not great gulps of information, but tiny little things, nothing more than a link to the more interesting world of fields and templates; just a little blip of data in your huge fascinating database.

Pages in ProcessWire are used for all kinds of things. They can be used as a marker in your pages list. They can be used as a group parent for other pages. They can be used as categories, tags or lists or users. And they can even be used for simple drop-down selects — just to supply a label and value.

Let’s interact with the hierarchical page tree a little bit:

Screenshot of drag and drop in the page tree.16
You can move pages in the hierarchical page tree by dragging and dropping. (View animated GIF version17)

As you can see, pages can be edited, moved around or trashed, and they can have an infinite number of children and grandchildren.

Let’s open up the “Home” page:

Screenshot of the opened Home page18
The “Home” page of the “Default (Beginner Edition)” website profile features a few simple fields, which are all optional.

This brings us to the next core concept of ProcessWire, fields.

Fields Are The Containers Into Which You Put Data Link

Fields are basically the containers into which you put data. At this point, it’s important to realize that ProcessWire doesn’t have the concept of custom fields, like WordPress does, because every field in ProcessWire is a custom field. When you create a field, you can give it a label, a description and some additional notes that will appear underneath it.

Let’s edit the “Title” field and add a description and a note to it:

Screenshot of the title field with custom description and note.19
Every field can be given a custom description and a note. (View animated GIF version20)

The preinstalled field types cover most basic data-input needs. For example, you can create things like check boxes, date-pickers, field sets (a field that groups other fields into visually logical units), file and image uploaders and, of course, text and textarea fields (the default WYSIWYG editor being CKEditor21).

There are also a lot of prepackaged and third-party22 field types to choose from. A useful core module, which is not installed by default, is the repeater field. It lets you dynamically create rows of data sets.

Screenshot of the repeater.23
Repeaters are a neat and easy way to create rows of data of the same kind. (View animated GIF version24)

ProcessWire is also a good fit for handling images. For example, you can decide which image variants ProcessWire should automatically create of an image after uploading it (which enables nice use cases for responsive images). And choosing a thumbnail for an image is a breeze.

Screenshot of cropping an image.25
ProcessWire is a good fit for working with images. (View animated GIF version26)

Another useful field type is the page field type. You can link other pages with the page you are currently editing and, thus, create a relationship between them. In the field’s settings, you can decide how the input’s appearance and interaction with the field should be — for example, whether a single page or multiple pages should be selectable, or whether only the child pages of a particular parent page should be selectable. If you were to write, say, a blog post, you could choose to allow only blog post categories to autocomplete.

Screenshot of the autocomplete page field.27
A page field can have very different manifestations. Here is one: The autocomplete functionality lets you choose already existing pages (in the dropdown menu) but also create new pages right within the field. (View animated GIF version28)

A neat feature you can switch on in the settings of a field is the ability to edit the field’s content in the front end of your website. Once a user has logged into ProcessWire’s back end, they can switch to the website’s front end and edit and save the content right where it will eventually get rendered.

Screenshot of editing content on your website’s front-end.29
Are you a fan of front-end editing of content? ProcessWire has you covered. (View animated GIF version30)

After looking at pages and fields in ProcessWire, you may ask yourself: How does a page know which fields it has? And where can I define how the fields are ordered and rendered on a page? So, let’s move on to the last core concept, templates.

Templates Are the Blueprints of Pages Link

Every time you create a page in the hierarchical page tree, ProcessWire needs to know which template is associated with it. That’s because a page needs to know which fields it has to render, and that information is always a part of the respective template.

Long story short: Templates contain all of the information the page needs to know about its contents (what fields it has, how those fields are rendered and how they behave).

Let’s open the “Home” template from our sample installation.

Screenshot of the template settings31
Templates in ProcessWire are very flexible and are one of the reasons why ProcessWire feels more like a framework than a CMS. (View large version32)

The main thing to notice is the number of settings. There’s really a lot to discover here. For example, you can limit access to the pages created with this template to specific user roles. Or you can decide whether pages created with this template should be cached for a specific amount of time (to enhance performance), plus the conditions under which the cache must be cleared.

Another powerful setting is hidden in the “Family” tab. Here, you can define whether pages created with this template can have children pages and which templates are allowed for the parent page or its children pages. This allows you to create exactly the type of template family hierarchy that you want. It’s a flexible and handy way (and actually one of the most powerful ways) to structure your data, and it’s one of the many ways that ProcessWire shows its flexibility.

Let’s turn our attention to the list of fields in a template. Looking at the screenshot above, you can see that the order of the fields resembles the order in which the fields will get rendered on the home page. You can simply drag and drop fields to change the order in the list, thus changing the order of appearance when editing the home page.

Left screenshot half: drag and drop fields in template settings. Right screenshot half: changed field order on “Home” page.33
Changing the order of fields in the template settings (left) affects the order in which the fields are rendered on the page (right). (View animated GIF version34)

You can also change the width of a field on the page. Just click on a field and change it. Let’s put the “Title” and “Headline” fields side by side.

Screenshot of fields rendered side by side35
You are in total control of how fields are rendered on the page. (View animated GIF version36)

Another example of how you can customize and tailor the user interface of a page and its fields are inputfield dependencies37. These enable you to specify the conditions under which a particular field in the page editor is shown or required. Let’s make the “Headline” field visible in the UI only if the user enters something in the “Title” field, and let’s mark the “Summary” field as required only if the user enters something in the “Headline” field:

Screenshot of settings for inputfield dependencies38
The “Headline” field will be shown on the page only once the user has entered something in the “Title” field. (View animated GIF version39)

Here’s a video that shows you how inputfield dependencies can be used to enhance the user’s experience while working with ProcessWire:

How inputfield dependencies can be used to enhance the user’s experience while working with ProcessWire

The number, order and appearance of fields on a page are totally under your control. You can put just one field in a template, none at all (not very useful) or more than 50 fields, 100 or even more. You can order them in any way you want, specify which are required or visible and which aren’t, and specify under what circumstances they should be required or visible. Here is where ProcessWire’s non-opinionated approach shines.

Roundup: Pages, Fields, Templates Link

Let’s recap the technical relationship between pages, fields and templates: You add fields to templates, and you select a template when creating a new page. The fields you see when editing a page are the fields you’ve added to the selected template.

Another way to look at this would be through an analogy from the programming world:

  • Templates are like classes.
  • Fields are like the properties of classes.
  • Pages are instances of classes.

Once you internalize these concepts, you’ll be equipped with everything you need to know to develop in ProcessWire. And the reason for this is that ProcessWire’s philosophy40 is based solely on these three concepts. Pretty cool, right?

Template Files And The API: A Couple Meant To Be Together Link

The place where you retrieve the data inputted in ProcessWire’s back end and output it in the front end is, of course, the file system — more specifically, the /site/templates/ folder of your ProcessWire installation. A template can have a physical PHP file of the same name associated with it; so, the home template would have a home.php file in the /site/templates/ folder.

Note: How you develop your template files is totally up to you. If you are familiar with the WordPress style of developing things, you can continue just as you are used to. Or, if you have a pretty complex and big set-up and want to create a more sophisticated architecture, you could use an MVC-inspired approach, which would work just as well. Ryan Cramer has a pretty good introductory tutorial, titled “How to Structure Your Template Files41,” in which you can learn different approaches to template file development in ProcessWire.

The code you write in a template file will mostly consist of basic PHP constructs (if conditions, foreach loops, echo statements), HTML markup and ProcessWire’s API42. The API is heavily inspired by jQuery — so, it’s really kind of like iterating and traversing the content you’ve inputted in the back end via methods, selectors and chaining (fluent interface) capabilities. It’s easy to use and very expressive, just like jQuery.

Let’s start by looking at some simple examples to get you going with the API. But before we start, remember to bookmark the ProcessWire API cheat sheet43, a helpful reference with an overview of all available API methods.

Screenshot of the ProcessWire Cheatsheet44
The API cheat sheet45 will serve you as a good companion.

The thing we want to do first is access and output the content of a page’s field. The API exposes a variable for us to deal with this: $page.

Getting the Current Page With the $page Variable Link

The $page variable contains all of the fields of a single page. This includes built-in fields46 (like the name of a page’s template), as well as the fields you, as the developer, have added to the page’s template.

Let’s open home.php, which is the template file of the home template, and add this line to it:

echo $page->title;

This tells ProcessWire to grab the “Title” field of the page we are currently on (“Home”) and output it. Let’s say we also have a “Headline” field on the page, which we want to use instead of the “Title” field but only if the user has entered something in it.

echo $page->get("headline|title");

We used the get method to access a page’s field (so, $page->get("title") is basically equivalent to the first code example above), and we wrote "headline|title" in the get method. This tells ProcessWire to first check the “Headline” field and output the headline’s content. But if the “Headline” field is empty, then the “Title” field is used as the fallback.

Using API variables in PHP strings is also possible. The following two echo statements for outputting the number of children of a page are equivalent:

echo "This page has " . $page->numChildren . " children pages.";
echo "This page has {$page->numChildren} children pages.";

Let’s get the children of our root page (remember, we are still in home.php) and output them as a list of links:

echo "<ul>";
foreach ($page->children as $child) {
	echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
}
echo "</ul>";

Another example of a built-in field (like children and url in the example above) is iterating through all parents of a page and creating breadcrumb navigation:

echo "<ul>";
foreach ($page->parents as $parent) {
	echo "<li><a href='{$parent->url}'>{$parent->title}</a></li>";
}
// output the page itself at the end
echo "<li>{$page->title}</li>";
echo "</ul>";

On the root page (“Home”), this would just output its title, because $page->parents would be empty.

Earlier, I showed you how to create image thumbnails in the admin GUI. Creating thumbnails can also be done programmatically with the help of the API. Let’s iterate through all images uploaded in the “Images” field, create a large image variant at 600 pixel wide with a proportional height, and a 150 × 150-pixel thumbnail, with specific options like crop settings and image quality. In the end, we want to link the thumbnail image to the large image. Sounds complicated? It isn’t.

$options = array(
	"quality" => 90,
	"cropping" => "northwest"
);

foreach ($page->images as $image) {
	$large = $image->width(600);
	$thumbnail = $image->size(150, 150, $options);
	echo "<a href='{$large->url}'><img src='{$thumbnail->url}' alt=''></a>";
}

ProcessWire is pretty smart in this regard because it creates images at any sizes on the fly and keeps a cache of them, so that it has to create the versions just once.

Here is one last $page example to show you that the API feels a lot like you’re interacting with the DOM when using jQuery. Let’s get the last child of the parent page we are currently on.

$wantedPage = $page->parent->children()->last();

Besides the $page variable, the API exposes another important one: $pages.

Getting All Pages With the $pages Variable Link

With $pages, you have access to all pages in your ProcessWire installation. In other words, it gives you access to all of your content from anywhere.

For example, you could have a hidden (meaning, not accessible in the front end) settings page in your ProcessWire installation; you could add global settings, like the title and description of your website; and you could access and output these content blobs from any template file you want.

$settings = $pages->get("template=settings");
echo "<h1>{$settings->global_title}</h1>";
echo "<p>{$settings->global_description}</p>";

One common use case for a single topic page of a blog is to show all blog posts in which the topic is referenced. Just write this in the template file of the topic:

$pages->find("template=blog-post, topics=$page");

Note: topics is a field in the blog-post template where you would add all topic categories that are specific to the blog post.

Let’s work a little more with ProcessWire’s selector engine47. Let me show you some examples by referring you to ProcessWire’s demo website48, a directory of US skyscrapers. The demo website contains many pages and has an interesting data model architecture (i.e. things like architects, cities, buildings and locations referencing each other), and it’s a good use case to show what you can do with selectors.

This example finds all skyscrapers that mention the phrase “empire state building” in their body copy:

$pages->get("template=cities")->find("template=skyscraper, body*=empire state building");

Note: First we get the page with the template cities; then, we get all pages with the template skyscraper. The reason why we can chain the methods in this way is because all skyscraper pages are sub-children of the “Cities” page.

Let’s find all skyscrapers by the architects Adrian Smith, Eric Kuhne or William Pereira and sort the results by height in ascending order:

$adrian = $pages->get("template=architect, name=adrian-smith");
$eric = $pages->get("template=architect, name=eric-kuhne");
$william = $pages->get("template=architect, name=william-pereira");

$skyscrapers = $pages->find("template=skyscraper, architects=$adrian|$eric|$william, sort=height");

You could optimize the code by finding all requested architects in a single step, instead of three:

$architects = $pages->find("template=architect, name=adrian-smith|eric-kuhne|william-pereira");
$skyscrapers = $pages->find("template=skyscraper, architects=$architects, sort=height");

Note: The get method potentially always returns one page; the find method potentially always returns multiple pages.

You can further revise the code by using sub-selectors49 (yes, you can have selectors inside of selectors):

$skyscrapers = $pages->find("template=skyscraper, architects=[name=adrian-smith|eric-kuhne|william-pereira], sort=height");

Other API Variables Link

$page and $pages are not the only API variables you can work with. There are a whole lot of other ones50, such as $session (to log users in and out and to redirect to other pages), $user (to establish a connection to the user currently viewing the page) and $config (which are for settings specific to your ProcessWire installation). Let’s look at two examples.

First, let’s redirect the user to the home page:

$session->redirect($pages->get("template=home")->url);

And let’s do something if the current user is logged in:

if ($user->isLoggedin()) { /* do something */ }

Extending ProcessWire’s Functionality With Modules Link

ProcessWire is built on a modular and easily extendable architecture51, and it shows: Every installation consists of ProcessWire’s core (the essence of ProcessWire, which enables the basic functionality) and a set of prepackaged modules (so-called core modules) that sit on top of the core and extend it.

Core Modules Link

Some of these prepackaged modules are installed and activated by default, and others are uninstalled52 by default. For example, ProcessWire’s built-in comment system is a module you can switch on or off at any time. Also, things like the repeater field we talked about earlier and the multi-language support for content are basically just modules you can install if you need them in your project.

Other examples of neat little core modules are Page Names, which validates text input when you’re typing a page name (automatically transforming, say, umlauts like ä to ae), and Page Path History, which keeps track of past URLs where pages have lived and automatically redirects to the new location whenever an old URL is accessed.

Finding and Installing Modules Link

The official modules repository53 is the main spot where you can find and download ProcessWire modules. On a module’s page, you will find the description and purpose of the module and links to the respective GitHub repository and support forum. Module authors are highly encouraged to post their modules in the official repository because it has the highest visibility and is the place people think of first when they want to find a ProcessWire module.

Installing a module is as easy as dragging the module’s files to the /site/modules/ directory and installing it in the admin GUI. There are other ways to install a module, such as by installing the Modules Manager54, which enables you to browse (and install) modules without leaving the admin GUI.

Commercial Modules Link

While most modules are free, there are a few commercial ones, too. The ones being promoted in ProcessWire’s store55 are by the lead developer, Ryan Cramer. There you will find the following modules:

  • ProDrafts56 enables you to maintain separate draft and live versions of any page. It also provides a comparison and diff tool, as well as automatic saving capabilities.
  • ProFields57 are a group of ProcessWire modules that help you manage more data with fewer fields, saving you time and energy.
  • ProCache58 (among other things) provides an impressive performance boost for your website by completely bypassing PHP and MySQL and enabling your web server to deliver pages of your ProcessWire website as if they were static HTML files.

Don’t miss the screenshots and videos on the module pages to get a first impression. This is finely executed software.

There are also commercial modules outside of the official website, such as Padloper59, an e-commerce platform built on top of ProcessWire. To be fair, what is definitely missing in the ProcessWire cosmos is a way for module authors to easily publish their commercial modules in a centralized spot.

How Do ProcessWire Modules Generally Compare to WordPress Plugins? Link

The reason why ProcessWire has so fewer modules than WordPress (approximately 400 versus more than 40,000) is not so much because it is less popular (an understatement, of course), but more because the core itself is already so feature-rich that adding a ton of modules to extend it is simply not necessary. For example, you don’t need a module to create a gallery slideshow or to get the first child of something or to generate thumbnails. All of that (and much more) is already covered out of the box.

So, whereas in WordPress your typical method of solving a problem would be to search for a plugin, in ProcessWire you would first look to the tools available in core; in 90% of cases, that would provide you with the solution.

What You Can Build With ProcessWire Link

Because ProcessWire behaves more like a framework than a CMS (the core is actually a framework, and the CMS is an application built on top of it), the use cases for building things with ProcessWire are pretty broad. You may want to check out some websites powered by ProcessWire60 (especially the most liked websites61).

ProcessWire is a good fit if you want to develop a JSON REST API, an image-resizing app for employees, a front end for managing millions of products (scalability is pretty impressive — you can have literally millions of pages62 on a single installation), a web application for displaying the financial results of companies, a simple blog, a website for a big university, or just a simple one-page informational website.

Where To Go From Here: There’s A Lot To Discover Link

Naturally, a beginner’s guide can’t talk about everything the tool has to offer. So, here is a short list of other ProcessWire features, facts, links and tools worth mentioning:

Summary Link

ProcessWire is a system that rewards you [for] being curious. We aim to show you how to fish so that you can catch the big fish.

This statement77 by Ryan Cramer, the creator of ProcessWire, encapsulates what ProcessWire is all about.

I think what resonates with a lot of people is that ProcessWire is a system that goes from simple to complex, not the other way around. It doesn’t assume what you want to build, but instead lays a strong, non-opinionated foundation by offering you effective, powerful tools and leaving the rest to you. That conceptual aesthetic has, to me, a certain appeal to it.

(dp, al, il)

Footnotes Link

  1. 1 https://processwire.com/
  2. 2 https://www.smashingmagazine.com/2010/11/designing-for-content-management-systems/
  3. 3 https://www.smashingmagazine.com/2015/11/modern-static-website-generators-next-big-thing/
  4. 4 https://www.smashingmagazine.com/2010/07/content-management-system-cms-icon-set-12-free-icons/
  5. 5 https://www.smashingmagazine.com/2009/11/getting-started-with-content-management-systems/
  6. 6 https://processwire.com/about/requirements/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/02/02-screenshot-processwire-admin-gui-preview-opt.png
  8. 8 http://modules.processwire.com/categories/admin-theme/
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/02/03-changing-default-theme-to-reno-theme.gif
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/02/03-changing-default-theme-to-reno-theme.gif
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/02/04-screenshot-main-navigation-preview-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/02/05-screenshot-everything-is-a-page-preview-opt.png
  13. 13 http://knowyourmeme.com/memes/xzibit-yo-dawg
  14. 14 https://twitter.com/joss_sanglier
  15. 15 https://processwire.com/talk/topic/2296-confused-by-pages/#entry21426
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/02/06-interacting-with-page-tree.gif
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/02/06-interacting-with-page-tree.gif
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/02/07-screenshot-home-page-preview-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/02/08-change-description-and-note-of-title.gif
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/02/08-change-description-and-note-of-title.gif
  21. 21 http://ckeditor.com
  22. 22 http://modules.processwire.com/categories/fieldtype/
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/02/09-repeater-in-action.gif
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/02/09-repeater-in-action.gif
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/02/10-image-editing-in-action.gif
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/02/10-image-editing-in-action.gif
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/02/11-page-field-autocomplete.gif
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/02/11-page-field-autocomplete.gif
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/02/12-front-end-editing.gif
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/02/12-front-end-editing.gif
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/02/13-screenshot-template-settings-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/02/13-screenshot-template-settings-opt.png
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/02/14-changing-field-order.gif
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/02/14-changing-field-order.gif
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2016/02/15-changing-width-of-fields.gif
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/02/15-changing-width-of-fields.gif
  37. 37 https://processwire.com/api/selectors/inputfield-dependencies/
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/02/16-inputfield-dependencies.gif
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/02/16-inputfield-dependencies.gif
  40. 40 https://processwire.com/about/why/
  41. 41 http://processwire.com/docs/tutorials/how-to-structure-your-template-files/
  42. 42 https://processwire.com/api/concept/
  43. 43 http://cheatsheet.processwire.com/
  44. 44 https://www.smashingmagazine.com/wp-content/uploads/2016/02/17-processwire-cheatsheet-preview-opt.png
  45. 45 http://cheatsheet.processwire.com/
  46. 46 http://cheatsheet.processwire.com/page/built-in-fields-reference
  47. 47 https://processwire.com/api/selectors/
  48. 48 https://processwire.com/demo/
  49. 49 https://processwire.com/api/selectors/#sub-selectors
  50. 50 https://processwire.com/api/variables/
  51. 51 https://processwire.com/api/modules/
  52. 52 http://processwire.com/blog/posts/processwire-2.6.19-plus-guide-to-optional-core-modules/#a-guide-to-optional-uninstalled-core-modules
  53. 53 http://modules.processwire.com/
  54. 54 http://modules.processwire.com/modules/modules-manager/
  55. 55 https://processwire.com/talk/store/
  56. 56 https://processwire.com/api/modules/prodrafts/
  57. 57 https://processwire.com/talk/store/product/10-profields/
  58. 58 https://processwire.com/talk/store/product/6-procache-single/
  59. 59 https://www.padloper.pw/
  60. 60 http://processwire.com/about/sites/
  61. 61 http://processwire.com/about/sites/sort--likes
  62. 62 https://processwire.com/talk/topic/9491-site-with-millions-of-%E2%80%9Epages%E2%80%9D/
  63. 63 http://weekly.pw/
  64. 64 http://processwire.com/blog/
  65. 65 http://www.flamingruby.com/blog/processwire-caching-explained/
  66. 66 http://wireshell.pw/
  67. 67 https://processwire.com/docs/security/
  68. 68 http://grab.pw/
  69. 69 https://processwire.com/talk/
  70. 70 https://processwire.com/api/multi-language-support/
  71. 71 http://processwire.com/about/roadmap/
  72. 72 https://github.com/ryancramerdesign/ProcessWire/commits/devns
  73. 73 http://processwire.com/about/processwire-reviews/
  74. 74 http://alternativeto.net/software/processwire/reviews/
  75. 75 https://www.quora.com/How-does-Processwire-compare-to-Wordpress
  76. 76 http://processwire.tv/
  77. 77 https://processwire.com/talk/topic/7565-making-pw-more-userfriendly/page-8#entry73748

↑ Back to top Tweet itShare on Facebook

Francesco Schwarz is a front-end developer based in Munich, Germany. He has been interested in how web technologies work, play together and influence each other since around 2004. In the process he developed a passion for accessibility, HTML semantics, web performance, CSS/Sass architectures, typography and design. Drop him a line on Twitter or visit his personal website.

  1. 1

    Great stuff! A quality intro for those unfamiliar with this great CMS/F.

    14
  2. 2

    Hey Francesco,

    Thanks for writing this. I find your writing style very attractive.

    The link you are referring to in […] development is very active points to the dev branche which only has 1 commit in 2016.

    I think you want to refer to the devns branch.

    5
  3. 4

    Processwire is great!
    I build a few sites with drupal where so many things are very hard to achive and its a pleasure to work with processwire instead.

    11
  4. 5

    Jonathan Lahijani

    July 22, 2016 3:47 pm

    I’ve been using ProcessWire for four years now after having completely switched away from WordPress and I’ve never looked back. If you’re already familiar with PHP (however basic) and WordPress/Drupal, being able to pick up how to use this CMS is relatively straight-forward and the API is an absolutely pleasure to work with.

    Love Advanced Custom Fields in WordPress? ProcessWire is built upon the concept of every field being a custom field!

    A fan of Gravity Forms or similar form plugins? ProcessWire has a premium module called FormBuilder that’s just as powerful.

    Need an amazing caching plugin? ProcessWire has ProCache which has all the bells and whistles you’d expect.

    The best thing about ProcessWire is how rock solid it is, and how every Friday (literally, every Friday), more amazing features make it into the core. Oh yea, security is top notch so you won’t have to rely on a behemoth of a security plugin.

    Take a moment to join the ProcessWire Forums and say hello. It’s a community filled with friendly people and great advice!

    27
  5. 6

    Joshua Gatcke

    July 22, 2016 5:38 pm

    Fantastic introduction to ProcessWire. I am glad to see it here on Smashing! I have been using PW for about 5 years and it’s been incredible.

    I still remember trying to bend other CMS’s to my will back in the day and how hard it was to do anything original. Now with PW, I can do anything I can imagine. The best part about PW is that it doesn’t mess with my markup/front-end code. I also love how the API is so simple yet so powerful.

    Every week I discover or learn about something that makes PW even better. I feel like I can build anything – and because of that I try to show PW to every web designer I know. :)

    13
  6. 7

    Thanks Francesco for this great guide of a CMS we all love.

    Also thanks for mentioning the Cheatsheet and of course all the good references and links. I’ve read your article in t3n and it’s a pleasure to have you in the PW community!

    Oh, just a minor thing I noticed: Repeater Field isn’t third-party. It’s in core, just not installed by default.

    5
  7. 9

    Really well thought out article which live up to a likewise well thought out Content Management System.
    I’ve tried out quite some systems (among them the most famous ones) but this “Unopinionatedness” (is this a word?) – to such an extent – of Processwire is the feature what strikes me the most.
    I’ve never worked with a CM – System, which provides this much freedom to structure and design my content by letting me get exactly the results that i want with such an ease at the sime time.
    Ingeniously implemented concept / organisation of custom-fields – templates – pages plus a super powerful yet easy to grasp API equals to endless possibilities.

    8
  8. 10

    Himanshu Sukhwani

    July 23, 2016 5:59 am

    Thank you for the introduction! Will definitely try this one out today. Already have a project in mind for which wordpress seemed too bloated.
    Processwire sounds like a mix of wordpress, advanced custom fields and laravel!
    Exciting morning indeed!

    3
  9. 11

    Awesome article!

    1
  10. 12

    I’m in love.

    Disappointed by WordPress from 10 years ago and still now (only Advanced Fields plugin made WP sane for some projects) and using older version of little known Modx CMS for it’s relative simplicity, I never found something that elegantly simple, so much customizable(!!!) and yet powerful as it seems from this article. Always had to use a plugin for another plugin to get what I wanted from a CMS – ProcessWire has it in it’s core. I feel excited to build sites again! Sorry my good old love Modx, it’s time we say goodbay. And hello ProcessWire!

    (Way too emotional right now)

    8
  11. 13

    Nice write-up indeed!

    I just want to point out a “missing word”:
    In
    “How you develop your template is totally up to you.”
    and
    “…in which you can learn different approaches to template development…”

    Instead of “template”, the term “template file” should be used (as it was used properly in all the other places in the article).

    In ProcessWire terminology a Template is the “class like entity” stored in the database; however, the Template File is the file the front-end developer works on.

    4
    • 14

      Francesco Schwarz

      July 23, 2016 3:11 pm

      Szabesz, thanks for your feedback and the correction. Nice observation, your are totally right.

      1
    • 15

      Francesco Schwarz

      July 24, 2016 8:22 am

      The two passages have been fixed.

      0
  12. 16

    Processwire is awesome , i use CMS like Drupal/Wordpress for years but nothing like PW…the learning curve is pretty fast and easy to understand , including if not a programer.

    1
  13. 17

    ProcessWire seems very interesting and although it takes a minimal approach to designing sites, I feel that it’s just another way of completing a task. It might make sense for smaller basic projects but I think I’ll stick with Joomla for the intricate stuff.

    0
    • 18

      Francesco Schwarz

      July 25, 2016 8:26 am

      Hi Mark, what do you mean by “[…] I feel that it’s just another way of completing a task”?

      ProcessWire’s abilities are particularly suited for very complex and big projects. It behaves more like a framework, so one could say that the only thing limiting you in achieving a certain goal with ProcessWire is your own imagination.

      7
  14. 19

    PW is 9 out of 10. The only (and major) issue I see with PW is that it’s heavily Apache oriented. If you want to use Nginx or any other web server; some hacks are required. And that is something silly nowadays.

    1
  15. 21

    Mark Sandel

    July 25, 2016 2:08 pm

    Thanks, like this article

    0
  16. 22

    Thanks for this review. I’d be interesting in knowing if and how PW handles site configuration in between environment. If I create new fields in my local, and then want to push the changes into dev, is there any tool that can allow this without overriding the whole database nor reproducing the step of field creations on the dev environment ?

    0
  17. 28

    Might be a good CMS, but I don’t see how it’s different in that aspect:

    “most of them expect a certain rigid content structure for inputting data and then have a specific engraved way of accessing and outputting that data”

    Or are You telling us that CMS editors should be able to create PHP templates themselves?

    0
    • 29

      Francesco Schwarz

      July 26, 2016 11:36 am

      Hi Christian, no, not at all. What I tried to show is that ProcessWire simply offers developers a powerful and non-opinionated set of tools and that it doesn’t tell you how and in what way to achieve the things you want to achieve. ProcessWire doesn’t dictate you to develop in a certain way, e.g. the default way of writing template files isn’t a must, you could organize your template files in a totally different manner.

      This is also and especially true for the user interface for the editors: the level of customization that developers have at hand here is, simply put, mind-blowing (see for example the inputfield dependencies I talked about in the article).

      1
  18. 30

    Andy Jäger

    July 26, 2016 3:20 pm

    Really good article. I would have loved a passage about how the (weekly..) updates are installed and if there are notices or warnings when there’s a critical update.

    0
    • 31

      Francesco Schwarz

      July 27, 2016 9:32 am

      Hi Andy, there is a core module called “ProcessWire Upgrade” ( http://modules.processwire.com/modules/process-wire-upgrade/ ). If installed, you get a nice overview of the versions installed of the ProcessWire core and all of your installed modules. It shows you which version you have installed and which is the latest one. It also notifies you everytime you log into the backend if there is a new version of the core or of modules. You can also update core or module updates right in the backend GUI.

      Generally speaking, installing updates in ProcessWire is a pretty smooth and fast experience. This is one of the things people new to ProcessWire (but not only them, also experienced ones) notice time and time again.

      1
  19. 32

    http://modules.processwire.com/search/?q=shop
    SORRY, NO RESULTS WERE FOUND.

    :P

    -4
  20. 34

    This seems really great, but I don’t know how to get to grips with making templates in the CMS. Once I get onto code, I will be fine. There are many guides for installation, and for managing pages and fields, but everyone seems to skip over the specifics of templates and children. For example, where do I start if I want to make a blog? How do I make a template, how do I start adding children to it?

    You create a template then you look under Pages > Add New. There’s nothing there but Bookmarks. Click directly on Add New and you get a message:

    “There are currently no templates with defined parent/child relationships needed to show “Add New” shortcuts here. To configure this, edit any template (Setup > Templates) and click on the “Family” tab.”

    However, no matter what I seem to do on the “Family” tab of my Blog template, I still cannot seem to get any further. Even after copying what I have seen in their own demo with “Cities” and “Skyscrapers”.

    I’m sure other people take to this very easily, perhaps I am just dumb. I know I will get there eventually but it will only be through trial and error.

    1
  21. 35

    I have been in love with the concepts of processwire since it first came out, but my own lack of getting to grips with the system kept me from using it, driving me to WordPress.

    Two things, with regards to that statement: if I had started using PW back when I first discovered it, I’d have been a pro at building sites with it now; but it needs to be said, not all people will get to grips with PW as quickly as it seems many of its devotees get to grips with it.

    I consider this a CMS with a much steeper learning curve for those whose first priority is creating content, not developing websites.

    That’s why WordPress, despite it being a poor CMS, is so popular.

    With WordPress you have a place to post content in almost no time. With PW you have to learn a few concepts before you can really dig in.

    In a sense, PW’s power could also be a drawback. Sometimes people want to be told what to do and how to do it. PW doesn’t do that. There are so many ways to achieve the same goal that it’s at times overwhelming.

    Another thing: it’s as if PW forces you to think hard about your content structure, before you start laying the bricks. This, of course, is a good thing, but can put off some users.

    I have, however, decided to bite the bullet and to start using PW for building sites. From an SEO perspective it’s superior, as well as from an online marketing perspective.

    Actually, it’s only superior if used correctly. PW is a classic example of junk in, junk out.

    Thanks for this article. Takes me a step closer to my goal.

    2

↑ Back to top