Pagination is a common functionality that most people expect from their WordPress themes. Nobody wants to wait twenty minutes while 400 blog posts are loaded up onto a single page, and so we set a maximum number of posts for our loop to display, and let the WordPress take care of the rest. Right? Wrong!
Unfortunately, WordPress doesn’t really come with functions preinstalled to give us our own easily customizable pagination, and working with plugins can be bulky and increase load times of our site. In this little tutorial, we will work through the following two things:
Creating our own sexy pagination using CSS3 and jQuery
Implementing our own Pagination() function for our WP theme
Let’s dig right in then!
First off, let’s take a look at our HTML markup. It might not make a whole lot of sense at first, but once we style it and add a little jQuery, that will change.
And we should have something simple like this:
So, if we look at this little snippet, we see that our pagination links will be contained within an unordered list, with the actual link text held within a span tag. Now on to our CSS:
#pagination
{
list-style-type: none;
}
#pagination li
{
float: left;
margin-left: 20px;
}
#pagination a
{
display: block;
width: 15px;
height: 15px;
background: #000;
text-decoration: none;
opacity: 0.60;
border-radius: 50%;
}
#pagination a:hover
{
opacity: 1;
background: #4362E0;
background-image: linear-gradient(bottom, #0F2FD1 17%, #4362E0 59%);
}
#pagination a:active
{
box-shadow: 0px 3px 2px 1px #0033ff inset;
}
#pagination a .number
{
font-family: sans-serif;
color: #FFF;
border: 1px solid #4362e0;
padding: 5px 8px;
text-shadow: 1px 1px #2C2C2C;
position: relative;
top: -30px;
margin-left: -6px;
box-shadow: 1px 1px 1px #2C2C2C;
background: #4362E0;
background-image: linear-gradient(bottom, #0F2FD1 8%, #4362E0 76%);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
For brevity, I have left out vendor prefixes. I would definitely suggest you add those (at your discretion), so as to have similar pagination no matter what browser the site is being viewed in (in a perfect world, everybody would just use Chrome). Now we should have something like this:
In case you’re having a hard time following along with all of that CSS, let’s take a quick look at what’s going on.
#pagination
{
list-style-type: none;
}
#pagination li
{
float: left;
margin-left: 20px;
}
Not a whole lot here. Basically, we’re removing the discs that are normally prepended to all list items in an unordered list. (this may or may not be necessary if you are using a reset stylesheet). Secondly, we’re floating all of our list items to the left, and separating them by twenty pixels, giving each of our links room to breathe.
#pagination a
{
display: block;
width: 15px;
height: 15px;
background: #000;
text-decoration: none;
opacity: 0.60;
border-radius: 50%;
}
#pagination a:hover
{
opacity: 1;
background: #4362E0;
background-image: linear-gradient(bottom, #0F2FD1 17%, #4362E0 59%);
}
#pagination a:active
{
box-shadow: 0px 3px 2px 1px #0033ff inset;
}
Now we’re doing a few things to the actual link. Remember when I said that having the <span></span> tags might seem a little weird? Well that’s because we’re going to separate the numbers from the actual thing we want the user to click on (the link).
So first off, we’re going to set display:block so that our links display properly with no content, and give them a width 15×15. You can make yours bigger or smaller, depending upon your preference. We’ll set the background to black, and make it slightly opaque so that it only sort of shows up over your original background. Again, this all a matter of preference and styling, so feel free to change it however you like! Finally, we’ll give it a border radius of 50%, to give it that nice circle-y feel. You may need to adjust this if you opted to go for a circle larger or smaller than 15×15 pixels.
Then, we’ll just change what happens during certain events using the :hover and :active pseudo –selectors. In :hover, we’ll remove the opacity, so that the link is 100% visible, as well as create a bluish sort of gradient, so that the user knows which circle they are currently hovering over. You’ll notice that we have specified a background color before the gradient. That way, some older browsers that don’t like CSS gradients will have something to fall back on. And in :active, we’ll just add a slight inset box shadow, to give the appearance of the user pressing down on the “button” we have created.
#pagination a .number
{
font-family: sans-serif;
color: #FFF;
border: 1px solid #4362e0;
padding: 5px 8px;
text-shadow: 1px 1px #2C2C2C;
position: relative;
top: -30px;
margin-left: -6px;
box-shadow: 1px 1px 1px #2C2C2C;
background: #4362E0;
background-image: linear-gradient(bottom, #0F2FD1 8%, #4362E0 76%);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
Now this is where the real magic happens. Here we are styling our “tab” that will pop up as the user hovers over our links. First things first, let’s remove that silly serif from our text. Once that’s done, we’ll set the font color to white, and begin styling. I apologize if my styles seem a little scattered at the moment. I will definitely fix that in future posts! The next few styles are simply aesthetic, and give our numbers a little cushion on all sides, a slight text shadow, and a nice border that will complement our soon-to-be implemented background gradient.
After that, we set the position of our tab. We’re going to want to make the position relative to our anchor, so specify position: relative. Then we’ll move the tab 30 pixels up, and shift if over ever slightly using a negative margin. Again, you may need to change some of these values if you’ve changed others.
Then on to more styling! We’ll give our <span></span> a little box-shadow, to give it a nice 3D kind of look. We’ll also set its background to a gradient that is eerily similar to the gradient we gave the circles below. (again, adding a something for legacy browsers to default to), and finally, we’ll round out the top corners to give it that “tab” look that everyone goes crazy for. And that’s it for the CSS. Again, there is a lot of CSS3 in there, and so it would be best to throw in some vendor prefixes where necessary, or you can use some a free jQuery plugin, such as PrefixFree to get rid of that necessity. Now on to the jQuery. This is what’s really going to make our design pop, and there’s very little actual code involved!
NOTE: make sure that you have added jQuery to your page!
$(document).ready(function() {
$("#pagination a span").hide();
$("#pagination a").hover(
function(){
$(this).children('span').fadeIn(250);
},
function(){
$(this).children('span').fadeOut(250);
}
);
});
Simple as that. Let’s take a closer look at what’s happening here.
First things first, we’re hiding our .number <span></span>, so that it is initially unseen by the user. Then, we’re attaching a hover() event listener to our link with a function for when the user hovers over our link, and when they move their mouse away from the link. These functions are just simple jQuery fadeIn/fadeOuts, so it shouldn’t be anything too difficult to comprehend.
And that’s that! A simple, working HTML/CSS3/jQuery pagination solution! I realize that it isn’t the prettiest thing in the world, and feel free to mess with the styles as much as you’d like!
Next time, I’ll discuss implementing this into a WordPress theme with ease!
