A Guide to Survival on the Web

Becoming friends with a CMS is tough if it doesn't quite work as expected. I'd love to show you something I have instantly warmed up to.

Martin Muzatko Written by Martin Muzatko
on

intro

You are one of the last survivors. You know your mission is to survive and not getting eaten by the hungry zombies. Eager to avoid getting devoured by your dangerous environment, you choose to stay in your basement all day and night long to fiddle around with a temporary solution. Your last resort. You puzzle around with your last weapon: a good old AK 47. Last time, it almost got destroyed by one of the zombies, when you went out once more to find some spare food. Suddenly, as you finished up your last weapon, you hear a crack up the first floor, accompanied with the typical groans of zombies. They are here to get you. If your weapon is not finished and loaded until they reach you, they will take you! You already know that this will be your last night. This.. is how you are going to die!

You wake up. What a terrible dream you had! And it was so real too! Good that this was just a dream, except that you find yourself in a world that is similar to that experience: Your only and last half-working tool is your CMS and the hungry door-crushing zombies are your clients.

Sounds familiar now?

Do you fiddle around with sidebar widgets that aren’t editable by your clients, just because“that’s the way it is.”?
Can you really afford wasting your time, when you are working against the time all along?and your hungry zombie-clients?
Do you sacrifice valid markup and scalable CSS for a Backend that takes more time to fiddle around with, than actually creating the design, content and layout together?

When your CMS of choice is the biggest roadblock you face to actually do what you want, you have to admit it. Admit that getting eaten by the zombies is part of your daily work-life!

I was fiddling around with TYPO3, WordPress, Drupal and even Joomla for years (literally) to get to a workflow where I can implement my ideas in maybe a week or two, depending on volume. It took me almost a year to comprehend the complexity of TYPO3. I contributed to the project and I’m still not certain that I understand most of it. But it has to be that complex, otherwise you wouldn’t be able to do so much with it, right?
This is how we live: we sacrifice simplicity to achieve something complex. I’d love to show you something that helped me to get past the typical “that’s just how it is, and you have to live with it!”

1. Preamble to ProcessWire

Previously, I started to create my own WordPress plugin(See left) to get rid of the restrictions and allow something as simple as template-modules. I eagerly worked on it until I have found ProcessWire.How is any other CMS different to wordpress or TYPO3 where you abuse a blog and bend it to your needs to become an information website or application?

ProcessWire is doing exactly what I wanted to do with all the CMS I know. You don’t even have to change your HTML markup to fit the needs of the CMS/CMF. PHP is kept to a minimum and very similar to jQuery in means of simplicity.

2. Installing ProcessWire

You can take a look at the demo, but you don’t really find out whats so special about it, untill you have downloaded and installed it. Installing is as simple as unzipping the contents to your webserver of choice (localhost is fine too) and navigating to the directory of ProcessWire in your browser.

You’ll get a choice of 5 different setups (as of 2.5) – you even get a preview of your installation.

  • Default (Beginner)
  • Default (Intermediate)
  • Multi-language
  • Blank
  • Classic

Classic is the default with a bit more style, you don’t need it if you use your own design and template. The first three don’t really differ from each other. Intermediate has a few more fields and multi-language has 3 languages pre-installed.

But whatever setup you choose: you can add as much complexity as you need for your website. When you have decided, ProcessWire will delete all unneeded files for you. No need to clean up after your CMS. ProcessWire takes care of that.

After the typical credentials (Database settings, timezone and file permissions) you can decide what the path to your admin panel is (default: /proesswire) and you’re already done!

3. Getting to the important part where we set up our own template

ProcessWire pretty much follows this principle:

You create your fields and you put them together in your templates which can be reused on pages. Simple enough, but yet it allows for so many different configurations.

Fields can be any form of data. You can choose from text, texteditors (CKE by default), image, integers, dozens of fieldtypes. 6 fields are pre-configured by default:

  • Title (Text)
  • Headline (Text)
  • Summary (Text)
  • Images (Image)
  • Body (TextArea)
  • Sidebar (TextArea)

But you can add endlessly more with existing field-types.

The reason why you have these different fields is, that you can individually change their settings. While it is not needed to configure every last bit of your field, it is nice to be able to limit your client to just a maximum of 400 characters, what is intended to be just a summary and not a novel. You can reduce or extend the amount of WYSIWYG capability your textarea has.

You assign these fields to your template and fill them out on the page using the template.

This is how they look like, when used in your template:

<section class="newslist">
<?php 
    foreach($page->children as $post)
    {
?>
    <article class="post">
        <header>
            <h3>
                <?=$post->title?>
            </h3>
            <time datetime="<?=date('d-m-Y',$post->created);?>">
                <?=date('d.m.Y',$post->created);?>
            </time>
            <p>
                <?=$post->summary?>
            </p>
        </header>
        <?=$post->body?>
    </article>
<?php
    }
