Header and Footer Don’t Right-Justify with Custom Page Template

  • Resolved linux4me2

    (@linux4me2)


    1 year, 5 months ago

    I need to use some PHP on a specific page, so I am attempting to create a custom page template (PHP file). I actually have a number of these custom page templates that work great in Twenty Sixteen, but I want to move to a block theme, so I’ve been trying to re-create the custom page templates for Twenty Twenty Three.

    That part works just fine. Using the following code in a file called “page-test-custom-template.php,” which I saved in the root folder I created for a child-theme of Twenty Twenty Three, I can assign the custom template to a page:

    <?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">
    	<?php
    	$title = get_the_title();
    	$site_name = get_bloginfo('name');
    	$page_title = $title . ' - ' . $site_name;
    	?>
    	<title><?php echo $page_title; ?> - </title>
    	<?php 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>
                <div 
                    style="height:32px" 
                    aria-hidden="true" 
                    class="wp-block-spacer"
                ></div>
                <?php
                echo do_blocks('<!-- wp:post-content {"layout":{"inherit":true}} /-->');
                ?>
                <div  class="wp-block-group has-global-padding is-layout-constrained">
                    <?php
                    echo '<p>Here is some text from PHP.</p>';
                    ?>
                </div>
                <div class="wp-block-group">
                    <?php
                    $str = '<!-- wp:post-comments {"style":{"spacing":{"padding":{' . 
                        '"top":"var(--wp--custom--spacing--medium, 6rem)"}}}} /-->';
                    echo do_blocks($str);
                    ?>
                </div>
            </main>
            <footer class="wp-block-template-part site-footer">
                <?php block_footer_area(); ?>
            </footer>
        </div>
        <?php wp_footer(); ?>
    </body>
</html>

    The PHP output works fine, too, so I believe I’m nearly there; however, the header and footer don’t right-justify the navigation block or the credits, respectively:

    You can see the problem at the link below, and compare it to any of the other pages on the test site to see how the header and footer should look.

    I’ve been wading through the CSS, and I haven’t been able to find the issue.

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter linux4me2

    (@linux4me2)

    I found the cause of the problem, but I haven’t figured out how to fix it completely, yet.

    In this article, it says that since WP v. 6.0, the block CSS is loaded in the head, so that if you “use do_blocks() after wp_head(), WordPress does not load the block CSS.”

    I did a file comparison of my custom template page and another page, and discovered that there is a lot of styles missing from the head.

    I moved the content up just before wp_head() is called like this:

    <?php
$block_content = do_blocks( '
	<!-- wp:group {"layout":{"type":"constrained"}} -->
	<div class="wp-block-group">
	<!-- wp:post-content /-->
	</div>
	<!-- /wp:group -->'
 	);
wp_head(); 
?>

    and confirmed that it added the additional CSS between the <head></head> tags:

    <style id='wp-block-paragraph-inline-css'>
.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}p.has-background{padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}
</style>
<style id='wp-block-post-content-inline-css'>
.wp-block-post-content a:where(:not(.wp-element-button)){color: var(--wp--preset--color--secondary);}
</style>
<style id='wp-block-group-inline-css'>
.wp-block-group{box-sizing:border-box}
</style>

    Now, I have to figure out how to get it to do the same for the header, footer, and comments…

    Thread Starter linux4me2

    (@linux4me2)

    I’m going to mark this as resolved, as I now know the problem is that the block CSS for the header and footer are not being loaded, and I think the issue is not limited to the Twenty Twenty Three theme, but to any block theme that I try to add a custom page template to.

    I’m going to post a question in Developing WordPress if I can’t find the issue on my own.

    Thread Starter linux4me2

    (@linux4me2)

    I’m still not sure that creating a custom page template this way is the best method of introducing some PHP into a page without a plugin; however, I did figure out how to fix the header and footer alignment issue.

    I’ll post the modified custom page template file here in case it saves someone else some time:

    <?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.
        */
        // 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 solves the issue by running do_blocks() on the header, spacer, content, and footer within the <head></head> tags.

    Note that I did not include the featured image or comments blocks because I do not need them for my purposes. If you need them, you can refer to the /wp-content/themes/twentytwentythree/templates/page.html file to grab the corresponding code required to add them.

    • This reply was modified 1 year, 5 months ago by linux4me2. Reason: This is still a fail. Although it does fix the layout issue, I quickly discovered when I tried to apply it on another site that it doesn't capture the correct navigation menu or footer credits. It adds some extraneous menu and uses the default WP credits
    Thread Starter linux4me2

    (@linux4me2)

    I’ve got a solution that actually pulls the most-recent template parts (header and footer) from the database and allows them to be run through do_blocks in the <head></head> tags so that the necessary CSS is loaded, which fixes the problems with the version above.

    I’m not sure this is the best approach, but I couldn’t find a function built into WP that does what I needed, so I wrote my own, included at the top of the sample:

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

    (@jordesign)

    Hey @linux4me2 – thanks for following through with your solutions for those that may be searching for similar things in the future – it’s incredibly helpful.

    I don’t have anything else to add – just wanted to say thanks ??
    Once you’ve added any final solution (or further findings) you can go ahead and mark this thread as resolved (thanks).

    Thread Starter linux4me2

    (@linux4me2)

    Thanks for the kind words @jordesign.

    I have come up with a newer version of the solution that uses PHP output control functions to intercept the output of WordPress’s block_header_area and block_footer_area functions, which might be a safer alternative than using my custom function:

    <?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.
        */
        ob_start();
        block_header_area();
        $str = ob_get_clean();
        $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 -->'
        );
        ob_start();
        block_footer_area();
        $str = ob_get_clean();
        $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>

    It’s a little less code, and I think the database calls will be a wash. It might also be safer going forward in case WordPress changes the way it keeps the edited header and footer in the database.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Header and Footer Don’t Right-Justify with Custom Page Template’ is closed to new replies.