Uma parte importante do seu tema é a paginação, onde os usuários poderão navegar por seus artigos novos e antigos. Com ela fica fácil ir da primeira à última página, onde primeiro artigo do seu blog foi publicado.

No WordPress isso é extremamente simples, pois, como sempre, existe uma função prontinha para isso – paginate_links.

Veja como criá-la e onde colocá-la em seu tema.

Criando a função de paginação

Abra o seu arquivo “functions.php” e adicione o seguinte:

/* Paginação */
function paginacao() {
	global $wp_query;
	$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
	$big = 999999999;

	return paginate_links(
		array(
			'base' => @add_query_arg('paged','%#%'),
			'format' => '?paged=%#%',
			'current' => $current,
			'total' => $wp_query->max_num_pages,
			'prev_next'    => false
		)
	);
}

Pronto, agora é só chamar a função no local que você preferir. Veja no subtítulo a seguir.

Adicionando paginação abaixo do loop

Normalmente a paginação vem logo abaixo do loop do seu WordPress. Em nosso caso, temos apenas um único loop no arquivo index.php, então é lá que vamos chamar a função de paginação.

Demonstração de paginação

Demonstração de paginação

Para isso, abra o seu index.php, que deve estar assim:

<!-- Adiciona o cabeçalho (header.php) -->
<?php get_header(); ?>

<main role="main" class="artigos conteudo padding-esquerda-direita">

	<div class="linha clearfix">
	
		<div class="colunas principal">
			<div class="conteudo-ajax conteudo-coluna margem-total">
				<?php get_template_part('loop', 'index'); ?>
			</div>			
		</div>
		
		<aside class="colunas lateral">
			<div class="conteudo-coluna margem-total">
				 <?php get_sidebar(); ?> 
			</div>
		</aside>
		
	</div>
	
</main>

<!-- Adiciona o rodapé (footer.php) -->
<?php get_footer(); ?>

E adicione o seguinte trecho de código abaixo do loop:

<?php
	$paginas = paginacao();
	if ( ! empty( $paginas ) ): 
?> 
	<div class="paginacao">
		<?php echo $paginas;?>
	</div>
<?php endif; ?>

Então seu index.php deve ficar assim:

<!-- Adiciona o cabeçalho (header.php) -->
<?php get_header(); ?>

<main role="main" class="artigos conteudo padding-esquerda-direita">

	<div class="linha clearfix">
	
		<div class="colunas principal">
			<div class="conteudo-ajax conteudo-coluna margem-total">
				<?php get_template_part('loop', 'index'); ?>
				 
				<?php
					$paginas = paginacao();
					if ( ! empty( $paginas ) ): 
				?> 
					<div class="paginacao">
						<?php echo $paginas;?>
					</div>
				<?php endif; ?>
				
			</div>			
		</div>
		
		<aside class="colunas lateral">
			<div class="conteudo-coluna margem-total">
				 <?php get_sidebar(); ?> 
			</div>
		</aside>
		
	</div>
	
</main>

<!-- Adiciona o rodapé (footer.php) -->
<?php get_footer(); ?>

E agora a paginação deverá estar aparecendo sem nenhum estilo. Vamos ver como ficará o CSS logo abaixo.

CSS para a paginação

Para deixar nossa paginação mais bonita, adicione o seguinte no seu arquivo css/main-style.css:

/* Paginação */
.paginacao {
	padding: 15px 0 ;
}
.paginacao .page-numbers {
	padding: 5px 10px;
	background: #000;
	color: #fff;
}
.paginacao a.page-numbers:hover {
	background: #ddd;
	color: #000;
}
.paginacao .current {
	background: #ddd;
	color: #000;
}

Paginação dentro do post

No WordPress também é possível criar paginação dentro do post, para isso basta adicionar o seguinte no editor de texto:

Texto comum... Lorem ipsum...

<!-- nextpage -->

Aqui existe outra página...

<!-- nextpage --> 

Aqui tem outra

 Obs.: Isso não funciona no editor visual, apenas no editor de texto puro.

Para adicionar a paginação dentro dos posts no código do seu tema, basta adicionar o seguinte no functions.php:

<?php
function tutsup_paged_post() {
		
	$defaults = array(
		'before'           => '' . __( '' ),
		'after'            => '',
		'link_before'      => '',
		'link_after'       => '',
		'next_or_number'   => 'number',
		'separator'        => ' ',
		'nextpagelink'     => __( '' ),
		'previouspagelink' => __( '' ),
		'pagelink'         => '%',
		'echo'             => 1
	);

	if( wp_link_pages( $defaults ) ) {
		echo '<div class="tutsup-pagination clearfix">';
	
			wp_link_pages( $defaults ); 

		echo '</div>';
	}
}
?>

Depois é só chamar a função dentro do loop, exemplo:

<?php function tutsup_paged_post(); ?>

Download

Caso queira baixar o nosso tema (como está) para analisar, segue o link:

Descompacte o arquivo na pasta wp-content/themes/.

Concluindo

A paginação funciona em todos os locais onde o loop está presente, ou seja, categorias, tags, página inicial, pesquisa e demais. O legal é que você não precisa mudar nada, basta adicionar a função (como fizemos) onde desejar.

Em caso de dúvidas, não deixe de comentar.

Não deixe de acessar as aulas anteriores em “Criar um tema WordPress“.