How to fix page navigation on a 3 column (3 categories) homepage?

  • Resolved ziont

    (@ziont)


    11 years, 7 months ago

    Hello good people,

    I’m trying to customise my homepage blog. I have designed it on 3 columns, each column displaying posts from 3 different categories. The theme is based on HTML5 Reset theme.

    I managed to do that using the following code:

    <div id="content_left">
			<div class="category">
				<h3 class="category_header">Web news</h3>
			</div>
	<?php query_posts('cat=26');
	if (have_posts()) : while (have_posts()) : the_post(); ?>
	<article <?php post_class() ?> id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/Article">
			<h2 class="entry-title">  <a href="<?php the_permalink() ?>"> <span itemprop="name"><?php the_title(); ?> </span></a></h2>
			<?php posted_on(); ?>
			<div class="entry" >
				<span itemprop="articleSection">
				<?php the_content('(Full story &rarr;)'); ?>
				</span>
			</div>
			<footer class="postmetadata">
				<?php the_tags(__('Tags: ','html5reset'), ', ', '<br />'); ?>
				<?php _e('Category: ','html5reset'); ?> <?php the_category(', ') ?> <br />
				<?php _e('Reactions: ','html5reset'); ?><?php comments_popup_link(__('0 comments »','html5reset'), __('1 comment »','html5reset'), __('% comments »','html5reset')); ?>
			</footer>
		</article>

	<?php endwhile; ?>

	<?php else : ?>

		<h2><?php _e('Nothing Found','html5reset'); ?></h2>

	<?php endif; ?>
</div>
<div id="content_middle">
			<div class="category">
				<h3 class="category_header">Neotests</h3>
			</div>
	<?php $topbox = get_posts('numberposts=5&category=21'); foreach($topbox as $post) :    setup_postdata($post); ?>
		<article <?php post_class() ?> id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/Article">
			<h2 class="entry-title">  <a href="<?php the_permalink() ?>"> <span itemprop="name"><?php the_title(); ?> </span></a></h2>
			<?php posted_on(); ?>
			<div class="entry" >
				<span itemprop="articleSection">
				<?php the_content('(Full story &rarr;)'); ?>
				</span>
			</div>
			<footer class="postmetadata">
				<?php the_tags(__('Tags: ','html5reset'), ', ', '<br />'); ?>
				<?php _e('Category: ','html5reset'); ?> <?php the_category(', ') ?> <br />
				<?php _e('Reactions: ','html5reset'); ?><?php comments_popup_link(__('0 comments »','html5reset'), __('1 comment »','html5reset'), __('% comments »','html5reset')); ?>
			</footer>
		</article> <?php endforeach; ?>
</div>
<div id="content_right">
			<div class="category">
				<h3 class="category_header">Recommendations</h3>
			</div>
	<?php $leftbox = get_posts('numberposts=5&category=374'); foreach($leftbox as $post) :    setup_postdata($post); ?>
			<article <?php post_class() ?> id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/Article">
			<h2 class="entry-title">  <a href="<?php the_permalink() ?>"> <span itemprop="name"><?php the_title(); ?> </span></a></h2>
			<?php posted_on(); ?>
			<div class="entry" >
				<span itemprop="articleSection">
				<?php the_content('(Full story &rarr;)'); ?>
				</span>
			</div>
			<footer class="postmetadata">
				<?php the_tags(__('Tags: ','html5reset'), ', ', '<br />'); ?>
				<?php _e('Category: ','html5reset'); ?> <?php the_category(', ') ?> <br />
				<?php _e('Reactions: ','html5reset'); ?><?php comments_popup_link(__('0 comments »','html5reset'), __('1 comment »','html5reset'), __('% comments »','html5reset')); ?>
			</footer>
		</article> <?php endforeach; ?>
</div>
	<div "navigation_page"> <?php post_navigation(); ?></div>

    For pagination, I’m using wp-navi. But it doesn’t work – in the sence that it displays the number of pages but every page is in fact the same page. So, I need to fix that.

    I’m opened on using custom code instead of a plugin but I can’t seem to wrap my brain around it. Does anyone have any suggestions?

