Skip to main content

WordPress

WP-Boilerplate​

idfive has a WordPress Starter repo on bitbucket which serves as a starting point for WordPress projects. This repository includes commonly used plugins. The detailed instructions to get started are included in that repo's readme file and reflect the preferred methodology described in the subsequent sections.

Like in other projects, idfive adopts the Gitflow methodology for WordPress builds. As per Gitflow, there is a master and develop branch on the wp-boilerplate repo.

Preferred Methodology​

idfive creates a flexible platform for development through a combination of the Advanced Custom Fields Pro ("ACF") plugin and the Timber library and Timber Starter Theme. Timber leverages ACF Field Groups to build out components in pages and posts. idfive has a pro license for ACF. The license for ACF Pro can be accessed from the Vault.

The ACF documentation describes the basics for building out fields groups in the UI. The Timber ACF Cookbook page describes the methodology for displaying fields defined in ACF Field Groups.

Timber provides a number of functions that helps developers gain access to and manipulate data in ACF fields. In Timber, templates use the Twig Template Engine separate from PHP files, which helps organize and simplify code. The Timber Starter Theme makes it easy for developers to build out templates for ACF Field Groups in Twig. Without Timber, fields are typically templated like this:

<?php if( have_rows('event') ): ?>
    <ul>
    <?php while( have_rows('event') ): the_row(); ?>
        <li>
            <a href="<?php the_sub_field('url'); ?>"><?php the_sub_field('title'); ?></a>
        </li>
    <?php endwhile; ?>
    </ul>
<?php endif; ?>

Twig, through Timber, provides an object oriented approach with a suite of filters and functions for manipulating field data. Template code in Timber looks like this:

<h2>{{ post.title }}</h2>
<div class="my-list">
    {% for item in post.meta('my_repeater') %}
        <div class="item">
            <h4>{{ item.name }}</h4>
            <h6>{{ item.info }}</h6>
            <img src="{{ Image(item.picture).src }}" />
        </div>
    {% endfor %}
</div>

idfive Component Library​

idfive marks up and styles components using the idfive Component Libray("ICL"). Typically in a project, the front end team members will build components in a copy of the ICL in the Timber starter theme directory, then build twig files for the markup and display of components made up ACF Field Groups, with the theme including CSS generated by the ICL in the main theme using the wp_enqueue_style function.

Alternate Tools and Methods​

idfive may alternatively build out a site without Timber if Timber does not meet the client needs. In the past, idfive has used other tools such as:

Coding Standards​

Coding standards for WordPress reside in the WordPress Core Contributor Handbook:

Pantheon​

idfive develops many sites, at least initially, on Pantheon. Lando makes spinning up a local development environment easy. One of the many recipes thay ships with is for Pantheon.

First, create a sandbox site on Pantheon. Once the site is created on Pantheon, you can initialize and download the site to your local machine using:

lando init

This command will respond with a series of questions. Select the Pantheon recipe, log in with your Pantheon credentials. The repo will be downloaded and initilialize in the current directory. Once that is complete, cd into the new directory and type:

lando pull

lando pull gives the option of pulling from any environment, code, database, and files. The init process only downloads the code. It is fine to skip pulling code at this point, but pulling the database and the fiels so that you have an exact match of the site on the server.

A Few More Commands​

  1. 'lando start' will begin a server and begin serving the site.
  2. 'lando stop' will stop the server.
  3. Lando also provides tooling support using the wp-cli. To run wp commands via lando, simply enter 'lando wp <command>'