Search page with custom pagination doesn’t work

Hi!

Your code works fine, the only problem is that when you submit the form (by pressing enter) only the params that are specified inside the form are sent, so others like the search one (s) are never submitted.

In order to submit them again, you should first capture them inside a variable and then include them inside the form (using an input field).

I think this could work:

First place a new variable for the s param after global $wp_query;:

$s = (get_query_var('s')) ? get_query_var('s') : null;

Then add a new hidden input field:
<input type="hidden" name="s" value="<?php echo $s; ?>">

Full code:

<div class="override-pagination">
<?php
global $wp_query;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$s = (get_query_var('s')) ? get_query_var('s') : null;
$max_num_pages = $wp_query->max_num_pages; ?>
 
<form class="pagination-with-input" novalidate>

<?php 
$previous_page = get_previous_posts_page_link();
if ($previous_page && $paged > 1) { 
?>

<a class="pagination-previous" href="<?php echo $previous_page; ?>"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg></a>

<?php } ?>
<span class="pagination-current">
<input type="number" name="paged" min="1" max="<?php echo $max_num_pages; ?>" value="<?php echo $paged; ?>">
<input type="hidden" name="s" value="<?php echo $s; ?>">
</span>
<span class="pagination-seperator">of</span>
<span class="pagination-max"><?php echo $max_num_pages; ?></span>

<?php 
$next_page = get_next_posts_page_link();
if ($next_page && $paged < $max_num_pages) { 
?>
<a class="pagination-next" href="<?php echo $next_page; ?>"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg></a>
<?php } ?>
</form>
</div>

• This reply was modified 2 years, 9 months ago by Javier Arce.

That looks to be solving my problem, thank you very much.

You are welcome, I’m glad it worked!

Oh, could you please mark this topic as solved?

Sure, got it, thanks again!