How to add featured image and H1 title to your blog posts hero header with GeneratePress


In this video, I will show you how to add your featured image background and H1 title to your blog posts hero header with the newly updated GeneratePress Premium Page headers add-on.

After the recent amazing update of GeneratePress Premium, we have a new page headers add-on. This update has created an opportunity to globally set up headers for all your different page or post types.

-First, log into your WordPress admin area, and make sure that the GeneratePress Premium plugin is active with your free GeneratePress theme.
-Now hover over the Page Headers menu and click on Add new.

For all my blog posts I wish to have the featured image as a background with background overlay and most importantly the title of the post in the middle.
-Add a name to your header like blog posts
-Click on the content tab and type in the following <h1>{{post_title}}</h1>. This will add the post title as a H1 to our new header. As you can see using simple HTML and the possible tags in your sidebar, there are numerous options to style this.
-Next, click on Add background and click on Use background color as overlay
-Set the container to full width
-Text alignment to center and add a padding of your choice
-Then, create the overlay colour. Choose a colour at the Background colour option and set the transparency with the second slider. The number at the end represents the percentage of transparency. So If i want 80% than i use the slider to get a value of 0.8
-Text colour in this case will be set to White for a good contrast

If this is all you needed you can stop here, publish it and skip to the next section of the video. I personally wanted to set a transparent header at the same time. If you wish to do the same let’s carry on:

-Click on the advanced tab and click on Merge with site header.
-Click on Place content behind header (sliders etc..)
-And if you need to have a custom navigation colour click on Custom navigation colors…I set the colours to white in this case and now it is time to hit the Publish button

Please note that the per post or page featured image will be used as background of the header. If you wish to create a unified look for page titles just add your background image or colour with a padding of your choice.

Great, we are almost done. Now click on the Global locations option in the Menu and set the Posts location to the newly created header template. Hit Save Changes and have a look at a post.

As you can see the new template has been applied and most importantly the featured image and post title has been disabled automatically, as they are part of the new header now. This is extremely useful if you have way too many posts from the past and wish to update them in one press of a button.

If you wish to make modification globally all you have to do is edit the template.

Resources used: