WordPress is the simplest way to manually enter the page number and turn the page

Users often ask whether they can manually enter the page number and realize the page turning function. It is very simple. The basic code is only four lines:

 <form class="zm-page-nav-form" action="<?php echo $_SERVER['REQUEST_URI'];?>" method="get"> <input class="zm-input-number" type="text" size="6" name="paged" /> <input class="zm page button" value="Go to" type="submit"> </form>

The code is taken from a plug-in called intelligent paging: wp smart pagination 。

Disadvantages of the original code: the current page number cannot be displayed. Enter a non-existent page number and jump to 404 directly. Search and page turning are not supported.

WordPress manually input the page number and jump to the page

On this basis, I modified and improved the code, added and displayed the current page number, entered non numeric characters or exceeded the maximum number of pages and was less than the number 1, prohibited jumping, supported page turning of the search results page, and clicked the input box to automatically clear the number of the current page number, facilitating the entry of the page number.

Complete code

 function zm_page_nav_form() { global $wp_query; $paged = get_query_var( 'paged' ) ?  get_query_var( 'paged' ) : 1; $page_max_num = $wp_query->max_num_pages; if ( $page_max_num > 1 ) : ?> <form class="zm-page-nav-form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="get"> <input class="zm-input-number" type="number" autocomplete="off" min="1" max="<?php echo $page_max_num; ?>" onblur="if(this.value==''){this.value='<?php echo $paged; ?>';}" onfocus="if(this.value=='<?php echo $paged; ?>'){this.value='';}" value="<?php echo $paged; ?>" name="paged" /> <? php if ( is_search() ) { ?> <input type="hidden" id="s" name="s" value="<?php echo get_search_query(); ?>" /> <? php } ?> <div class="zm-page-button-box"><input class="zm-page-button" value="" type="submit"></div> <div style="clear:both;"></div> </form> <? php endif; }

Add code to the current topic function template functions.php.

Call code

 <? php zm_page_nav_form(); ?>

Add to the appropriate location of the theme template paging code.

Matching style

The style is written according to WP's default theme, Twenty Twenty One, which is not suitable for other themes. You can modify it according to your own theme style. If you want to display the arrows in the input box, delete the hidden code with comments at the end.

 .zm-page-nav-form { width: 126px; font-size: 16px; margin: 0 auto; } .zm-input-number:focus,  .zm-input-number:hover { background: #ddd; } .zm-input-number { float: left; width: 62px; height: 62px; text-align: center; margin: 0 ! important; border: 1px solid #444 ! important; border-right: none ! important; } .zm-page-button-box { position: relative; float: left; } .zm-page-button-box:after { position: absolute; top: 18px; right: 16px; Content: "Jump"; color: #fff; font-size: 15px; pointer-events: none; } .zm-page-button { float: left; width: 62px ! important; height: 62px; text-align: center; background: #666 ! important; border: 1px solid #444 ! important; } .zm-page-button:hover { background: #444 ! important; border: 1px solid #444 ! important; } /**Hide Arrows**/ .zm-page-nav-form input::-webkit-outer-spin-button,  .zm-page-nav-form input::-webkit-inner-spin-button { -webkit-appearance: none; } .zm-page-nav-form input[type="number"]{ -moz-appearance: textfield; }

The function of manually entering the page number is not very useful on the desktop side, but it is still useful on the mobile side. You can only display the page turning button on the mobile side, plus manually entering the page number, which can facilitate the user to turn the page, and also avoid displaying a pile of page numbers on the mobile phone affecting the beauty. See the page turning of my blog for the specific effect.