Wordpress add separate section in between of posts without disturbing the posts continuity

Question

I am building a basic Wordpress blog which is build on Duplex theme. I Would like to do some minor customization to the site where in the site has an Instagram widget after two posts and then continue the posts.

Just to simplify the order of the page would be :

1. 2 posts.
2. Instagram widget
3. Continue from 3rd post.

The Front page displays set to posts like the way I want.

How can I achieve getting the Instagram widget in between of the posts without disturbing the flow?

Answer 1

One approach would be the one mentioned would be the one by @danjah wehre you're creating a secondary loop on the page to get the first two posts. Since you're new to wordPress, lets start at the beginning.

All of your templating revolves around the loop. The loop works with the query already defined on the page. wordPress has various default queries depending on which template its loading (a post, an archive, a single post, a page, the index)

• The Loop
• The Tempalte Heirarchy

So a) wordpress defines the query based on the route you're on, and b) you use the loop to get at it. BUT. You can alater the query, override it, or run additional queries.

Have a loop at WP_Query

Lets loop at the standard loop. In your index.php you probably have something like :

 <!-- Start the Loop. -->
 <?php if ( have_posts() ) : 
     while ( have_posts() ) : 
         the_post(); ?>

     <!-- use markup or template helpers in here -->

     <?php endwhile;
  endif; ?>

While you could run a secondary query before the main loop, insert the thing you want, and then alter the main loop to skip those first two, the second way would be to, rather than creating another loop and altering the main one, why not rather keep a count. You could do this with a variable that you increment (its just a standard php while loop after all), But I believe that you can also get the current post index from the global $wp_query object.

 $index = 1;
 <!-- Start the Loop. -->
 <?php if ( have_posts() ) : 
     while ( have_posts() ) : 
         the_post(); ?>

     <!-- use markup or template helpers in here -->
     <?php if ($index == 2) : ?>

       <!-- do something after the second post -->

     <?php endif; ?>

     <!-- increment the index -->
     $index++;
     <?php endwhile;
  endif; ?>

I believe you can get the index as well with $wp_query->current_post, but I haven't done this for a while, and haven't tested this.

Hope it helps!

Answer 2

Thanks a ton @danjah! Below is my code

<?php get_header(); ?>

    <div id="content">
        <div class="posts clearfix">

            <?php if ( is_search() ) { ?>
                <h2 class="archive-title"><i class="icon-search"></i> <?php echo $wp_query->found_posts; ?> <?php _e('Results for','hyphatheme'); ?> "<?php the_search_query() ?>" </h2>
            <?php } else if ( is_tag() ) { ?>
                <h2 class="archive-title"><i class="icon-tag"></i> <?php single_tag_title(); ?></h2>
            <?php } else if ( is_day() ) { ?>
                <h2 class="archive-title"><i class="icon-time"></i> <?php echo get_the_date(); ?></h2>
            <?php } else if ( is_month() ) { ?>
                <h2 class="archive-title"><i class="icon-time"></i> <?php echo get_the_date('F Y'); ?></h2>
            <?php } else if ( is_year() ) { ?>
                <h2 class="archive-title"><i class="icon-time"></i> <?php echo get_the_date('Y'); ?></h2>   
            <?php } else if ( is_category() ) { ?>
                <h2 class="archive-title"><i class="icon-list-ul"></i> <?php single_cat_title(); ?></h2>
            <?php } else if ( is_author() ) { ?>
                <h2 class="archive-title"><i class="icon-pencil"></i> <?php echo get_userdata($author)->display_name; ?></h2>
            <?php } ?>

            <?php
            if ( have_posts()) :
                while ( have_posts() ) : the_post();

                    /*
                     * Include the post format-specific template for the content. If you want to
                     * use this in a child theme, then include a file called called content-___.php
                     * (where ___ is the post format) and that will be used instead.
                     */      
                    get_template_part( 'content', get_post_format() );

                endwhile;
             else:

                /*
                 * If no posts are found in the loop, include the "No Posts Found" template.
                 */
                get_template_part( 'content', 'none' );

            endif;
            ?>

        </div><!--END .posts-->

        <?php if ( hypha_page_has_nav() ) : ?>
            <!-- post navigation -->
            <?php $post_nav_class = ( get_option( 'hypha_customizer_infinite_scroll' ) == 'enable' ) ? ' infinite' : '' ; ?>
            <div class="post-nav<?php echo $post_nav_class; ?>">
                <div class="post-nav-inside clearfix">
                    <div class="post-nav-previous">
                        <?php previous_posts_link(__('<i class="icon-arrow-left"></i> Newer Posts', 'hyphatheme')) ?>
                    </div>
                    <div class="post-nav-next">
                        <?php next_posts_link(__('Older Posts <i class="icon-arrow-right"></i>', 'hyphatheme')) ?>
                    </div>  
                </div>
            </div>
        <?php endif; ?>

        <?php if ( is_single() ) { ?>
            <!-- comments template -->
            <?php if ( 'open' == $post->comment_status ) : ?>
                <?php comments_template(); ?>
            <?php endif; ?>
        <?php } ?>



    </div><!--END #content-->

Answer 3

What you do is run the loop two times to display the first posts, reset it and then start it again after your widget - skipping the two first posts.

You may achieve this like so:

First run the loop, displaying the two first posts.

// The Query
$the_query = new WP_Query( array( 'posts_per_page' => 2 ) );
// The Loop
if ( $the_query->have_posts() ) {
    //Display post
}

Reset the query, and display your widget

/* Restore original Post Data */
wp_reset_postdata();

//Your widget here.

Display the next posts, skipping the first two.

// The Second Query
$the_query = new WP_Query( array( 'posts_per_page' => 10, 'offset' => 2  ) );
// The Loop
if ( $the_query->have_posts() ) {
    //Display post
}