How To Use A Different Header For Your Blog Page

There’s so many solutions when it comes to displaying different header images, many of which i have already covered in this blog.

Here’s a different method which is based on answering this forum question i saw today:

I would like to include a header image above the blog on my website and I was wondering if anyone could offer any advice. I feel it would look better to introduce the blog with a simple header of its own, both on the home page of my website and on the blog page itself—to appear as a header in both places.

Here’s the solution i hope you’ll like as it involves the use of a custom blog page template which is a great idea.

1. Simply create a new file using a code editor like Notepad++
2. Copy the code from the view raw link in the Gist
3. Paste the code into the new file and name it page_blog.php
4. Upload the new file to your child themes root directory
5. Select the Blog Header page from the Page Attributes box on the Edit Page screen.

Usage

The code pulls a image file from your images folder named blog.jpg and displays it only on pages using this template. It also removes the default header image.

Linking Your Blog Header To Any URL

Simply change the URL with your own and replace the entire line of code with this:

Update: I actually learn’t David was using the Sixteen Nine Pro theme which doesn’t use the standard header so you will need to use the genesis_before_loop or genesis_before_content hook with an image which is 760px wide.

Another option is to use CSS:

.page-template-page_blog-php .content {
        background-image: url(images/header.png);
	background-repeat: no-repeat;
	padding-top: 150px;
}