Add extra elements / hooks to pagination

benjamin-carlos
(@benjamin-carlos)

7 years, 11 months ago
Hi there!

First of all, What an amazing plugin u guys made! Very handy.

I’m using the AJAX results. Is it possible to add some extra elements to the ‘Pagination .uwpqsfpagi‘?

I want to add:
- Result counter: like ’12 items found’.
- Sorting: eg ‘Newest and Latest’.
- Show: eg ‘6, 12, 24’ items per page.
I’m not really familiar with writing my own Custom Hooks. So I hope u can help me with this one (If it’s possible).

Thanks a lot!

Regards,
Benjamin

https://wordpress.org/plugins/ultimate-wp-query-search-filter/

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

Plugin Author

TC.K

(@wp_dummy)

7 years, 11 months ago

Yes, it is possible but with lot of customization.

If you see this result customization :

add_filter('uwpqsf_result_tempt', 'customize_output', '', 4);
function customize_output($results , $arg, $id, $getdata ){
	 // The Query
            $apiclass = new uwpqsfprocess();
             $query = new WP_Query( $arg );
            $totol =$query->found_posts;
		ob_start();	$result = '';
			// The Loop

		if ( $query->have_posts() ) {
			while ( $query->have_posts() ) {
				$query->the_post();global $post;
                                echo  '<li>'.get_permalink().'</li>';
			}
                        echo  $apiclass->ajax_pagination($arg['paged'],$query->max_num_pages, 4, $id, $getdata);
		 } else {
					 echo  'no post found';
				}
				/* Restore original Post Data */
				wp_reset_postdata();

		$results = ob_get_clean();
			return $results;
}

Here is where get all post found:

$query = new WP_Query( $arg );
 $totol =$query->found_posts;

For Sorting and Show, you will need to add input into the search form:
eg:

add_action("uwpqsf_form_bottom", "add_custom_field");
function add_custom_field($atts){
  echo "<select name="sorting">";
  echo "<option value="desc">Descending</option>";
  echo "<option value="asc">Ascending</option>";
  echo "</select>";

   //result per page

   echo "<select name="perpage">";
   echo "<option value="10">10</option>";
   echo "<option value="20">20</option>";
   echo "<option value="30">30</option>";
   echo "</select>";

}

And add the input to the query:

add_filter("uwpqsf_query_args", "add_custom_input","",3);
function add_custom_input($args, $id,$getdata){
   $args["order"] = $getdata["sorting"];
   $args["posts_per_page"] = $getdata["perpage"];
   return $args;
}

That’s it.
Note the codes above is not tested yet, but the concept is there. You can play around with it.

Thread Starter

benjamin-carlos

(@benjamin-carlos)

7 years, 11 months ago

Wow, awesome! Thank you very much for your time.

I’ll go play around with it! 😉

Cheers!

Benjamin

Thread Starter

benjamin-carlos

(@benjamin-carlos)

7 years, 11 months ago

Thanks for your help! It works pretty well. But they appear next to the other filters.

Is it possible to set these ‘Custom fields’ inside the ‘Pagination – .uwpqsfpagi‘ div? Next to the ‘Page: 1, 2, 3, etc..’

I can see that the pagination is called by this line:

echo  $apiclass->ajax_pagination($arg['paged'],$query->max_num_pages, 4, $id, $getdata);

Is it possible to create something like below?

add_action( "$apiclass->ajax_pagination", "add_custom_field" );
function add_custom_field( $atts ) {
  echo "<select name="sorting">";
  echo "<option value="desc">Descending</option>";
  echo "<option value="asc">Ascending</option>";
  echo "</select>";

   //result per page
   echo "<select name="perpage">";
   echo "<option value="10">10</option>";
   echo "<option value="20">20</option>";
   echo "<option value="30">30</option>";
   echo "</select>";
}

Thanks a lot!

Regards,
Benjamin

Plugin Author

TC.K

(@wp_dummy)

7 years, 11 months ago

No, you can’t do like that.
It is not impossible though, but it will be more complicated. It will involve js.
If you comfortable with js programming I can guide you.

Thread Starter

benjamin-carlos

(@benjamin-carlos)

7 years, 11 months ago

Yeah, if you could guide me through this, I would really appreciate that!
And I’m comfortable with js 😉

Thank you!

Regards,
Benjamina

Plugin Author

TC.K

(@wp_dummy)

7 years, 11 months ago

OK.

The basic concept here is we add two hidden fields (for sorting and post per page) in the search form, and add use the js to fill the value when user make changes in the sorting and post per page input fields.

Since you are not using the pagination, you can remove the entire line:
echo $apiclass->ajax_pagination($arg['paged'],$query->max_num_pages, 4, $id, $getdata);

And you can replace with the sorting and page per page option:

echo "<div id="custompagi">";
  echo "<select data-from=".$id." class="sort" name="sorting">";
  echo "<option value="desc">Descending</option>";
  echo "<option value="asc">Ascending</option>";
  echo "</select>";

   //result per page
   echo "<select data-from=".$id." class="perpage" name="perpage">";
   echo "<option value="10">10</option>";
   echo "<option value="20">20</option>";
   echo "<option value="30">30</option>";
   echo "</select>";
   echo "</div>"

Note that added the data-form for the form id and div wrapper. It will be used later in js selector.

Then in the search form add 2 hidden field for corresponding field above.

add_action("uwpqsf_form_bottom", "add_custom_field");
function add_custom_field($atts){
   echo '<input type="hidden" class="sorting" name="sorting">';
   echo '<input type="hidden" class="postperpage" name="perpage">';
}

Then take those hidden in the query:

add_filter("uwpqsf_query_args", "add_custom_input","",3);
function add_custom_input($args, $id,$getdata){
  //we only take the sorting and per page value when it is not empty
  if(isset($getdata['sorting']) && !empty($getdata['sorting'])){
      $args["order"] = $getdata["sorting"];
   }
   if(isset($getdata['perpage']) && !empty($getdata['perpage'])){
         $args["posts_per_page"] = $getdata["perpage"];
    }
   return $args;
}

That’s all for the php part. Now we goes to js part:
So, add a js script in the template, I assumed you already know how to do it.

In the js script:
for sorting:

$("#custompagi").on("change", '.sort', function(e){
    var currentval = $(this).val();
    //form id for current search
    var formID = $(this).attr('data-form');
    var formSelector = '#uwpqsffrom_' + formID;

    //set the corresponding hidden value
     $(''+formSelector+'').find(".sorting").val(currentval);

    //then submit the form

    $(''+formSelector+'').submit();

});

Note that it must use .on() for bind the change event, because it is ajax generated dom. Otherwise it won’t work.

And you can repeat above code for post per page.

Note that the codes is not tested, it is only for references. I hope you can understand the concept of the integration.

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

The topic ‘Add extra elements / hooks to pagination’ is closed to new replies.

Tags