Tutorial WordPress: Convertir la paginación “Anterior/Siguiente” en botones con CSS

Introducción

En este tutorial detallado veremos cómo convertir la paginación clásica de WordPress que muestra enlaces tipo “Anterior / Siguiente” en botones visuales y accesibles usando únicamente CSS (y pequeñas mejoras en el HTML/PHP cuando sea necesario). Cubriremos desde cómo identificar la salida de paginación en tu tema, cómo envolverla con clases útiles, ejemplos prácticos de PHP para modificar la salida y varias hojas de estilo CSS para transformar los enlaces en botones con estados, iconografía, accesibilidad y comportamiento responsive.

Requisitos previos

Conocimiento básico de editar archivos de tema (index.php, archive.php, functions.php, or template-parts).
Acceso a FTP o editor de temas (Apariencia gt Editor de temas) para modificar plantillas o añadir CSS.
Un tema hijo recomendado para no perder cambios con actualizaciones del tema.

Concepto

La mayoría de los temas simples usan funciones como previous_posts_link() y next_posts_link() que imprimen enlaces con el texto “Anterior” / “Siguiente”. La idea es:

Modificar la salida HTML para añadir contenedores y clases CSS coherentes (si el tema no las tiene).
Escribir CSS que convierta esos enlaces en botones (estética) y gestione estados (hover, focus, disabled).
Asegurar la accesibilidad: roles, atributos aria, rel prev/next, foco visible y soporte para lectores de pantalla y RTL.

1) Localizar la paginación en tu tema

Busca en archivos como index.php, archive.php, home.php, single.php o template-parts la llamada a previous_posts_link/next_posts_link o a paginate_links(). Un ejemplo típico que encontrarás:

lt?php if ( get_next_posts_link()  get_previous_posts_link() ) : ?gt
  ltdiv class=nav-linksgt
    ltdiv class=nav-previousgtlt?php previous_posts_link( Anterior ) ?gtlt/divgt
    ltdiv class=nav-nextgtlt?php next_posts_link( Siguiente ) ?gtlt/divgt
  lt/divgt
lt?php endif ?gt

2) Mejorar la salida HTML (añadir clases y roles)

Si tu tema no añade clases útiles, cambia el template para añadir clases y atributos accesibles. Ejemplo sencillo que añade roles, rel y aria-label:

lt?php if ( get_next_posts_link()  get_previous_posts_link() ) : ?gt
  ltnav class=pagination-wrap role=navigation aria-label=Paginación del sitiogt
    ltdiv class=pagination-buttonsgt
      lt?php
        // Envolver los links y añadir clases
        if ( get_previous_posts_link() ) {
          echo lta class=page-btn page-btn--prev href= . esc_url( get_previous_posts_page_link() ) .  rel=prevgtAnteriorlt/agt
        } else {
          echo ltspan class=page-btn page-btn--prev is-disabled aria-disabled=truegtAnteriorlt/spangt
        }
        if ( get_next_posts_link() ) {
          echo lta class=page-btn page-btn--next href= . esc_url( get_next_posts_page_link() ) .  rel=nextgtSiguientelt/agt
        } else {
          echo ltspan class=page-btn page-btn--next is-disabled aria-disabled=truegtSiguientelt/spangt
        }
      ?gt
    lt/divgt
  lt/navgt
lt?php endif ?gt

Nota: get_previous_posts_page_link() y get_next_posts_page_link() pueden no estar disponibles en todas las versiones. Si prefieres mantener previous_posts_link() y next_posts_link() puedes filtrar su salida o envolver las funciones como prefieras. Lo importante es obtener un enlace a con clases y, cuando no hay enlace, un elemento no interactivo (span) con clase de deshabilitado y aria-disabled.

3) Uso de paginate_links para paginación avanzada

Si usas paginate_links() y quieres controlar prev/next como botones, pide que genere un tipo list y luego reestilízalo. Ejemplo:

