Pagination Css Classes

  • Hello,
    It would be nice if we could have a different CSS Class for Pagination Numbers at function paginate_links() , as we have on pagination next and previous links in order to play with the paginations design easier.

    Look or try to create these example https://3site.gr/wp-content/uploads/2021/07/download.png for better understanding.

    Example 

    <div class="post-pagination-wrapper post-type-pagination-wrapper only_arrows"><span aria-current="page" class="page-numbers numering-pagination current">1</span>
<a class="page-numbers numering-pagination" href="/whatever/page/2/">2</a>
<a class="next page-numbers" href="/whatever/page/2/">NEXT</a></div>
Viewing 5 replies - 1 through 5 (of 5 total)

  • I don’t agree that the design is desirable (the vertical lines are confusing), but it is achievable with the existing classes.
    Here is the main function used: https://developer.www.ads-software.com/reference/functions/paginate_links/
    You can see there are several filters where you can change the output.

    Thread Starter Elissavet Soileme

    (@elisavet2ww)

    Dear Joy,

    First of all I would appreciate it if you could recognize that this discussion is not about the design. I have to report that i am a programmer and i’m working with professional designer.

    Thank you for your reference! I am already informed about the function’s documentation and filters. In fact i have solved my problem in another complex way. I really could’t find any solution to this problem with this function.

    I strongly believe that the function’s classes are not ok and at fact page-numbers class should be only applied to numbering pagination.

    So I suggest an improvement at this function.

    As i said i have already solve my problem for the time but i would really liked to see your suggested solution to this.

    Please note that if you add a span before or previously with a bar, you will have to exclude this at the first or at the last child. But when previous and next button are appearing (I need ‘show all’ arg to be false) the (for example) first element will be the previous button.

    Unfortunatly :has css selector that could solve the problem is not supported yet by browsers

    Oh, I do know that it’s not about the design. I just couldn’t help but give feedback. Designers should be told when their designs are confusing.

    You don’t mention what the problem is with having the classes the way they are.
    I could work out the CSS needed, and I started to, using these forums as a test. It’s pretty easy to use borders for the lines (or an image if you have to have it shorter than the numbers) and use the before_page_number and after_page_number parameters to wrap the numbers with a span. That can be used to remove the border on its :first-of-type (if using a left border) or :last-of-type (if using a right border) without affecting the Prev/Next that have the same class and type by default. There is already a current class, so you can make it orange and a little larger. (Again, I think the design is faulty, since the current page is not a link, it should be less obvious, not more.) And you can put your orange arrows in the prev_text and next_text arguments, although you have to be careful for RTL when you use arrows.

    I’m pretty sure there are already tickets requesting more classes in this function, but since it handles so many cases, we’ve all gotten along without, or wrote a filter to change the output. One of the options is to get the links as an array, and output the HTML yourself, you know.

    Thread Starter Elissavet Soileme

    (@elisavet2ww)

    Thank you Joy for reference this smart solution!

    I didn’t know about existing first-of-type selector.

    Although i hope for a class to be added in order to get seperated number selector, it would be very helpful and front-end developers would work it arround too.

    Thank you for the tip!

    You could add a class on the span, you know, if you think you really need a “separated number selector”.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Pagination Css Classes’ is closed to new replies.