Trailing Slash Issue in Category Pagination URLs with the_posts_pagination()

[hmbashar]

Hello,

I've checked a few themes that use the the_posts_pagination() function for pagination, and I think this function has a small issue. Although it’s not a major problem, it should still be addressed. If I remove the extra/trailing slash (/) at the end of the URL from the permalink structure (like /%%postname%% instead of /%%postname%%/), it works perfectly for all category pages except the first page.

For example, if I have a category slug "uncategorized", the pagination for this category archive page works as follows:

• ​https://wpdevelop.test/category/uncategorized/page/2
• ​https://wpdevelop.test/category/uncategorized/page/3
• ​https://wpdevelop.test/category/uncategorized/page/4

However, if I hover over any other number in the pagination, it shows without the trailing slash (/). Check this screenshot: ​https://prnt.sc/GICqVaCdAD8e. But if I hover over page number 1, it shows with a trailing slash, like this: ​https://wpdevelop.test/category/uncategorized/. Check this screenshot: ​https://prnt.sc/n-eNn-P_Zr5x. After clicking on page number 1, it redirects to the URL without the slash: ​https://wpdevelop.test/category/uncategorized.

So, I think if it redirects to remove the slash, the URL should also remove the slash when hovering over page number 1.

I've checked several themes with this behavior:

• Twenty Fifteen Version: 3.7
• Twenty Fourteen Version: 3.9
• Twenty Nineteen Version: 2.8
• Twenty Seventeen Version: 3.6
• Twenty Sixteen Version: 3.2
• Twenty Twenty Version: 2.6
• Twenty Twenty-One Version: 2.2
• Twenty Twenty-Two Version: 1.7
• Astra Version: 4.7.0

How to Check the Issue:

1. Activate any of the themes mentioned above.
2. Add categories.
3. Add a few posts with those categories to enable pagination.
4. Set permalinks with a custom structure (/%%postname%%), ensuring you don’t include a slash at the end.
5. Visit your category archive, e.g., ​https://wpdevelop.test/category/uncategorized.
6. Click pagination numbers and check the URLs.

Check the screenshots for reference:

• ​First screenshot
• ​Hover screenshot
• ​Page 1 hover screenshot

Thank you!

[hmbashar]

I've added a video you may watch this from here for you can download from the attachment ​https://www.berrycast.com/conversations/88000375-7f49-574e-9ba0-e338ffc63702

[huzaifaalmesbah]

Thank you @hmbashar for pointing out this valid issue. I have been able to reproduce it.

In my tests with the default WordPress theme, as well as popular themes like Astra, GeneratePress, and Neve, I observed that they all encounter the same trailing slash issue when using the the_posts_pagination() function.

[mai21]

@hmbashar thanks for reporting the issue.

Reproduction Report

Description

This report validates that the issue can be reproduced.

Steps

As mentioned on the main ticket

Environment

• WordPress: 6.6-beta2-58396
• PHP: 8.3.6
• Server: nginx/1.24.0
• Database: mysqli (Server: 10.5.24-MariaDB-1:10.5.24+maria~ubu2004-log / Client: mysqlnd 8.3.6)
• Browser: Chrome 125.0.0.0
• OS: Linux
• Theme: Twenty Twenty 2.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.1.0
  • WordPress Beta Tester 3.5.5

Actual Results

🐞 Error condition occurs. Hovering the 1st-page link will have /, however, when clicked it opens the link without / (reproduced).

Expected Result

✅ Hovering any page (1st or nth) link shall match permalinks either it was with/without trailing slash

[rahulsprajapati]

Use user_trailingslashit to fix trailing slash issue in pagination permalink.

[rahulsprajapati]

Test GIF: When removed trailingslash from permalink structure it uses all link without trailslash.

[rahulsprajapati]

Test GIF: When using trailingslash in permalink structure it uses all link with trailslash.

[rahulsprajapati]

Added patch & gifs for test permalink with and without trailingslash in pagination links.

[huzaifaalmesbah]

I test 61393.diff​ Working and looks good for me.

[huzaifaalmesbah]

according to the ticket status, I added two keywords has-testing-info and needs-testing

[hmbashar]

I've tested the patch 61393.diff​, and it's working for me. The issue has been resolved.

[hmbashar]

Hello @rahulsprajapati,

I've tested your patch, and while it is working fine, I have noticed another issue. Perhaps your patch could address this as well. I checked several themes like Astra, Twenty Fifteen, Twenty Fourteen, and more. I observed that themes with the "Newest Post" and "Older Post" navigation feature have a trailing slash for the newest posts (see screenshot). However, other themes with the same features, such as Twenty Eleven and Twenty Ten, do not show a trailing slash with the newest posts (see screenshots).

Twenty Fourteen: ​https://prnt.sc/NrC_xTz4b63X
Astra: ​https://prnt.sc/i2H72Q6XLBjc
Twenty Fifteen: ​https://prnt.sc/bawBT2J-IhM7

