• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Add Banner in Widget Before Header in Genesis

Need to add a banner advert before your header area?

Here’s what it may look like:

before header banner

In this post, i’ll provide 3 ways to add an image before your header area.

  1. The 1st solution creates a custom widget which works in any theme.
  2. The 2nd solution creates a widget which works in Genesis themes only
  3. The 3rd solution pulls an image from your images folder and works in any theme

There’s code below which works with any theme however you may choose to use your own themes hooks. The PHP is added to the end of your child themes functions file unless otherwise indicated.

1. Before Header Widget For Any Theme

This code creates a new widget which works in any theme.

Genesis/StudioPress Users #

Here’s the solution for Genesis users.

3. From Images Folder – Works in Any Theme

Simply add your image to your child themes images folder making sure the filename and extension match whats in the code.

Demo Image HTML for Beginners

Here’s the HTML i used in a new text widget in the new before header widget area the above PHP code creates.

Simply change the url to your own image and paste this code into your widget area.

Related Tutorials

  • Before Header Utility Bar In Monochrome Pro

Reader Interactions

Comments

  1. Pritchett says

    March 6, 2014 at 6:38 pm

    First of all thanks for this very helpful post.

    I’m using a genesis theme. I need to add banners to my website’s pages below the header but right before the content. I also would like each banner to be different for each page because each page represents something different (About, contact us, etc.).

    How would I go about accomplishing this task?

    Log in to Reply
    • Brad Dalton says

      March 6, 2014 at 8:29 pm

      How many different banners?

      You can code these using conditional tags however it may be a huge amount of code if you want stacks.

      Otherwise, a custom field is the way to go if you want unique banners before very single post/page.

      You can hand code the custom field and meta box or use a plugin like ACF.

      Many tutorials on this site already for both solutions.

      Log in to Reply
  2. Nazmoon Munny says

    January 5, 2014 at 5:35 am

    Thanks for your reply. And I am not using Genesis. I want to know for normal WordPress. I have a website there I am using WordPress and did some customization. Now want to place an ads after nav menu. Most of time I spend my time in here, i mean wpsites. I already used this code now waiting for another code from you, I mean after nav menu.

    Log in to Reply
    • Brad Dalton says

      January 5, 2014 at 12:32 pm

      You can try the loop_start hook or any other WordPress hook. If your theme doesn’t include action hooks it makes it difficult to customize.

      Change wp_head to loop_start in the first code Gist.

      Log in to Reply
  3. Nazmoon Munny says

    January 4, 2014 at 7:44 pm

    Thanks Brad for great tutorial, but How can I add same banner after my nav menu and before content?

    Log in to Reply
    • Brad Dalton says

      January 4, 2014 at 8:13 pm

      Depends which theme you are using but with Genesis, you have 4 hooks to choose from. Simply change the hook in the code. http://wpsites.net/web-design/list-of-genesis-hooks/

      Log in to Reply
  4. martinbeasnunez says

    November 15, 2013 at 6:13 am

    I need to add a class to the div that will contain the banner,
    as I can do that?

    regards from buenos aires!

    Log in to Reply
    • Brad Dalton says

      November 15, 2013 at 6:43 am

      Try this

      Log in to Reply
  5. Zimbrul says

    October 10, 2013 at 10:22 am

    Is this responsive?

    Log in to Reply
    • Brad Dalton says

      October 10, 2013 at 10:27 am

      Doubt it needs any responsive CSS but you could easily add one line of CSS code if needed.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.