0

I'm pretty new to creating my own theme and I seem to have become stuck and would really appreciate it if someone could help me. I have searched and found snippets of advice but nothing that really caters for what I need.

Problem 1

The main blog (home) page is causing me problems as I know there must be a better way of writing more efficient code, but I couldn't get it to work across separate column divs.

If you look at the image below you'll see how the page is rendering at the moment and on the surface it all seems fine, but these are custom post types using multiple loops because each row is separate. I initially tried to use 'for' loops but I couldn't get it to work so that each row was a continuation of the last. It would either render them all the same thumbnails or would have all the posts after one another (ending with 30 small thumbnails on the page)

enter image description here

Any advice to get this down to a more lean code would be fantastic!

Problem 2

The "older" navigation at the bottom of the page renders "page 2" exactly the same as the home page. I want to create a single custom template for all the subsequent pages that have older posts but I can't seem to find how to use a different template. I saw this post and understand the idea of how it works but can't seem to get the home page to work properly.

Here is the code for the index page that shows loop one and you can also see the if statement attempting to create a new page for the older posts and here is the code for the three smaller thumbnail row loops that is in the content.php.

I'm sorry if any of my terminology isn't quite correct but hopefully someone will know what I mean and I really appreciate people taking the time out to help out a complete noob.

EDIT

Sorry here is the code for index.php

<?php get_header(); ?>
<section class="row main_content"> 
<div class="small-12 large-4 large-push-8 columns">
    <?php get_sidebar( $name ); ?>
</div>      

<div class="hero">  
    <div class="small-12 large-8 large-pull-4 columns">

        <!-- /////////////////////-Start of THE LOOP-\\\\\\\\\\\\\\\\\\\\\-->
        <?php 
        $args = array( 'post_type' => 'blog', 
                       'post_status' => 'publish',
                       'showposts' => 1,
                       '&paged='.$paged); 
        $featuredPost = new WP_Query($args); //This is a global query

        if ($featuredPost->have_posts()) :

        while ($featuredPost->have_posts()) : $featuredPost->the_post(); 
        ?>

        <!--Start of the FEATURED post image-->
        <div class="hero_img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a></div>
        <!--End of the FEATURED post image-->

        <div class="thumbpost-text">
            <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
            <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
        </div>
        <?php 

        endwhile; 
        else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
        <?php endif;
         ?>
        <!--/////////////////////-End of THE FIRST LOOP-\\\\\\\\\\\\\\\\\\\\\-->
        <?php rewind_posts(); ?>
    </div>
</div>
<!-- End of the Main image post -->

</section>


<?php 
wp_reset_query();

if ( $featuredPost->is_home() ) {
// This is a homepage
// Do your fancy loop here with extra bells and whistles
get_template_part('content');       
} else {
// This is not a homepage (i.e. paginated page)
// Do a stripped down version of your loop above with no bells and whistles
}
?>


<div class="row subcontent">
<div class="small-12 medium-12 large-12 columns">
        <?php // save the original $wp_query object
        $temp = $wp_query;
        // create a new $wp_query object
        $wp_query = new WP_Query($args);
        while($wp_query->have_posts()): $wp_query->the_post();
        // output your data here
        endwhile;
        // display previous and next links
        previous_posts_link('Newer');
        next_posts_link('Older');
        // restore the global $wp_query object
        $wp_query = $temp; ?>

</div>
</div>

<?php get_footer(); ?>

...and here is the code for content.php


        <?php 
        $args = array( 'post_type' => 'blog', 
                       'post_status' => 'publish',
                       'showposts' => 3,
                       '&paged='.$paged,            
                       'offset' => 1); 
        $firstRowThumbs = new WP_Query($args);

        if ( $firstRowThumbs->have_posts() ) : while ( $firstRowThumbs->have_posts() ) : $firstRowThumbs->the_post(); ?>

        <div class="small-12 medium-4 large-4 columns"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>
        </div>
        <?php endwhile; else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
        <?php endif; ?>     
        <?php rewind_posts(); ?>

    </div>
    <!--/////////////////////-End of the Top Thumbnail Row-\\\\\\\\\\\\\\\\\\\\\-->

    <!--/////////////////////-Start of the Middle Thumbnail Row-\\\\\\\\\\\\\\\\\\\\\-->        
    <div class="row sub_content">

        <?php 
        $args = array( 'post_type' => 'blog', 
                       'post_status' => 'publish',
                       'showposts' => 3,
                       '&paged='.$paged,            
                       'offset' => 4); 
        $secondRowThumbs = new WP_Query($args);

        if ( $secondRowThumbs->have_posts() ) : while ( $secondRowThumbs->have_posts() ) : $secondRowThumbs->the_post(); ?>

        <div class="small-12 medium-4 large-4 columns"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>
        </div>
        <?php endwhile; else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
        <?php endif; ?>     
        <?php rewind_posts(); ?>

    </div>
    <!--/////////////////////-End of the Middle Thumbnail Row-\\\\\\\\\\\\\\\\\\\\\-->

    <!--/////////////////////-Start of the Bottom Thumbnail Row-\\\\\\\\\\\\\\\\\\\\\-->        
    <div class="row sub_content">

        <?php 
        $args = array( 'post_type' => 'blog', 
                       'post_status' => 'publish',
                       'showposts' => 3,
                       '&paged='.$paged,            
                       'offset' => 7); 
        $thirdRowThumbs = new WP_Query($args);

        if ( $thirdRowThumbs->have_posts() ) : while ( $thirdRowThumbs->have_posts() ) : $thirdRowThumbs->the_post(); ?>

        <div class="small-12 medium-4 large-4 columns"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>
        </div>
        <?php endwhile; else : ?>
            <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
        <?php endif; ?>     

    </div>
    <!--/////////////////////-End of the Bottom Thumbnail Row-\\\\\\\\\\\\\\\\\\\\\-->

    <?php wp_reset_postdata(); ?>       

