Theming Post Pagination with WordPress

I came up against quite a challenge today in styling wordpress posts using the built in code and wp_link_pages function.

Eventually I got it working such that native functions are used and it looks great. A live demo is now available at the G&GR U20 Wrap.

Edit single.php
From:

To:

echo "

Select Page »

“;
wp_link_pages(‘before=

&after=

&pagelink=%&previouspagelink=Previous’); ?>

Add this to style.css

#page-links a .page-number {
background: url(‘images/pagination_normal_bg.png’) repeat-x top left;
height: 28px;
border: 1px solid #D1D1D1;
display: block;
float: left;
line-height: 30px;
padding: 0 10px;
color: #333;
margin-right: 6px;
line-height: 30px;
font-family: ‘BebasNeueRegular’;
font-size: 18px;
}

.page-number {
background: url(‘images/pagination_hover_bg.png’) repeat-x top left;
height: 30px;
border: 0px solid #D1D1D1;
display: block;
float: left;
line-height: 30px;
padding: 0 10px;
color: white;
margin-right: 6px;
font-family: ‘BebasNeueRegular’;
font-size: 18px;
}

.page-number:hover, #page-links a .page-number:hover {
background: #23631C;
color: #e9e375;
}