How to Display Inline Ads in WordPress

Many WordPress users, find inline ads to be more profitable for their sites. Advertising platforms often encourage publishers to place advertisements closer to content area for more clicks. Inline ads are a popular advertising format that is used on millions of websites. In this tutorial, I will show you how to display inline ads in WordPress using a variety of methods.

The first method is the easiest one, where you can insert ads into your posts using a WordPress plugin. The other three methods require you to edit your WordPress theme templates, therefore they touch upon a lot of similar topics. As such, I recommend that you read all methods of displaying inline ads so that you get a full understanding of how to implement the techniques on your website.

• How to Display Inline Ads Using a WordPress Plugin
• How to Display Inline Ads in All Posts or Pages
• How to Display Inline Ads In Selected Posts or Pages Using Conditional Tags
• How to Display Inline Ads In Selected Posts or Pages Using Custom Fields

How to Display Inline Ads in WordPress – No Coding Required

Many web publishers want to display advertisement after the first few paragraphs. To do this by modifying code will be complicated for most users. But don’t worry, we got the perfect plugin for you.

Using a good ad management plugin for WordPress is the easiest and most efficient way to display inline ads in your posts. To use this method, first thing you need to do is install and activate the Insert Post Ads plugin. Once activate, you will notice a Post Adverts menu item in your WordPress admin menu.

To set up the plugin you need to go to Post Adverts » Settings. The plugin will display the post types where you can insert inline ads into posts. By default, you will see posts and pages. Click on both if you want to display ads on your posts as well as your pages. Otherwise, just check the box next to posts and save your settings.

The next step is to create ads in post adverts. Go to Post Adverts » Add New. Provide a title for your ad. This could be anything that helps you remember what type of ad code it is, e.g. Medium Rectangle. Below that you need to paste the code provided by your advertising platform. Lastly, you need to choose when you want the ad to appear. The default value is after the first paragraph.

That’s all, your ad will be automatically displayed after the first paragraph.

However, if you are feeling more adventurous and want to try your hands on modifying themes, then continue reading. But before you make any changes to your theme or child theme. I would urge you to create a complete backup of your site, or at least back up your WordPress theme.

How to Display Inline Ads in All Posts or Pages

Inline ads can be displayed in all of your posts or pages by editing your WordPress theme templates directly. The template that you need to edit depends on the page you want to place your ads. For this tutorial, I will assume that you want to display inline ads on blog posts and pages; however the techniques detailed below will work with any template that publishes content.

In order to place an inline ad at the top of your content area, you need to locate the function the_content(). This function pulls the content for a WordPress post or page. It is always located within the WordPress loop.

For pages, you need to edit the page.php template. In Twenty Thirteen, the code surrounding the the_content() function looks like this:

<div class="entry-content">
						<?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

Blog posts are controlled through the single.php template. Many themes place the complete WordPress loop code within the single.php template. Over the last few years, many WordPress theme developers have moved parts of the WordPress loop into dedicated templates. This is primarily to accommodate post formats in a tidier fashion.

If the the_content() function is not placed directly within the single.php template itself, you can view the code that links to it in the single.php template and determine what template to edit from that.

As an example, let us look at how the default WordPress theme Twenty Thirteen handles things. The WordPress loop code within the single.php template looks like this:

<?php /* The loop */ ?>
			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php twentythirteen_post_nav(); ?>
				<?php comments_template(); ?>

			<?php endwhile; ?>

The template call for get_template_part() imports the content from the content templates. For regular blog posts, that template is content.php. Templates such as content-quote.php (quotes), content-image.php (images) and content-status.php (statuses) are used for other post formats.

In content.php, the code surrounding the the_content() function looks like this:

<div class="entry-content">
		<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentythirteen' ) ); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
	</div><!-- .entry-content -->

To place your advertisement at the top of the content area, you need to add your ad code above the the_content() function. You can then ensure your content wraps around it by using a CSS float to float your advertisement to the left or right hand side.

