WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. 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?

    • 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. 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.

    • 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.

Leave a Reply