Twenty Ten: ​https://prnt.sc/lTizkhfzP-Uz
Twenty Eleven: ​https://prnt.sc/iv169bWJkQSz

[rahulsprajapati]

Use user_trailingslashit to fix trailing slash issue in pagination permalink including "Newest Post" and "Older Post" links.

[rahulsprajapati]

Hello @hmbashar,

Thank you for testing this and for the feedback. I just uploaded another patch with the next and prev link fix. Let me know if you see any issue with this.

[hmbashar]

Perfect with the patch "61393-1.diff, I think now everything's is fine.

[joedolson]

I don't see anything about this that impacts accessibility; removing the focus.

Trac ticket: #61393

## Description
Adds a unit test to verify pagination links maintain consistent trailing slash behavior when the permalink structure has trailing slash as well as does not have trailing slash.

## Testing instructions

1. Run the unit test:

   npm run test:php -- --filter=test_pagination_links_trailing_slash_consistency
   

[ankitkumarshah]

Hi @martinkrcho, @rahulsprajapati, @hmbashar, @huzaifaalmesbah,

I have added the unit test and also updated the implementation in my unit test PR to address the failing tests. Please review it at your convenience.

Thank You!

[adamsilverstein]

@ankitkumarshah The user_trailingslashit function takes a second parameter that should probably be 'category' here, can you take a look at adding that? It is passed to the filter called in the function.

[ankitkumarshah]

Hi @adamsilverstein,

Thank you for pointing this out.
I found that the second parameter for user_trailingslashit( $link ) would be 'paged' as the function we are working with is paginate_links(). Technically, the function can be used to create a paginated link list for any area.

The same is done in line number 4516 in the paginate_links() function:

$format .= $wp_rewrite->using_permalinks() ? user_trailingslashit( $wp_rewrite->pagination_base . '/%#%', 'paged' ) : '?paged=%#%';

Reference - ​https://github.com/WordPress/wordpress-develop/blob/b8b72e62481d6fd37e5ec012d9af31722bb2a43f/src/wp-includes/general-template.php#L4516

I have updated my PR accordingly

[adamsilverstein]

I found that the second parameter for user_trailingslashit( $link ) would be 'paged'

Great, thanks for looking into that. Sounds right.

QA Report:

Issue is fixed.

Twenty Five

Astra

[audrasjb]

Self assigning for final review and commit.

[audrasjb]

In 59966:

Permalinks: Ensure pagination links are consistent with permalink structure.

This changeset ensures that pagination links stay consistent with the chosen permalink structure. When the permalink structure uses a trailing slash, pagination permalinks contain one as well, but when the permalink structure doesn't use trailing slash, then pagination links should not use a trailing slash.

This makes use of user_trailingslashit() with a paged value for the type_of_url parameter.

Props hmbashar, huzaifaalmesbah, rejaulalomkhan, mai21, rahulsprajapati, martinkrcho, ankitkumarshah, adamsilverstein, sourabhjain.
Fixes #61393.

Merged in the changeset [59966]

[peterwilsoncc]

Reopening this as the commit was reverted in [60088] due to a bug reported in #63123.

I think the change that is required is to modify the default base and format arguments to account for permalink settings.

If the permalinks do not include trailing slashes, the base should be of the form example.com/category/cateogory-slug%_% and the format include a leading slash.

If permalinks do include a trailing slash, the base should be of the form example.com/category/cateogory-slug/%_% and the format not include the trailing slash.

Modifying the defaults in this way will allow developers to pass a custom base and format and have them remain backward compatible.

The unit tests for the functions should use $this->goto() to allow for testing of the defaults.

Second pass at https://core.trac.wordpress.org/ticket/61393

[peterwilsoncc]

I've created a ​pull request taking a second pass at this.

Rather than modifying the links as they are generated, it takes in to consideration whether a site's permalinks uses trailing slashes and modifies the default values of $base and $format accordingly.

This will ensure the function doesn't add trailing slashes to links unexpectedly, see #63123, while avoiding the incorrect links and 301 redirects on sites that do not use trailing slashes.

I've included a bunch of tests but further suggestions are welcome.

[welcher]

This was reviewed in the 6.9 Bug Scrub today. @peterwilsoncc new PR has failing unit tests and need to be reviewed before moving this forward.

[krupajnanda]

Pinging @audrasjb and @peterwilsoncc to prioritize reviewing the failing tests on PR. If the failed tests cannot be stabilized and re-tested in the next 1 or 2 days, the safest course of action is to punt this ticket to the 6.9.1 minor release or next major 7.0 release.

[peterwilsoncc]

@welcher @krupajnanda The failing tests were network issues back when I first pushed. I've rebased and pushed and the tests are now passing.

[peterwilsoncc]

I briefly discussed this with @westonruter and we decided to bump to 7.0 as WP tends to put trailing slashes on the permalinks when using the default options on Settings > Permalinks. It's likely low impact.

[ozgursar]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8591

Environment

• WordPress: 7.0-alpha-61215-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Chrome 143.0.0.0
• OS: macOS
• Theme: Twenty Twenty 3.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Twenty Twenty-Five