The code below will show your ad at the top right hand side of your articles with a five pixel padding at the left and bottom hand side of the ad.

<div style="float:right;padding:0 0 5px 5px;">
<!-- Your Ad Code Here -->
</div>

Below is an example of adding the ad code above to the the_content() function in the Twenty Thirteen page.php template:

<div class="entry-content">
<div style="float:right;padding:0 0 5px 5px;">
<!-- Your Ad Code Here -->
</div>
		                                <?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</div><!-- .entry-content -->

This would produce the following:

Your advertisements can be floated on the left hand side of your content area by changing the CSS float from right to left. You also need to change the padding so that the spacing is shown at the right and bottom hand side of your ad rather than the left and bottom hand side.

Below is an example of adding ad code to the the_content() function in the Twenty Thirteen content.php template. The code will float ads to the left hand side in blog posts.

<div class="entry-content">
<div style="float:left;padding:0 5px 5px 0;">
<!-- Your Ad Code Here -->
</div>
		<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentythirteen' ) ); ?>
		<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
	</div><!-- .entry-content -->

The final result looks like this:

In the examples above I have styled our advertisements directly within the CSS division itself. Alternatively, you can create a CSS class and add it to your CSS stylesheet (which is the style.css template file).

For example, you could create a CSS class entitled inlineads:

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

Then link to the class within the ad code itself:

<div class="inlineads">
<!-- Your Ad Code Here -->
</div>

The end result is the same, however placing styling in your stylesheet is a more practical solution as if you change the style of your ads (e.g. add a border or change the background color), you only have to change the code in the style.css template. This saves you from editing several templates.

As always, remember to back up the changes you make to your templates before you update your themes to a new version. Otherwise, all the changes you made will be lost.

 

How to Display Inline Ads In Selected Posts or Pages Using Conditional Tags

We can extend our template code further and use WordPress conditional tags to only show inline advertisements in selected posts and pages.

The conditional tag function for blog posts is is_single. A post can be passed as a parameter to the function using the post title, post slug or post ID. The post slug, as you may recall, is the permalink part of the URL. Whereas the post ID relates to the identification number of the post in your WordPress database. Conditional tags use boolean data values; therefore a value has to be either true or false.

Let us consider a news based post entitled “Latest Blog News for December”. The URL of the post is www.yourwebsite.com/news-post-seven/ and the identification number is 7. We can specify this post using the condition tag is_single in one of three ways:

• is_single( ‘Latest Blog News for December’ )
• is_single( ‘news-post-seven’ )
• is_single( ’7′ )

You can also use an array that will pass a result of true if any of the conditions are met.

• is_single(array( ‘Latest Blog News for December’ , ‘news-post-seven’ , 7 ))

Conditional tags are always used with if statements. The code below will show an inline advertisement only on the blog post “Latest Blog News for December”. It will not be showed on any other post.

