HTML
WordPress Tips: Alternating Page Element
May 3, 2009
0

Showing A Page Element Sometimes Only

I am facing a situation where when an user opens and ad, I wanted to show an interstitial advertisement sometimes, but not all the times, say only 50 percent of the time.   This is actually quite easy to do, but you should at least know PHP and be comfortable with editing Themes (alternatively, you can edit the core WordPress files, but that’s another subject).  You should make backup of the theme files before changing them, so that you can restore if something goes wrong.  If you don’t know how to download and backup the current theme for example, then you probably should not attempt this technique.

Go to the Appearance->Editor section of the WordPress admin.  Since the changes only edit the SinglePage template (single.php).  In my case, the interstitial code is not location sensitive, so I put the code below on the top.  Notice how the AD CODE is inside the if {} block.  Using PHP’s rand function, we’re telling PHP to only output the AD CODE 50% of the time.

<?php
   $randomizer=rand(1,100);
   if ($randomizer<50)
   {
?>
      <!-- AD CODE-->
      <script language="javascript">
      // some ad code here
      // -->
      </script>
      <!-- END AD CODE -->
<?php
   }
?>


The same method can be used to alternate advertisement from different networks, etc.

Alternating Ad Locations

On another occasion, I wanted a Banner Ad to show either above or below the post, bot not on both places.  Part of the initial problem is to find where to put the ad code.  This will be different depending on the themes you use, but in general, for a single post, the file to edit is single.php.  Make backup of the original and locate the <div id=”posts”>.  Insert the ad code as the first element and the last element.  Depending on your theme, this will requrie some experiments to find the best location.

For the first step, put the ad code in both locations in a test environment just to confirm that the layout is correct.  In the example below, you can see the ad code is  enclosed in

<!-- ############## Media: 728x90 BANNER ########### -->
<!-- ############## End Banner ######################-->
<?php get_header(); ?>

 <div id="posts">
 <!-- ############## Media: 728x90 BANNER ########### -->
 <script type="text/javascript">
 </script><p/>
 <!-- ############## End Banner ######################-->
 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

 <div class="post" id="post-<?php the_ID(); ?>">
 <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"></h2>
 // edited for brievity
 <div class="entry">
 <?php the_content(); ?>
 </div>

 <div class="comments-template">
 <?php comments_template(); ?>
 </div>

 </div>

 <?php endwhile; ?>

 <div class="navigation">
 <?php posts_nav_link(' | ','&laquo; Previous Page','Next Page &raquo;'); ?>
 </div>

 <?php else : ?>
 <div class="post" id="post-<?php the_ID(); ?>">
 <h2><?php _e('Not Found'); ?></h2>
 </div>
 <?php endif; ?>

 <!-- ############## Media: 728x90 BANNER ########### -->
 <script type="text/javascript">
 </script><p/>
 <!-- ############## End Banner ######################-->
 </div>

 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
 <?php wp_footer(); ?>
 </div>
[/php]


</code>
</pre>


<p>In my theme, the result is this:</p>

<pre><a href="https://permadi.com/wordpress2/wp-content/uploads/2009/05/adsinpost.jpg"><img class="aligncenter size-full wp-image-802" title="adsinpost" src="https://permadi.com/wordpress2/wp-content/uploads/2009/05/adsinpost.jpg" alt="adsinpost" width="262" height="263" /></a>
</pre>


<p>Since I only want the ad to appear either above or below the post, so let's use the random method illustrated earlier to assign the probability.  Beware though you should alwayd check the Usage policy to make sure it is okay to put ad "below the page fold".  Like in the previous technique, I am using the PHP <strong>rand</strong> function to assign the probability, and enclose the ad code in an <strong>if {}</strong> block.</p>

<p><br class="spacer_" /></p>

<pre><code>
<?php get_header(); ?>

 <div id="posts"><pre><?php
 $randomizer=rand(1,100);
 if ($randomizer<75)
 {
?>
   <!-- ############## Media: 728x90 BANNER ########### -->
   <script type="text/javascript"></pre>
</script><p/>
 <!-- ############## End Banner ######################-->
<?php
 }
?>
 <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

 <div class="post" id="post-<?php the_ID(); ?>">
 <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"></h2>
 // edited for brievity
 <div class="entry">
 <?php the_content(); ?>
 </div>

 <div class="comments-template">
 <?php comments_template(); ?>
 </div>

 </div>

 <?php endwhile; ?>

 <div class="navigation">
 <?php posts_nav_link(' | ','&laquo; Previous Page','Next Page &raquo;'); ?>
 </div>

 <?php else : ?>
 <div class="post" id="post-<?php the_ID(); ?>">
 <h2><?php _e('Not Found'); ?></h2>
 </div>
 <?php endif; ?>

<pre><pre><?php
 if ($randomizer>=75)
 {
?></pre>
</pre>
<!-- ############## Media: 728x90 BANNER ########### -->
 <script type="text/javascript">
 </script><p/>
 <!-- ############## End Banner ######################-->
<?php
}
?>
 </div>

 <?php get_sidebar(); ?>
 <?php get_footer(); ?>
 <?php wp_footer(); ?>
 </div>


In the example, 75% of the time, the ad will appear above the post.  We’re saving the variable $randomizer, so only one of the Banner code will be output per post, on the top if if ($randomizer<75) and in the bottom if ($randomizer>=75).