Placing the post or page title inside of the content

WordPress 5.8 is only a little more than two weeks away. Probably the biggest new feature is the introduction of Full Site Editing (FSE). This will enable you to edit the whole website with the block editor. But this will only work, if you use a FSE enabled theme. But there are some handy new block you might want to use even with your current theme. In a new project I worked on lately, I was using one of these new blocks (with the Gutenberg plugin installed).

The “Post Title” block

One of the new blocks will allow you to place the title of a blog post into the content. Even though it’s named “Post Title” it will also work with pages, or any other custom post type.

Let’s say you want to place the title in a colum next so some media element, just select this block at the desired position:

The “Post Title” block with the heading level selection

As you can see in the screenshot, the block will use a heading level H2 by default, but you can change it to H1, if you want. The content of the block cannot be edited, it will always match the title of the blog post.

Hiding the original blog post title

As this block puts the title into the content of the page, you will probably end up with having both titles in the frontend. So how can we hide the original blog post title? I most themes, we can simply check, if the content of the current post or page has such a block and then prevent the original title from showing up. How to achieve this in your child-theme highly depends on your theme. For TwentyTwenty the file twentytwenty-child/template-parts/entry-header.php which inserts the title might look this:

if ( ! has_block( 'post-title' ) ) {
	if ( is_singular() ) {
		the_title( '<h1 class="entry-title">', '</h1>' );
	} else {
		the_title( '<h2 class="entry-title heading-size-1"><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' );
	}
}

We wrap the code that inserts the title into a has_block( 'post-title' ) condition. As it’s a core block, you don’t need to prefix it as core/post-title. This might not look perfect for TwentyTwenty like this, but you get the idea.

Conclusion

Even if you don’t plan to use a very new FSE theme as soon as WordPress 5.8 is released, I would recommend to take a look at all the new blocks you can now use. You might find something you can use in a (new) project making some things a lot easier, you might had to use an additional plugin in the past.

If you haven’t known the has_block function just yet, there might also be some other functions you haven’t been using. Mark Wilkinson recently started a Twitter thread to introduce some of those functions and the first function coincidentally was the has_block function.

Posted by

Bernhard is a full time web developer who likes to write WordPress plugins in his free time and is an active member of the WP Meetups in Berlin and Potsdam.

Leave a Reply

Your email address will not be published. Required fields are marked *