How to link pagination results with Bootstrap nav tabs - wordpress

I have 3 nav tabs (created using bootstrap) for sorting results using wp_query on my Library page.
The pagination works well, the problem I have is: when i click next or second on my pagination the active tab on Library page reverts to the first default sorting tab (recent).
My code is:
<?php
/**
* displays archive Library page
*/
get_header();
?>
<div id="page-header">
<section class="wrapper">
<div class="breadcrumbs">
You are here: Home / <span class="current">Library</span>
</div>
<h1 class="page-title half">Library</h1>
<div id="item-nav">
<div id="object-nav" class="item-list-tabs" role="navigation">
<ul class="tabs-nav tabs">
<li class="nav-three " data-tab="origin">Book origin</li>
<li class="nav-two " data-tab="year">Book release date</li>
<li class="nav-one current" data-tab="recent">Recent </li>
</ul>
</div><!-- /.item-list-tabs -->
</div><!-- /#item-nav -->
<div class="clear"></div>
</section>
</div><!-- /#page-header -->
<section class="wrapper">
<main class="tab-content current vocab-container" id="recent">
<ul class="blog-1 blog-1-full-width col-3 list-unstyled">
<div class='row'>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'library',
'post_type' => 'library',
'orderby' => 'meta_value',
'posts_per_page' => 9,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
if ($wp_query->have_posts() ) : while( $wp_query->have_posts() ) : $wp_query->the_post();
get_template_part( 'template-parts/content/content', 'lib' );
endwhile; else:
// nothing was found
endif;
wp_reset_postdata(); /* Restore original Post Data */
twentynineteen_the_posts_navigation();
?>
</div>
</ul>
</main>
<main class="tab-content vocab-container" id="year">
<ul class="blog-1 blog-1-full-width col-3 list-unstyled">
<div class='row'>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_status' => 'published',
'post_type' => 'library',
'orderby' => 'meta_value_num',
'meta_key' => 'year',
'posts_per_page' => 9,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
if ($wp_query->have_posts() ) : while( $wp_query->have_posts() ) : $wp_query->the_post();
get_template_part( 'template-parts/content/content', 'lib' );
endwhile; else:
// nothing was found
endif;
wp_reset_postdata(); /* Restore original Post Data */
twentynineteen_the_posts_navigation();
?>
</div>
</ul>
</main>
<main class="tab-content vocab-container" id="origin">
<ul class="blog-1 blog-1-full-width col-3 list-unstyled">
<div class='row'>
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_status' => 'published',
'post_type' => 'library',
'orderby' => 'meta_value',
'meta_key' => 'origin',
'posts_per_page' => 9,
'paged' => $paged
);
$wp_query = new WP_Query( $args );
if ($wp_query->have_posts() ) : while( $wp_query->have_posts() ) : $wp_query->the_post();
get_template_part( 'template-parts/content/content', 'lib' );
endwhile; else:
// nothing was found
endif;
wp_reset_postdata(); /* Restore original Post Data */
twentynineteen_the_posts_navigation();
?>
</div>
</ul>
</main>
</section><!-- /.wrapper -->
<?php
get_footer();
?>
Link to my website Library page is: http://elluse.com/library/
I really appreciate you help. Lana :)

If someone has similar issue I found similar answered question on stackexchange website. Here is link.
https://wordpress.stackexchange.com/questions/151596/sorting-custom-posts-on-archive-page-with-pagination?newreg=a1f2074307b347d5aecc0b666dcff3be
<script>
function submitform(val) {
document.getElementById('sort-option').value = val;
document.getElementById('form-sort').submit();
}
</script>
<form id="form-sort" action="<?php echo get_permalink(); ?>" method="post">
<ul>
<li>Sort By:</li>
<li>Newest rating
</li>
<li>Highest rating
</li>
<li>Lowest rating
</li>
</ul>
<input type='hidden' id='sort-option' name='sort-option' value=''>
</form>
_____________________________________________________________________________
if($wp_query->get('page') == 0 && empty($_POST) && !empty($_SESSION)) session_unset();
if(!empty($_POST) || !empty($_SESSION)) {
switch($_POST['sort-option']) {
case 'newest':
$_SESSION["sort"] = SORT_DESC;
$_SESSION["sort_by"] = 'review_date';
break;
case 'highest':
$_SESSION["sort"] = SORT_DESC;
$_SESSION["sort_by"] = 'rating';
break;
case 'lowest':
$_SESSION["sort"] = SORT_ASC;
$_SESSION["sort_by"] = 'rating';
break;
}
foreach($reviews as $k => $v) {
$column_id[$k] = $v[$_SESSION["sort_by"]];
}
array_multisort($column_id, $_SESSION["sort"], SORT_NUMERIC, $reviews);
}

