Building a Gutenberg Sidebar

Previous Lesson

Gutenberg Sidebar – The Landing Page

Building a Gutenberg Sidebar Gutenberg Sidebar – The Landing Page
Gutenberg Sidebar - The Landing Page

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.

Landing Page Goal

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.

Starting the Landing Page

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)

The Opening

We’ll first start by declaring the HTML page declaration. Easy stuff.

<!doctype html>

<html lang="en">
Code language: PHP (php)

The HTML and PHP Header

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)

The Body

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.

The End (sort of)

And we output the ending HTML tag:

</html>
Code language: PHP (php)

The Landing Page

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)

Conclusion

Phew, what a series. We learned a TON.

Here are a collection of links to help you on your journey…

Previous Lesson
Back to Series