About design and nearby

How to Add an Anchor Link to WordPress pagination

Posted: May 7th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

There are a few ways to setup WordPress pagination, or ‘paged’ links. I do prefer to work with paginate_links because of set of its arguments, which could be customized according to your needs.

Pagination with anchor link

 

Usage of function ‘paginate links’ is

  1. <?php echo paginate_links( $args ); ?>

By default

  1. <?php $args = array(
  2.  'base'               => '%_%',
  3.  'format'             => '?page=%#%', // the '%#%' will be replaced with the page number
  4.  'total'              => 1,
  5.  'current'            => 0,
  6.  'show_all'           => False,
  7.  'end_size'           => 1,
  8.  'mid_size'           => 2,
  9.  'prev_next'          => True,
  10.  'prev_text'          => __('« Previous'),
  11.  'next_text'          => __('Next »'),
  12.  'type'               => 'plain',
  13.  'add_args'           => False,
  14.  'add_fragment'       => '',
  15.  'before_page_number' => '',
  16.  'after_page_number'  => ''
  17. ); ?>

In case you would like to set up an anchor link so that when pagination is clicked through to the next page it goes to the respective section (and does not to the top of the page) – here is how:

1. Add your unique identifier.
I changed ‘format’=>’?page=%#%’ (which is the page number) to something like ‘format’ => ‘?page=%#%#work’

  1. <?php
  2.  global $wp_query;
  3.  $big = 999999999; // need an unlikely integer
  4.  echo paginate_links( array(
  5.  'base' => str_replace( $big, '%#%#work', esc_url( get_pagenum_link( $big ) ) ),
  6.  'format' => '?paged=%#%',
  7.  'current' => max( 1, get_query_var('paged') ),
  8.  'total' => $wp_query->max_num_pages
  9.  ) );
  10. ?>

2. Set the name of an anchor.
At the very place which should be the top of your page after clicking through pagination, define the name for your anchor:

  1. <a name="work/">&nbsp;</a>

*Note: Use slash after your anchor name, because usually WordPress URLS end with a slash (and that’s correct).

You are done!

Share Button

Check Related Posts:


Leave a Reply


  • six − 3 =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now