lt?php
big = 999999999 // necesidad por paginate_links
pages = paginate_links( array(
  base      =gt str_replace( big, %#%, esc_url( get_pagenum_link( big ) ) ),
  format    =gt ?paged=%#%,
  current   =gt max( 1, get_query_var(paged) ),
  total     =gt wp_query-gtmax_num_pages,
  type      =gt array,
  prev_text =gt lt Anterior,
  next_text =gt Siguiente gt,
) )
if ( is_array( pages ) ) {
  echo ltnav class=pagination-wrap role=navigation aria-label=Paginacióngtltul class=pagination-listgt
  foreach ( pages as page ) {
    echo ltli class=pagination-itemgt . page . lt/ligt
  }
  echo lt/ulgtlt/navgt
}
?gt

Con type =gt array obtienes cada elemento ya envuelto en ltagt o span. Luego aplicas CSS para convertir los enlaces de esa lista en botones.

4) CSS: convertir enlaces “Anterior/Siguiente” en botones

A continuación tienes una hoja de estilos completa y comentada que transforma enlaces con la clase .page-btn en botones modernos, accesibles y responsivos. Ajusta colores y variables a tu sistema de diseño.

:root{
  --btn-bg: #f3f4f6
  --btn-color: #111827
  --btn-bg-accent: #1f8ef1
  --btn-color-on-accent: #ffffff
  --btn-border-radius: 8px
  --btn-padding: 0.6rem 1rem
  --btn-gap: 0.5rem
  --btn-shadow: 0 2px 6px rgba(16,24,40,0.06)
}

/ Contenedor: centrar y repartir /
.pagination-buttons{
  display: inline-flex
  gap: var(--btn-gap)
  align-items: center
  justify-content: center
  flex-wrap: wrap
}

/ Estilo base de los botones (enlaces y spans) /
.page-btn,
.pagination-list .page-numbers {
  display: inline-flex
  align-items: center
  gap: 0.5rem
  padding: var(--btn-padding)
  background: var(--btn-bg)
  color: var(--btn-color)
  text-decoration: none
  border-radius: var(--btn-border-radius)
  box-shadow: var(--btn-shadow)
  font-weight: 600
  border: 1px solid rgba(15,23,42,0.06)
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease
  cursor: pointer
}

/ Estilo para el botón Siguiente (por ejemplo con color de acento) /
.page-btn--next {
  background: var(--btn-bg-accent)
  color: var(--btn-color-on-accent)
}

/ Iconos con pseudo-elementos: flechas /
.page-btn--prev::before,
.page-btn--next::after {
  font-weight: 700
  font-size: 1rem
  color: inherit
  display: inline-block
  line-height: 1
}

/ Flecha izquierda antes del Prev /
.page-btn--prev::before {
  content: ‹
  margin-right: 0.35rem
}

/ Flecha derecha después del Next /
.page-btn--next::after {
  content: ›
  margin-left: 0.35rem
}

/ Hover / Focus /
.page-btn:hover,
.page-btn:focus{
  transform: translateY(-2px)
  box-shadow: 0 6px 18px rgba(16,24,40,0.12)
  text-decoration: none
  outline: none
}

/ Focus visible accesible /
.page-btn:focus-visible{
  outline: 3px solid rgba(30,120,240,0.18)
  outline-offset: 3px
}

/ Estado deshabilitado /
.page-btn.is-disabled,
.page-btn[aria-disabled=true]{
  opacity: 0.45
  cursor: default
  pointer-events: none
  transform: none
  box-shadow: none
}

/ Tamaño pequeño en móviles (apilar) /
@media (max-width: 520px){
  .pagination-buttons{
    width: 100%
    gap: 0.5rem
    justify-content: space-between
  }
  .page-btn{
    flex: 1 1 48%
    text-align: center
  }
}

