There are quite a few plugins available for WordPress that allow admins to display adverts on their WordPress site but most of them are quite difficult to understand how to use and rather limited in where they allow you to place adverts. Luckily, with the built in theme editor in WordPress you can easily add the code for an advert inside the template yourself without any plugins. Here is a tutorial on how to do that. The first part of the tutorial will only deal with how to add adverts to the first/index page of your blog. (NOTE – this is not for people having their blog on wordpress.com but for those who run their blog from their own domain or a web host.)

I will be working on iNove template as it seems to be one of the most popular themes. You will be manipulating the source-code of iNove on your site but I expect if you have managed to register an advertisement account at Google or another affiliate site you know enough about HTML and PHP to be able to copy-paste code into your site.

Prerequisite

I presume you have set up your own WordPress site and that you have admin privileges to it. I also presume you have access to Google AdSense or codes to display adverts from some other affiliate network.

Before you do anything also make sure you have a working FTP client and admin rights to the server where your WordPress site is hosted. Also make sure that you have taken a backup of your iNove theme. Or if you haven’t manipulated the theme yet, that you have access to the un-manipulated theme on your local hard drive so that you can easily replace any damage you do to your theme on your site. Because you WILL screw up sooner or later – it is part of the terrain – and then you will need to be able to quickly restore a file through FTP.

Step one – add privileges

We will be manipulating some files of the iNove template from within WordPress so you need to change their privileges so that WordPress can save to them. In this tutorial we will be playing around with the file ”index.php” but we might as well change the privileges for ”single.php” as we will be playing with that file in the next tutorial

Log onto your site’s file structure using your FTP program and go into the folder /wp-content/themes/inove. Select the file ”index.php” and change the privileges of the file to 777 that is, make it readable and writable for all users. Repeat the same for the file called ”single.php”.

When you are done editing, restore the privileges.

Step two – the theory of the layout

The themes in WordPress build up a site by using HTML elements to design a general structure and calling different functions within WordPress to display specific content. What we will do is to add our advert code directly into this structure. This is actually a lot more easy to figure out than some of the plugins available, and gives you a lot more freedom of placing ads wherever you want.

I have added some code to the index.php file from above to illustrate where you can actually place your adverts without any difficulty. The result looks like this:

(Of course if you want an advert to appear inside your blog-post then you need to copy-paste the code inside your post.)

Now, as the picture above shows, there are three places where you can put adverts on the index page, the one which is visible when you first visit a page.

Position 1 is right below top menu. This is a static position, and will stay the same regardless of how many articles you have. It will always be above the latest/first post on the index page.

Position 2 is located right below the title of each post. WordPress uses a loop to display all posts that should be on the first page so any adverts in Position 2 will be displayed under the title of each post displayed on the first page.

Position 3 is generated for every post the same way as Position 2, except at the end of the post and before title of the next post.

Actually there is room for another static position, Position 4, all the way at the bottom of the page. It will always be shown after the last post on the first page.

Step three – navigating the code

WordPress has a built in editor for plugins and templates. Log in as admin and on the left hand menu click on”Editor” under the ”Appearance” section.

You should now be in the editor section for the theme iNove as in the picture above. It is important that you can see the blue Update File button below the field where you can edit the actual code. If you can not see the button then you have not assigned the proper permission settings to the index.php file under Step one above. Do so before you proceed or you will not be able to save any changes you make.

From the list of files on the right hand side, select the file named ‘Main Index Template (index.php)’.

In the middle section of the page you will see the actual code for the index.php file which is actually the template for the index/first page.

The picture below shows where in the code Position 1 (from above) is located.

The position of Position 2,3 and 4 are marked on the picture below:

Step four – changing the code

So this is it, to add an advert to the code, simply copy the advert code and paste it in the position you want to use using the indicators in the pictures above.

When you are done, click on the Update File button.

The picture below shows one of my Google AdSense codes added to Position 2 in the editor and it’s outcome on the actual page.

The code after I added the Google AdSense code

The results on my site after I added the advert code.

Step five – restore privileges

Using the steps in Step 1 restore the privileges to ‘index.php’ for security reasons.