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 Zip460 Downloads

Share This Article

C. Paul

Creating Genesis Framework related themes, plugins, articles and troubleshooting the issues. Also I am doing the freelance work for clients.

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

32 Discussion to This Post

  1. Israel HS says

    Great plugin, thanks! I have a questión., how can I remove the top banner on the frontpage? I’m using a Genesis theme and I don’t want the banner on the Frontpage.

    Thanks in advance.

    • C. Paul says

      It have a checkbox in WP Edit screen. Disable/Uncheck the checkbox and banner will not appear on home page. Hoping that you setup the front page from Settings -> Reading -> Static front page option.

  2. Mick says

    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?

  3. asweeney says

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

  4. Henry says

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

  5. Marianna says

    Hi,

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

    Marianna

    • C. Paul says

      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

  6. Malin D says

    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

  7. GGPro says

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

    Is there any way to add text over the banner?

      • GGPro says

        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?

        • Genesis Developer says

          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.

        • Genesis Developer says

          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>
          
  8. Al Harji says

    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)

    • Genesis Developer says

      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

        • Genesis Developer says

          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.

          • Al Harji says

            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.

            • Genesis Developer says

              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');
              }
              
            • Genesis Developer says

              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);
              }
              
    • Genesis Developer says

      Thank you. Today I’ll release another article where you can add rotating overlay text on the static banner image.

  9. Ricky says

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

    • Genesis Developer says

      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 *

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