Replace header image with featured image

Adding the featured image as header image.

Here is an example of using the featured image as a header image. Here is the Tutorials blog page that uses a specific image that I defined through the below code. If you just need one header image for the site then this can be done through the Customizer. I am showing the featured image of each page in the header.

Beans-featured-header-image

 

The following modification of the code came from this support thread:
community.getbeans.io/discussion/replacing-header-image-with-featuredimage-or-custom-field/

 

Add the following code to the functions.php file.

/* ------- Add featured image to header. https://community.getbeans.io/discussion/
replacing-header-image-with-featuredimage-or-custom-field/ ------*/

// Remove customizer custom header image option.
add_action( 'after_setup_theme', 'example_theme_setup' );
function example_theme_setup() {
remove_theme_support( 'custom-header' );
}

// Add full screen header image.
add_action( 'wp_head', 'example_header_image' );

function example_header_image() {
$image_url = get_the_post_thumbnail_url( null, 'full' );

/***** My modifications *****/
// Set default image for front page. 
if ( is_front_page() ) {
$image_url = '/wp-content/uploads/yellow-bg.jpg';
}

// Set default image for contact.
if ( is_page('my-child-themes') ) {
$image_url = '/wp-content/uploads/Colorful-forest.jpg';
}

// Set default image for blog.
if ( is_home() ) {
$image_url = '/wp-content/uploads/Green-mountains.jpg';
}

// Set default image for archive.
if ( is_archive() ) {
$image_url = '/wp-content/uploads/Green-mountains.jpg';
}

// Set default image for posts.
if ( is_single() ) {
$image_url = '/wp-content/uploads/Green-mountains.jpg';
}

// Set a default image if no feature image is found. 
if ( false === $image_url ) {
$image_url = '/wp-content/uploads/Blue-pattern.jpg';
}


?><style type="text/css">
.tm-header {
background-image: url(<?php echo esc_url( $image_url ); ?>);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
min-height: 20vh; /* modified */
border: 0px; /* Added */
}
</style><?php
}

/* ----- END featured header image. ----- */

 

 

 

Featured header image for specific pages

I defined featured images to be used for some pages on my site.
I also moved the post title into the header.

 

Beans-featured-header-image-with-post-title

The above shows the featured header image as seen on the front page.

 

The code:

// Add uk text center to header to align post title.
beans_add_attribute( 'beans_header', 'class', 'uk-text-center' );

// Remove customizer custom header image option.
add_action( 'after_setup_theme', 'example_theme_setup' );
function example_theme_setup() {
remove_theme_support( 'custom-header' );
}

// Add full screen header image.
add_action( 'wp_head', 'example_header_image' );

function example_header_image() {
$image_url = get_the_post_thumbnail_url( null, 'full' );

/***** Define which page shows a featured header image *****/
// Set default image for front page. 
if ( is_front_page() ) {
$image_url = '/wp-content/uploads/yellow-bg.jpg';
// Move post title to header. 
beans_modify_action_hook( 'beans_post_title', 'beans_header_append_markup' );
}

// Set default image for contact.
if ( is_page('contact') ) {
$image_url = '/wp-content/uploads/Colorful-forest.jpg';
// Move post title to header. 
beans_modify_action_hook( 'beans_post_title', 'beans_header_append_markup' );
}

// Set default image for my-child-themes.
if ( is_page('my-child-themes') ) {
$image_url = '/wp-content/uploads/Green-mountains.jpg';
// Move post title to header. 
beans_modify_action_hook( 'beans_post_title', 'beans_header_append_markup' );
}


?><style type="text/css">
.home .tm-header,
.page-id-43 .tm-header, /* my child theme page id */
.page-id-227 .tm-header /* contact page id */{
background-image: url(<?php echo esc_url( $image_url ); ?>);
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
min-height: 35vh; /* modified */
border: 0px; /* Added */
margin-top: 0px; /* Added */
}
</style><?php
}

 

NB!

If I wanted to add the featured image header to all pages. I could remove the
if ( is_page(‘contact’) ) and replace with if ( is_page() )
I would then remove the code for specific pages and just use the is_page instead.

For the tm-header CSS I would instead of .page-id-43 and 227 .tm-header switch to
.page .tm-header

 

 

I also added CSS to the regular header for all other pages.
In the style.css file I added:

.tm-header {
background: #342626;
height: 120px;
/* margin-top: 50px; */
}

/* uk-block inside of the header added too much padding by default so that I changed that. 
I could if I wanted also just remove the uk-block from the header. */
.tm-header.uk-block {
padding: 15px;
}

/* The post title. Affects only pages and not the blog or posts.*/
.page .uk-article-title {
padding-top: 35px;
color: white !important;
}

 

The Tutorials page shows only the standard header with a background color. As I have above defined which pages that will have a header image and which should just use the standard header.

 

Beans-header-background-color-blog

 

 

No comment yet, add your voice below!


Add a Comment

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

Comment *
Name *
Email *
Website