Show Advertisement in The Middle of WordPress Archive Post
You want to monetizing your wordpress powered blog and you pick strategic places to put your ads. One of your ads unit place is in the middle of archive posts list and you want to modify your template / theme to accomplish the task.
There’s many way to edit your template but I want to give an example using simple template. The template will contains index.php and style.css which is the basic requirement for creating wordpress theme. If you get the idea, you may applying this technique in any theme.
Start your engine
Get a dummy ad image either 728 or 480 in pixels width. if you didn’t have any dummy image then you could download ads from IAB Ad Unit Guidelines. Choose one and right click to save the image in your computer. This is an easy task and now you have image file.
You also need to download your posts from your live blog, you could export from your host, You need wordpress export plugin to exporting to WXR, then import downloaded WXR file to your wordpress in localhost.
Create template structures
We need to create new template folder inside wp-content/themes. Let’s name it middleads. Now we have a new directory to put files on it. The file structure will like this
- wp-content
- themes
- middleads
- images
- ads.png
- style.css
- index.php
Now we need to create images sub directory and copy your dummy ads inside images directory. You could rename your dummy ads to ads.png if the file is in PNG format, if you have dummy file in JPG or GIF you should use the extension. For example ads.jpg or ads.gif. I will use ads.png in this tutorial, so you can adjust / substitute with your own file.
Create style.css
Now we need to create the basic of style.css. WordPress could recognize your template from this file. Open your favorite text editor and copy following code to your style.css file
/* Theme Name: Ads in The Middle Theme URI: http://www.nurasto.com/ Author: Dityo Nurasto Author URI: http://www.nurasto.com/ Description: Put ads in the middle of archive posts list Version: 1.0 License: GNU General Public License License URI: license.txt Tags: dummy */
Now, save style.css into our new template directory . If you use notepad, please don’t forget to put ” (double quotes) around the filename. For example : “style.css”. Notepad always put TXT extension in the end of filename if you don’t use double quotes.
Create index.php
Now we need to create index.php to implement the idea.
<!DOCTYPE html>
<html>
<head>
<title>Middle Ads Example</title>
<meta charset="utf-8">
</head>
<body>
<?php if(have_posts()): ?>
<?php $post_index = 0; ?>
<?php $ads_location = ceil(get_option('posts_per_page') / 2); ?>
<?php while(have_posts()) : the_post(); ?>
<?php if($post_index == $ads_location): ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/ads.png" />
<?php endif; ?>
<div <?php post_class(); ?>>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<div>
Written by <a href="<?php get_author_posts_url(the_author_meta('ID')); ?>"><?php the_author(); ?></a>
</div>
<?php the_content(__('Read More ...')); ?>
</div>
<?php $post_index++; ?>
<?php endwhile; ?>
<?php else: ?>
<p>Sorry, you need dummy post to test this template script</p>
<?php endif; ?>
</body>
</html>
Save those lines to index.php. So, what’s the code doing? I’ll try to explain how it works
- $post_index variable store how many loop occurring when posts are being read, so in every loop $post_index will be added by one. You can see $post_index++, this is when the incremental of $post_index happen.
- $ads_location store maximum post per page and then divided by two. For example, you have 10 post in a page then the location will be 5. ceil will round decimal number into whole number, such 1.5 into 2.
- $post_index is zero based. It will start from zero. Simply when loop #6 happen, actual $post_index value is 5. If you change to 1, then the ads will pulled up. If you change to -1, then the ads will pulled down.
Last step
Activate your new template and access your wordpress blog. I hope you could understand the concept and could implement this code to your favorite themes.
Comments
Thanks for this. Just what I was looking for!
Sorry, comments are closed