Free Training For Banners In Website Header And Footer

Loes Knetsch ©

How nice would it be when you can insert your own advertising banner on top of your website and under the footer of your website? This training will take you step-by-step towards displaying a banner on every post and page.

Script icon 50

1. INSTALL A PLUGIN

I will take you through this process with clear steps and screenshots. Before you can insert these banners on top of your website you need to install the free WP plugin “Header and Footer Scripts”.

This is how it looks, click on “Add New”, install and activate.

Insert a banner on top of every post or page

 

Do you have the plugin installed? Then the next thing is, you need a leaderboard banner (728×90).

2. CREATE A BANNER

You can create one for free on DesignWizard or Canva.

I have made this leaderboard banner on DesignWizard.

Leaderboard Wealthy Affiliate education

3. + NEW – OPEN A TEST POST

Open a test post, stay in the visual tab and upload your banner to the WP Media Library, insert your banner. When your banner is added you choose “center” and you can add any link you want to it. Hop over to the text tab and copy the code.

4. GO TO THE HEADER AND FOOTER SCRIPT PLUGIN

You can find the plugin under settings on the left of the dashboard. When you are there you see 2 boxes, one for the header and one for the footer. You can, if you want to, paste the created code into both areas. And click on “Save”.

Your banner will now appear on top of every post and page and in the footer.

But you want different banners on top of every page, go to point 5!

Header and footer script plugin

 

Header and footer script plugin

5. DIFFERENT BANNERS ON TOP OF EVERY POST

Every post has screen options, and you will find the “Header script” up there too. When you check the box, it will appear under your post.

header and footer scripts in screenoptions

And when you add a banner code right beneath your post, the banner will only appear on that specific post.

header and footer scripts under post

So, this is how you can insert a different banner on top of your header, and of course, I have added a banner above my header on this post 🙂

You can change the banner anytime you like. This period my Black Friday Banner will be up!

More interesting posts:

(Visited 35 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

  1. CravenATAT says:

    I have always wanted to add banners to my website, but I had no idea how it all works. I have about 4 plugins on my site, but I didn’t realize there were ones for header/footer banner creation – I thought they were all pre-made. Your break down is perfect, and I clicked on your link to ‘Design Wizard’ and it is all making sense! Before I commit to the plugin, do you prefer DesignWizard or Canva? It seems DesignWizard is more user friendly without the hassle of technical talk. 

    Once I look at them both and hear which you recommend, I am going to add these banners into the header of each of my pages. You have sparked a new fire into my website development!

    • Loes says:

      I have a premium account at Design Wizard, so obvious, I like that one more:) They both are good! Except from that Design Wizard has an affiliate program, and Canva not (Yet) I heard they are thinking about that.

  2. Chris says:

    This looks like a really interesting plugin – I’ve been looking to spice up the header section of my WordPress blog for quite some time now, as I’ve still got the universal ‘forest path’ picture stuck on mine! 

    I’m a little bit unsure about HTML. Is it as simple as copying the HTML given to you and placing it in two separate boxes? (actually one box for me – I’m only looking to put a banner in the header section!). 

    I’m not the best with coding and I have heard it’s easy to mess up a site by inputting HTML in the wrong place…

    • Loes says:

      You always have to be very careful adding HTML codes directly into the editor, you can break your website with doing that. That’s why I always advise, when you have the opportunity to create 2 websites, to use one for testing stuff. I know that Wealthy Affiliate offers you that opportunity. But maybe more services online do that. I create the script in a test post, and then copy it to the header or footer section of the plugin.

      Success creating your own header banner, by the way, this banner will appear above your header section. 

      Loes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>