I'm working on a responsive theme. One part is a sort of news flow (blog). In desktop widths (above 767px) the news template is vertically divided in two. The left part is a navigation which lists titles and dates linking to the actual news item. The right part is where the content displays. "Posts page" is set to this page and "Posts per page" is set to 1, and thus the right content area displays one news item at a time.

This vertically divided template structure works well in desktop widths but not so much on smaller widths. So for widths less than 768 I'm having a more traditional approach with the left nav part removed and the content displaying at 100% width (all through media queries). In a case like this "post per page" would be set to like 5-7 posts.

So how can I change "posts per page" depending on sreen width? Or are there some other way to accomplish this?

1 Answer 1


A simple approach would be a solution with CSS and PHP.

$postcount = 1;
$wp_query = new WP_Query();
while ($wp_query->have_posts()) : $wp_query->the_post();

<div class="post-<?php echo $postcount ?>">
<h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<div class="entry">
<?php the_excerpt(); ?>


Then you can style your website, depending on the screen size.

.post-1, .post-2, .post-3 { }
.post-4, .post-5, .post-6 { display:none; }
  • 1
    To avoid notices of undefined variable you have to declare $postcount before increment it first time. But $postcount is not needed at all, because the $wp_query->current_post do the same thing without the use of another variable.
    – gmazzap
    Commented Aug 21, 2013 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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