<?php if ( is_single( 'news-post-seven' ) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

It is unlikely that you will want to show an inline advertisement in only one blog post on your website. Usually, website owners want to display advertisements on the majority of their blog posts. Conditional tags can be used to display an advertisement on all posts except those that you specifically exclude. This is done by using the NOT logical operator (!).

The following code will display an inline advertisement on all blog posts except post fifteen.

<?php if ( ! is_single( 15 ) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

The conditional tag for pages is is_page. It works in the exact same way as is_single. Page title, page slug and page ID can all be passed as parameters.

The NOT logical operator can be used with pages too. Let us say that you want to display inline advertisements on all of your content pages but not on informational pages such as your about page. All you have to do is specify every page that you want to exclude. We can do this using the OR logical operator (||).

The code below informs WordPress that we do not want to display our advertisement on any of the pages that are listed. On all other pages, the inline advertisement will be displayed.

<?php if ( !( is_page( 'About' ) || is_page( 'Contact' ) || is_page( 'Privacy Policy' ) ) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

We can also exclude pages by using an array:

<?php if ( ! is_page(array( 'About' , 'Contact' , 'Privacy Policy' )) ) { ?>
<div class="inlineads">
<!-- Your Ad Code Here -->
</div>
<?php }?>

Else and elseif statements can also be used to display certain advertisements in one part of your website and other advertisements in another. For example, the code below would display one type of advertisement in blog posts and another type of advertisement in all of your pages.

<?php if ( is_single() ) { ?>
<div class="inlineads">
<!-- Single Post Ad Code Here -->
</div>
<?php } elseif ( is_page() ) { ?>
<div class="inlineads">
<!-- Page Ad Code Here -->
</div>
<?php }?>

We have only touched the surface of what can be achieved using conditional tags in WordPress. It is possible to create complex statements using conditional tags that display different advertisements across your whole website. The concept is simple. You just have to specify where you want ads to be displayed and where you do not want them to be displayed using if statements.

 

How to Display Inline Ads In Selected Posts or Pages Using Custom Fields

Custom fields allow WordPress users to assign custom fields to posts and pages. In order to see the custom field area in your posts and page editor screens, you need to open up your screen options box at the top of your page and ensure the “Custom Fields” checkbox is enabled.

Custom fields have two parts: The name of the custom field and its corresponding value.

Information can be pulled from custom fields in theme templates. This allows us to add custom fields to individual posts and pages and pull specific information from the theme templates based on those custom fields.

To pull data from custom fields in WordPress, you need to use the get_post_meta function. The function has three parameters.

get_post_meta( $post_id, $key, $single )

The $post_id parameter is required whilst the other two parameters are optional.

• $post_id – The ID of the post you want data from.
• $key – The name of the string that is defined in the custom field box in your post or page.
• $single – A boolean parameter that can be set as true or false. If set as true, the string that was entered as a value in the custom field box will be returned. If set as false, an array of the custom fields will be returned.

Let us look at an example of how we can display inline ads within specific posts and pages. For any post or page we want to display an advertisement, we can define the name as ad_size and then define a value such as 300×250.

If we called (get_post_meta($post->ID, $key, true) in the above post (through a template), the output would be “300×250″. This is useful as we can use this output to control what type of advertisement we want to display on our website.

For example, let us assume we want to display three sizes of advertisements in our blog posts. We can control what advertisement is displayed through a series of if and elseif statements.

Check out the code below to see how this can be achieved. Remember that this code should be added above the the_content() function in your theme template (e.g. page.php, single.php, content.php etc).

<?php $key="ad_size";
if (get_post_meta($post->ID, $key, true) == "300x250") { ?>
<div class="inlineads">
<!-- 300x250 Ad Code Here -->
</div>
<?php } elseif (get_post_meta($post->ID, $key, true) == "250x250") { ?>
<div class="inlineads">
<!-- 250x250 Ad Code Here -->
</div>
<?php } elseif (get_post_meta($post->ID, $key, true) == "200x200") { ?>
<div class="inlineads">
<!-- 200x200 Ad Code Here -->
</div>
<?php } ?>

The first thing we do above is define the parameter $key as “ad_size”. This ensures that one of our three advertisements will only be displayed if the custom field “ad_size” has been entered for a post or page. $post->ID is used to pull the ID of the post and $single is set to true so that a string is output. If you go to one of your posts or pages and enter “ad_size” in the name field and “200×200″ in the value field; the 200×200 advertisement will be displayed.

Using this method allows you to control what advertisements are displayed on your website. With conditional tags, we controlled what pages and posts on a website displayed advertisements directly through the theme template. With custom fields, we controlled what posts and pages display advertisements directly through the post and page editor pages. One method is not better than the other. It all comes down to how you want to set it all up.

I hope this article helped you display inline ads in your WordPress posts and pages.

If you liked this article, then join us on Twitter and Google+.

The post How to Display Inline Ads in WordPress appeared first on ThemeLab.

Written by - Visit Website