ProBlogger.net, an extremely popular blogging blog, recently published an article about ad positioning, and how inline ads outperformed other ad positions for him. After this is done, you’ll be able to add inline advertisements to specific posts using custom fields. Not just that, but you’ll be able to specify the ad size as well. Now I know there may be WordPress plugins that are able to do this for you, but this tutorial will go over how to do it manually by editing your WordPress theme.

• A simple diagram of a layout with inline ads in the content
• What a custom field is, what they do, and what their purpose is
• Edit your WordPress theme to accommodate custom fields
• Add a class to your stylesheet to properly display inline ads
• Use a custom field key and value to specify which ad size to use

Maximize your ad revenue by implementing these techniques in your WordPress theme and read on…

Inline Ad Diagram

Please note that I’m not an artist or designer by any means. The following diagram was done in MS Paint. Go ahead and laugh.

If you were unsure of what exactly I meant by an “inline ad” hopefully this clears it up.

Custom Fields

Custom fields can be assigned to any WordPress post or page. You can use them to add additional data to be displayed elsewhere in your theme, within the Loop. The basics of custom fields can be read about on the WordPress Codex.

Edit Your WordPress Theme

Here’s the fun part. Now it’s time to edit your WordPress theme to accommodate the custom field values and keys you’ll be adding to specific posts. Here’s the code I use myself on this blog, minus the actual ad code.

<?php $key="ad_size"; if (get_post_meta($post->ID, $key, true) == "300x250") { ?>
<div class="inlineads">
[Your 300x250 code here]
</div>
<?php } elseif (get_post_meta($post->ID, $key, true) == "250×250") { ?>
<div class="inlineads">
[Your 250x250 code here]
</div>
<?php } elseif (get_post_meta($post->ID, $key, true) == "200×200") { ?>
<div class="inlineads">
[Your 200x200 code here]
</div>
<?php } ?>

Please insert your own 300×250, 250×250, and 200×200 ad codes in the appropriate areas. Feel free to alter this code and use other ad sizes. It’s up to you.

Edit Your Styelsheet

You probably are wondering with the <div class=”inlineads”> and </div> surrounding your ad code is for. This is so we can add a class called “inline ads” to your stylesheet, so you’ll be able to easily manipulate the ad positining by editing just one line in a CSS file.

.inlineads {float:left;padding:0 5px 5px 0;}

This code will float your ad to the left and pad it 5 pixels on the bottom and right sides.

Start Displaying Ads

Here’s the what we’ve all been waiting for - actually displaying the ads. Fortunately all the hard stuff has already passed. In a post, add the custom field key “ad_size” (without quotes) with the ad size (300×250, 250×250, 200×200) you want as the value.

Once you’re done, and everything has been done properly, you should now have an inline ad in your post.

Conclusion

Like I mentioned at the beginning of the guide, there are plugins that may help you do this exact same thing. However this guide wasn’t just about adding ads to your posts, but also to get a better understanding of custom fields and altering WordPress themes. There is literally limitless possibilities when it comes to custom fields, this is just one of the ways you can use them. For another creative way to display ads on your WordPress blog, check out this article I wrote on HackWordPress entitled Display Adsense On Your First Post Within The Loop.

Subscribe to the feed for more Theme Lab tutorials and theme updates. Feel free to comment and share if you liked this tutorial.