0

I'm converting a template to WordPress theme and i need to change some css classes. The WordPress function paginate_links generates this markup:

    <ul>
        <li><a class="prev page-numbers" href="">Prev</a></li>
        <li><a class="page-numbers" href="">1</a></li>
        <li><a class="page-numbers" href="">2</a></li>
        <li><a class="page-numbers" href="">3</a></li>                        
        <li><a class="next page-numbers" href="">Next</a></li>
    </ul>

But I want to remove page-numbers class from the elements with prev or nextclass, to generate a result like this:

    <ul>
        <li><a class="prev" href="">Prev</a></li>
        <li><a class="page-numbers" href="">1</a></li>
        <li><a class="page-numbers" href="">2</a></li>
        <li><a class="page-numbers" href="">3</a></li>                        
        <li><a class="next" href="">Next</a></li>
    </ul>

I tried DOMXpath as cited here: Change class="page-numbers" in pagination

And also tried this: https://gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f

I don't know if it's possible to do what i want only with PHP. I'm trying not to use jQuery to maintain the template as close of the original source.

Edit: CSS for the specific markup:

    .page { /* <nav> */
        margin: 3.2rem auto 3.2rem;
        text-align: center;
    }

    .page ul {
      display: inline-block;
      list-style: none;
      margin-left: 0;
      position: relative;
      padding: 0 6rem;
    }

    .page ul li {
      display: inline-block;
      margin: 0;
      padding: 0;
    }

    .page-numbers { 
      font-family: "Helvetica", sans-serif;
      font-weight: 700;
      font-size: 1.7rem;
      line-height: 3.2rem;
      display: inline-block;
      padding: 0.2rem 1.2rem;
      height: 3.6rem;
      margin: 0.2rem 0.2rem;
      color: #000000;
      transition: all, 0.3s, ease-in-out;
    }

    .page-numbers:hover {
      background: #d3d3d3;
      color: #000000;
    }

    .page .current,
    .page .current:hover {
      background-color: #000000;
      color: white;
    }

    .page .inactive,
    .page .inactive:hover { 
      opacity: 0.4;
      cursor: default;
    }

    .prev, 
    .next {
      display: block;
      background-repeat: no-repeat;
      background-size: 18px 9px;
      background-position: center;
      height: 3.6rem;
      width: 4.8rem;
      line-height: 2rem;
      padding: 0;
      margin: 0;
      opacity: 1;
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      transition: all, 0.2s, ease-in-out;
      position: absolute;
      top: 50%;
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
    }

    .prev:hover,
    .next:hover {
      background-color: #d3d3d3;
      color: #000000;
    }

    .prev {
      background-image: url("../images/icons/arrow-left.svg");
      left: 0;
    }

    .next {
      background-image: url("../images/icons/arrow-right.svg");
      right: 0;
    }

    .prev.inactive,
    .next.inactive {
      opacity: 0.4;
      cursor: default;
    }

    .prev.inactive:hover,
    .next.inactive:hover {
      background-color: transparent;
    }
  • What's the problem that doing this solves? If you shared it there may be an easier pure CSS solution – Tom J Nowell Oct 14 '19 at 19:19
  • @TomJNowell It's pure css problem really. The classes prev and next have a background image while also change background color on hover. The page-number class also change background color on hover. With the two classes(page-number and prev/next) on the same element thing are messy. The background image attributed to next and prev is hidden on hover. Since i don't know jquery very well and i don't wanna change the original source code, i tried to generate the markup in php. – wp_noob Oct 14 '19 at 19:28
  • 1
    I'm not sure I understand, you want to have background image X on the prev/next, with background colour X on hover, but you want background Y and colour Y on hover for the rest? Couldn't you just make the rule for the prev/next more specific so it overrides the page-number class? You can do that by either making a more specific CSS rule selector, or putting it further down the CSS file than the rule for th page numbers. You don't need to change the markup at all – Tom J Nowell Oct 14 '19 at 19:31
1

You don't have to change the markup to style the previous/next links differently:


.page-number {
    /* rules that apply to page numbers */
}

.prev.page-number {
    /* previous page link */
}
.next.page-number {
    /* rules that only apply to the next */
}

Removing the class on the links is not needed, it can be done using basic CSS specificity rules

Here is a codepen that demonstrates styling the numbers and the prev/next links differently: https://codepen.io/tomjn/pen/XWWKbbL

| improve this answer | |
  • I tried to override the way you put in your answer but no success. When i change background to background-color on .page-numbers:hover the svg arrow shift position, moving a little bit. The way it is now, like the css i posted above, when hover on the a tags the arrows just are hidden by the background setted on .page-numbers:hover. If i remove the .page-numbers class from the element the result is more like the template i'm converting. I think i'll try jQuery. Thanks form your help Tom. – wp_noob Oct 15 '19 at 17:55
  • hmm having looked at your CSS, there's no reason the background colour changing would move your SVG, but, you never specify the background colour of .prev or .next, and your new rules only have a higher specificity because they're lower down the CSS file. I'm not sure your problem has anything to do with WP or the HTML classes at all. Here is proof that it can be done in pure CSS: codepen.io/tomjn/pen/XWWKbbL – Tom J Nowell Oct 15 '19 at 21:10
  • Thanks for your replys, Tom. It really helped me to look at the problem from another angle. I manage to solve the problem, but i'll try to explain to you the issue. – wp_noob Oct 15 '19 at 21:12
  • As for why your hover effect doesn't work, it's probably because you don't override the rules properly. You use different parameters for page numbers, and different parameters for prev/next. Setting a background image doesn't undo the background colours, you have to explicitly override them – Tom J Nowell Oct 15 '19 at 21:12
  • I was able to fix it doing what you suggested in your answer but changing more than just three rules. It works now. Thank you very much, Tom. I'll accept your answer because it helped me to solve the proble. Thanks, again. :D – wp_noob Oct 15 '19 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.