Displaying Featured Image as a Static Full Width Banner Image After Header

I created a plugin “Genesis Static Banner” which is easily insert the featured image as a static full width image at below the site header. This plugin will only work on any Genesis Child Theme. See the video for setup.

Genesis Static Banner

Adding Featured Image as a static full width banner image at below the site header bar.

Download Zip410 Downloads

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

30 Discussion to This Post

  1. How would I go about hard coding this into my site without it being a plugin, would this code simply attach to my functions.php file?

  2. I am having the same issue with the banner displaying above the navigation bar. How do I correct this?

  3. Thank you for this. What is the recommended width for the header image?

  4. Hi,

    Great plugin, thank you!
    Is there a way to have the same full width image to a category page?

    Marianna

    • Hello Marianna!

      Thank you for using my plugin. Right same option is not available for category archive page.

      You can do one thing. You can create a template for category archive page and make a full width hero image there.

      Best
      Chinmoy

  5. Hi

    This works great but I have two questions:
    1. Can I place the banner after the navigation bar?
    2. Can I add the page title over the banner?

    Regards Malin

  6. Hi, this is exactly what i’d been looking for, thank you so much!

    Is there any way to add text over the banner?

      • Thanks, that worked! What would i remove if I want a simple line without any rotation of text?

        And can the text be used as an H1 or H2 header?

        • Remove following codes:

          add_action('wp_footer', 'gd_otr_enqueue_scripts');
                function gd_otr_enqueue_scripts() {
                  wp_enqueue_script( 'bxslider-js', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.bxslider.js', array( 'jquery' ), '1.0.0' );
                  wp_enqueue_script( 'overlaytext-js', get_bloginfo( 'stylesheet_directory' ) . '/js/overlaytext.js', array( 'bxslider-js' ), '1.0.0' );
                }
          
          $overlay_text = implode( "</li><li>", explode( '|', $overlay_text ) );

          You will not add “|” when you are entering the text in input box.

        • And can the text be used as an H1 or H2 header?

          Re: You can replace this code

          <ul class="slides">
              <li>' . $overlay_text . '</li>
          </ul>
          

          by

          <h2>' . $overlay_text . '</h2>
          
  7. This is simply fantastic and looks like an easy plugin to use. What would be great is having the ability to have check boxes to show Post Title, Excerpt, Categories, Tags and author as overlays if any or all checked in pre-defined areas.

    Thanks for the continued generosity with your clever and simple to use solutions.

    Possible ideas for alternate to featured image:
    – ability to add shortcode so other content like slideshows can be shown
    – google map (add address and show map/streetview)
    – overlay a widget (left – centre – right)

    • Hi Al Harji,

      Thank you very much for your suggestions. This is very good idea. I’ll try to implement it as soon as possible.

      Thanks
      Chinmoy

        • Yes. Already plugin is accepting the custom post type. There have a filter “gsb_post_type”. Using it you can enable banner option on specific custom post types.

          • Love it! Perhaps in the future we can save settings for site-wide and then enable/disable on individual post/pages/cpts 😉
            Thank you – OK, no more requests or ideas, you’ve been very generous to us already.

            • Perhaps in the future we can save settings for site-wide and then enable/disable on individual post/pages/cpts

              Re: Exactly. For this reason I am using filter.

              Example: Sometime users are wanting to add the banner on pages only. So he can enable it for pages only using that filter. He will write the code in functions.php file

              add_filter('gsb_post_type', 'gd_show_on_pages_only');
              function gd_show_on_pages_only($post_types) {
                 return array('page');
              }
              
            • Here is the example:

              add_filter('gsb_post_type', 'gd_show_on_pages_only');
              function gd_show_on_pages_only($post_types) {
                 $cpts = array('CPT1', 'CPT2');
                 return array_merge($post_types, $cpts);
              }
              
    • Thank you. Today I’ll release another article where you can add rotating overlay text on the static banner image.

  8. Thanks for sharing this, Chinmoy. Looking forward to try it out, can be useful in a project I’m working on right now.

    • Thank you. Share your experience after implementing it on your site.

Leave A Reply

Your email address will not be published. Required fields are marked *