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); ?>
foreach()
is even!wp_reset_query()
is used forquery_posts
. ForWP_Query
you should usewp_reset_postdata()