WP theme hack: Using server side includes to serve ads

Making this blog load even faster has become a pre-occupation for me these past few weeks. Despite being hosted on a virtual private server that is more than capable of handling the load and serving pages fast, it’s always good practice to improve page load times even further.

The ad units on this page, the link units at the top and large format units before the comments thread all had their codes manually inserted in the single.php file. Which was crude considering that the Vigilance theme is light and fast thanks to the efficient code work by the Theme Foundry.

Using an ad management plugin was never considered because I didn’t want to deal with another plugin again and there are already so much running under the hood.

The solution I opted for is simple and elegant; using server side includes or the include() statement in PHP. Though admittedly, it’s a bit old-school. Being a non-programmer, my first-hand dabble with this PHP statement was when I used the ProSense theme by The Wrong Advices and Dosh Dosh. It’s one of the best themes I’ve ever used.

ProSense allowed AdSense units to be inserted onto the theme via separate php files which contained the actual code for the ads, instead of being actually inserted into the theme files themselves.

These were then called into action using the include() statement placed on strategic places on the home and single post pages.

Before the clean up, here’s the top snippet of what the single.php file looked like:

[php]
<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<script type="text/javascript"><!–
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
/* Top Links, 468×15, created 10/29/09 */
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 468;
google_ad_height = 15;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<center>
<script type="text/javascript">
GA_googleFillSlot("XXX-XXXXXXXX");
</script>
</center>
</br>[/php]

Trust me, the part of the file where the ad units before the comments thread is a lot messier so I won’t be showing it here anymore.

Copying the technique used in ProSense, I removed the code for each ad unit and inserted them into a separate php file named according to what size and where in the page it was located.

The code above is for the AdSense link unit on top of the post so its php file was named adsense_single_top_links.php. The same method was applied to the remaining ad units.

The final code of the single.php file looks like this with the includes() statements highligthed:

[php highlight=”6,7″]<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="post-header">
<?php include(‘adsense_single_top_links.php’) ?>
<?php include(‘google_RSM_topbanner.php’) ?>
</br>
<!– google_ad_section_start –>

<h1><?php the_title(); ?></h1>
<h3><em><?php the_subheading(); ?></em></h3>
<div id="single-date" class="date"><span><?php the_time( ‘Y’ ); ?></span> <?php the_time( __( ‘F j’, ‘vigilance’ )); ?></div>
</div><!–end post header–>
<div class="meta clear">
<div class="tags"><?php the_tags( ‘tags: ‘, ‘, ‘, ” ); ?></div>
<div class="author"><?php printf( __( ‘by %s’, ‘vigilance’ ), get_the_author()); ?></div>
</div><!–end meta–>
<div class="entry clear">
<?php if ( function_exists( ‘add_theme_support’ ) ) the_post_thumbnail( array(250,9999), array( ‘class’ => ‘alignleft’ ) ); ?>
<?php the_content(); ?>[/php]

A lot cleaner and it resulted in reducing further the size of the single.php file; from 4.4kb down to just 1.9kb. Notice how in the messier version, the first 22 lines of code were for the ads only. But after the cleanup, the same 22 lines of code were now used to hold the theme code that display your content. The php files containing the ad codes were then simply uploaded into the theme folder via FTP.

These are the latest step I’ve done to clean up the various codes and scripts that were inserted into the theme files manually. It’s an old habit that first grew on me back in those days that WP theme files had to be manually hacked to customize and theme admin/options pages were still a dream.

Now, updating the theme files and the ad codes are a lot easier and more manageable than before. Other plugins and themes may take care of this automatically, but this is a no-frills method, it simply works and you’re not dependent on a plugin to do this. Besides, dabbling with PHP codes and getting your hands dirty is a fun and learning exercise. It gives you a deeper understanding of how your blog works.

The steps are easy to follow so you can give it a try on your own blog. Just be sure to backup your theme files and database first, in case things go wrong.

If you have more tips or some corrections to what has been discussed here, please share them with everyone via the comments thread.

Leave a Reply