Before	After

Twenty Twenty

Before	After

[peterwilsoncc]

@ozgursar thank you for testing!

Replying to peterwilsoncc:

I briefly discussed this with @westonruter and we decided to bump to 7.0 as WP tends to put trailing slashes on the permalinks when using the default options on Settings > Permalinks. It's likely low impact.

@westonruter Presuming the tests pass after the rebase, are you happy for ​PR#8591 to go in to trunk?

[westonruter]

@peterwilsoncc I left some comments on the PR.

@peterwilsoncc thanks for working on this ticket!
There's some pending feedback to address. Do you think we can move forward with this PR in time for WP 7.0 RC1?

[juanmaguitar]

From today's bug scrub

There's some feedback in the related PR #8591 pending to be addressed. ​Pinged @peterwilsoncc about it in the PR

@westonruter Thank you! I've applied all of your suggestions, rebased and pushed.

# Testing

I removed the trailing slash from the permalink structure:

When the Twenty Twenty theme active, I went to the second page of results for the Uncategorized category archive:

<details><summary>Before</summary>

<div class="nav-links">
    <a
            class="prev page-numbers"
            href="http://localhost:8000/category/uncategorized/"
    ><span aria-hidden="true">←</span>
        <span class="nav-prev-text"
        >Newer <span class="nav-short">Posts</span></span
        ></a
    >
    <a class="page-numbers" href="http://localhost:8000/category/uncategorized/"
    >1</a
    >
    <span aria-current="page" class="page-numbers current">2</span>
    <a
            class="page-numbers"
            href="http://localhost:8000/category/uncategorized/page/3"
    >3</a
    >
    <span class="page-numbers dots">…</span>
    <a
            class="page-numbers"
            href="http://localhost:8000/category/uncategorized/page/7"
    >7</a
    >
    <a
            class="next page-numbers"
            href="http://localhost:8000/category/uncategorized/page/3"
    ><span class="nav-next-text"
    >Older <span class="nav-short">Posts</span></span
    >
        <span aria-hidden="true">→</span></a
    >
</div>

</details>
<details><summary>After</summary>

<div class="nav-links">
    <a
            class="prev page-numbers"
            href="http://localhost:8000/category/uncategorized"
    ><span aria-hidden="true">←</span>
        <span class="nav-prev-text"
        >Newer <span class="nav-short">Posts</span></span
        ></a
    >
    <a class="page-numbers" href="http://localhost:8000/category/uncategorized"
    >1</a
    >
    <span aria-current="page" class="page-numbers current">2</span>
    <a
            class="page-numbers"
            href="http://localhost:8000/category/uncategorized/page/3"
    >3</a
    >
    <span class="page-numbers dots">…</span>
    <a
            class="page-numbers"
            href="http://localhost:8000/category/uncategorized/page/7"
    >7</a
    >
    <a
            class="next page-numbers"
            href="http://localhost:8000/category/uncategorized/page/3"
    ><span class="nav-next-text"
    >Older <span class="nav-short">Posts</span></span
    >
        <span aria-hidden="true">→</span></a
    >
</div>

</details>

.html

@@ -1 +1 @@
 <div class="nav-links">
     <a
             class="prev page-numbers"
-            href="http://localhost:8000/category/uncategorized/"
+            href="http://localhost:8000/category/uncategorized"
     ><span aria-hidden="true">←</span>
         <span class="nav-prev-text"
         >Newer <span class="nav-short">Posts</span></span
         ></a
     >
-    <a class="page-numbers" href="http://localhost:8000/category/uncategorized/"
+    <a class="page-numbers" href="http://localhost:8000/category/uncategorized"
     >1</a
     >
     <span aria-current="page" class="page-numbers current">2</span>

Clicking on previous page before (👎 has redirect):

Clicking previous page after (👍 no redirect):

[audrasjb]

Removing myself from ticket ownership because I have a bit too much on my plate for 7.0. @peterwilsoncc @westonruter you've been really active on this ticket, do you think we can ship it before RC1 on Thursday?

[peterwilsoncc]

Replying to audrasjb:

... do you think we can ship it before RC1 on Thursday?

I think we can, I pushed some minor test changes yesterday that are passing so I think it's good for committing but I'll get Weston to do a quick logic check before doing so.

[westonruter]

Good to go.

[peterwilsoncc]

In 62036:

Permalinks: Follow rewrite rules for trailing slashes in paginate_links().

Modifies the default settings of paginate_links() to only include trailing slashes, eg example.org/page/2/, when the permalink settings include a trailing slash. When the permalink settings do not include a slash, neither do the generated links, eg example.org/page/2.

This prevents the generated links from hitting a URL that subsequently redirects when the permalink structure does not include a trailing slash.

Props adamsilverstein, ankitkumarshah, audrasjb, hmbashar, huzaifaalmesbah, joedolson, juanmaguitar, krupajnanda, mai21, ozgursar, peterwilsoncc, rahulsprajapati, sirlouen, welcher, westonruter.
Fixes #61393.