Add page-numbers CSS class to wp_link_pages generated links

[okaestne]

While creating my own theme, I were annoyed by the differences between the functions wp_link_pages() and the_posts_pagination().

To simplify the styling of the pagination, I would like to suggest some changes to ensure some unification as stated below.

---

For example, equal styling currently works if you use the functions as follows:

// pagination on singular pages
wp_link_pages (array (
        'before' => '<nav class="pagination">',
        'after' => '</nav>',
        'link_before' => '<span class="page-numbers">',
        'link_after' => '</span>',
));

//pagination on Posts page
the_posts_pagination ();

Resulting HTML markup

<!-- singular pages -->
<nav class="pagination">
	<span class="page-numbers">1</span>
	<a href="https://example.com/post/2/">
		<span class="page-numbers">2</span>
	</a>
	<a href="https://example.com/post/3/">
		<span class="page-numbers">3</span>
	</a>
</nav>

<!-- index / posts page -->
<nav class="navigation pagination" role="navigation">
	<h2 class="screen-reader-text">screen-reader headline</h2>
	<div class="nav-links">
		<a class="prev page-numbers" href="https://example.com/">Neuer</a>
		<a class="page-numbers" href="https://example.com/">1</a>
		<span class="page-numbers current">2</span>
		<a class="page-numbers" href="https://example.com/page/3/">3</a>
		<a class="page-numbers" href="https://example.com/page/4/">4</a>
		<a class="next page-numbers" href="https://example.com/page/3/">Älter</a>
	</div>
</nav>

Sample CSS styling:

/* all page numbers */
nav.pagination {
	text-align: center;
}
nav.pagination .page-numbers {
	display: inline-block;
	padding: 0.25em;
	margin: 4px;
}
/* current page */
nav.pagination .page-numbers.current, nav.pagination > span.page-numbers {
	border-bottom: solid 1px #003e41;
}

Following circumstances: For singular pages, you have to add
a) an additional <nav> container (okay)
b) a <span class="page-numbers"> (hmm)
c) unnecessarily confusing CSS rules (!)

just to achieve equal styling...

---

BUT: If we would change the wp_link_pages() to output links (like the_posts_pagination()) like this:

<a class="page-numbers">

and that the current page is wrapped in an extra container

<span class="page-numbers current">

and that the whole pagination is wrapped in a <nav> container (like the_posts_pagination())

<nav class="navigation pagination" role="navigation">

styling would be easier and more intuitive:

// pagination on singular pages
wp_link_pages ());

//pagination on Posts page
the_posts_pagination ();

/* all page numbers */
nav.pagination {
	text-align: center;
}
nav.pagination .page-numbers {
	display: inline-block;
	padding: 0.25em;
	margin: 4px;
}
/* current page */
nav.pagination .page-numbers.current {
	border-bottom: solid 1px #003e41;
}

I agree, that this might break the compatibility with existing stylesheets, but I'd appreciate it if there was a nice solution.

Thanks in advance.

[joyously]

Like you say, the trick is the existing stylesheets.

I hope you realize that wp_link_pages() is only for paginated posts, not for navigation between singular pages, so unifying the styles with the_posts_pagination() is not a big deal.