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


Comments

10 responses to “Add Banner in Widget Before Header in Genesis”

  1. Pritchett Avatar
    Pritchett

    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?

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  2. Nazmoon Munny Avatar
    Nazmoon Munny

    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.

    1. Brad Dalton Avatar
      Brad Dalton

      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.

  3. Nazmoon Munny Avatar
    Nazmoon Munny

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

    1. Brad Dalton Avatar
      Brad Dalton

      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/

  4. martinbeasnunez Avatar
    martinbeasnunez

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

    regards from buenos aires!

    1. Brad Dalton Avatar
      Brad Dalton

      Try this

  5. Is this responsive?

    1. Brad Dalton Avatar
      Brad Dalton

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

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.