CODEWITHSUNDEEP
csswordpresstwitter-bootstrappagination
Aryadne
Aryadne

Reputation: 73

Where do I apply Bootstrap Wordpress pagination styling

I want to use Bootstrap's css for pagination in my WordPress theme but I can't find where to apply it. I looked in the inc/template-tags.php file and I can't even find the "the_post_navigation()" function. It's disappeared!

Upvotes: 0

Views: 1361

Answers (1)

Aryadne
Aryadne

Reputation: 73

After a lot of searching, here’s what I found.

WP moved the pagination functionality to the core. It’s in the wp-includes/link-template.php file. I did a search for “older posts”, "nav-previous" and "nav-links" to see where in the file these things were and what was happening. They are at line 2431, 2385, and 2552 respectively.

Since this stuff is in the core files it’s probably not a good idea to make changes here since WP could produce an update at any time that will overwrite your changes. Right now Bootstrap has created classes to handle pagination but since we can’t really use them in the core, what I did was change the css of the classes that WP uses. For the arrows, I used the pseudo-selectors “before” and “after” with the content property set to each arrow. Here’s my code:

/*--------------------------------------------------------------
# Bootstrap fixes due to WP Core Changes
--------------------------------------------------------------*/

/*  Bootstrap wants to use .pager and .previous / .next classes
    but WP has moved that pagination functionality to the core.
    So instead of using BS directly, we applied the BS css to
    the WP classes. This should make it so that future updates
    to WP won't override this css.
*/

/* Centers links in container. Off by default */
/*.nav-links {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}*/

.nav-previous, .nav-next {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
}

/* Aligns links to the left and right of the container */
.nav-previous {
    float: left;
}

.nav-next {
    float: right;
}

.nav-previous:focus, .nav-next:focus,
.nav-previous:hover, .nav-next:hover {
    background-color: #eee;
}

.nav-previous a:focus, .nav-next a:focus,
.nav-previous a:hover, .nav-next a:hover {
    text-decoration: none;
}

/* Adds arrows to the left and right respectively */
.nav-previous a::before {
    content: "\2190\00a0";
}

.nav-next a::after {
    content: "\00a0\2192";
}

Hope this helps someone out there.

Upvotes: 1

Related Questions