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.

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

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


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