Nowadays advertisement is essential part of most of the
websites on the Internet. In this tutorial we will show you how to add banners
to different parts of your WordPress site. Most of the websites that offer
banners will provide you with the entire banner code so all you have to do is
decide where you want to place the banner and follow the instructions below.
This tutorial covers the following topics:
- How to add banners to your sidebar
- How to add banners into a single post or page
- How to add banners above or below all posts or pages
- How to add banners to your header or footer
- Use plugins to show banners on your page
How to add banners to your sidebar
It is common practice to use your sidebar to add banners.
There are two ways to do this - if your theme supports widgets in your sidebar,
you can add a Text widget with your banner code in it, or you can add
the code directly to the sidebar.php file of your theme.
If your theme supports widgets, go to Appearance ->
Widgets. Then, drag a Text widget to the appropriate widget area. In
our case that would be "Main Sidebar". For the purpose of this
tutorial, we will place this widget right under the search field. Finally,
paste the banner code in it, set a title for the widget (that's optional, leave
it empty if you don't want to have a title above your banner) and hit the Save button.
This will place the banner you want into the sidebar of your
WordPress site.
If your theme does not support widgets you'll need to add
your banner code directly into the sidebar.php. You can edit this file from the Appearance
-> Editor part of your WordPress admin page.
How to add banners into a single post or page
If you want to add a banner into the body of your post or
page, simply open the Text mode of the WordPress editor and paste the banner
code in it.
This will add the image between the two sample paragraphs of
this post. You can use the WordPress WYSIWYG editor in order to reposition or
align this banner in order to make it look with the rest of your post or page.
How to add banners above or below all posts or pages
To add banners above or below all your posts or pages, you
need to add the banner code inside the single.php or page.php files
of your WordPress themes. Both files have similar content but they handle
different parts of your site - your posts (single.php) and your pages
(page.php). You can edit those files by logging to your WordPress admin area
and going to Appearance -> Editor.
If you want to add the banner above your posts and
pages, locate the following code:
<?php while ( have_posts() ) : the_post(); ?>
Right after it add the code of your banner. This will add
your banner above the all of your page and post titles. Of course, you can add
CSS styling in order to make it look according to your needs.
Adding banners to your footer or header depends on the theme
you're using. If it has widget area added to its footer or header, you can
follow the instructions in the first part of this tutorial for adding
banners to the sidebar.
How to add banners to your header or footer
On the other hand, if your theme does not have widget areas
added to the footer/header areas, you need to add your banners manually. To do
this login to your WordPress admin page and go to Appearance -> Editor. For
the purpose of this tutorial, we will add a custom SiteGround banner to your
header. Since we will add the banner to the header of the site, select header.php from
the list of files available for edit. Note that the code inside this file will
be different depending on your theme. You need very basic HTML skills in order
to add this banner.
First, find the opening of the body tag. In the
twenty-twelve default WordPress theme it looks like this:
<body <?php body_class(); ?>>
Right after this add the following code:
<div class="headerbanner"><a href="BANNERLINK" target="_blank"><img src="LINKTOIMAGE" width="200" height="50" /></a></div>You need to replace BANNERLINK and LINKTOIMAGE with the URL where you want the banner to point to and the link to the banner image. Finally, replace the width and height parameters with the actual dimensions of the banner image.
This code will render your banner on top of your site. Note
that depending on the theme you're using, you may need to move the code in
order to place it wherever you want.
Note that we wrapped the banner into a div element.
We did this because we want to style this banner further. To do this, select style.css from
the right column and when the page refreshes, add the following lines:
.headerbanner { display:block; margin: 10px auto; width: 480px}
This will center the banner and add some top margin making
it look much better. Of course, this is just an example - you can use the full
power of CSS in order to style the banner the way you want it.
Adding a banner to the footer is basically the same with one
small difference - you need to open the footer.php file instead of the header.php one.
Then, all you need to do is paste the code where you want to display the
banner.
Use plugins to show banners on your page
If you want to display more than one banner on a page, track
the ads you show, and more advanced functionality, it is advisable to use one
of the available WordPress plugins for banner management.
Since it depends on your particular site structure and
needs, we suggest that you browse through the banner plugins in the WordPress
Plugins Directory in order to find the extension that will best fit
your needs. Once you do that, you can install it as any other WordPress plugin
following the instructions in our tutorial on How to Install WordPress Plugins.
Post A Comment: