Hi Jack – I think I have a solution. I’ve tested it on my child theme and it works. For reference, here’s the starting point:
The default theme style is to show 2 posts across. “The loop” in index.php does the following:
if there are posts, continue
create the post-list div
initialize a post counter $i
create the post-row div
while there are posts to display
display the next post
if we’ve displayed 2 posts, close the post-row div and create a new one
increment the post counter
when no more posts
close the last post-row div
close the post-list div
To show your widget after every 4 posts we need to:
1. install the “Widget Shortcode” plugin
2. modify index.php to insert the widget every 4 posts
3. add css to style the widget
Widget Shortcode Plugin
Installing the plugin is straight-forward. It creates a widget id shortcode for every widget that’s used in a sidebar. That widget id is used in the index.php code. If you want to use a widget that’s not in one of your existing sidebars, and don’t want to add the widget to an existing sidebar, create a new sidebar in Theme Options – Sidebars and drop the widget in there.
Modifying index.php
In index.php, delete lines 13 – 17:
<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-->
Replace that block of code with the following:
<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 [widget id=”text-3″] should be replaced with your widget shortcode.
Adding the Styles
Place this in your css and add any other styles you need:
#my-widget {
float: left;
}
Let me know how it goes.
