Front to Back, take 2, step 08

The first working prototype.

Following up

I’ve explored the new flow and purposes of the “Front to Back” plugin and have moved on since the first time I’ve thought about it again with the Theme Customizer at its core.
I’ve moved on with the development completing a first complete circle that I’ve pushed to GitHub.

The workings for real

This prototype allows me some real partial testing of the proposed flow so here it is.
I’ve created a child theme extending TwentySixteen called “ChildSixteen” and ended up with its folder in the wp-content/themes folder. ChildSixteen theme structure In the theme folder I’ve added the ftb-templates sub-folder and created a “Front to Back” powered about-us.php template in it. About us page FTB template. The template itself uses the only ftb-* tag supported at the moment: the ftb-title one.

<?php
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>
                <header class="entry-header">
                    <h1 class="entry-title">
                        <h1 class="entry-title">
                            <ftb-title>About us</ftb-title>
                        </h1>
                    </h1>
                </header><!-- .entry-header -->
            </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(); ?>

The template is a mashup of the page.php one found in the TwentySixteen theme that eschews partials in favor of clarity.
Once the “Front to Back” plugin is active on the local installation generating the template is a matter of clicking the admin bar button Template generation from the Admin Bar. to have the page-about-us.php template appear in the theme root folder. About us page template generated. The code is now clean of any “Front to Back” specific tags and PHP tags have been preserved.

<?php 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>
                <header class="entry-header">
                    <h1 class="entry-title">
                        <h1 class="entry-title">
                            <?php the_title() ?>
                        </h1>
                    </h1>
                </header><!-- .entry-header -->
            </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(); ?>

Travelling now to the Theme Customizer will show the usual controls and a preview of the front page. Main Theme Customizer view. Using the on page menu to reach the /about-us page the additional “Page Content” section shows up and with it the title editing field. About us page Theme Customizer view. Editing the About Us page title.

Live preview filtering and the save operations are still missing but this is a big leap forward.

Next

Time to tackle the live preview and save operations.