One problem that often vexes WordPress users is when you enter content into the “content” box on your blog’s post page, that content will not be displayed on the post page. The page’s content is replaced with a list of posts. Often times users want to have some into text or other content to introduce the blog. Today I’m going to show you how to alter your theme to include the the blog page’s content, featured image as well as any custom fields you’ll be using.
This was a problem that I had only come up with mildly satisfactory solutions to until I ran across an old Stack Exchange post that changed my thinking.
Content
Turns out adding the content is really quite simple. Depending on your theme the file you need to edit may be either home.php or index.php. Locate the spot where you’d like to display the content and add this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php echo apply_filters( 'the_content', get_post_field( 'post_content', get_option( 'page_for_posts' ) ) ); ?> |
So here we’re using the get_post_field() function to pull out of the post table information we need. The post_content indicates that we’re looking for the actual content. The get_option( ‘page_for_posts’ ) is how we let WordPress know we’re interested in the “posts” page. Because of the way the posts page is handled if we used something like $post->ID we would end up with the first post’s information instead of our static page.
The entire thing is run through apply_filter with the_content being selected as the filter. That we have the expected output for our content just like we pulled it out of a loop.
That’s it for the content. But we can take the idea of using get_option( 'page_for_posts' )
as the ID and expand it to other areas.
Featured Images
Many themes make use of featured images but just like the page content, the featured image for the post page itself is ignored. You can bring it back with this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php echo get_the_post_thumbnail( get_option( 'page_for_posts' ) ); ?> |
Now we’re using our get_option( ‘page_for_posts’ ) along with the get_the_post_thumbnail() function which allows us to get the featured image of any page/post by its ID. Since this function only returns the value, we also need to echo it so it will be displayed.
It’s possible to add other items from get_the_post_thumbnail() such as the image size and any classes you’d like to add in to the img tag. That could look something like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php echo get_the_post_thumbnail( get_option( 'page_for_posts' ), 'large', array( 'class' => 'feature' ) ); ?> |
That would give you the large version of the featured image and apply a class of feature to it. So now we have the featured image on our blog page to go along with the static content.
Custom Fields
Our last example is for custom fields. Again we’re building on the power of get_option( 'page_for_posts' )
to let WordPress know what page we’d like to retrieve the custom fields for. Here’s an example of displaying a custom field on the front end:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php echo get_post_meta( get_option( 'page_for_posts' ), "your_field", $single = true ); ?> |
Just replace the your_field with the key for your custom field and that’ll display it. It’s really that simple. You can use it to pull in custom touches to your blog page. It’s especially great for theme authors because it gives users easier control of items they would likely have had to hard code before.
Bonus: Displaying the Static Page Title
There is a WordPress function that will give us the title of the page to display. It’s actually in the TwentyFifteen theme but it’s set as screen reader text so it’s not visible. Here’s the function you’re wanting for the page title:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php single_post_title(); ?> |
So hopefully you’ll find these useful as you create even more extendable and useful blog pages for your clients and customers. If you have any other ideas, share them with us in the comments.
Leave a Reply