Need to add a banner advert before your header area?
Here’s what it may look like:
In this post, i’ll provide 3 ways to add an image before your header area.
- The 1st solution creates a custom widget which works in any theme.
- The 2nd solution creates a widget which works in Genesis themes only
- 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.
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.
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.
Thanks Brad for great tutorial, but How can I add same banner after my nav menu and before content?
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/
I need to add a class to the div that will contain the banner,
as I can do that?
regards from buenos aires!
Try this
Is this responsive?
Doubt it needs any responsive CSS but you could easily add one line of CSS code if needed.