¿Alguna vez has leído una entrada de blog y has querido tener una forma fácil de saltar a la siguiente?
Ahí es donde los enlaces siguiente/anterior resultan útiles. Estos sencillos enlaces de navegación mantienen la participación de los lectores guiándoles hacia más contenidos de su sitio sin obligarles a buscarlos.
Por defecto, WordPress enlaza las entradas siguiente y anterior, pero dependiendo de tu tema, puede que no sean visibles o no tengan el estilo que deseas.
Pero no se preocupe, ¡nosotros nos ocupamos de todo! Después de probar diferentes métodos, hemos encontrado algunas formas fiables de añadir y personalizar estos enlaces.
En esta guía, le mostraremos cómo añadir fácilmente enlaces siguientes/anteriores en WordPress, tanto si desea hacerlo con un plugin como con un poco de código personalizado.
¿Qué son los enlaces Siguiente / Anterior en WordPress?
Los enlaces siguiente y anterior son enlaces de navegación dinámicos integrados en los temas de WordPress. Permiten a los usuarios moverse fácilmente entre entradas, ayudándoles a descubrir más contenido sin necesidad de hacer clic.
Por defecto, las entradas del blog de WordPress se muestran en orden cronológico inverso (las entradas más recientes primero).
Esto significa que la siguiente entrada es la que se publica después de la entrada actual que está viendo un usuario, y la entrada anterior es la que se publicó antes de la entrada actual.
Los enlaces siguiente/anterior permiten a los usuarios navegar fácilmente por artículos individuales y páginas de archivo del blog. También le ayudan a conseguir más páginas vistas en su blog.
La mayoría de los temas de WordPress incorporan enlaces a las entradas siguiente y anterior, que se muestran automáticamente al final de cada entrada. Sin embargo, algunos temas no los muestran, o es posible que desee personalizar dónde y cómo aparecen en su sitio web de WordPress.
Dicho esto, echemos un vistazo a cómo añadir fácilmente enlaces siguientes y anteriores en WordPress. Puede seguir los siguientes enlaces para saltar a la sección de su elección:
- Adding Next / Previous Links to WordPress Using a Plugin (Easiest Method)
- Adding Next / Previous Links Using Custom Code
- Styling Next / Previous Links in WordPress
- Adding Next / Previous Links for Posts with Thumbnails
- Adding Next / Previous Links to WordPress Pages
- Bonus: Remove Next and Previous Links in WordPress
Añadir enlaces siguientes / anteriores a WordPress usando un plugin (el método más fácil)
Este método es fácil y recomendable para principiantes que no se sienten cómodos añadiendo código a sus sitios web.
En primer lugar, debe instalar y activar el plugin CBX Next Previous Article. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, visite la página Ajustes ” CBX Siguiente Anterior. Desde aquí, puede elegir dónde desea mostrar los enlaces siguiente y anterior en su sitio web.
El plugin te permite enlazar las flechas Siguiente y Anterior en entradas individuales, páginas, páginas de archivo y más.
Para ello, desplácese hasta la sección “Ajustes de visualización de archivos” y seleccione “Sí” para las zonas en las que desee mostrar estos enlaces.
Para que sus enlaces siguientes y anteriores sean más relevantes, también puede optar por mostrar las entradas siguientes y anteriores de la misma categoría o etiqueta.
Ahora, desplázate hacia abajo hasta la sección ‘Ajustes de visualización de artículo único’. Verás que Entradas y Páginas ya están seleccionadas como los tipos de entradas por defecto donde aparecerán tus flechas.
Si solo quieres mostrar una flecha para la entrada anterior o la siguiente, solo tienes que seleccionar la opción “Anterior” o “Siguiente” en los ajustes de “Mostrar entradas”.
Sin embargo, si desea mostrar ambas flechas, seleccione “Sí” en la opción “Mostrar ambas flechas”.
La versión gratuita del plugin solo permite mostrar flechas para los artículos siguiente y anterior. Puede actualizar a la versión Pro para desbloquear otras opciones de visualización, tales como deslizar / ventana emergente.
A continuación, puede seleccionar un estilo de flecha en el menú desplegable de la sección “Ajustes de estilo de flecha”.
Una vez hecho esto, verás una vista previa de las flechas de abajo. A continuación, sigue adelante y haz clic en el botón “Guardar ajustes”.
Si elige mostrar entradas siguientes/anteriores de la misma taxonomía, deberá cambiar a la pestaña Navegar por taxonomía.
A partir de aquí, elija qué taxonomía desea utilizar para enlazar los enlaces siguiente y anterior. A continuación, sólo tiene que hacer clic en el botón “Guardar ajustes”.
Opcionalmente, el plugin también permite realizar un seguimiento de los clics mediante Google Analytics. Para utilizar esta característica, primero tendrá que instalar Google Analytics en WordPress.
Después de eso, cambie a la pestaña de Google Analytics en los ajustes del plugin y active las opciones de seguimiento de clics.
A continuación, puedes dejar el resto de ajustes como están o configurarlos a tu gusto. Cuando hayas terminado, sólo tienes que hacer clic en el botón “Guardar ajustes” para guardar los cambios.
Ahora puede visitar su sitio web de WordPress para ver los enlaces siguientes/anteriores en acción.
Este método es más fácil, pero no le da mucha flexibilidad. Por ejemplo, la versión gratuita del plugin no muestra el título de la entrada siguiente o anterior.
Añadir enlaces siguientes / anteriores con código personalizado
Si estás buscando una forma más flexible y personalizable de añadir enlaces de navegación, entonces este método es para ti. Para añadir los enlaces siguiente/anterior, tendrá que editar los archivos de su tema de WordPress.
Esto puede ser muy arriesgado, ya que el más mínimo error puede hacer que su sitio sea inaccesible.
Aquí es donde entra WPCode. Es el mejor plugin de fragmentos de código de WordPress, ya que le permite añadir código personalizado de forma segura sin el riesgo de romper su sitio web.
Para más detalles, vea nuestra reseña / valoración de WPCode.
Primero, necesitas instalar y activar el plugin WPCode. Para más detalles, consulte nuestro tutorial sobre cómo instalar un plugin de WordPress.
📒Nota: WPCode tiene un plan gratuito. Sin embargo, la actualización a la versión pro le dará acceso a una biblioteca en la nube de fragmentos de código, lógica condicional avanzada y mucho más.
Una vez activado, visite la página Fragmentos de código ” +Añadir fragmento desde el escritorio de WordPress. Aquí, haga clic en el botón “+ Añadir fragmento de código personalizado” debajo de la opción “Añadir su código personalizado (nuevo fragmento de código)”.
Esto le dirigirá a la página “Crear fragmento de código personalizado”, donde puede empezar añadiendo un título para su código.
A continuación, seleccione “Fragmento de código PHP” como tipo de código en el menú desplegable de la derecha.
A continuación, añada el siguiente código personalizado en el cuadro “Vista previa del código”:
<?php the_post_navigation(); ?>
A continuación, desplácese hasta la sección “Inserción” y elija el modo “Inserción automática”.
Su código se ejecutará automáticamente en su sitio una vez activado.
A continuación, abra el menú desplegable “Ubicación” y cambie a la pestaña “Página específica”.
A continuación, seleccione “Insertar después de la entrada” como ubicación del código. Sus enlaces a entradas anteriores/siguientes aparecerán al final de cada entrada.
Sin embargo, si tiene en mente alguna otra posición, puede seleccionar esa opción.
Por último, desplázate hasta la parte superior y activa el conmutador “Inactivo”.
A continuación, haga clic en el botón “Guardar fragmento de código” para guardar los cambios.
Ahora puede visitar su sitio de WordPress para ver los enlaces siguiente / anterior en acción.
Aquí, notará que el código personalizado que añadió solo muestra los enlaces a las entradas siguiente y anterior con el título de la entrada como texto de anclaje.
No destaca que estos son los enlaces a los artículos siguiente y anterior.
Si desea cambiar esto, puede añadir el siguiente código personalizado a la casilla “Vista previa del código”:
<?php the_post_navigation( array(
'prev_text' => __( 'Previous Article: %title' ),
'next_text' => __( 'Next Article: %title' ),
) );
?>
Una vez guardados los cambios en WPCode, sólo tiene que visitar su sitio web.
Así se ve en nuestro sitio de prueba:
También puede utilizar caracteres especiales y flechas junto con los títulos de las entradas siguiente y anterior.
Basta con sustituir el código por lo siguiente:
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
Este es el aspecto del código en nuestro sitio web de prueba:
Supongamos que quiere enlazar los artículos siguiente y anterior con el artículo que el usuario está viendo en ese momento.
Puede hacerlo mostrando los enlaces siguiente y anterior de la misma categoría o etiquetas:
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'in_same_term' => true,
'taxonomy' => __( 'category' ),
) );
?>
Este código indica a WordPress que muestre las entradas siguiente y anterior de la misma categoría. Puede cambiar el parámetro de taxonomía a etiquetas o cualquier otra taxonomía personalizada si es necesario.
Estilizar enlaces siguientes / anteriores en WordPress
Ahora que ya hemos aprendido a añadir enlaces Siguiente / Anterior en WordPress, veamos cómo darles el estilo adecuado.
Por defecto, WordPress añade automáticamente varias clases CSS a los enlaces de navegación de las entradas. Puede utilizar estas clases CSS en WPCode para dar estilo a estos enlaces.
En primer lugar, diríjase a la página Fragmentos de código ” Añadir fragmento desde la barra lateral de administración de WordPress. A continuación, haga clic en el botón “+ Añadir fragmento de código personalizado” debajo de la opción “Añadir su código personalizado (nuevo fragmento de código)”.
Una vez en la página “Crear fragmento de código personalizado”, añada un título para su código.
A continuación, seleccione “Fragmento de código CSS” como tipo de código en el menú desplegable.
A continuación, puede añadir el siguiente código CSS a su cuadro “Vista previa del código”.
Este CSS básico simplemente muestra los enlaces siguiente y anterior uno al lado del otro pero en lados diferentes de la misma línea:
.nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
display: flex;
}
.nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
flex: 1 0 50%;
}
.nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
flex: 1 0 50%;
}
También puede hacer que sus enlaces de navegación destaquen añadiendo color de fondo, un efecto al pasar el cursor, etc.
Aquí tienes algunos ejemplos de código CSS que puedes utilizar como punto de partida:
.post-navigation {
background-color:#f3f9ff;
padding:0px;
}
.nav-previous, .nav-next{
padding:10px;
font-weight:bold
}
.nav-previous:hover,.nav-next:hover {
background-color:#0170b9;
}
.nav-previous:hover a:link ,.nav-next:hover a:link {
color:#fff;
}
Ahora, desplácese hasta la sección “Inserción” y elija el modo “Inserción automática”.
Su código personalizado se ejecutará automáticamente al activarlo.
Cambia el conmutador de “Inactivo” a “Activo”.
A continuación, haz clic en el botón “Guardar fragmento de código” para establecer los ajustes.
Ahora, visite su sitio WordPress para ver los enlaces con estilo de sus entradas.
Observará que el texto del enlace tiene ahora un color de fondo y un efecto al pasar el cursor para que los enlaces siguiente y anterior destaquen más.
Enlazar entradas con miniaturas con el enlace siguiente/anterior
Si quiere que sus enlaces siguientes/anteriores llamen más la atención, puede mostrar miniaturas de entradas junto con los enlaces. Las imágenes son la forma más fácil de atraer la atención del usuario y hacer que estos enlaces sean más atractivos.
Para ello, puede añadir código personalizado a su archivo functions.php, pero tenga en cuenta que el más mínimo error puede romper su sitio web. Es por eso que recomendamos el uso de WPCode para esto también en su lugar.
Una vez activado el plugin, diríjase a la página Fragmentos de código ” +Añadir fragmento y haga clic en el botón “+Añadir fragmento personalizado” situado debajo de la opción “Añadir su código personalizado (nuevo fragmento)”.
Una vez que acceda a la página “Crear fragmento de código personalizado”, deberá añadir un título para el código.
A continuación, seleccione “Fragmento de código PHP” como tipo de código en el menú desplegable de la derecha.
A continuación, añada el siguiente código personalizado en el cuadro “Vista previa del código”:
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}
Este código simplemente crea una función que muestra las entradas siguientes y anteriores con imágenes destacadas o miniaturas de entradas.
Una vez introducido el fragmento de código, puede activar el conmutador y hacer clic en el botón “Guardar fragmento”.
A continuación, tiene que volver a la página Fragmentos de código ” + Añadir fragmento y hacer clic en el botón “Usar fragmento” situado debajo de la opción “Añadir su código personalizado”.
Cuando se abra la página “Crear fragmento de código personalizado”, copie el siguiente código y péguelo en el cuadro “Vista previa del código”:
<?php wpb_posts_nav(); ?>
Este código decide dónde desea mostrar los enlaces.
Asegúrese también de seleccionar “Fragmento de código PHP” en el menú desplegable “Tipo de código”.
A continuación, desplácese hasta la sección “Inserción” y elija el modo “Autoinserción” para la ejecución automática del código.
También puede desplegar la sección “Ubicación” y cambiar a la pestaña “Página específica”. Desde aquí, seleccione la opción “Insertar después de la entrada” para que las miniaturas aparezcan correctamente enlazadas.
Por último, puede cambiar el conmutador a “Activo” y hacer clic en el botón “Guardar fragmento de código”.
Ahora, puede visitar su sitio web para ver los enlaces en acción.
Puede que hayas avisado de que estos enlaces no parecen muy limpios.
Puedes cambiar eso añadiendo algo de CSS personalizado con WPCode para darles estilo.
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}
Ahora puede guardar los cambios y visitar su sitio web para ver los enlaces siguiente y anterior con miniaturas.
Así se ve en nuestro sitio de prueba:
Para más detalles, puede consultar nuestra guía sobre cómo añadir miniaturas a los enlaces de entradas anteriores y siguientes en WordPress.
Enlazar páginas siguientes o anteriores a páginas de WordPress
Normalmente, los enlaces de navegación de entradas se utilizan para entradas de blog en WordPress. Eso es porque esos elementos se publican en orden cronológico inverso.
Por otro lado, las páginas de WordPress no suelen publicarse en orden cronológico. Para más detalles, consulta nuestra guía sobre la diferencia entre entradas y páginas en WordPress.
Sin embargo, algunos usuarios pueden querer mostrar la navegación de la página para ayudar a los visitantes a encontrar fácilmente la página siguiente. La buena noticia es que el código que utilizamos anteriormente con WPCode muestra los enlaces anterior y siguiente de las páginas.
Si desea enlazar tanto páginas como entradas, no tendrá que realizar ningún cambio adicional.
Sin embargo, si solo desea mostrar los enlaces anteriores/siguientes de las páginas, diríjase a la página Fragmentos de código ” + Añadir fragmento .
Aquí, seleccione la opción “Añadir su código personalizado (nuevo fragmento)”.
Una vez en la página “Crear fragmento de código personalizado”, añada un título para el fragmento.
A continuación, seleccione “Fragmento de código PHP” como tipo de código en el menú desplegable.
A continuación, añada el siguiente código personalizado en el cuadro “Vista previa del código”.
Este es el mismo código que puedes utilizar para añadir enlaces a entradas anteriores/siguientes:
<?php the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
) );
?>
A continuación, desplácese hasta la sección “Inserción” y elija el modo “Autoinserción” para la ejecución automática del código.
También puedes configurar la posición de tus enlaces desde el menú desplegable ‘Ubicación’. Por ejemplo, si eliges “Insertar después de la entrada”, los enlaces aparecerán al final de cada página.
Si tiene en mente otra posición, sólo tiene que seleccionar la opción correspondiente en el desplegable.
A continuación, desplácese hasta la sección “Lógica condicional inteligente” y active el conmutador “Activar lógica”.
🚨Nota: Ten en cuenta que esta característica solo está disponible en la versión pro de WPCode.
A continuación, seleccione “Mostrar” en el menú desplegable “Condiciones” y haga clic en el botón “+ Añadir nuevo grupo”.
Se abrirán nuevos ajustes en los que deberá establecer las condiciones para que aparezca el fragmento de código.
Como solo queremos enlazar páginas anteriores/siguientes, abra el primer menú desplegable y cambie a la pestaña “Dónde (página)” de la columna izquierda.
A continuación, seleccione “Tipo de entrada” en las opciones, elija “Es” en el desplegable central y seleccione “Páginas” en el desplegable final.
Por último, desplácese hasta la parte superior, cambie el conmutador “Inactivo” a “Activo” y haga clic en el botón “Guardar fragmento de código”. Ahora ha añadido correctamente los enlaces anterior/siguiente a sus páginas.
Así se ve en nuestro sitio de demostración:
Bonus: Quitar enlaces siguientes y anteriores en WordPress
Algunos usuarios pueden querer quitar los enlaces siguiente y anterior en WordPress.
Por ejemplo, algunos usuarios pueden considerar que estos enlaces son menos útiles. Algunos prefieren mostrar entradas relacionadas o entradas populares.
Hay dos formas de quitar / eliminar los enlaces siguiente y anterior en WordPress.
Método 1. Borrar el código de su tema de WordPress
Para quitar los enlaces siguiente y anterior en WordPress, tendrá que quitar el código responsable de mostrar los enlaces en su tema de WordPress.
El problema con este enfoque es que tan pronto como actualices tu tema, el código borrado volverá si era parte del tema original.
Para evitarlo, tendrás que crear un tema hijo.
A continuación, tienes que encontrar el código responsable de mostrar los enlaces siguiente y anterior en tu tema principal.
Normalmente, se encuentra dentro de las plantillas single.php o content-single.php.
Básicamente, estarás buscando el código que incluye la siguiente función:
<?php the_post_navigation() ?>
Este código puede tener un formato y unos parámetros ligeramente diferentes.
Por ejemplo, en nuestro sitio de prueba, el tema utilizaba este código para mostrar los enlaces:
the_post_navigation(
array(
'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', 'mytheme' ) . '</span> <span class="nav-title">%title</span>',
)
);
Si está utilizando un tema hijo, entonces necesita duplicar esta plantilla en particular en su tema hijo y luego borrar las líneas utilizadas para mostrar los enlaces siguiente o anterior.
Si prefiere borrarlo en su tema principal, también puede hacerlo.
Si borra el código, WordPress dejará de mostrar los enlaces siguiente y anterior.
Método 2. Ocultar los enlaces de las entradas siguiente y anterior
Este método no elimina realmente los enlaces siguiente y anterior. En su lugar, los hace invisibles para los lectores humanos.
Sólo tiene que añadir el siguiente CSS personalizado a su tema de WordPress:
nav.navigation.post-navigation {
display: none;
}
No olvides guardar los cambios.
A continuación, visite su sitio web para ver cómo desaparecen los enlaces de navegación.
Esperamos que este artículo te haya ayudado a aprender cómo añadir fácilmente los enlaces siguiente y anterior en WordPress. Puede que también quieras ver nuestra guía sobre cómo usar los patrones de bloques de WordPress y nuestra lista de consejos esenciales para usar shortcodes en WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Shanna
I created a WP.org website and I have 4 post per page. I don’t see a next page at the bottom of my page. I have over 20 blog posts. How can I see more blog posts or go to the next page?
WPBeginner Support
If you are using pages instead of posts, you would not see a next page option, we would recommend taking a look at our guide below for understanding how pages work compared to posts.
https://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/
This guide would show how to go through posts with previous and next links.
Admin
Kristi Borst
Thanks for your article. Very helpful. How would I edit the call to limit the title to xx number of characters followed by eclipse “…”? I tried using css but nothing I did worked.
WPBeginner Support
At the moment we do not have a beginner friendly way to set that up at the moment and that would require editing the code, not the CSS. If we find a way we would recommend we will be sure to share!
Admin
George Okinda
Awesome! this helped. Thanks and God bless you all in Christ Jesus
WPBeginner Support
You’re welcome, glad our guide was helpful!
Admin
Jennifer
Hello,
So, how would the code look if you wanted to use a shortcode instead of adding it to the single.php file? I am using GeneratePress and I want to add a hook to my post pages.
Would it look like this?
add_shortcode( ‘posts-nav’, ‘prev_add_next_blogs’ );
the_post_navigation(
array(
‘prev_text’ => __( ‘← %title’ ),
‘next_text’ => __( ‘%title →’ ),
‘in_same_term’ => true,
‘taxonomy’ => __( ‘category’ ),
) );
add_action( ‘init’, ‘prev_add_next_blogs’ );
This did not work for me, any help would be greatly appreciated.
Thank you
Jennifer
WPBeginner Support
You would want to place the add_shortcode below the code for one likely reason if you have not tested so far.
Admin
Ciprian Popescu
This is a good tutorial and I have just implemented it on my blog. It will definitely help with user retention and bounce rate.
The Full Site Editor will never be able to do this using HTML only. That’s why having the code in functions.php (or, even better, in another PHP file called from functions.php) will always work. The function could be coded as a shortcode (with a slight modification to return data instead of echoing it):
`add_shortcode( ‘posts-nav’, ‘wpb_posts_nav’ );`
And then adding it to every post, as a shortcode block (for the Block Editor).
WPBeginner Support
Thank you for your feedback on an alternative option!
Admin
WPBeginner Support
For what it sounds like you’re wanting, you would want to add in_same_term to the post navigation code similar to the code below:
the_post_navigation( array(
'prev_text' => __( '← %title' ),
'next_text' => __( '%title →' ),
'next_text' => true,
) );
Admin
Bipo
Hello,
thanks for this tutorial.
While I’m trying to have thumbnail thing working with Divi (images are not shown), I would ask if it is posssible to add the category/taxonomy filter to this code too.
I mean: is it possible to show links and thumbs only when pages are in the same category?
(I’ve already added category to pages and the_post_navigation works )
Henrik Blomgren
Hi, great tutorial. For old style WordPress.
Now if I wanted to do the image thumbnail post navigation next previous with the new thing in WordPress. The Full Site Editing?
How would I go around doing this tutorial with that?
WPBeginner Support
Unless we hear otherwise, we would still recommend this method with the full site editor but we will certainly take a look and update the article as needed!
Admin
Henrik Blomgren
Thank you very much for your reply. I forgot you still have full access to functions.php so the code will absolutely work.
Just that getting it into the single.html file is why my brain shut down. Since having to use single.php as the fallback for single posts feels a little weird.
So yes, please either update the article when time has been found or if possible please point me in the direction of how to use the function written in php in our html template.
Tina Filipčič
Thank you. It helps a lot. I only have this problem now: the navigation is displayed on both – pages and posts. How to make it display on posts only?
WPBeginner Support
The simplest method would be to have a template for your pages that does not use this, you can see more on our guide below about the template hierarchy:
https://www.wpbeginner.com/wp-themes/wordpress-template-hierarchy-explained/
as well as our guide below about creating a child theme:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Admin
Tina Filipčič
Hello,
I solved the problem by adding this:
let page = document.querySelector(‘.page’);
page.querySelector(‘.wpb-posts-nav’).style = “display:none”