Add Adsense ad in middle of posts on index page

Hi mayurjango. This post describes how to modify index.php to insert code between posts. You could change the counter from 4 to 6. Also, that solution used a plugin and shortcode but this post describes how to use a theme widget. Hope that helps.

Thanks bdbrown, I’ve got it working up to a certain extent but ad isn’t appearing.

I’m using Alex’s theme widget option instead of the plugin (that uses shortcode). That’s probably the reason ad isn’t appearing but the code is showing up on home page after 3 posts.

Please tell where should I add the theme widget php code in the below code to get it working.

<div class="post-list group">

<?php $i = 1;																												// initialize the post counter
echo '<div class="post-row">';																// create the post-row div
while ( have_posts() ): the_post(); ?>										 <!-- while we have posts -->
	<?php get_template_part('content'); ?>									<!-- display the post -->

	<?php if ($i % 2 == 0) {																		 // if we've shown 2 posts
		echo '</div>';																								 // close this post-row div

		// BEGIN insert my custom widget after 4 posts
		if ($i % 4 == 0) {																						// if we've displayed 4 posts
			echo '<div id="my-widget">';													// create the widget div
      echo do_shortcode ( '[widget id="text-3"]' );		   // show the widget
			echo '</div>'; 																						 	// close the widget div
      }
		// END insert my custom widget

    echo '<div class="post-row">';													// create the next post-row div
		}

		$i++;																														// increment the post counter
endwhile;
echo '</div>';																										// close the trailing post-row div
?>

</div><!--/.post-list-->

The theme ad widget code is <?php dynamic_sidebar('abovepost-ad'); ?>

Test site: https://test.webtrickz.com

I’ve never used adsense but, from what I’ve read, it can take a while (a day?) for it to get synchronized. If you want your add to show after 6 posts you would change the custom widget section of code to this:

// BEGIN insert my custom widget
  if ($i % 6 == 0) {
    // we've displayed 6 posts so show the sidebar
       <?php dynamic_sidebar('abovepost-ad'); ?>
  }
// END insert my custom widget

It’s not a synchronization issue but some issue with code.

I replaced your code with the above mentioned code in reply #4 but that hides all the posts from index page and just shows the adsense ad there.

This is the original index.php code:

<?php get_header(); ?>

<section class="content">

	<?php get_template_part('inc/page-title'); ?>

	<div class="pad group">

		<?php get_template_part('inc/featured'); ?>

		<?php if ( have_posts() ) : ?>

			<div class="post-list group">
				<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ): the_post(); ?>
				<?php get_template_part('content'); ?>
				<?php if($i % 2 == 0) { echo '</div><div class="post-row">'; } $i++; endwhile; echo '</div>'; ?>
			</div><!--/.post-list-->

			<?php get_template_part('inc/pagination'); ?>

		<?php endif; ?>

	</div><!--/.pad-->

</section><!--/.content-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Could you please tell what code and where should I add it exactly? Would be really helpful!

I tested the code on a test site; found one issue. Corrected that and it appears to work. I’ve pasted a modified full index.php file up on Pastebin. Try that and let me know how it goes.

I changed ‘adsense’ dynamic sidebar widget attribute in your code to ‘abovepost-ad’ and added index.php to child theme but it just didn’t worked at all for me.

Didn’t notice any change!

Could you please check again.

It’s there. It’s generated after every 4 posts. You just need the css from the first thread I linked above:

#text-4.widget {
  float: left;
  }

You can add additional css to move/resize it.

You’re amazing bdbrown. That worked! Thanks a lot ??

Btw.. how can I align the ad to center. Tried through css but it stays at left and adding <center>ad-code</center> to ad code didn’t worked either.

Also, is it possible to implement the same change to category pages?

Align to center, change the css to this:

#text-4.widget {
  padding-bottom: 15px;
  clear: both;
  margin: 0 auto;
  }

For category pages you need to modify archive.php. The code layout is essentially the same as index.php so the same change will work. Find the block of code between the if(have_posts()) and endif, and replace with this:

<?php if ( have_posts() ) : ?>

  <div class="post-list group">

  <?php $i = 1;	  // initialize the post counter
  echo '<div class="post-row">';  // create the post-row div
  while ( have_posts() ): the_post(); ?>   <!-- while we have posts -->
    <?php get_template_part('content'); ?>  <!-- display the post content -->
    <?php if ($i % 2 == 0) {	// if we've shown 2 posts
      echo '</div>';	// close this post-row div

      // BEGIN insert my custom widget
      if ($i % 4 == 0) {   // if we've shown 4 posts
        dynamic_sidebar('abovepost-ad');   // display the custom sidebar widgt
      }
      // END insert my custom widget

      echo '<div class="post-row">';	// create the next post-row div
      }

    $i++;   // increment the post counter
    endwhile;
    echo '</div>';   // close the post-row div
  ?>

  </div>	<!--/.post-list-->
  <?php get_template_part('inc/pagination'); ?>
<?php endif; ?>

Both worked like a charm. Thanks again for your prompt help!

I love the way you guys are providing support here to everyone without anything in return. But you’ve our best wishes and appreciation for sure.

Bdbrown, Wishing you and your family a very Happy New year. ??

I’m loving Hueman theme on my original site. Such a powerful and customizable one!

Thanks for the kind words; Happy New Year to you as well. Personally, I help out here as a way to give back to the WP community and Alex, in particular, for donating this theme. If you’re satisfied with the results, please mark the topic as resolved. Thank you.

Keep up the great work! (y)

Bdbrown, just want to ask if it’s possible to show the ad widget only after 6 posts and then after 6 posts when we switch to next page?

I mean is it possible to hide the widget after 12th post as it then appears at atmost bottom. I’m displaying 12 posts on index page.

You can check it live here: https://webtrickz.com/

Thanks

Or say I’ve 12 posts on index or archive page and I want the ad widget to appear like this:

1-4th post
-ad widget-
5-8th post
-ad widget-
9-12th post
NO ad widget

same for next pages.

Is that possible?

What’s weird is that even after adding your provided css to original site, the ad widget is displaying at left. Wondering why.