Front to Back, take 2, step 10

Closing the first iteration.

What’s achievable now

The work on the first iteration of the “Front to Back” plugin is done and pushed.

Template conversion

Powered by the Kirki library and based on the Theme Customizer] it’s meant to be a tool to allow me to write templates like this 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 -->

                <div class="excerpt">
                    <ftb-excerpt>Some Excerpt</ftb-excerpt>
                </div>

                <div class="content">
                    <ftb-content>Some Content</ftb-content>
                </div>

                <div class="featured-image">
                    <ftb-featured-image></ftb-featured-image>
                </div>

                <div class="meta-one">
                    <ftb-meta var="some_var" type="text">23</ftb-meta>
                    <p>The meta value is <b><?php echo '' . $some_var; ?></b></p>
                </div>
            </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(); ?>

and have it compiled in a fairly standard WordPress page template

<?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 -->

                <div class="excerpt">
                    <?php the_excerpt(); ?>
                </div>

                <div class="content">
                    <?php the_content(); ?>
                </div>

                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>

                <div class="meta-one">
                    <?php $some_var = get_post_meta( get_the_ID(), 'some_var', true); ?>
                    <p>The meta value is <b><?php echo '' . $some_var; ?></b></p>
                </div>
            </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(); ?>

Theme Customizer integration

Up to this point there is nothing really convenient in the process to the finger work of PHP templating.
The benefit comes into play with the automatic registration and configuration of Theme Customizer controls that will allow customizing the page title, excerpt, content, featured image and meta variable. Theme Customizer editing

Next

I’d like to work on postMessage transport support to have JavaScript powered real-time field modification make the editing experience even easier.