UPDATE

With great help and advice from Pieter I have changed the setup of the front page from what I had initially setup as static to the normal version and have used the code from his answer below, however I am still having problems as Test Post 12 is rendering twice which is throwing off the layouts of the rows.

UPDATE - SOLVED

Pieter helped me out no end and here is the final code that made things work perfectly. Please note: the function for the functions.php is the same as listed in the post below.

here is the final index.php

    <section class="row main_content"> 

        <div class="small-12 large-4 large-push-8 columns">
            <?php get_sidebar( $name ); ?>
        </div> 

        <div class="hero">  
            <div class="small-12 large-8 large-pull-4 columns">

                <?php 

                    if( have_posts() ) {

                        while( have_posts() ) {
                            the_post();

                            get_template_part( 'content', 'home' );

                        }
                        ?>
                        </div>
                        <div class="row sub_content">
                            <div class="small-12 large-12 columns">
                        <?php
                        previous_posts_link('Newer');
                        next_posts_link( 'Older' );
                        ?>
                            </div>
                        </div>
                        <?php

                    }else{ ?>

                        <p>
                            <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
                        </p>

                    <?php }
                ?>

    <?php get_footer(); ?>

and here is the final content-home.php

    <?php

    if( $wp_query->current_post == 0 ) { ?>

                <!--Start of the FEATURED post image-->
                <div class="hero_img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a></div>
                <!--End of the FEATURED post image-->

                <div class="thumbpost-text">
                    <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                    <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
                </div>

            </div>

        </div>

    </section>

    <?php  }else{//End of the Main image post


        if( $wp_query->current_post == 1 ){
            echo "<div class=row sub_content>"; 
        }
        ?>  
        <div class="small-12 medium-4 large-4 columns">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>
        </div>
        <?php
        if ( $wp_query->current_post == 3 ){
            echo "</div><div class=row sub_content>";
        }

        if ( $wp_query->current_post == 6){
            echo "</div><div class=row sub_content>";
        }

    } ?>
  • One question, the first post, is that a featured post, should it appear on page two as well, or should the first post on every page be in the way as the pic – Pieter Goosen Jan 25 '15 at 16:53
1

You can do this in one loop without as custom query. A couple of clever functions should get you there

So lets look at a solution. First things first. I would suggest to separate your code completely here for easiness of reading and organisation. Roll back the changes in content.php and use this template only for all other templates. Create a separate template for the homepage, lets call this content-home.php.

Put that template away for a while, but keep it in mind. Lets looks at the index.php template for your homepage. Most of your code in redundant and is not needed, so you can remove most parts here. Your index.php should look something like

<?php get_header(); ?>

<section class="row main_content"> 

    <div class="small-12 large-4 large-push-8 columns">
        <?php get_sidebar( $name ); ?>
    </div> 

    <div class="hero">  
        <div class="small-12 large-8 large-pull-4 columns">

            <?php 

                if( have_posts() ) {

                    while( have_posts() ) {
                        the_post();

                        get_template_part( 'content', 'home' );

                    }

                    previous_posts_link('Newer');
                    next_posts_link( 'Older' );

                }else{ ?>

                    <p>
                        <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
                    </p>

                <?php }
            ?>

<?php get_footer(); ?>

Custom post types are not included by default in the main query, except on taxonomy pages and post type archive pages. To get your homepage to display custom post types, we will use pre_get_posts to add them to the home page. Do not use a custom query to do this. Don't drop the main query in favor of a custom query. I have explained everything in this post, so be sure to go and read that post and all linked posts

Ok, now open up functions.php and add the following code. This will add your custom post type to home page. (This code uses closures which needs PHP 5.3+)

add_action( 'pre_get_posts', function ( $q ) {

    if( $q->is_main_query() && $q->is_home() ) {

        $q->set( 'post_type', 'blog' );

    }

});

You now have your custom post type displaying on your homepage, and by just placing the_title(); in content-home.php you will at least see the titles of your custom post type posts

Now, lets get back to content-home.php. You can make use of the build-in loop counter here which can be accessed through $wp_query->current_post, and remember, this counter starts at 0

