Como criar paginação com Wordpress e Bootstrap - Evertec Digital

Se você é um desenvolvedor raiz que cria seus próprios temas utilizando o CMS WordPress , criar paginação com WordPress e Bootstrap sem a utilização de plugins, pode ser um diferencial na hora de aplicar em seus projetos. Iremos mostrar aqui como criar uma função para utilizar em seus projetos com praticidade e agilidade.

Estamos utilizando aqui o Bootstrap 4.6, mas já vimos que a versão 5  do framework também funcionará da mesma forma. Iremos utilizar as seguintes definições em nosso sistema de paginação:

• Utilização da classe pagination do Bootstrap;
• Padrão visual grande (pagination-lg);
• Exibição Centralizada, com a utilização da classe ‘justify-content-center’;
• Marcar página atual;
• Marcar links desativados;
• Exibição dos botões Next e Prev, com código ASCII;

Você poderá modificar a sua função de acordo com o que for mais adequado para o seu projeto, como por exemplo, remover a classe pagination-lg para a utilização do tamanho padrão dos elementos, mudar o alinhamento mundando a classe justify-content-center para justify-content-right ou justify-content-left e também mudar o conteúdo dos botões Next e Prev, adicionando textos ou fontes personalizadas como o Fontawesome.

Vamos criar paginação com WordPress e Bootstrap na Prática

Indo direto ao ponto, para criar paginação com WordPress e Bootstrap, copie a função abaixo e cole dentro do arquivo functions.php do seu tema. Se seu tema ainda não tem esse arquivo, basta cria-lo utilizando exatamente o mesmo nome citado aqui, que o WordPress irá reconhecer automaticamente.

function ed_get_pagination() {
    global $wp_query;

    $big = 999999999;

    $pages = paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format' => '?paged=%#%',
        'current' => max(1, get_query_var('paged')),
        'total' => $wp_query->max_num_pages,
        'type' => 'array',
        'prev_next' => true,
        'prev_text' => __('⇦'),
        'next_text' => __('⇨'),
            )
    );

    if (is_array($pages)) {
        $paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');

        $pagination = '<nav aria-label="Paginação"><ul class="pagination pagination-lg justify-content-center">';

        foreach ($pages as $page) {
            $pagination .= "<li class='page-item " . (strstr($page, 'dots') ? 'disabled' : (strstr($page, 'current') ? 'active' : '')) . "'>" . str_replace(array('page-numbers'), array('page-link'), $page) . "</li>";
        }

        $pagination .= '</ul></nav>';

        echo $pagination;
    }
}

Após ter adicionado a função acima dentro do seu arquivo functions.php, acesse o arquivo no qual seus posts estão listados, provavelmente front-page.php ou home.php e adicione o código ed_get_pagination() logo após a seção dos loopings dos posts.

<div class="row justify-content-center">
   <?php
   global $wp_query;

   if (have_posts()) : while (have_posts()) : the_post();
     (...) // bloco de exibição do post
   endwhile; else: endif; ?>
 </div>
 
<?php 

ed_get_pagination(); // chamada para paginação customizada com Bootstrap

?>

Pronto, sua paginação com WordPress e Bootstrap está ativa e funcional. Espero que esse conteúdo tenha lhe ajudado!

Já conhece nossa pagina de Ferramentas? Nela criamos uma lista das principais ferramentas e recursos que utilizamos no dia a dia e frequentemente adicionamos novos recursos a ela. Clique aqui e saiba mais.