• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Blog
  • About
  • Contact
  • Newsletter
  • Login
Home ยป How to set Featured Image as Background Cover with Title and Sub Title

How to set Featured Image as Background Cover with Title and Sub Title

Create a hook in functions.php

//ADD COVER TO ONLY SUB PAGES
function add_background_cover(){
    if ( !is_front_page() ) {
        include('inc/cover.php');
    }
}
add_action('genesis_after_header', 'add_background_cover');

Create a file inc/cover.php and place the following snippet in it. Don’t forget to replace the ACF slug in cover_subtitle() function!

<?php

//Cover Background
function cover_background() { 
    
    function cover_subtitle() { 
    if( get_field('........') ){ the_field('........') }
            else{ echo 'Hello World!'; }
        }
    
    $bgImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); 
    if( has_post_thumbnail() ){ ?>
            <section class="cover" style="background-image: url('<?php echo $bgImage[0]; ?>'); ">
                <h1 class="entry-title" itemprop="headline"><?php the_title(); ?></h1>
                <p><?php cover_subtitle(); ?></p>
            </section>
        <?php }
        else{  ?>
            <section class="cover" style="background-image: url(..............); ">
               <h1 class="entry-title" itemprop="headline"><?php the_title(); ?></h1>
                <p><?php cover_subtitle(); ?></p>
            </section>
            <?php
             }
    }
cover_background();
?> 

CSS

 .cover {
	height: 280px;
	padding-top: 60px;
}

Filed Under: Premium Tagged With: Genesis

About Gabor Flamich

I'm a web developer and designer based in Budapest, Hungary. In recent years, I've documented hundreds of solutions I came across during development. This site is an archive for useful code snippets on WordPress, Genesis Framework and WooCommerce. If You have any questions related to WordPress development, get in touch!

Primary Sidebar

Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress and WooCommerce.

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
UpdraftPlus Premium

Tags

ACF Ajax Analytics API Bootstrap Breadcrumb category CPT CSS fetch FSE Genesis Google Maps Gutenberg HTML Isotope JavaScript jQuery loop Map Menu Parallax PHP Rest API SASS SEO SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Webpack Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2025 WP Flames - All Right Reserved