[Support request] Need pagination like 1,2,3 pages

[Anil]

Hi

Sorry for disturbing but I can find the solution anywhere so thought of asking.

Wanted to know if I can have pagination like this URL below

https://home-tricks.com/en-faceshape/2/

Thanks

Anil

https://techinfowiz.com/

[Leo]

Hi Anil,

Can you provide a link to your site that shows the default pagination?

Then I’ll provide some CSS.

Let me know 🙂

[Anil]

here it is
https://techinfowiz.com/

[Leo]

That’s the same page provided in the initial topic but I don’t actually see pagination there.

Perhaps you don’t have enough posts yet?

Let me know 🙂

[Anil]

Hi Leo

I found how to bring the pagination now the next question is how can I have beautified pagination like the below links

1. https://bloggingpond.com/ (this is on generate press)

or like this

https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_pagination_margin

I also want similar pagination on this post

https://techinfowiz.com/how-to-split-wordpress-posts-into-multiple-pages-post-pagination/

Thanks

Anil

[Leo]

The Blogging pond site is using this CSS:

/* Pagination */
#nav-below {
    padding-left:0
}

.nav-links .page-numbers {
    border-radius: 4px;
    min-width: 2.5em;
    line-height: 1.8em;
    padding: 5px 15px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
}

.nav-links .page-numbers {
    background-color: #000;
    color: #fff !important;
}
.nav-links .page-numbers.current {
    background-color: #0066bf;
}

[Anil]

Hi Leo, sorry for disturbing you again, I have manually added pagination the way I wanted via a simple CSS plugin. Here is the code

.paging-navigation .nav-links>* {

color: black;
float: left;
padding: 12px 18px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
margin: 0 4px;

Now the question is how can I add the same CSS to this page

https://techinfowiz.com/how-to-split-wordpress-posts-into-multiple-pages-post-pagination/

Here I have manually split the post into multiple pages and here I want similar pagination to the home page https://techinfowiz.com/

Thanks and regards
Anil

[Leo]

Here are the CSS selectors for the single post pagination:
https://www.screencast.com/t/trr0XNO1lT

Let me know if this helps 🙂

[Anil]

Hi Leo
it did not work as the home page, It does not match the pagination that we have on the home page.
Can you help
I just do not want to spoil your day and mine also. Every time I ask a query and get a response it’s usually a day’s time. This is not a live chat hence wasting lots of our time. I think you know my requirements and if you can let me know some firm solution, that would be much appreciated. Thanks

[Leo]

Try something like this:

.single .page-links .current, .single .page-links a {
    border: 1px solid #000;
    padding: 5px;
}

[Anil]

1. On the very first page, the margins are not like that on the rest of the pages, there is no space in the first page numbers.
2.The whole block has gone out of the page, can we extend the page further,if yes how.

thanks

[Fernando]

Hi Anil,

Try removing this:

.page-links {
                color: black;
                float: left;
                padding: 12px 18px;
                text-decoration: none;
                transition: background-color .3s;
                border: 1px solid #ddd;
                margin: 0 4px;
            }

And then, try adding this again:

.single .page-links .current, .single .page-links a {
                padding: 15px 18px;
                border: 1px solid #ddd;
                margin: 0 8px;
            }

It seems that the CSS code isn’t added to page 1. If that doesn’t work, try adding it to Appearance > Customize > Additional CSS instead.

Kindly let us know how it goes.

[Author]

Posts