Search code examples
phpwordpresspaginationshortcodewordpress-shortcode

Wordpress paginate_links() and anchor issue


I'm trying to use Wordpress paginate_links() function in order to show custom table datas in a specific way

I created a shortcode function that returns a $customPagHTML navigation module when I call it (the real function is bigger, but I only pasted content relevant to my issue)

function shortcode_func(){
$customPagHTML     = "";


$items_per_page = 5;
$page             = isset( $_GET['cpage'] ) ? abs( (int) $_GET['cpage'] ) : 1;
$totalPage         = ceil(count($result)/$items_per_page);
$offset         = ( $page * $items_per_page ) - $items_per_page;

if($totalPage > 1){
    $customPagHTML     =  '
    <div class="pagination_style">
        '.paginate_links( array(
            //'add_fragment' => '#testshortcode',
            'base' => add_query_arg( 'cpage', '%#%'),
            'format' => '',
            'prev_text' => __('&#139;'),
            'next_text' => __('&#155;'),
            'total' => $totalPage,
            'current' => $page,
            'type'               => 'plain',
    )).'
    </div>';
    } 
return $customPagHTML
}

The thing is, the pagination works properly but redirects to the top of the page when changing pagination. I tried to use 'add_fragment' parameter to redirect to an anchor, but when I use this parameter, the pagination breaks.. I can still see the pagination, the HTML inspector shows that the links behind pagination are ok, but it doesnt work anymore

Here is a demo where I let the 'add_fragment' parameter in my shortcode : https://thirel.lejeunefranco.is/

Also, when I write a inexisting anchor in the 'add_fragment' parameter, it "works". It's to say the pagination redirects me to "https://thirel.lejeunefranco.is/?cpage=4#fakeanchor". But when I write an existing anchor, the problem appears

I made a lot of searches but didn't find a proper solution :(

Do someone has an idea on how to solve this issue ?

thank you !


Solution

  • The problem came from Elementor plugin. I had to hardcode the anchor tag in my shortcode like this :

            <div class="pagination_style" id="testshortcode">
    

    Instead of using Elementor CSS ID feature to anchor tag my module, which added a broken JavaScript click handler