Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Wordpress - Users to choose how many posts per page WordPress

  • SOLVED

Hi there,

I need help with my wordpress site which is actually an e-shop.

Now, i add products as posts and different pages show different post categories. Each page have a number of posts to show already set BUT, i would love to have a dropdown so my site visitors can choose how many posts/products to show per page.

I would like to have something like:

<strong>Products per page: 10 - 25 - 50 - 75 - 100</strong>

I would like this to be without any "submit" button, so when users chose value from dropdown list it should automatically show requested number of posts.

Remember that products are actually posts.


Here is the sample page from my website that i would like to have this dropdown at:

[[LINK href="http://shop.maketar.com/store/aircraft-insignia-markings-132/"]][[/LINK]]


Many thanks,
Alek

Answers (2)

2014-11-25

Arnav Joy answers:

Hello Alek ,

Can you show me the page url where you want to display it and also can you show us code you of the page?


Arnav Joy comments:

here is the dropdown

<form name="frm" class="db_posts_per_page_form" method="post" action="">
<label for="db_posts_per_page">Posts per page</label>
<select onchange="document.frm.submit()" name="db_posts_per_page" id="db_posts_per_page">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</form>



and here is the code you have to include at your file


if( isset($_REQUEST['db_posts_per_page'] ))
$posts_per_page = $_REQUEST['db_posts_per_page'];
else
$posts_per_page = 10; // default value


query_posts('post_type=product&posts_per_page='.$posts_per_page);

?>


Please note then you have to adjust this code as per your file.

query_posts('post_type=product&posts_per_page='.$posts_per_page);


elcrni comments:

Hi guys,

Thanks for your replies. Here is the code of the page i want the dropdown on:

<?php
/*
Template Name: 1:32 Markings
*/
?>

<?php get_header(); ?>



<?php
query_posts( array(
'posts_per_page' => 10,
'cat' => '4', /* change CategoryID with exact value */
'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),
));
global $more;
$more = 0;
?>

<div id="content">
<div id="onama">
<div id="shopmenu">
<ul>
<li><a href="#nogo">Aircraft Insignia & Markings</a>
<ul>
<li><a href="http://shop.maketar.com/store/aircraft-insignia-markings-124/">1:24</a></li>
<li><a href="http://shop.maketar.com/?page_id=152">1:32</a></li>
<li><a href="http://shop.maketar.com/?page_id=154">1:48</a></li>
<li><a href="http://shop.maketar.com/?page_id=156">1:72</a></li>
</ul>
</li>
<li><a href="#nogo">Canopy Masks</a>
<ul>
<li><a href="http://shop.maketar.com/store/canopy-masks-124/">1:24</a></li>
<li><a href="http://shop.maketar.com/?page_id=158">1:32</a></li>
<li><a href="http://shop.maketar.com/?page_id=160">1:48</a></li>
<li><a href="http://shop.maketar.com/?page_id=162">1:72</a></li>
</ul>
</li>
<li><a href="#nogo">Utility Masks</a>
<ul>
<li><a href="http://shop.maketar.com/?page_id=164">ALL Scales</a></li>
</ul>
</li>
<li><a href="#nogo">AFV Masks</a>
<ul>
<li><a href="http://shop.maketar.com/?page_id=166">1:35</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="entry">
<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post new" id="post" <?php the_ID(); ?>>


<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>


<div class="storycontent">
<?php the_content(__('More Info...')); ?>
</div>

<div class="clear"></div>









</div><!--post-->

<?php endwhile; ?>

<div class="navigation">
<?php wp_pagenavi();?>
</div><!--navigation-->

<?php else : ?>

<h2 class="center">No products in this category...</h2>



<?php endif; ?>
</div>
</div><!--content-->

<?php get_sidebar(); ?>

<?php get_footer(); ?>


Also, Arnav Joy, i am not sure how to adopt that query_post line to my page... help needed :-)

Thanks again!
Alek


Arnav Joy comments:

please check this code

<?php

/*

Template Name: 1:32 Markings

*/

?>



<?php get_header(); ?>







<?php

if( isset($_REQUEST['db_posts_per_page'] ))
$posts_per_page = $_REQUEST['db_posts_per_page'];
else
$posts_per_page = 10; // default value

query_posts( array(

'posts_per_page' => $posts_per_page,

'cat' => '4', /* change CategoryID with exact value */

'paged' => ( get_query_var('paged') ? get_query_var('paged') : 1 ),

));

global $more;

$more = 0;

?>



<div id="content">

<div id="onama">

<div id="shopmenu">

<ul>

<li><a href="#nogo">Aircraft Insignia & Markings</a>

<ul>

<li><a href="http://shop.maketar.com/store/aircraft-insignia-markings-124/">1:24</a></li>

<li><a href="http://shop.maketar.com/?page_id=152">1:32</a></li>

<li><a href="http://shop.maketar.com/?page_id=154">1:48</a></li>

<li><a href="http://shop.maketar.com/?page_id=156">1:72</a></li>

</ul>

</li>

<li><a href="#nogo">Canopy Masks</a>

<ul>

<li><a href="http://shop.maketar.com/store/canopy-masks-124/">1:24</a></li>

<li><a href="http://shop.maketar.com/?page_id=158">1:32</a></li>

<li><a href="http://shop.maketar.com/?page_id=160">1:48</a></li>

<li><a href="http://shop.maketar.com/?page_id=162">1:72</a></li>

</ul>

</li>

<li><a href="#nogo">Utility Masks</a>

<ul>

<li><a href="http://shop.maketar.com/?page_id=164">ALL Scales</a></li>

</ul>

</li>

<li><a href="#nogo">AFV Masks</a>

<ul>

<li><a href="http://shop.maketar.com/?page_id=166">1:35</a></li>

</ul>

</li>

</ul>

</div>

</div>

<div class="entry">

<form name="frm" class="db_posts_per_page_form" method="post" action="">
<label for="db_posts_per_page">Posts per page</label>
<select onchange="document.frm.submit()" name="db_posts_per_page" id="db_posts_per_page">
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</form>

<?php if (have_posts()) : ?>



<?php while (have_posts()) : the_post(); ?>



<div class="post new" id="post" <?php the_ID(); ?>>





<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>





<div class="storycontent">

<?php the_content(__('More Info...')); ?>

</div>



<div class="clear"></div>



















</div><!--post-->



<?php endwhile; ?>



<div class="navigation">

<?php wp_pagenavi();?>

</div><!--navigation-->



<?php else : ?>



<h2 class="center">No products in this category...</h2>







<?php endif; ?>

</div>

</div><!--content-->



<?php get_sidebar(); ?>



<?php get_footer(); ?>


elcrni comments:

Arnav,

That worked but... the page freezes for a few seconds when i chose how many posts to show. It then does show exact number of posts as selected but resets the dropdown to show '10'.

Also, i've noticed when refreshing that the page says 'resubmit the form...' before i actually can refresh the page... any chance of avoiding this?

Many thanks,
Alek


Arnav Joy comments:

replace this code of form , it will select dropdown option to current page no.

<form name="frm" class="db_posts_per_page_form" method="post" action="">
<label for="db_posts_per_page">Posts per page</label>
<select onchange="document.frm.submit()" name="db_posts_per_page" id="db_posts_per_page">
<option value="10" <?php selected(10,$_REQUEST['db_posts_per_page']);?>>10</option>
<option value="25" <?php selected(25,$_REQUEST['db_posts_per_page']);?>>25</option>
<option value="50" <?php selected(50,$_REQUEST['db_posts_per_page']);?>>50</option>
<option value="75" <?php selected(75,$_REQUEST['db_posts_per_page']);?>>75</option>
<option value="100" <?php selected(100,$_REQUEST['db_posts_per_page']);?>>100</option>
</select>
</form>


elcrni comments:

Ok, now, anyway we can avoid that "form resubmit" thing?

many thanks,
Alek


Arnav Joy comments:

can you show me url of the page where you are implementing it?


elcrni comments:

here it is:
[[LINK href="http://shop.maketar.com/store/aircraft-insignia-markings-132/"]][[/LINK]]


elcrni comments:

[[LINK href="http://shop.maketar.com/store/aircraft-insignia-markings-132/"]]LINK[[/LINK]]


Arnav Joy comments:

where is the select button ?


elcrni comments:

Arnav,

Its all sorted out! You helped alot!

Many thanks,
Alek


Arnav Joy comments:

good to hear , please award the prize and close the task.

2014-11-25

Sabby Sam answers:

Hi Elcrni,
Are you using any woocommerce plugin or theme has something else? If you are using woocommerce plugin then you can try this plugin https://wordpress.org/plugins/woocommerce-products-per-page/. Or we need to create from manually and require a programmer.