PHP-Based Custom Page Templates In Block Themes?

  • I have a site that’s still using a non-block-based theme that I would like to modernize, and it looks like block-based themes are the future. The site uses a number of custom page templates with a lot of PHP that needs to run before the content loads, so I figure that a custom page template is still the way to go rather than using a shortcode.

    I’ve been testing with the Twenty Twenty Three theme, and I’ve built the following custom page template for testing purposes:

    <?php
/**
 * This is a test custom template for Twenty Twenty Three.
 *
 * Template Name: Test Custom Template
 *
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <?php
        $title = get_the_title();
        $site_name = get_bloginfo('name');
        $page_title = $title . ' - ' . $site_name;
        ?>
        <title><?php echo $page_title; ?></title>
        <?php
        /*
           You have to run the do_blocks() between the <head></head> tags in order
           for WordPress to load the corresponding CSS.
        */
        // Spacer block.
        $str = '<div 
                    style="height:32px" 
                    aria-hidden="true" 
                    class="wp-block-spacer"
                ></div>';
        $block_spacer = do_blocks($str);
        // Content block.
        $block_content = do_blocks(
            '<!-- wp:group {"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
            <!-- wp:post-content /-->
            </div>
            <!-- /wp:group -->'
        );
        wp_head();
        ?>
    </head>
    <body <?php body_class(); ?>>
        <?php wp_body_open(); ?>
        <div class="wp-site-blocks">
            <header class="wp-block-template-part">
                <?php block_header_area(); ?>
            </header>
            <main class="wp-block-group">
                <div class="wp-block-group has-global-padding is-layout-constrained">
                    <h1 class="wp-block-post-title">
                        <?php echo $title; ?>
                    </h1>
                </div>
                <?php
                echo $block_spacer;
                echo $block_content;
                echo $block_spacer;
                ?>
                <div class="wp-block-group has-global-padding is-layout-constrained">
                    <div class="entry-content wp-block-post-content is-layout-flow">
                        <?php
                        echo '<p>Here is some text from PHP.</p>';
                        ?>
                    </div>
                </div>
                <?php echo $block_spacer; ?>
            </main>
            <footer class="wp-block-template-part site-footer">
                <?php block_footer_area(); ?>
            </footer>
        </div>
        <?php wp_footer(); ?>
    </body>
</html>

    The problem is that the elements that should be right-justified, like the navigation menu and footer credits, are not:

    I can fix the layout by running do_blocks() on the header and footer in a second custom page template like this:

    <?php
