The final and last step, since we have our landing template loading, is to parse any blocks in essentially full-screen mode. Right now we have a simple “Hello World” being output. Let’s wire up this puppy and show off block nirvana in the Twenty Twenty One theme.
The goal of the landing page template is to change the background color, and to only execute blocks loaded in the template’s main content. Any extra stuff like custom fields, hooks, and stuff like that shouldn’t execute.
We’ll be calling the main hooks like wp_head
and wp_footer
, but stuff that filters the content like sharing buttons should not be shown. That, and it would be nice if it works with other themes. We’ll figure this out real soon.
As shown previously, this is how we start pretty much every WordPress file. We need to do an ABSPATH
check and set file headers.
<?php
/**
* Template inclusion file template.
*
* @package wpandajax
*/
if ( ! defined( 'ABSPATH' ) ) {
die( 'you are way off' );
}
Code language: PHP (php)
Before we start the HTML for the landing page, we’ll set a $post global since it should definitely be set there.
<?php
/**
* Template inclusion file template.
*
* @package wpandajax
*/
if ( ! defined( 'ABSPATH' ) ) {
die( 'you are way off' );
}
global $post;
?>
Code language: PHP (php)
We’ll first start by declaring the HTML page declaration. Easy stuff.
<!doctype html>
<html lang="en">
Code language: PHP (php)
Within the HTML header, we call the standard wp_head
function so other plugins and themes can load in their scripts, styles, and other meta. We also change the background color if someone sets that option on our landing page sidebar.
<head>
<meta charset="utf-8">
<?php
wp_head();
// Get background color change.
$maybe_change_background_color = get_post_meta( $post->ID, '_wpajax_set_body_color', true );
if ( $maybe_change_background_color ) {
if ( 7 === strlen( $maybe_change_background_color ) ) {
?>
<style>
body {
background-color: <?php echo esc_html( $maybe_change_background_color ); ?> !important;
}
</style>
<?php
}
}
?>
</head>
Code language: PHP (php)
Finally, in the body, we execute any blocks found within the content.
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php
echo do_blocks( $post->post_content );
wp_footer();
?>
</body>
Code language: PHP (php)
We use standard theme functions for the body
tag, and run do_blocks
on the post content, which will output all the blocks found within the content.
And we output the ending HTML tag:
Code language: PHP (php)</html>
And again, since code is free on the net, here is the full landing page code.
<?php
/**
* Template inclusion file template.
*
* @package wpandajax
*/
if ( ! defined( 'ABSPATH' ) ) {
die( 'you are way off' );
}
global $post;
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<?php
/**
* Perform any actions before the wp_head hook.
*
* @since 1.0.0
*/
do_action( 'wpajax_twenty_twenty_one_before_header' );
wp_head();
/**
* Perform any actions before the wp_head hook.
*
* @since 1.0.0
*/
do_action( 'wpajax_twenty_twenty_one_after_header' );
// Get background color change.
$maybe_change_background_color = get_post_meta( $post->ID, '_wpajax_set_body_color', true );
if ( $maybe_change_background_color ) {
if ( 7 === strlen( $maybe_change_background_color ) ) {
?>
<style>
body {
background-color: <?php echo esc_html( $maybe_change_background_color ); ?> !important;
}
</style>
<?php
}
}
?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<?php
echo do_blocks( $post->post_content );
wp_footer();
?>
</body>
</html>
Code language: PHP (php)
Phew, what a series. We learned a TON.
Here are a collection of links to help you on your journey…