I have taken your code from your answer as a quick reference and combined it with what should go into your content-home.php. Here is a basic idea of what your content-home.php should look like

<?php

if( $wp_query->current_post == 0 ) { ?>

            <!--Start of the FEATURED post image-->
            <div class="hero_img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a></div>
            <!--End of the FEATURED post image-->

            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>

        </div>

    </div>

</section>

<?php  }else{//End of the Main image post


    if( $wp_query->current_post == 1 ){
        echo "<div class=row sub_content>"; 
    }
    ?>  
    <div class="small-12 medium-4 large-4 columns">
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
        <div class="thumbpost-text">
            <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
        </div>
    </div>

    <?php
    if ( $wp_query->current_post == 3 ){
        echo "</div><div class=row sub_content>";
    }

    if ( $wp_query->current_post == 6){
        echo "</div>";
    }

} ?>

This should be enough to make everything work. Extend and modify as needed

EDIT

From your comments, for a static front page, thing will look a bit different. pre_get_posts will not work on a static front page or a page template, so you can delete that part from functions.php. This is why it is so important to give correct info in your question.

Here you will need to use a custom query. In your template that you use for the static front page, paste the following code (I have made some extra changes here to accommodate the styling issue)

<?php get_header(); ?>

<section class="row main_content"> 

    <div class="small-12 large-4 large-push-8 columns">
        <?php get_sidebar( $name ); ?>
    </div> 

    <div class="hero">  
        <div class="small-12 large-8 large-pull-4 columns">

            <?php 
                //THE LOOOP
                $paged = get_query_var( 'page' ) ? get_query_var( 'page' ) : 1;

                $args = array( 
                    'post_type' => 'blog', 
                    'paged' => $paged,
                    'posts_per_page' => 12
                ); 
                $q = new WP_Query($args);

                if( $q->have_posts() ) {

                    while( $q->have_posts() ) {
                        $q->the_post();

                        get_template_part( 'content', 'home' );

                    }

                    previous_posts_link('Newer');
                    next_posts_link( 'Older', $q->max_num_pages );

                    wp_reset_postdata();

                }else{ ?>

                    <p>
                        <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
                    </p>

                <?php }
            ?>

<?php get_footer(); ?>

Remember, the static front page uses page not paged for the value of the [paged][2] parameter

As for the styling issue, I have copied from your answer, so there might be a problem. Try the following in content-home.php

<?php

if( $q->current_post == 0 ) { ?>

            <!--Start of the FEATURED post image-->
            <div class="hero_img"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a></div>
            <!--End of the FEATURED post image-->

            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>

        </div>

    </div>

</section>

<?php  }else{//End of the Main image post


    if( $q->current_post == 1 ){
        echo "<div class=row sub_content>"; 
    }
    ?>  
    <div class="small-12 medium-4 large-4 columns">
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
        <div class="thumbpost-text">
            <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
        </div>
    </div>

    <?php
    if ( $q->current_post == 3 ){
        echo "</div><div class=row sub_content>";
    }

    if ( $q->current_post == 6){
        echo "</div>";
    }

} ?>
  • Pieter, I can't thank you enough for your help. I've learnt a lot and couldn't have done it without you. There was one minor change I made to the final for statement and everything renders perfectly but moreover I have a better understanding of how to use the loop more effectively. Thanks again!! – Nibbers Jan 26 '15 at 21:38
  • My pleasure. Glad things worked out for you. Enjoy:-) – Pieter Goosen Jan 27 '15 at 3:56
0

Ok, I've had a major breakthrough with the multiple loops on the smaller thumbnails and managed to find an answer to question 1. I now just need help with the answer to question 2!

Here is the updated code for the thumbnail rows within one loop:

<?php 
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $args = array( 'post_type' => 'blog', 
                   'post_status' => 'publish',
                   'showposts' => 9,
                   'paged' => $paged,           
                   'offset' => 1); 
    $rowThumbs = new WP_Query($args);
    $myLoop = 0;    

    if ( $rowThumbs->have_posts() ) : 

    while ( $rowThumbs->have_posts() ) : $rowThumbs->the_post(); $myLoop++ ?>
        <?php 
        if($myLoop == 1){
            echo "<div class=row sub_content>"; 
        }
        ?>  
        <div class="small-12 medium-4 large-4 columns">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('blog-featured-img'); ?></a>
            <div class="thumbpost-text">
                <h2 class="thumbpost-titles"><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
                <p class="thumbpost-tags"><?php the_tags( "", ", ", "" ); ?></p>
            </div>
        </div>

        <?php
        if ($myLoop == 3){
            echo "</div><div class=row sub_content>";
        }
        if ($myLoop == 6){
            echo "</div>";$myLoop=0;
        }
    wp_reset_postdata(); 
    ?>

    <?php 
    endwhile; 
    else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>     

    </div>
  • Don't use a custom query :-) – Pieter Goosen Jan 25 '15 at 17:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.