[wp-trac] [WordPress Trac] #42309: Add page-numbers CSS class to wp_link_pages generated links

[WordPress Trac]

#42309: Add page-numbers CSS class to wp_link_pages generated links
-----------------------------+-----------------------------
 Reporter:  okaestne         |      Owner:
     Type:  feature request  |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Themes           |    Version:  trunk
 Severity:  normal           |   Keywords:
  Focuses:  template         |
-----------------------------+-----------------------------
 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:

 {{{#!php
 // 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:

 {{{#!php
 // 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42309>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform