Front to Back, take 2, step 02

Finding the current page in the Theme Customizer.

Active callbacks and template tags

While revisiting the idea of the “Front to Back” plugin I’ve laid out some technical needs I have to fulfill before anything moves on.
Most notably the possibility to know which page is being previewed in the Theme Customizer to leverage the active_callback parameter and be able to do things like showing a certain control only on specific page. While I already know that WordPress defined template tags can be used to show or hide a control (or panel, or section) like is_home and is_frontpage I’ve followed along the code to assess that the only argument passed to said callback will be Theme Customizer component at hand and that, sadly, has no idea of its surroundings.

The “About us” page template

I want to start with a simple task: I want to allow the site administrator to customize and preview the “About us” page in the Theme Customizer.
Title and page contents will be managed here and not in the classic WordPress page edit screen; this is a proof of concept and not a real application so it can make little sense.
I’ve scaffolded a Twentysixteen child theme and created a page-about-us.php template.
Following WordPress template hierarchy this template file will be used to render any page that has the about-us post name: in this case the “About us” page proper.
In the template I pull the page title and content not from the post but from a theme modification (the template side of the Theme Customizer), so nothing fancy here but some template file modification

/**
 * The template for displaying the About us page
 */

get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while (have_posts()) : the_post();
            ?>

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <h1 class="entry-title">
                        <?php echo get_theme_mod('ftb-page-about_us-title', 'About us') ?>
                    </h1>
                </header><!-- .entry-header -->

                <?php twentysixteen_post_thumbnail(); ?>

                <div class="entry-content">
                    <?php echo get_theme_mod('ftb-page-about_us-content', 'We are skilled.') ?>
                </div><!-- .entry-content -->

                <?php
                edit_post_link(
                    sprintf(
                    /* translators: %s: Name of current post */
                        __('Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen'),
                        get_the_title()
                    ),
                    '<footer class="entry-footer"><span class="edit-link">',
                    '</span></footer><!-- .entry-footer -->'
                );
                ?>

            </article><!-- #post-## -->

            <?php
            // If comments are open or we have at least one comment, load up the comment template.
            if (comments_open() || get_comments_number()) {
                comments_template();
            }

            // End of the loop.
        endwhile;
        ?>

    </main><!-- .site-main -->

    <?php get_sidebar('content-bottom'); ?>

</div><!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

So here I’m pulling two theme mods, ftb-page-about_us-title and ftb-page-about_us-content and defaulting their values should those be missing.

The About Us page customizations

The code used to generate the control relies on the Kirki library for the controls rendering; simply put it’s nice, it works and it’s easy to integrate using Composer.
The code used to add the controls is nothing extra ordinary

/**
 * Plugin Name: Front to Back
 * Plugin URI: http://theAverageDev.com
 * Description: Easy page templating for developers.
 * Version: 1.0
 * Author: theAverageDev
 * Author URI: http://theAverageDev.com
 * License: GPL 2.0
 */

include "vendor/autoload_52.php";

function ftb_about_us_page_customizations(WP_Customize_Manager $wp_customize)
{
    $page_locator = new FTB_Locators_Page();

    // settings
    $wp_customize->add_setting('ftb-page-about_us-title', array('transport' => 'refresh'));
    $wp_customize->add_setting('ftb-page-about_us-content', array('transport' => 'refresh'));

    // sections
    $wp_customize->add_section('ftb-page-about_us-section-content', array(
        'title' => 'Title and Content',
        'active_callback' => array($page_locator, 'is_about_us_page'),
    ));

    // controls
    $wp_customize->add_control(new Kirki_Controls_Text_Control($wp_customize, 'title', array(
        'label' => 'Page Title',
        'section' => 'ftb-page-about_us-section-content',
        'settings' => 'ftb-page-about_us-title',
    )));

    $wp_customize->add_control(new Kirki_Controls_Textarea_Control($wp_customize, 'content', array(
        'label' => 'Page Content',
        'section' => 'ftb-page-about_us-section-content',
        'settings' => 'ftb-page-about_us-content',
    )));
}

add_action('customize_register', 'ftb_about_us_page_customizations');

using Composer to autoload the dependencies and adding two settings.
What’s used to identify the current page and hide or show the controls using the active_callback is the FTB_Locators_Page::is_about_us_page method.
This method will have a simple task: if the user is currently previewing the “About us” page return true else return false.
The class code leverages the __call magic method to relate the check for the page

class FTB_Locators_Page
{
    public function __call($name, array $args = array())
    {
        global $wp_query;
        $posts = $wp_query->get_posts();

        // nothing to match against, bail
        if (empty($posts)) {
            return false;
        }

        // more than one post? Not a page for sure.
        if (count($posts) !== 1) {
            return false;
        }


        // get the page snake_case post name
        $matches = array();
        preg_match('/is_([_A-Za-z0-9]*)_page/', $name, $matches);

        // if we have a match on the is_*_page format
        if (isset($matches[1])) {

            // make the post_name a URL friendly post-name
            $page_slug = str_replace('_', '-', $matches[1]);

            // look for the page in the DB
            $found = get_page_by_path($page_slug, OBJECT, 'page');

            // found and same page we are looking at?
            $queried_post = $posts[0];
            return !empty($found) && $found->ID == $queried_post->ID;
        }

        return false;
    }
}

and works with some regular expression juggle to get the checked for page slug from the called method title.

I can edit the “About us” page

What happens is that the controls that make sense for the “About us” page only will not show up on any other page Theme Customizer - home and will allow for a refresh based preview on the “About us” page only Theme Customizer - About us section Theme Customizer - About us content So the idea can fly.

Next

I will wire into the Kirky library properly to use it for anything that’s field and control registration (no point in reinventing the wheel) and then move to the meat of Front to Back: code generation for templates and Theme Customizer registration.