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:

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;
    }

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/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;
    }

• functions
• pagination

• What's the problem that doing this solves? If you shared it there may be an easier pure CSS solution – Tom J Nowell ♦ Commented Oct 14, 2019 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 Commented Oct 14, 2019 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 ♦ Commented Oct 14, 2019 at 19:31

1 Answer 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