Viewing 3 replies - 1 through 3 (of 3 total)

  • Change:

    <?php query_posts('cat=26');

    to;

    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
	'cat' => '=26,
	'paged' => $paged
);
query_posts($args);
    Thread Starter ziont

    (@ziont)

    @esmi: worked just fine, for my first coloumn.
    I managed to replicate your code for other 2 columns too and added ‘posts_per_page’ => 5 so I can display 5 posts/page and works great!

    So, my final working code for displaying posts on my homepage blog in 3 coloumns (each with 3 different categories and 5 posts/category) is:

    <div id="content_left">
			<div class="category">
				<h3 class="category_header">Web news</h3>
			</div>
	<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
	'cat' => '=26',
	'posts_per_page' => 5,
	'paged' => $paged
);
query_posts($args);
	if (have_posts()) : while (have_posts()) : the_post(); ?>
	<article <?php post_class() ?> id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/Article">
			<h2 class="entry-title">  <a>"> <span itemprop="name"><?php the_title(); ?> </span></a></h2>
			<?php posted_on(); ?>
			<div class="entry" >
				<span itemprop="articleSection">
				<?php the_content('(Full story →)'); ?>
				</span>
			</div>
			<footer class="postmetadata">
				<?php the_tags(__('Subiecte: ','html5reset'), ', ', ''); ?>
				<?php _e('Category: ','html5reset'); ?> <?php the_category(', ') ?>
				<?php _e('Reactions: ','html5reset'); ?><?php comments_popup_link(__('0 Comments ?','html5reset'), __('1 comment ?','html5reset'), __('% Comments ?','html5reset')); ?>
			</footer>
		</article>

	<?php endwhile; ?>

	<?php else : ?>

		<h2><?php _e('Nothing Found','html5reset'); ?></h2>

	<?php endif; ?>
</div>
<div id="content_middle">
			<div class="category">
				<h3 class="category_header">Tests</h3>
			</div>
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
	'cat' => '=21',
	'posts_per_page' => 5,
	'paged' => $paged
);
query_posts($args);
	if (have_posts()) : while (have_posts()) : the_post(); ?>
		<article <?php post_class() ?> id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/Article">
			<h2 class="entry-title">  <a>"> <span itemprop="name"><?php the_title(); ?> </span></a></h2>
			<?php posted_on(); ?>
			<div class="entry" >
				<span itemprop="articleSection">
				<?php the_content('(Full story →)'); ?>
				</span>
			</div>
			<footer class="postmetadata">
				<?php the_tags(__('Subiecte: ','html5reset'), ', ', ''); ?>
				<?php _e('Category: ','html5reset'); ?> <?php the_category(', ') ?>
				<?php _e('Reactions: ','html5reset'); ?><?php comments_popup_link(__('0 Comments ?','html5reset'), __('1 comment ?','html5reset'), __('% Comments ?','html5reset')); ?>
			</footer>
		</article> <?php endwhile; ?>

	<?php else : ?>

		<h2><?php _e('Nothing Found','html5reset'); ?></h2>

	<?php endif; ?>
</div>
<div id="content_right">
			<div class="category">
				<h3 class="category_header">Recommendations</h3>
			</div>
	<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args= array(
	'cat' => '=374',
	'posts_per_page' => 5,
	'paged' => $paged
);
query_posts($args);
	if (have_posts()) : while (have_posts()) : the_post(); ?>
			<article <?php post_class() ?> id="post-<?php the_ID(); ?>" itemscope itemtype="https://schema.org/Article">
			<h2 class="entry-title">  <a>"> <span itemprop="name"><?php the_title(); ?> </span></a></h2>
			<?php posted_on(); ?>
			<div class="entry" >
				<span itemprop="articleSection">
				<?php the_content('(Full story →)'); ?>
				</span>
			</div>
			<footer class="postmetadata">
				<?php the_tags(__('Subiecte: ','html5reset'), ', ', ''); ?>
				<?php _e('Category: ','html5reset'); ?> <?php the_category(', ') ?>
				<?php _e('Reactions: ','html5reset'); ?><?php comments_popup_link(__('0 Comments ?','html5reset'), __('1 comment ?','html5reset'), __('% Comments ?','html5reset')); ?>
			</footer>
		</article> <?php endwhile; ?>

	<?php else : ?>

		<h2><?php _e('Nothing Found','html5reset'); ?></h2>

	<?php endif; ?>
</div>
	<div align="center"> <?php post_navigation(); ?></div>
<?php get_footer(); ?>

    Thank you again, @esmi.

    Glad I could help ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to fix page navigation on a 3 column (3 categories) homepage?’ is closed to new replies.