0

I have my page template pulling one specific category & pulling the featured image & title into 3 different columns on my site. The problem is they all pull the CSS class .proj-left how can I get my page to pull the featured image, title, & use the specific column CSS class that should be assigned to it?

This is my page template:

<?php

/*

Template Name: Projects

*/

?>



<?php get_header(); ?>



<div id="content">
    <div id="contentwide">
        <div class="postarea_wide">


        <?php
        $counter = 1; //start counter

        $grids = 3; //Grids per row

        global $query_string; //Need this to make pagination work


        /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
        query_posts( array ( 'category_name' => 'decorating-home', 'posts_per_page' => 9 ) );


        if(have_posts()) :  while(have_posts()) :  the_post(); 
        ?>
        <?php
        //Show the left hand side column
        if($counter == 1) :
        ?>
                <div class="proj-left">
                                <div class="postimage">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
                                </div>
                                <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                </div>
        <?php
        //Show the middle column
        elseif($counter == $grids) :
        ?>
                <div class="proj-middle">
                                <div class="postimage">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
                                </div>
                                <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                </div>
        <?php
        //Show the right hand side column
        elseif($counter == $grids) :
        ?>
                <div class="proj-right">
                                <div class="postimage">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
                                </div>
                                <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
                </div>          

                <div class="clear"></div>
        <?php endif; ?>

        <?php
        endwhile;
        echo paginate_links( $args );
        endif;
        ?>



        </div>
    </div>
</div>



<!-- The main column ends  -->



<?php get_footer(); ?>
1
  • Just as a note: This kind of layout can - and IMHO should - be done via CSS. No need to handle this via PHP. Or one can use the Masonry JS library, which is included in WP core, if some fancier features are needed.
    – Nicolai
    Oct 2 '14 at 19:49
3

First of all, never use query_posts

Note: This function isn't meant to be used by plugins or themes. As explained later, there are better, more performant options to alter the main query. query_posts() is overly simplistic and problematic way to modify main query of a page by replacing it with new instance of the query. It is inefficient (re-runs SQL queries) and will outright fail in some circumstances (especially often when dealing with posts pagination).

If you can't use pre_get_posts to modify the main query properly, you must make use of either WP_Query or get_posts to create a custom query with

You can achieve what you want with simple CSS and by clearing your float every third post by using the build in loop counter $current_post

You can modify your code to something like this

<?php
/*
Template Name: Projects
*/
?>

<?php get_header(); ?>

<div id="content">
    <div id="contentwide">
        <div class="postarea_wide">


        <?php
        /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
        $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
        $query = new WP_Query( array ( 'category_name' => 'decorating-home', 'posts_per_page' => 9, 'paged' => $paged ) );


        if($query->have_posts()) :  while($query->have_posts()) :  $query->the_post(); 
        ?>
            <div class="proj">
                            <div class="postimage">
                                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
                            </div>
                            <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
            </div>
        <?php       
            if(($query->current_post+1)%3 == 0){ 
                echo '<div class="clear" style="clear:left"></div>';
            }
        ?>

        <?php
        endwhile;
        echo paginate_links( $args );
        endif;
        ?>



        </div>
    </div>
</div>

<!-- The main column ends  -->

<?php get_footer(); ?>

Your CSS can then look something like this

.proj {
   width: 33,3%;
   float: left:
}

EDIT

You are almost there with your pagination links.

For reference, see

Change your pagination link codes to the following

<div id="pagenav">
    <div class="prev"><p><?php previous_posts_link( 'Newer Entries' ); ?></p></div>
    <div class="next"><p><?php next_posts_link( 'Older Entries', $query->max_num_pages ); ?></p></div>
</div>
4
  • I'm getting this error: Parse error: syntax error, unexpected ':' on line 20 thoughts? This is line 20: if($query->have_posts()) : $query->while(have_posts()) : $query->the_post(); Oct 1 '14 at 19:46
  • 1
    Goodmorning, Sorry about the syntax errors, I quickly posted before I went to bed. I fixed the syntax errors. See updated code :-) Oct 2 '14 at 4:26
  • Perfect! Everything seems to be working besides pagination now. I've added my links, but they don't show up. Thoughts? This is the updated code: pastebin.com/6c3UqEyz Oct 2 '14 at 19:21
  • Glad this worked out for you, please see my edit on pagination. Tested it and works. I'm off to bed now. Enjoy :-) Oct 2 '14 at 19:35
0

You could do this in a few ways, below I've laid out two.

Method 1: Modulus

The idea is that you get the remainder of your $counter divided by $grids. In our case, the left side will always be counted as: 1, 4, 7, 10, etc. so the remainder of our $grid (being 3) will always be 1. Our last column will be always equate to 0. At the bottom we must increment our $counter

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter % $grids = 1) :
?>
    <div class="proj-left">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the middle column
elseif($counter % $grids = 2) :
?>
    <div class="proj-middle">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the right hand side column
elseif($counter % $grids = 0) :
?>
    <div class="proj-right">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>          

    <div class="clear"></div>
<?php endif; ?>

<?php $counter++;
endwhile;

Method 2: Counter Reset

Some people do not like modulus so in our 2nd method we could reset our counter each time it reaches 3. At that point we can just test if our $counter variable is equal to 1, 2, or 3.

if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
    <div class="proj-left">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the middle column
elseif($counter == 2) :
?>
    <div class="proj-middle">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>
<?php
//Show the right hand side column
elseif($counter == 3) :
?>
    <div class="proj-right">
        <div class="postimage">
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
        </div>
        <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
    </div>          

    <div class="clear"></div>
<?php endif; ?>

<?php $counter = ($counter == 3) ? 1 : ($counter + 1);
endwhile;

At the bottom of our loop is where we either increment our $counter or reset it back to 1.

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.