Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

1 Answer 1

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

<?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(); ?>
</div>
</div>

<?php
$postcount++;
endwhile;
?>

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; }
share|improve this answer
    
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. –  G. M. Aug 21 '13 at 11:52
    
Thanks, I added the definition of $postcount. –  John Aug 21 '13 at 11:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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