1

sorry for the silly question, but I am really lost. I want to apply the following CSS to the even elements of my foreach.

CSS

.blogArticles a {
    float: left;
    max-width: 250px;
    width: 25%;
    color: #333;
}

.blogArticles a:nth-child(even) {
    margin: 30px 0 -30px 0;
}

PHP UPDATED (I used snap.svg to render the SVG)

<section id="blogArticles" class="blogArticles clearfix">

    <?php

        $page = (isset($_GET['paged'])) ? $_GET['paged'] : 1;

        $args = array(
                    'paged'          => $paged,
                    'orderby' => 'id',
                    'order' => 'DESC',
                    'cat' => 50,
                    'posts_per_page'    => 20,
                    'post_status'      => 'publish',
                    'suppress_filters' => true
                    );                      

        $blogPosts = query_posts( $args );

        if ( have_posts() ) : while ( have_posts() ) : the_post();

        $categories = get_the_category();

        $count = 0;
        if ($categories) {
            foreach($categories as $category) {
                $class = ($count%2 == 0) ? "even" : "";
    ?>

                <a href="#" class="mix <?php echo $category->name; ?> <?php echo $class; ?>" target="_self" onclick="return false;" data-path-hover="m 0,0 0,100 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
                    <figure>
                        <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>      
                                <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                        <?php endif; ?>
                        <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z"/></svg>
                        <figcaption>
                            <h2><?php the_title(); ?></h2>
                            <p class="label <?php echo $category->name; ?>"><?php echo $category->name; ?></p>
                            <button>View</button>
                        </figcaption>
                    </figure>
                </a>

        <?php 
                $count++;
            } 
        } 
        ?>

    <?php endwhile; ?>

</section>

<div id="pagination">
    <?php html5wp_pagination(); ?>
</div>

function.php

function html5wp_pagination()
{
    global $wp_query;
    $big = 999999999;
    echo paginate_links(array(
        'base' => str_replace($big, '%#%', get_pagenum_link($big)),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $wp_query->max_num_pages
    ));
}

The problem is that in the foreach every printed $class is even! Any hint on where it is my mistake? Thank you in advance!


If you have problem, as me, displaying the suggested great pagination function, here is the code fixed for the pagination of @Pieter Goosen

<?php $count = 1; ?>
    <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        $args = array('paged' => $paged,........);
        $blogPosts = new WP_Query( $args );

        if ( $blogPosts->have_posts() ) : ....... while ( $blogPosts->have_posts() ) : $blogPosts->the_post();
            ........
            ........
            ........
        } 
?>
    <?php $count = $count+1; ?>
    <?php endwhile; ?>

    <?php wp_reset_postdata(); ?>

<div class="clear"></div>

<?php custom_pagination($blogPosts->max_num_pages); ?>
  • Are there code missing in your php, as your code just don't work at all – Pieter Goosen Jun 22 '14 at 11:06
  • Let me check, sorry! – Mark Jun 22 '14 at 11:23
  • Updated the PHP, now it works. But every elements in the foreach() is even! – Mark Jun 22 '14 at 11:41
  • Mark, just one thing. wp_reset_query() is used for query_posts. For WP_Query you should use wp_reset_postdata() – Pieter Goosen Jun 22 '14 at 15:50
1

Firstly, you should never use query_posts to construct custom queries. This is not just my emphasis, but the codex as well. The one big problem with query_posts is, it many circumstances, pagination fails

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

Just a point of note, your next_posts_link $max_pages parameter should be set for custom queries, otherwise it will fail

You should always construct custom queries with WP_Query. So your custom query should look like this

$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;

$args = array(
    'paged'          => $paged,
    'orderby' => 'ID',
    'order' => 'DESC',
    'cat' => 50,
    'posts_per_page'    => 20,
    'post_status'      => 'publish',
    'suppress_filters' => true
);                      

$blogPosts = new WP_Query( $args );

if ( $blogPosts->have_posts() ) : while ( $blogPosts->have_posts() ) : $blogPosts->the_post();

<----YOUR LOOP---->

endwhile;

// next_posts_link() usage with max_num_pages
next_posts_link( 'Older Entries', $blogPosts->max_num_pages );
previous_posts_link( 'Newer Entries' );

wp_reset_postdata();

endif;

Lastly, your counter should start outside the loop, not inside

if ( $blogPosts->have_posts() ) : 
    $count = 0;
    while ( $blogPosts->have_posts() ) : $blogPosts->the_post();

EDIT

Custom pagination function. I don't know who the original author of this function is, but thanks to you if you ever find this answer :-)

function custom_pagination($pages = '', $range = 2) {   
   $showitems = ($range * 2)+1;  

  global $paged;
  if(empty($paged)) $paged = 1;

      if($pages == '')
      {
         global $wp_query;
         $pages = $wp_query->max_num_pages;
            if(!$pages)
            {
            $pages = 1;
            }
        }   

       if(1 != $pages)
      {
        $string = _x( 'Page %1$s of %2$s' , '%1$s = current page, %2$s = all pages' , 'pietergoosen' );
        echo "<div class='pagination'><span>" . sprintf( $string, $paged, $pages ) . "</span>";
          if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>" . __( '&laquo; First', 'pietergoosen' ) . "</a>";
         if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>" . __( '&lsaquo; Previous', 'pietergoosen' ) . "</a>";

            for ($i=1; $i <= $pages; $i++)
            {
               if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
               {
                    echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
               }
           }

           if ($paged < $pages && $showitems < $pages) echo "<a href='" . get_pagenum_link($paged + 1)."'>" . __( 'Next &rsaquo;', 'pietergoosen' ) . "</a>";
           if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>" . __( 'Last &raquo;', 'pietergoosen' ) . "</a>";
           echo "</div>\n";
     }
    } // 
0

To fix the problem, I just removed the $count = 0 before the foreach() and:

if ($categories) {
   foreach($categories as $category) {
     if(!isset($count))
        $count = 0;
  • This is wrong, check my answer – Pieter Goosen Jun 22 '14 at 12:31
  • Using your method, pagination fails! I add the pagination (1,2,.... Next) in my first question. Using my wrong answer, everything is working fine! I know and I already used WP_Query(), but in this case the pagination fails! I changed all my code based on another answer found on stackoverflow that has the same problem with pagination! – Mark Jun 22 '14 at 12:50
  • That is because you your next_posts_link is wrong. Check the link I gave for the post link. query_posts is totally wrong and should never be used as an alternative – Pieter Goosen Jun 22 '14 at 12:54
  • I know mate :) By the way for the better answer! – Mark Jun 22 '14 at 12:59
  • 1
    I will add an alternative pagination to my answer which works great. You can try it out. – Pieter Goosen Jun 22 '14 at 13:01

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.