Adding Banners with WordPress Theme Editor

Home / Adding Banners with WordPress Theme Editor - November 5, 2017 , by accad

Adding banners with WordPress Theme Editor is amazing. You can add on the header, on the sidebar, or on the footer of your web page.

I will illustrate it to you in the simplest way how adding banners with WordPress theme editor is done in the back office of your website, the WordPress. 

What is a banner?
A banner is a slogan or a design, a heading or advertisement that are hung in a public place or carried in a demonstration or procession, or that appears on a web page.

Now, we particularize our discussion on the banner that appears on a web page or on a website which can be your own banner, advertisers’ banner or your affiliate banner.

WordPress Dashboard as your back office
So, without any further ado let’s do it and let’s start with the WordPress dashboard-your back office.

Easy way to add banner to your website WP dashboard

Pres appearance and select Editor

Easy way to add banner to your website

After pressing Editor as you can see in the image above, you will be led to the edit themes where you will see at the right side the 404 Template, Archives, Comments, Theme Footer, Theme Functions, Theme Header, custom-header.php, customizer.php, etc.  Please see below.

Easy way to add banner to your website Appearance Templates




 Easy way to add banner to your website

Easy way to add banner to your website

 

 

Now, these are the particular places where you will be adding your banners.  You don’t need to copy the banner itself but you just copy the HTML code and you will paste in your web page through the Theme Header, Theme Footer, or on the Sidebar.

Let’s try to illustrate it by adding your banner to the Theme Header.  If you place the HTML code here your banner or your advertisement will appear in the header of your web page which will look like this-

Easy way to add banner to your website

My website title is I Learned to Love Online Marketing which normally is on the top of the web page but because the I put the HTML code of the Ads on the Theme Header, as a result, the Ads appear on the Header.

How do we add the HTML code to the Theme Header?
→If you point your mouse to the Appearance choices appear and below you will find the Editor, select that and press.  Now you are led to the Theme Editor and you will be seeing the Theme Header on the right side.  Press that and you will see the content.

Take notice of the word head enclosed with symbols, that is where you will place the HTML code of any banner or advertisements you get from your affiliate programs or anything that you created you wanted to appear in the Header of your web page.  If it is your first time to open and add something there will be not too much content.  You will insert your HTML code just below after the first <head>  or before the last <head>.
<head>
<head>

It should look like this:
<head>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: “ca-pub-5065241986091101”,
enable_page_level_ads: true
});
</script>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”profile” href=”http://gmpg.org/xfn/11″>
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>

<?php wp_head(); ?>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-format=”fluid”
data-ad-layout-key=”-fg+5n+6t-e7+r”
data-ad-client=”ca-pub-5065241986091101″
data-ad-slot=”4949085020″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</head>

I have already added four  HTML codes to this Theme Header so there are four Ads appearing interchangeably every time a page is opened.


How do we add the HTML code to the Theme Footer?
Just as we have done in the Theme Header you repeat the same process.

Easy way to add banner to your website

Press the Theme Footer which will lead you to the section of the Theme Editor.  Scroll down and at the end, you will see this-</body>
</html>

If you place the HTML code it should look like this-

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<ins class=”adsbygoogle”
style=”display:block”
data-ad-format=”fluid”
data-ad-layout-key=”-h8-i+5u-4r-cj”
data-ad-client=”ca-pub-5065241986091101″
data-ad-slot=”4949085020″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>

Be sure to place your HTML code before the </body> not after.  By placing the HTML code in the Theme Footer all Ads and banners will appear on the Footer of your web page which will look like this-

Easy way to add banner to your website

You will notice that the Ads is below the Post Comment which means the HMTL code you placed on the Theme Footer is successful.

 

How do we add the HTML code to the Sidebar?

Easy way to add banner to your website

There are two sidebars of your web page, the right, and the left. If you will choose the “sidebar” only to place your HTML codes Ads will automatically appear on the right sidebar of your site page. However, if you choose the “sidebar-left.php” Ads will appear on the left sidebar of your web page if your theme permits it.  Take note that even in the choices we have right and left sidebars, there are themes that do not support the left sidebar Ads. Choosing the “sidebar-left.php” and placing your HTML code on Themes that do not permit will not allow Ads to appear on the left sidebar.

Ads on the right sidebar will look like this-

Easy way to add banner to your website

The Gemco Biomass Pellet Mill Ads is on the right side.

We have discussed the Easy Way to Add Banners to Your Website.  This is just another way of doing a thing because you can do it by utilizing the Widget option to place your Ads on either to the Header, to the Footer, and to the sidebars.

So it’s your choice, whichever you want and enjoys doing it for as long as it functions correctly and serves the purpose of enhancing the site’s  role in delivering the information to the targeted clients interested in the products.

Again, thank you for reading, if you ever have a question or opinion that can help enrich this learning just send your message to this email address:  jjimmydolo@gmail.com.  Or drop your comments in the comment box and I’ll be willing to get back to you after reading your message.

 

 

 

 

2 thoughts on “Adding Banners with WordPress Theme Editor”

  1. Sharon May says:

    Seems a good option, and I never thought of adding banners that way before. I’m not sure I like it but I am curious. If it saves adding more plugins, then the way you’ve described is a good option. The question is what happens when there’s an update? Surely, we’d lose all the coding and banners. I would have thought coding a Child Theme would be a better alternative, it would save more time and one less plugin.

    1. admin says:

      As you said Sharon, it would be a good option where you can do it in your site and it works. I actually installed HTML codes in my site this way and I see it works good.  What we are taught and a traditional practice is on the Theme Header and on the Widgets but it’s worth to know that it can be done on the Theme Footer and Sidebar.

Leave a Reply

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




Lazada Philippines