Put Adsense between post in homepage

Hi Vivisa0290. Welcome to the Hueman forum. Please post a link to your site so we can take a look at the issue. Thanks.

The default Blog layout displays two posts per row, which is what you see in the desktop view. Then you have two ads inserted below those posts. In mobile view the layout still displays two posts per row but, due to the viewport width, the posts are stacked in one column. So, you still see two posts followed by the two ads. The page structure doesn’t change based on the viewport.

If you wants the ads side-by-side in the mobile view you could try adding this to your child theme style.css file:

/* ads side-by-side in mobile view */
@media only screen and (max-width: 791px) {
    .my-ad-widget {
        width: 50%;
    }
}

Then you need to do two things:

1. Enable Theme Options > Blog > Standard Blog List so the posts are displayed in a single column.

2. If you copied the code from the other post you linked, change it to this:

<?php if ( ot_get_option('blog-standard') == 'on'): ?>
	<?php $i = 1; ?>	<!-- initialize the post counter -->
	<?php while ( have_posts() ):
		the_post();
		get_template_part('content-standard');
		echo '<div class="my-ad-widget">';	// add a container
		dynamic_sidebar('my-post-ads');	// insert the ad sidebar
		echo '</div>';	// close container
	endwhile; ?>
<?php else: ?>

OK, see if this does what you’re after:

1. Set Theme Options > Blog > Standard Blog List OFF

2. In your child theme index.php file find this block of code:

<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-->

And replace it with this block of code:

<div class="post-list group">
	<?php $i = 1; echo '<div class="post-row">'; while ( have_posts() ) {
		the_post();
		get_template_part('content');
		// display ad after every post for mobile view
		echo '<div class="my-ad-widget-mobile">';
		dynamic_sidebar('my-post-ads');
		echo '</div>';
		if($i % 2 == 0) {
			// display two ads after every post row for desktop view
			echo '<div class="my-ad-widget-desktop">';
			dynamic_sidebar('my-post-ads');
			echo '</div>';
			echo '<div class="my-ad-widget-desktop">';
			dynamic_sidebar('my-post-ads');
			echo '</div>';
			echo '</div><div class="post-row">';
		}
		$i++;
	}
	echo '</div>'; ?>
</div><!--/.post-list-->

3. Add the following to your child theme style.css file:

/* float ads to left side of content area */
.my-ad-widget-desktop, .my-ad-widget-mobile {
  float: left;
}
/* default mobile ads to hidden */
.my-ad-widget-mobile {
  display: none;
}
/* on mobile hide desktop ads and display mobile ads */
@media only screen and (max-width: 720px) {
  .my-ad-widget-desktop {
    display: none;
  }
  .my-ad-widget-mobile {
    display: block;
  }
}

in the header before the first post

Those are two different locations. “In the header” you could use the theme Header Ads widget which would then show on each page, unless you used css to hide it on specific pages. “Before the first post” would be in the content area and require additional modifications to the index.php file.

In the top part of the code for index.php, find this:

the_post();
get_template_part('content');

And replace those two lines with this:

the_post();
if ($i == 1) {
	// put one ad before first mobile post
	echo '<div class="my-ad-widget-mobile">';
	dynamic_sidebar('my-post-ads');
	echo '</div>';
	// display two ads before first post row in desktop view
	echo '<div class="my-ad-widget-desktop">';
	dynamic_sidebar('my-post-ads');
	echo '</div>';
	echo '<div class="my-ad-widget-desktop">';
	dynamic_sidebar('my-post-ads');
	echo '</div>';
	echo '</div><div class="post-row">';
}
get_template_part('content');

Glad it’s working. If you don’t need any further assistance here please mark the topic as Resolved. Thanks.