Front to Back 01

4-minute read

Exploring a different approach to WordPress template development.

Inspiration and purpose

I’ve watched the promotional video of the Perch CMS and was amazed by its simplicity and streamlined user and developer experience.
I’ve not bought a license for it and have not access to the source code so any code I will come up with in this development experiment, that might very well crash land, is totally made up by me.
The purpose of this coding experiment of mine is to try to reproduce that streamlined experience using WordPress; just for the fun of it and the technical challenge.
In a sentence what I’ve been amazed from is this flow:

  • the developer creates a template
  • the developer defines dynamic fields in the templates
  • Perch will create the page for the user to edit on the site backend
  • the user gets those dynamic fields in his/her page administration screen and can modify those values

See Perch CMS video properly titled “Simplicity in development” to understand.

For users, developers and hacker-users

In this line lies much of the power of WordPress.
It suits a use case that ranges from “It was pre-installed on my site” to “let’s use WordPress as a backend for this mobile app”.
But most of my work happens with smaller clients that are going to create a website with 7 pages and a blog; each page a stand-alone universe.
The normal workflow would be to create templates to capture each page particularity, a default page template, and an archive page to cover search and the blog part.
So another purpose of this project is to create a solution that applies to small website projects: all those times I’m tempted not to use WordPress as it would be overkill.

Page templates and custom fields

Where each page differs would be, in the end, at the meta fields and attributes level; to make an example a page would have the mandatory (clients…) slider, another would have a list of links and so on.
A way to do it would be to use something like the Custom Meta Boxes 2 framework to create the meta fields to show on all the pages (or just some specific ones) and to use those values in the templates.
To go into details a site might have a “About” page that should show some text presenting the site owner and his/her picture on the side, and the template code for this might be the one below

// file page-about.php

<?php get_header(); ?>

    <main role="main">
        <!-- section -->
        <section>

            <h1><?php the_title(); ?></h1>

        <?php if (have_posts()): while (have_posts()) : the_post(); ?>

            <article>
                <?php the_content(); ?>
            </article>

            <aside>

                <?php $image = get_post_meta(get_the_ID(), 'about_image', true) ?>

                <div class="img-wrapper square">
                    <img src="<?php echo $image ?>" alt="My portrait">
                </div> 

            </aside>

            <footer>

                <?php $amazon_url = get_post_meta(get_the_ID(), 'amazon_url', true) ?>

                <h3>On Amazon</h3>
                <p><a href="<?php echo $amazon_url ?>"></a></p>

            </footer> 

        <?php endwhile; ?>

        <?php else: ?>

            <article>

                <h2>'Sorry, nothing to display.'</h2>

            </article>

        <?php endif; ?>

        </section>
        <!-- /section -->
    </main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

This would be the traditional approach and would require some CMB2 (or meta box in general) setup on the backend to add the needed metabox and fields.
What I’d like:

  • to skip is the phase where I set up the metaboxes in CMB2 and keep those in sync
  • to avoid the loop set up on single pages
  • to be able to define the order and type of the meta fields I will need on a page template in the template itself

Sudo template code

The first step is to lay down the sudo code I’d like to be able to write in page template files for the reverse magic to happen; considering the page template above that should become

// file about.php

<?php get_header(); ?>

    <main role="main">
        <!-- section -->
        <section>

            <h1><ftb-title default="About"></h1>


            <article>

                <ftb-content default="This is me">

            </article>

            <aside>
                <div class="img-wrapper square">

                    <ftb-image title="Portrait image" default="http://lorempixel.com/300/300" alt="">

                </div> 
            </aside>

            <footer>
                <h3>On Amazon</h3>

                <p><ftb-url title="Amazon link" default="http://amazon.com"</p>

            </footer> 


        </section>
        <!-- /section -->
    </main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Since I’m not hiding the inspiration I’ve taken from the Perch CMS system I’ve used the pseudo-tag system to mark fields I would like this system of mine to fill up; ftb is the acronym of “Front to Back”: the best name I could come up with.
Going over those:

  • ftb-title should pull the page title, standard WordPress game
  • ftb-content should pull the page content, this too standard WordPress
  • ftb-image should take care of adding an image meta field to the page, the field will be titled “Portrait image” and will have a lorempixel placeholder image should the user not provide one
  • ftb-url should take care of adding a text field accepting a URL string and will set that to Amazon homepage should the user not provide one

I would really like to be able to write this code only to have the user presented with a screen like the one below Back-end page meta fields The plugin would read this template and add the required meta fields to the “About” page for me.

Next

Some implementation details and a first scaffolding.