[Resolved] Styling Pagination Links

[Bobby]

Hello Tom,

I was searching the forum to see if I could find any info on how to style the pagination links, but i did not see anything in particular.

In my blog post, I like to use the wordpress “<!–nextpage–>” syntax to break up very long pages. As you know, when that syntax is used, it generates pagination links to the next pages.

I’m trying to style my single post pagination links to look like the example in the screen shot below. I want the pagination links to have the previous and next page links added along with the square border boxes around each page number link.

See screenshot below:

http://playerwags.com/wp-content/uploads/2016/12/pagination-example.png

Is there some quick simple php code I can add to the php functions file to get this look, or is this a more detailed coding project?

Thanks.

[Tom]

Hi there,

The default WordPress HTML markup isn’t great, so there’s not tons to work with.

This might be a good start:

.page-links a {
    display: inline-block;
    border: 1px solid #DDD;
    padding: 5px 10px;
    line-height: 1;
    margin-right: 10px;
}

.page-links a:hover {
    background:#222;
    color: #FFF;
    border-color: #222;
}

It would be nice to removes the “Pages” text and have HTML wrapped around the currently selected page link so we could style them, but it doesn’t look like the function allows this.

I’ll look into it to see if there’s anything I can do in the parent theme 🙂

[Bobby]

OK, thank you Tom. The CSS works for the box and borders.

[Tom]

You’re welcome 🙂

[Frans]

Thanks ! This works for me as well.

I tried to do the same with category pages and navigators, This works:

.page-numbers {
	display: inline-block;
	background-color: #628907;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

This also

.page-numbers.current {
	background-color: #fff;
	padding: 5px 10px 5px 10px;
	color: #628907;
}

But this doesn’t:

.page-numbers a:hover {
	display: inline-block;
	background-color: #90CB0D;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

And this doesn’t work either:

next.page-numbers a:hover {
	background-color: #90CB0D;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

How can I define an a:hover style ?

Thanks !

Frans

[Tom]

Hi there,

Can you link me to a page with one of those elements so I can see why it’s not working?

[Frans]

Thanks !

This is a (single) post, where .page-links (and page-links a:hover) work correctly (color change on mouse over):

https://medische-ethiek.nl/voltooid-leven-2/

I tried to do the same styling on category pages. This is a category overview where .page-numbers work, but the a:hover doesn’t:

https://medische-ethiek.nl/category/actueel/

Frans

[Tom]

Something like this should work:

.nav-links a:hover,
.nav-links a:focus {
    background: #fff;
    color: #222;
}

[Frans]

Thanks ! .nav-links a:hover is the solution. Unfortunately, .nav-links a:focus did not work. I used a combination of .nav-links and .page-numbers:

.page-numbers {
	display: inline-block;
	background-color: #628907;
	padding: 5px 10px 5px 10px;
	color: #fff;
}
.nav-links a {
	color: #fff;
}
.page-numbers.current {
	background-color: #fff;
	padding: 5px 10px 5px 10px;
	color: #628907;
}
.nav-links {
		text-align: right;
}
.nav-links a:hover {
	background-color: #90CB0D;
	padding: 5px 10px 5px 10px;
	color: #fff;
}

Thanks !

Frans

[Tom]

Glad you got it working! Thanks for sharing your code 🙂

[Frans]

Today I saw that there is a situation in which these solutions don’t work: the navigation within WP pages. The above mentioned solutions address navigation in posts, categories and archives, but not pages. Especially, the a:hover does not work. Both .page-numbers a: hover {} and .nav-links a:hover {} do not have effect in this situation. What class should be used for the a:hover in page navigation ? If I inspect the page with Chrome, I can only find the page-numbers class.

E.g (bottom): https://medische-ethiek.nl/publicaties-katholieke-stichting-medische-ethiek/

Thanks !

Frans

[Tom]

Those links need this CSS:

.page-numbers:not(.current):hover {
    background: #222;
    color: #fff;
}

[Frans]

Thanks! The class is correct, but how do I add the a:hover. Adding after not(.current) with or without colon does not work.

Frans

[Tom]

.page-numbers is the class of the <a> element, so there’s no need to add a:hover after it.

[Frans]

Sorry, I did not explain my problem clearly.

This works, but it is applied permanently (on pages):

.page-numbers:not(.current) {
    background: #222;
    color: #fff;
}

However, I want to have this effect only on mouse over on links. I tried:

.page-numbers:not(.current) a:hover {
    background: #222;
    color: #fff;
}

.page-numbers a:not(.current):hover {
    background: #222;
    color: #fff;
}

.page-numbers a:hover:not(.current) {
    background: #222;
    color: #fff;
}

Those three stylings do not do anything, also the permanent effect of the previous solution has disappeared.

So, how can I get in the a:hover together with the :not(.current) ?

Frans

[Author]

Posts