?>
</section>

Creating a blog is just a matter of minutes.

Within your template, you get access to the $page object, and many more. The ProcessWire cheatsheet is a great overview of all available methods and variables delivered by the global objects. They are only a few to remember so go check it out. All the fields you define for your template are accessible through the $page object too. In the upper example, I used $page->children to traverse through the page-children and use their fields as output. In WordPress you get your default set of fields with php functions you have to look up first. In ProcessWire, you already know which fields you need and what they are named.

4. Adanced templating tools

There are even more tools to help you to create a website in a day or two. A great addition is the repeater field. Which feels like posessing the combined powers of portals, levitation and all united currents of the world! Oh, and it’s about 25 bucks if you want to have that godmode for wordpress. There is even more, if you try to let go of wordpress for once.

  • Language Support (Frontend & Backend)
  • Advanced Custom Fields
  • Semantic Page Paths
  • Freedom

Ok, let us not get carried away by our enthusiasm. Lets get down to business. This is the point where we are getting to the atom/molecule pattern: Repeaters can have different sub-fields or even multiple repeaters.

Your Repeaters are easily accessible via both backend and frontend. It’s just an array , so we can access it via foreach. The best part of it? You don’t have to take care of i18n within your template. ProcessWire does take care of that!

<section>
    <header>
        <h2><?=$page->convention_title?></h2>
        <?=$page->convention_text?>
    </header>
    <div class="conventionelements">
        <?php foreach($page->convention_elements as $element) { ?>
        <a href="<?=$element->link->url?>">
            <figure>
                <img 
                    src="<?=$element->images->first()->size('300px', '300px')->url?>" 
                    alt="<?=$element->images->first()->description?>"
                >
                <figcaption>
                    <h3><?=$element->title?></h3>
                    <span><?=$element->summary?></span>
                </figcaption>
            </figure>
        </a>
        <?php } ?>
    </div>
</section>

As you can see, there is not that much PHP to it. It’s the same for all the other fundamental elements of a well-equipped website. A navigation is no mysterious Walker(speaking of zombies) function you have to setup and call. No – we are traversing through REAL data with only one simple foreach loop.

<nav>
<?php 
    foreach($homepage->and($homepage->children) as $item) 
    {
        $class = $item->id == $page->rootParent->id ? 'active' : '';

?>
        <a class="<?=$class?>" href="<?=$item->url?>">
            <?=$item->title?>
        </a>
<?php
    }
?>
</nav>

Don’t want the Home-page in your navigation? remove $homepage->and(...).

Only need to get a navigation of pages having a certain template? add ->not('template=news') to your ->children.

There is more about selectors in the cheatsheet. With only 3 selectors, your news-listing system is already done: $posts = $pages->find("template=news, limit=3, sort=-created");. Need an archive which only outputs a summary and a title? Use a higher limit and just use the fields $post->title and $post->summary

5. Conclusion

I have explored ProcessWire for only two days, and I can already do with it, what I was able to do with wordpress after a month. I setup page after page with the amazing tools I have with ProcessWire. You can do that too! You can revive your website-creating experience!

I write this post as a closing case-response for my own seeking: I’ts god-damn 2014 – where is my backendless CMS? I was fed up with the way all the well-known CMS are actually pretty complex and so slow in crafting awesome websites. I think I have finally found a solution. Do you think it won’t fit your needs? Let me know!

How do you build re-usable interactive webcomponents without wasting your precious time bending the DOM to your needs? Get my latest content about building front-end web-apps delivered directly to your inbox and get free code samples for all the components I create.

See other articles

Using noUiSlider as range slider to filter between two numbers


Article

Do you know these fancy range sliders that can filter items with the blink of an eye? You move around a handle and get the desired results right away. In this article, you are going to learn how to implement a range slider to filter your data.

How to group together filter inputs to obtain and combine their values


Article

When you want to filter a set of products or other lists, naturally you have to think how you could wire together the variety of filters. With this article, you will learn how you can retrieve the data and combine the values to filter your items in real-time.

Becoming a zombie


Article

Do you find yourself losing track of time again? Without really knowing, a year passed. As day for day you continue your work, you had some random bursts of motivation, but you know that these kind of motivation spikes won't get you anywhere in the long term.

Updating the riot cheatsheet


Article

It has been roughly a year since I created the riot cheatsheet. With the knowledge acquired by now, it is time to start from scratch. #news 4 #riot 12 #nodejs 2 #webpack 3

See all Articles