Replace header image with featured image

Adding the featured image as header image.

The following is an example of using the featured image as a header image.

This 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.

// 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 *****/

// Front page: Check to see if there is a featured image, if not then use below image.
if ( is_front_page() && ( $image_url === false )) {
$image_url = '/wp-content/uploads/image1.jpg';
}

// About page: Check to see if there is a featured image, if not then use below image.
if ( is_page('about') && ( $image_url === false )) {
$image_url = '/wp-content/uploads/image2.jpg';
}

// Travel page: Front page: Check to see if there is a featured image, if not then use below image.
if ( is_page('travel') && ( $image_url === false )) {
$image_url = '/wp-content/uploads/image3.jpg';
}

// Events page: Check to see if there is a featured image, if not then use below image.
if ( is_page('events') && ( $image_url === false )) {
$image_url = '/wp-content/uploads/image4.jpg';
}

// Blog page: Check to see if there is a featured image, if not then use below image. Automatically uses the first post featured image.
if ( is_home() && ( $image_url === false )) { 
$image_url = '/wp-content/uploads/image5.jpg'; 
} 

// All single posts: Check to see if there is a featured image, if not then use below image.
if ( is_single() && ( $image_url === false )) { 
$image_url = '/wp-content/uploads/image6.jpg'; 
} 


// Use default image if no feature image is found. 
if ( false === $image_url ) {
$image_url = '/wp-content/uploads/image7.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: 28vh; /* modified */
border: 0px; /* Added */
margin-top: 0px; /* Added */
}
</style><?php
}

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

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 === false )) { 
$image_url = '/wp-content/uploads/yellow-bg.jpg'; 
}
// Move post title to header. 
if ( is_front_page() ) { 
beans_modify_action_hook( 'beans_post_title', 'beans_header_append_markup' ); 

// Add a new title to header.
add_filter( 'beans_post_title_text_output', 'modify_front_title' );
 function modify_front_title() {
        return 'Another front page title';
     }
}

// Set default image for contact. 
if ( is_page('contact') && ( $image_url === false )) { 
$image_url = '/wp-content/uploads/Colorful-forest.jpg'; 
}
// Move post title to header.  
if ( is_page('kontakt') ) {
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 === false )) { 
$image_url = '/wp-content/uploads/Green-mountains.jpg'; 
}
// Move post title to header.  
if ( is_page('my-child-themes') )
beans_modify_action_hook( 'beans_post_title', 'beans_header_append_markup' ); 
} 

?><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: 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

Additional example adjustments

// Set default image for archive.
 if ( is_home() && ( $image_url === false )) {
 $image_url = '/wp-content/uploads/Green-mountains.jpg';
 }
// Move post title to header.
 if ( is_home() ) {
 beans_modify_action_hook( 'beans_post_archive_title', 'beans_header_append_markup' );
// Add new title
 add_filter( 'beans_home_title_text_output', 'modify_blog_title' );
 function modify_blog_title() {
        return 'News ';
     }
 }
// Set default image for Custom Post Type archive.
 if ( is_post_type_archive('edwien') && ( $image_url === false )) {
 $image_url = '/wp-content/uploads/Ulvoysund-1987-Foto-Chronsteen-Andreas-Edwien.jpg';
}
 // Move post title to header.
 if ( is_post_type_archive('edwien') ) {
 beans_modify_action_hook( 'beans_post_archive_title', 'beans_header_append_markup' );

 // Add new title
 add_filter( 'beans_archive_title_text_output', 'modify_edwien_title' );
 function modify_edwien_title() {
        return 'Edwiens Texts ';
     }
 }

NB! Moving the featured image to another location on the page or post.

Here is an example on adding the featured image to the body of the site.
Adjust the following code inside the functions file.

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

/* Front page */

.home .tm-main,
.home .uk-panel-box, 
.page-id-11 .tm-main,
.page-id-11 .uk-panel-box {    
  background-color: transparent; 
} 


.tm-content {
 	background: rgba(248, 248, 248, 0.70);
 	box-shadow: 0px 1px 1px rgba(0,0,0,0.08);
 }  
  
 .home .tm-footer {
 	background: rgba(248, 248, 248, 0.70);		
 } 
 
 /*--- Front page end ---*/

.tm-footer {
  	background: rgb(248, 248, 248);
  	height: 40px;
  	padding-top: 15px;
  	font-size: 14px;
  }
Front page
Filed under: Learning

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