WordPress blog post custom header image

Hope you are loving our new design, we got many emails to share such tutorial for WordPress blog post custom header image. So, as usual, I'm here to share complete and easiest tutorial as possible. Let's start-

How to set WordPress blog post custom header image

Step 1 - Login to your WordPress admin panel, it's your simple URL (yoursite.com/wp-admin).

Step 2  - Access for Appearance --> Editor as below image

custom-blog-header-image-without-plugin

Step 3 - Search for something like your header section or header class, for example -

<div class="header_logo_wrapper"

Step 4 - Add below line after ending of class, for example, I will add below code after class="header_logo_wrapper" 

<?php if (has_post_thumbnail( $post->ID ) || ! is_home() || ): ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),
 'single-post-thumbnail' ); ?>

style="background-image: url(<?php echo $image[0]; ?>);
background-size: cover;" <?php endif; ?>

Now your final header code will be something like -

<div class="header_logo_wrapper"
<?php if (has_post_thumbnail( $post->ID ) || ! is_home() ): ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),
 'single-post-thumbnail' ); ?>

style="background-image: url(<?php echo $image[0]; ?>);
background-size: cover;" <?php endif; ?> >

How custom blog header image works without a plugin ?

In above concept, we are using below WordPress properties-

 

  1. It's check for post thumbnail first, if there are many so nothing to worry it will pick only first one ($image[0])
  2. It will only for blog post page because there is a check in if condition (is_home())
  3. The code only run if your blog post has a thumbnail and append an inline style attribute with the first thumbnail as a background image.

If you want above code for all your pages including Blog post and Home, the use below code:

<div class="header_logo_wrapper" 
<?php if (has_post_thumbnail( $post->ID )): ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),
 'single-post-thumbnail' ); ?>
 
style="background-image: url(<?php echo $image[0]; ?>); 
background-size: cover;" <?php endif; ?> >

That's all.

Without your feedback there is no way for  improvement, so give us a min and share your words.

* Is this helped you? you can gift us a coffee or share your feedback*

Himanshu is a young engineer living in India. Currently working at BOLD.com as UI Engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seems interesting, go through portfolio: www.himstar.info "Open Source. Millions of open minds can't be wrong!"

Leave a reply:

Your email address will not be published.

Sliding Sidebar

We have 20,000+ active geeks


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page