Related

Pagination for a list of posts with custom_terms

I have code that gets all posts for a custom term,
I want to apply pagination for that code.
<div> <?php
$text = $_POST['text'];
/* echo ($text); */
$args = array( 'numberposts' => -1 );
$posts = get_posts( $args );
foreach($posts as $post)
{
$custom_terms = get_the_terms($post->ID,'Characters');
foreach($custom_terms as $custom_term)
{
if ( ($custom_term->name) == ($text) )
{
?>
<div class="col-sm-2">
<article class="item">
<div class="article-inner">
<div class="overlay"></div>
<div class="img-wrapper"><img class="img-100p latest-post-image"
src="<?php the_post_thumbnail_url('large'); ?>" alt="img"></div>
<div class="article-info">
<h4 class="entry-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php
//echo $countA ?><?php //echo $count_posts?><?php //echo $count%$st?></a>
</h4>
</div>
</div>
</article>
</div>
<?php
}
}
}
?>
</div>
I'm using plugin
https://wordpress.org/plugins/wck-custom-fields-and-custom-post-types-creator/
to create that custom_terms on backend admin wordpress.
and try to use this code but when go to page number 2 no posts apperas
<div>
<?php
$text = $_POST['text'];
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$count = 0;
$st = 15;
$args = array( 'numberposts' => -1 );
$posts = get_posts( $args );
$stack = array(2005);
$poststatus = array( 'publish' );
$current_category = single_cat_title("", false);
foreach($posts as $post)
{
$custom_terms = get_the_terms($post->ID,'characters');
foreach($custom_terms as $custom_term)
{
if ( (($custom_term->name) == ($text)) )
{
$counter ++ ;
array_push($stack,($post->ID) );
}
}
}
$args1 = array(
'post_type' => 'post',
'post__in' => $stack,
//'category_name' => '',
'post_status' => 'publish',
'posts_per_page' => 18,
//'offset' => 5,
'order_by' => 'date',
'paged' => $paged,
'ignore_sticky_posts' => 5 ,
);
$wp_query = new WP_Query( $args1 );
$count_posts = $wp_query->post_count;
if ( $wp_query->have_posts() ) :
while ( $wp_query->have_posts() ) :
$wp_query->the_post();
$count++;
if ($count%$st == 4) :
$count = 1;
?>
<?php
endif;
?>
<div class="col-sm-4">
<article class="item">
<div class="article-inner">
<div class="overlay"></div>
<div class="img-wrapper"><img class="img-100p latest-post-image"
src="<?php the_post_thumbnail_url('large'); ?>" alt="img"></div>
<div class="article-info">
<h4 class="entry-title">
<?php the_title(); ?>
</h4>
</div>
</div>
</article>
</div><!--col-sm-4-->
<?php
endwhile;
//wp_reset_postdata();
//wp_reset_query();
//wp_reset_postdata();
endif;
?>
#ManoharSingh
This is full template file
<?php
/**
<?php /* Template Name: C1
*
* Used to display archive-type pages if nothing more specific matches a query.
* For example, puts together date-based pages if no date.php file exists.
*
* If you'd like to further customize these archive views, you may create a
* new template file for each one. For example, tag.php (Tag archives),
* category.php (Category archives), author.php (Author archives), etc.
*
* #link https://codex.wordpress.org/Template_Hierarchy
*
* #package Primer
* #since 1.0.0
*/
get_header();
$temp = $wp_query;
// $wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('showposts=6&post_type=post_type_name'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div>
<?php
$text = $_POST['text'];
/* echo ($text); */
$args = array( 'numberposts' => -1 );
$posts = get_posts( $args );
foreach($posts as $post)
{
$custom_terms = get_the_terms($post->ID,'characters');
foreach($custom_terms as $custom_term)
{
if ( ($custom_term->name) == ($text) )
{
?>
<div class="col-sm-2">
<article class="item">
<div class="article-inner">
<div class="overlay"></div>
<div class="img-wrapper"><img class="img-100p latest-post-image" src="<?php the_post_thumbnail_url('large'); ?>" alt="img"></div>
<div class="article-info">
<h4 class="entry-title">
<?php the_title(); ?><?php //echo $countA ?><?php //echo $count_posts?><?php //echo $count%$st?>
</h4>
</div>
</div>
</article>
</div>
<?php
}
}
}
?>
</div>
<?php endwhile; ?>
<section class="all-pagination">
<div class="container">
<div class="col-md-12">
<div class="col-md-12 in-pagination">
<ul class="pagination">
<?php wp_pagenavi( array( 'query' => $wp_query ) ); ?>
<?php //if (function_exists('wp_pagenavi')) { wp_pagenavi( array( 'query' => $wp_query ) ); } ?>
</ul>
</div>
</div>
</div>
</section>
<?php ?>
<?php get_footer(); ?>
Try this code,
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('showposts=6&post_type=post_type_name'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<!-- LOOP: Usual Post Template Stuff Here-->
<?php endwhile; ?>
<nav>
<?php previous_posts_link('« Newer') ?>
<?php next_posts_link('Older »') ?>
</nav>
And you can try this plugin for pagination 'https://wordpress.org/plugins/wp-pagenavi/'

Splitting WordPress Loops

I want to display a grid of thumbnails & post titles which are custom post types. I am also using fullpage.js which displays content full width & height of the browser window. Within each fullpage 'section', I want to show 6x thumbnails/titles.
How can I split the loop in order to achieve this effect? Here is my code so far:
<?php
$work_args = array(
'post_type' => 'bp_work_post_type',
'post_status' => 'publish',
'posts_per_page' => 6,
'offset' => 6
);
$work_query = new WP_Query( $work_args );
?>
<?php if ( $work_query->have_posts() ) : ?>
<div class="section">
<?php while ( $work_query->have_posts() ) : $work_query->the_post(); ?>
<div class="post-grid">
//Grid Content in here
</div>
<?php endwhile;?>
</div>
<?php endif; ?>
you can use boostrap css to split the div's.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<?php
$work_args = array(
'post_type' => 'bp_work_post_type',
'post_status' => 'publish',
'posts_per_page' => 6,
'offset' => 6
);
$work_query = new WP_Query( $work_args );
?>
<?php if ( $work_query->have_posts() ) : ?>
<div class="section row">
<?php while ( $work_query->have_posts() ) : $work_query->the_post(); ?>
<div class="post-grid col-md-2">
//Grid Content in here
</div>
<?php endwhile;?>
</div>
<?php endif; ?>
Use the modulus symbol (%)
<?php
$work_args = array(
'post_type' => 'bp_work_post_type',
'post_status' => 'publish',
'posts_per_page' => -1,
);
$work_query = new WP_Query( $work_args );
$nb_posts = $work_query->post_count;
$post_per_section = 6;
?>
<?php if ( $work_query->have_posts() ) : ?>
<div class="section">
<?php $count=0; ?>
<?php while ( $work_query->have_posts() ) : $work_query->the_post(); $count++; ?>
<div class="post-grid"></div>
<?php if($count % $post_per_section == 0 && $nb_posts !== $post_per_section ): ?>
</div><div class="section">
<?php endif;?>
<?php endwhile;?>
</div>
<?php endif; ?>

Pagination is not working in archive page in WordPress

Every pagination link take me to the first page every time. I have tried with or without a plugin, but nothing works. It doesn't matter if I click on the Next button or the Prev button. It always takes me to the first page.
<?php
/*
Template Name: Notices & Circulars
*/
get_header(); ?>
<div class="banner-box">
<div class="wrap">
<div class="main-top">
<div class="main">
<h1><div class="titlepage"><?php the_title();?></div></h1>
<section class="content">
<?php
$args=array(
'cat'=> 14,
'posts_per_page' => 10,
'offset' => 5,
'paged' => get_query_var('page')
);
if ( have_posts() ) :
query_posts($args);
?>
<?php while(have_posts()):the_post();?>
<li style="list-style:none;">
<h3><font style="color:#666666;"><?php the_title(); ?></h3>
<?php
/***** Thumbnail ******/
the_post_thumbnail(
array(120, 90),
array(
'class' => 'thumbnail',
'alt' => 'post thumbnail',
'title' => 'my custom title'
)
);
/******* Thumbnail Ends ********/
the_content(__('Continue Reading'));?></font>
</li><hr /><?php
endwhile;
wp_pagenavi();
endif;
?>
</div>
</div>
</div>
<?php get_footer(); ?>
</div>
Please try this:
<?php
/*
Template Name: Notices & Circulars
*/
get_header(); ?>
<div class="banner-box">
<div class="wrap"><div class="main-top"><div class="main">
<h1><div class="titlepage"><?php the_title();?></div></h1>
<section class="content">
<?php
// Example for adding WP PageNavi to a new WP_Query call
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array('post_type' => 'post','cat'=> 14,'posts_per_page' => 10, 'paged' => $paged);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<li style="list-style:none;">
<h3><font style="color:#666666;"><?php the_title(); ?></h3>
<?php
/***** Thumbnail ******/
the_post_thumbnail(
array(120, 90),
array(
'class' => 'thumbnail',
'alt' => 'post thumbnail',
'title' => 'my custom title'
)
);
/******* Thumbnail Ends ********/
the_content(__('Continue Reading'));?></font>
</li><hr />
<?php
endwhile; ?>
<?php wp_pagenavi( array( 'query' => $loop ) ); ?>
</div></div></div>
<?php get_footer();?></div>

Duplicated posts while using Infinite Scroll + random order

I'm using wp_query with infinite scroll to display posts in a specific cpt archive page. When i set the 'orderby' to 'date', everything works ok, but when i change it to 'rand' the query returns the correct number of posts, but some of them are duplicated.
This is the code i'm using:
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$loopb = new WP_Query( array( 'post_type' => 'my_post_type', 'posts_per_page' => 10, 'paged' => $paged, 'order' => 'rand' ) );
$value = get_field('thumbnail_sizing');
?>
<?php while ( $loopb->have_posts() ) : $loopb->the_post();
$thumb_img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'small-size' );
$full_img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full-size' );
$thumb_img_ratio = 70;
if (isset($thumb_img[1]) && isset($thumb_img[2]) && $thumb_img[1] > 0) {
$thumb_img_ratio = $thumb_img[2] * 100/$thumb_img[1];
} ?>
<div class="mosaic">
<a href="#" class="grayscale">
<div class="mosaic__image" style="padding-top: <?php echo $thumb_img_ratio;?>%;">
<img src="<?php echo $thumb_img[0]; ?>" data-src="<?php echo $full_img[0]; ?>" alt="<?php the_title();?>">
</div>
<div class="meta">
<div class="flex">
<div class="flex_item">
<h2 class="meta_title"><?php the_field('name1');?> <span class="divider">&</span> <?php the_field('name2');?></h2>
<hr class="separator">
<span class="cat">view image</span>
</div>
</div>
</div>
</a>
</div>
<?php endwhile; ?>
Carry a random seed with you i don't know if WP_Query supports it but it would be RANDOM(SEED) (e.g. RANDOM(1234)) in straightmysql

