Open/close side menu
C.C. Hogan

Creating a single template blog with Processwire and Hanna Code

Comment on this article

It is actually is possible to do this, and it is not that hard.

(See also: Creating my book websites with Processwire)

Now, I better put a hand up and admit that you probably want to be a bit more adventurous about how you create a blog with Processwire, just with the look and the feel if nothing else, and there is a serious free module available by a chappy called Kongondo if you want to go nuts,  but for the hell of it, just think about this approach for a moment.

Processwire is a cms framework that makes no assumptions about how you want to put your site together. It has no visual formatting for the front end in its most basic installation (the one I would recommend you use), and only enough fields to make the system work - things like Title and name fields so each "page" is called something.  So, when you create a website with Processwire, YOU decide what fields you need, not it.  Refreshing, huh?

Hanna Code is Ryan Cramer's take on the Wordpress Hana code plugin. However, like everything else Processwire, it is powerful, clever and dead easy to use.

Basically, it allows you to write some php, html or javascript and apply it to the field.  For instance, if you wanted to wrap a bit of text in CKEditor in a bright blue box, you would create two bits of hanna code - bluebox-open and bluebox-end (Call em what you like, I am just trying to be bloody obvious.)

When you create the actual code, the code for bluebox-open would be <div class="bluebox"> and the code for bluebox-end would be </div>.

Got it?

Now to use that you would have:


Bit of text


And that would be that.

Nothing new there then.

Processwire API

Right, leave that aside for the moment. Processwire has an vast and powerful API that looks a little like JQuery (it isn't, it was just inspired by it).

So, for instance, to get a field from the current page, you would write (within PHP) $page->my-field-name. Okay?

Now, a quick read of the darling cheat sheet reveals that it goes rather further than just grabbing a field.

Oh, look, here is a nice one: Getting Children of a Page

It is written simply as $page->children()

Think about that. If we are creating a blog and we had a top level page, called, perhaps, RECIPES,  and (bear with me here) we create lots of child pages called, perhaps "Bacon and Eggs,"  "Souffle,"  "Tart," and so on .....

Well, its obvious. If we stick in the template for that top level page $page->children(), then we have retrieved all those child pages as a little array. We just need to loop through them and display them.

Oh, but hang on! We DO NOT have to put it in the template and get stuck with it. If we use it as Hanna Code, we can then put it where we like!

Oh, WOW!

Here is a hanna code I use on A World Called Dirt (please read the books) complete with markup for my own personal, responsive framework, just so you can see what it looks like in real life:

$children = wire("page")->children();
echo "<div class='block-group'>";
foreach($children as $child){
    echo "<div class='block block124'>";
        echo "<img class='listimage' alt='{$child->image->description}' src='{$child->image->size(230,200)->url}'>";
    echo "<h5><a href='{$child->url}'>{$child->display_title}</a>";
    echo "</h5>";
    echo "<p>{$child->summary}</p>";
    echo "</div>";
echo "</div>";

NOTE: Because of how it is used within Hanna Code, I am using wire("page") instead of $page - other than that it is the same as you would hard code into a template.

So, if we create a hanna code called "children" all marked up and ready as above, then all we need to do is put

    in our text somewhere and "hit me over the head with a dead wombat," we have child posts.  More to the point, we have category and children.

    And that is a blog!

    Now, I am not going to design your Hanna code blog for you - go and do that yourself - but a read of the cheat sheet will show that you can display parents, siblings, children of children and all kinds of things.  You can add selectors to refine what you select (particular template, limit the number, limit date) or anything else. 

    When you retrieve the children as above, you can pull out data from any field that is used by the children. In my example I have an image (only if it is used), a Display Title (my thing I like to do to give me versatility), a summary, etc.   These are all fields I invented for my pages, not what Processwire shoves down my throat, because it does no throat insertions of any kind! 

    So, there is no reason why you cannot make an incredibly complicated blog just using Hanna code.

    You could create a template with just one big CKEditor field in it and a title, and do the rest with normal typing and punch in a bit of hanna code for the fiddly bits.  You can have parents, children, grand children, obscure relations (who you wish didn't know your address), anything you like. The API is clever enough to grab it all and Hanna code will help you decide where to shove it.

    Obviously, that has no SEO or any sort of design-sense, so you would make the templates more complicated, but that is not hard.  I just have a pile of fields on a separate tab that are things like "Twitter image (1024v512 is perfect, btw), twitter card fields, og fields, meta description, all that sort of thing. Don't have to pay for some over-zealous plugin for Wordpress, just create a pile of fields - it takes seconds.  

    Right, I have a chapter to read back, so off you shoot. 

    Your homework is to download the latest version of Processwire, Install Hanna code, then go and soak up the cheat sheet.


    Have fun!




    Please feel free to comment - no anger, no bad vibes, no trashing people. Just sit around, enjoy a flagon of beer and mull over the world. You can login with Disqus, Facebook, Twitter or Google.

    Deep in the Dark Forest

    Keep up with my Podcast

    Series One & Two are out now!

    Start series one with Dirt for Free, and start reading the brand new series two with Girls of Dirt for only 99p!

    Girls of Dirt includes a recap of series one.

    Get it now at the Dirt website

    The Stink Is Here

    North London, 1976. The longest, hottest summer on record. The water is running out and the kids hate their parents. Which bunch of idiots would think it is a good idea to start a band?

    The Stink

    Visit The Stink Website