/ Estilos si usas paginate_links y una lista /
.pagination-list{
  display: inline-flex
  gap: var(--btn-gap)
  list-style: none
  padding: 0
  margin: 0
  align-items: center
}
.pagination-list .page-numbers{
  / convierte los enlaces del paginate_links en botones coherentes /
  padding: 0.45rem 0.75rem
  background: transparent
  border-radius: 6px
  box-shadow: none
  border: 1px solid transparent
  color: var(--btn-color)
  font-weight: 600
}
.pagination-list .current{
  background: var(--btn-bg-accent)
  color: var(--btn-color-on-accent)
  border-color: rgba(0,0,0,0.06)
}

5) Accesibilidad y atributos recomendados

role=navigation y aria-label en el contenedor para que los usuarios de lector de pantalla identifiquen la zona.
Usar rel=prev y rel=next en las etiquetas ltagt para SEO y navegadores.
Cuando no hay enlace activo mostrar un elemento no interactivo ltspangt con aria-disabled=true o clase is-disabled.
Mostrar un foco visible con :focus-visible para usuarios que navegan con teclado.
Proveer texto significativo (ej. “Página anterior” y “Siguiente página”) para lectores de pantalla. Si usas iconos, deja además texto visible o un elemento con la clase screen-reader-text que contenga la descripción.

6) Soporte RTL y flechas correctas

Para soportar idiomas RTL (árabe, hebreo…) puedes invertir las flechas mediante selectores que detecten el atributo dir. Ejemplo CSS:

/ Si el documento está en RTL /
[dir=rtl] .page-btn--prev::before { content: › }
[dir=rtl] .page-btn--next::after  { content: ‹ }

/ También puedes adaptar el orden visual si quieres que el Prev aparezca a la derecha /
[dir=rtl] .pagination-buttons { direction: rtl }

7) Ejemplos de variaciones visuales

Botones ghost: fondo transparente, borde marcado y hover con color de acento.
Botones grandes: aumentar padding, border-radius y usar iconos SVG en ::before/::after.
Indicador de página actual: en paginate_links marcar .current con color destacado.

8) Consejos finales y buenas prácticas

Usa un tema hijo para no perder cambios cuando actualices el tema original.
Prueba la paginación en varios navegadores y en dispositivos móviles para confirmar comportamiento responsive.
Si tu tema usa bloques (Gutenberg) y renderiza la paginación mediante funciones internas, investiga si existe un filtro o hook que permita modificar clases en la salida para no editar directamente plantillas del tema.
Comprueba con herramientas de accesibilidad (como Lighthouse o WAVE) que tu paginación cumple los criterios de contraste y navegación por teclado.

Ejemplo completo (PHP CSS resumido)

A continuación un ejemplo mínimo funcional que combina la plantilla y el CSS ya presentado (usa este ejemplo como punto de partida).

/ PHP: insertar en tu template donde quieras la paginación /
lt?php if ( get_next_posts_link()  get_previous_posts_link() ) : ?gt
  ltnav class=pagination-wrap role=navigation aria-label=Paginación del sitiogt
    ltdiv class=pagination-buttonsgt
      lt?php
        if ( get_previous_posts_link() ) {
          previous_posts_link( ltspan class=page-btn page-btn--prevgtAnteriorlt/spangt )
        } else {
          echo ltspan class=page-btn page-btn--prev is-disabled aria-disabled=truegtAnteriorlt/spangt
        }
        if ( get_next_posts_link() ) {
          next_posts_link( ltspan class=page-btn page-btn--nextgtSiguientelt/spangt )
        } else {
          echo ltspan class=page-btn page-btn--next is-disabled aria-disabled=truegtSiguientelt/span
        }
      ?gt
    lt/divgt
  lt/navgt
lt?php endif ?gt

Sustituye las llamadas o adapta la estructura al tipo de paginación que use tu tema. Con el CSS ya mostrado transformarás los enlaces en botones visuales con buenos estados y accesibilidad.

Resumen

Convertir “Anterior / Siguiente” en botones consiste en: añadir clases/roles adecuados en la salida HTML/PHP del tema, aplicar CSS que dé apariencia de botón (y gestione hover, focus, disabled), y garantizar accesibilidad (aria, rel, foco visible). Aplica los snippets mostrados y ajústalos al sistema de diseño de tu sitio.

SushiHost