Wordpress posts pagination

I'am creating a website at Wordpress and in my website there exist a post type called "news". What I ask for is I'm showing 5 posts in a page but I couldn't show the "next page" button. My code is below, if anyone can help.
<div class="row10 offset1">
<div class="news">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'post_type' => 'news', 'posts_per_page' => 5, 'paged' => $paged );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="row-fluid">
<div class="well-small">
<?php the_title(); ?>
<?php the_content(); ?>
<?php the_date("d.m.Y"); ?>
</div>
</div>
<?php
endwhile;
?>
</div>
<div class="pull-right">
<ul class="pager">
<li> <?php echo previous_posts_link();?></li>
<li><?php echo next_posts_link();?></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
I've solved my problem, but I don't know how it happened. =) I've added query_posts($args); and it worked properly.
<div class="span10 offset1">
<div class="">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'post_type' => 'haber', 'posts_per_page' => 3, 'paged' => $paged );
$loop = new WP_Query( $args );
query_posts($args); <--- I added this line and it worked --->
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="row-fluid">
<div class="well-small">
<?php the_title(); ?>
<?php the_content(); ?>
<?php the_date("d.m.Y"); ?>
</div>
</div>
<?php
endwhile;
?>
</div>
<div class="pull-right">
<ul class="pager">
<li> <?php previous_posts_link("Geri"); ?></li>
<li> <?php next_posts_link("İleri"); ?></li>
</ul>
</div>
<div class="clearfix"></div>
</div>

Resources