[Resolved] Block-Based Template: Customizing CPT Previous/Next Navigation

[Author]

Posts

[Miguel]

Tell us what you are trying to do?
I built a block-based template for my 'Tratamientos' (Treatments) Custom Post Type. On individual treatment pages, I see 'Previous Treatment' and 'Next Treatment' links at the bottom. How can I personalize these?

Is there any documentation that you are following?
Yes, I see this post: https://toolset.com/forums/topic/previous-and-next-links-on-cpt/
but I'm using a block-based template

Is there a similar example that we can see?
no

What is the link to your site?
aspiring-radar.localsite.io
user:
cacatua

pass
picorto77

[Minesh]

Hello. Thank you for contacting the Toolset support.

As shared information with the reference ticket URL you shared. The single post pagination links should be coming from the theme you use.

What personalization you want to do? do you mean you want to translate the previous and next pagination URLs in another language? if yes, what exactly you want to translate and and what is the problem URL.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Miguel]

Okay, I've deactivated it from the theme (Astra Pro).

Since I have categories for the CPT "Tratamientos" (Treatments), I want the previous and next treatment links to be within the same category, ordered alphabetically.

Is that posible? thanks!

me

[Minesh]

There is no such feature available but you may try to use the native WordPress hook "get_next_post_where" and "get_previous_post_where":

Please check the following link that may help you:
=> https://stackoverflow.com/questions/42704120/get-next-post-with-custom-taxonomy-term
=> https://wordpress.stackexchange.com/questions/202188/modify-previous-and-next-post-links-to-current-authors-other-posts/228867#228867
=> https://toolset.com/forums/topic/wpv-post-next-link-not-working-properly/

[Miguel]

Minesh,

I want to share the solution I've developed with the help of ChatGPT.

## Next/Previous Navigation for "Tratamientos" (treatment) Filtered by "zona corporal" (body area)

### Objective
To add navigation links that allow users to move to the next or previous treatment, sorted alphabetically and filtered by the body area (facial or corporal) selected by the user.

### General Structure
* **Custom Post Type:** `tratamiento` (treatment)
* **Custom Taxonomy:** `zona-corporal` (body-area)
* **Slugs used:** `facial` and `corporal`
* Body areas can be associated with more than one term, but navigation is forced to respect the one passed via the URL.
* Navigation uses the `?zona-corporal=facial` or `?zona-corporal=corporal` parameter to determine the navigation group.

### Custom Code
The following PHP code was added from:
**Toolset > Settings > Custom Code**

```php
function navegacion_tratamiento_por_zona_param_shortcode() {
if ( !is_singular('tratamiento') ) {
return '';
}

global $post;

$zona_slug = isset($_GET['zona-corporal']) ? sanitize_text_field($_GET['zona-corporal']) : '';
if ( empty($zona_slug) ) return '';

$zona = get_term_by('slug', $zona_slug, 'zona-corporal');
if ( !$zona ) return '';

$args = array(
'post_type' => 'tratamiento',
'posts_per_page' => -1,
'orderby' => 'title',
'order' => 'ASC',
'tax_query' => array(
array(
'taxonomy' => 'zona-corporal',
'field' => 'term_id',
'terms' => $zona->term_id,
),
),
'fields' => 'ids',
);
$posts = get_posts($args);
$current_index = array_search($post->ID, $posts);
$output = '<div class="navegacion-posts">';

if ($current_index > 0) {
$prev_id = $posts[$current_index - 1];
$output .= '<div class="post-anterior">';
$output .= '<div class="etiqueta">Previous</div>'; // Translated from 'Anterior'
$output .= '← ' . get_the_title($prev_id) . '';
$output .= '</div>';
}

if ($current_index < count($posts) - 1) {
$next_id = $posts[$current_index + 1];
$output .= '<div class="post-siguiente">';
$output .= '<div class="etiqueta">Next</div>'; // Translated from 'Siguiente'
$output .= '' . get_the_title($next_id) . ' →';
$output .= '</div>';
}

$output .= '</div>';
return $output;
}
add_shortcode('navegacion_tratamiento_por_zona', 'navegacion_tratamiento_por_zona_param_shortcode');
```

### Shortcode Insertion
The shortcode `[navegacion_tratamiento_por_zona]` was inserted at the bottom of the content template created with Toolset:
* **Template Name:** Template for Treatments
* **Block Type:** Shortcode

### Links with Parameter
On the page displaying the treatments, (hidden link) two Views filtered by `zona-corporal` are used: facial and corporal.
Each item in the list includes a link constructed as follows:
**Toolset Block used:** Fields and Text

* **For Facial Area:**
`[wpv-post-title]`

* **For Corporal Area:**
`[wpv-post-title]`

### CSS Styles
CSS from **Appearance > Customize > Additional CSS:**

```css
.navegacion-posts {
display: flex;
justify-content: space-between;
margin: 2em 0;
gap: 2em;
}

.navegacion-posts .post-anterior,
.navegacion-posts .post-siguiente {
flex: 1;
}

.navegacion-posts .etiqueta {
font-weight: bold;
font-size: 0.9em;
margin-bottom: 0.3em;
text-transform: uppercase;
color: #555;
}
```

And that's it!

thanks for your help!

me

[Minesh]

Glad that you found the solution and you're welcome to mark resolve this ticket.

Again, Thanks for sharing that and that may help other users.