/**
 * This is a test custom template for Twenty Twenty Three.
 *
 * Template Name: Test Wrong Header and Footer, Fixed Layout
 *
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <?php
        $title = get_the_title();
        $site_name = get_bloginfo('name');
        $page_title = $title . ' - ' . $site_name;
        ?>
        <title><?php echo $page_title; ?></title>
        <?php
        /*
           You have to run the do_blocks() between the <head></head> tags in order
           for WordPress to load the corresponding CSS.
        */
        // Header block.
        $str = '<!-- wp:group {"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
                <!-- wp:group {"align":"wide","style":{"spacing":{"padding":' . 
                   '{"bottom":"var:preset|spacing|40"}}},"layout":{"type":"' . 
                   'flex","justifyContent":"space-between"}} -->
                <div class="wp-block-group alignwide" style="padding-bottom:' . 
                   'var(--wp--preset--spacing--40)">
                    <!-- wp:site-title {"level":0} /-->
                    <!-- wp:navigation {"layout":{"type":"flex","setCascading' . 
                    'Properties":true,"justifyContent":"right"}} /-->
                </div>
                <!-- /wp:group -->
            </div>
            <!-- /wp:group -->
            ';
        $block_header = do_blocks($str);
        // Spacer block.
        $str = '<div 
                    style="height:32px" 
                    aria-hidden="true" 
                    class="wp-block-spacer"
                ></div>';
        $block_spacer = do_blocks($str);
        // Content block.
        $block_content = do_blocks(
            '<!-- wp:group {"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
            <!-- wp:post-content /-->
            </div>
            <!-- /wp:group -->'
        );
        // Footer block.
        $str = '<!-- wp:pattern {"slug":"twentytwentythree/footer-default"} /-->';
        $block_footer = do_blocks($str);
        wp_head();
        ?>
    </head>
    <body <?php body_class(); ?>>
        <?php wp_body_open(); ?>
        <div class="wp-site-blocks">
            <header class="wp-block-template-part">
                <?php echo $block_header; ?>
            </header>
            <main class="wp-block-group">
                <div class="wp-block-group has-global-padding is-layout-constrained">
                    <h1 class="wp-block-post-title">
                        <?php echo $title; ?>
                    </h1>
                </div>
                <?php
                echo $block_spacer;
                echo $block_content;
                echo $block_spacer;
                ?>
                <div class="wp-block-group has-global-padding is-layout-constrained">
                    <div class="entry-content wp-block-post-content is-layout-flow">
                        <?php
                        echo '<p>Here is some text from PHP.</p>';
                        ?>
                    </div>
                </div>
                <?php echo $block_spacer; ?>
            </main>
            <footer class="wp-block-template-part site-footer">
                <?php echo $block_footer; ?>
            </footer>
        </div>
        <?php wp_footer(); ?>
    </body>
</html>

    That fixes the layout (you can see it on the test site via the “Fixed Layout” menu item), but doesn’t display all the header blocks I added and shows the default credits instead of the copyright I added via the Editor:

    Adding a PHP-based custom template is so easy with the old, non-block-based themes, but this is giving me fits.

    I found this article, which helped get me started, but I haven’t been able to find any documentation for adding PHP-based custom templates for block themes, and the current Page Templates document is still geared to non-block-based themes, it seems.

    How do I get WordPress to load both the CSS I need to fix the layout and the correct content for the header and footer?

    Or is there a better way to run a PHP-based page in a block theme?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • The main issue is the incompatibility of block theme templates (HTML files) and classical theme templates (PHP files).

    You either use one or the other for each template.

    You can use HTML code in PHP file, but not the other way around, at least not that straightforward.

    The only option I could see is to make custom blocks that render on the server – https://developer.www.ads-software.com/block-editor/reference-guides/packages/packages-server-side-render/

    Thread Starter linux4me2

    (@linux4me2)

    Thanks @imoptimal,

    I took a look at using a custom block, but this puts me off:

    ServerSideRender should be regarded as a fallback or legacy mechanism, it is not appropriate for developing new features against.

    I also considered a custom shortcode, but my custom page templates output some code required to render the page prior to any blocks loading.

    I’m so close with my PHP template. The only thing I’m missing is how to render the actual header and footer content as set via the Editor and load the necessary CSS.

    Using block_header_area(); loads all the correct blocks, but lacks the CSS to justify the menu. Adding a do_blocks() for the header adds the CSS, but doesn’t output the correct blocks. Other than that, all the PHP on the page template works perfectly.

    I’d just like to have a solution that adds the correct CSS and allows me to use the Editor-generated header and footer going forward to make maintenance easy.

    Thread Starter linux4me2

    (@linux4me2)

    I believe I’ve found the direction to go for a fix.

    The current header and footer as created by the Editor are kept in the wp_posts table in the database with post_names of “header” and “footer,” respectively, and post_type of “wp_template_part.”

    If I copy the post_content from those two entries into my code, and run them through do_blocks between the <head></head> tags, they are output correctly with the necessary CSS.

    So the fix will be to grab the current entries for header and footer from the database as strings, and run them through do_blocks. It seems like there should be a function for that already which doesn’t echo the content, but block_template_part() echoes the content, which won’t work.

    Thread Starter linux4me2

    (@linux4me2)

    Okay, I found a fix, though I still am not sure this is the best approach.

    I could not find a built-in WordPress function that retrieves the current header/footer from the database that doesn’t echo it instead of returning it, so I built my own and altered the custom page layout accordingly:

    <?php
/**
 * This is a test custom template for Twenty Twenty Three.
 *
 * Template Name: Test Custom Template
 *
 */
 
/**
 * Retrieves the latest template part from the database.
 * 
 * @param @string $name The name of the template part.
 *
 * @return HTML for the template part.
 */
function getTemplatePart($name) 
{
    global $wpdb;
    $results = $wpdb->get_row(
        $wpdb->prepare(
            "SELECT post_content FROM $wpdb->posts WHERE post_name = %s AND 
            post_type = %s AND post_status = %s ORDER BY ID DESC LIMIT 1", 
            $name, 
            'wp_template_part', 
            'publish'
        ), 
    );
    
    if ($results) {
        $str = $results->post_content;
    } else {
        // Get the default template part.
        $str = '<p>Default template part not found.</p>';
        $filename = get_template_directory() . '/parts/' . $name . '.html';
        if (file_exists($filename)) {
            $str = file_get_contents($filename);
            if ($str === false) {
                $str = '<p>Could not get template part contents.</p>';
            }
        }
    }
    return $str;
}
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <?php
        $title = get_the_title();
        $site_name = get_bloginfo('name');
        $page_title = $title . ' - ' . $site_name;
        ?>
        <title><?php echo $page_title; ?></title>
        <?php
        /*
           You have to run the do_blocks() between the <head></head> tags in order
           for WordPress to load the corresponding CSS.
        */
        $str = getTemplatePart('header');
        $block_header = do_blocks($str);
        // Spacer block.
        $str = '<div 
                    style="height:32px" 
                    aria-hidden="true" 
                    class="wp-block-spacer"
                ></div>';
        $block_spacer = do_blocks($str);
        // Content block.
        $block_content = do_blocks(
            '<!-- wp:group {"layout":{"type":"constrained"}} -->
            <div class="wp-block-group">
            <!-- wp:post-content /-->
            </div>
            <!-- /wp:group -->'
        );
        $str = getTemplatePart('footer');
        $block_footer = do_blocks($str);
        wp_head();
        ?>
    </head>
    <body <?php body_class(); ?>>
        <?php wp_body_open(); ?>
        <div class="wp-site-blocks">
            <header class="wp-block-template-part">
                <?php echo $block_header; ?>
            </header>
            <main class="wp-block-group">
                <div class="wp-block-group has-global-padding is-layout-constrained">
                    <h1 class="wp-block-post-title">
                        <?php echo $title; ?>
                    </h1>
                </div>
                <?php
                echo $block_spacer;
                echo $block_content;
                echo $block_spacer;
                ?>
                <div class="wp-block-group has-global-padding is-layout-constrained">
                    <div class="entry-content wp-block-post-content is-layout-flow">
                        <?php
                        echo '<p>Here is some text from PHP.</p>';
                        ?>
                    </div>
                </div>
                <?php echo $block_spacer; ?>
            </main>
            <footer class="wp-block-template-part site-footer">
                <?php echo $block_footer; ?>
            </footer>
        </div>
        <?php wp_footer(); ?>
    </body>
</html>

    The function returns the default HTML for the named template part if there’s not one in the database, and otherwise retrieves the latest entry with the template part name, as it appears that WP saves multiple copies if you do edits.

    So far, this appears to solve the problem of getting both the necessary CSS and the correct template part content, at least on the two test sites I’ve tried it on.

    I’m not going to mark this as “resolved” yet in case someone has a better suggestion.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘PHP-Based Custom Page Templates In Block Themes?’ is closed to new replies.