Hero full width image above blog index

How do I get a full width image above the blog index without using slider rev. what php can I insert and where?

something like this but for the blog index.

Hi There,

Thank you for writing in, please add the code below on your child theme’s functions.php file (via FTP).

/**
Add a custom banner on top of the blog page
*/
function custom_banner() { 
 if ( is_home () ) : ?>
  <div class="custom-banner x-container">
    <img class="x-img mbn" src="IMAGE URL HERE" alt="" title="" style="width: 100%;" />
  </div>
  <?php endif; 
}
add_action('x_after_site_begin','custom_banner', 30);

Replace the IMAGE URL HERE phrase on the code with your actual image URL.

Hope it helps,
Cheers!

this looks like code for if the blog is the home page. that is not the case here. i also only ned it on just the blog index page

Hi There,

That is the correct code. You can confirm it here:
https://developer.wordpress.org/reference/functions/is_home/

If a static page is set for the front page of the site, this function will return true only on the page you set as the “Posts page”.

Hi,

In my case, the home page is a static page, so this would only work on posts pages. So can I add this on wp-index.php and add it to the child theme folder? If yes, what changes should I make to this code? Thanks.

Hi @nebworx,

Please update the provided code to this:


function custom_banner() { 
 if ( is_front_page() ) : ?>
  <div class="custom-banner x-container">
    <img class="x-img mbn" src="IMAGE URL HERE" alt="" title="" style="width: 100%;" />
  </div>
  <?php endif; 
}
add_action('x_after_site_begin','custom_banner', 30);

Let us know how it goes!

Hi,

Sorry if the request isn’t clear, but I would like the full width to appear at www.abc.com/blog and not on www.abc.com. The main site is already a static page.please advise, thank you.

In that case, plesae change the code to this.


function custom_banner() { 
 if ( is_home() ) : ?>
  <div class="custom-banner x-container">
    <img class="x-img mbn" src="IMAGE URL HERE" alt="" title="" style="width: 100%;" />
  </div>
  <?php endif; 
}
add_action('x_after_site_begin','custom_banner', 30);

Hope that helps

Brilliant… thanks very much!

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.