Simple Pagination for ExpressionEngine

Simple Pagination is an addon for ExpressionEngine written by Dom Stubbs.  It allows you to create multi-page blog articles much easier than you would be able to otherwise.  I started using it when I redesigned this website last month, but I ran into a few issues shortly after launch.  Not wanting to hold up my site release I launched anyway, and told myself I’d get around to fixing the problems later.

Well with the help of Philip Cox, we made some tweaks to Dom’s code, and he’s kindly republished our work as an official version 1.2 of the addon.

Changes:

• Added print view (add /print/ to the end of the URL)
• Added classes to the page links to allow for more styling options.
• Changed {pagination_links} function to allow for more than 5 page links shown at once.
• Added {all_pagination_links}, for users who want links generated for every single page.

Again many thanks to Dom for writing the original addon.  Check out his other addons while you’re at it!

Pagination with style

To replicate the pagination style on this site, you can use the following CSS in conjunction with the addon.  Please try and modify the the styles somewhat to make it suit your own site if you can.

/* Pagination Links
------------------------------------------------- */

a.page-num,
a.prev-page,
a.next-page,
a.first-page,
a.last-page,
strong.current-page {
	display: block;
	float: left;
	border: 1px solid #b2d7d9;
	background: #fff;
	padding: 3px 6px;
	margin: 2px;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

a.page-num:hover,
a.prev-page:hover,
a.next-page:hover,
a.first-page:hover,
a.last-page:hover {
	margin: 1px 1px;
	padding: 4px 7px;
	color: #000;
	border: 1px solid #99c4c6;
	-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
}

strong.current-page {
	border: 1px solid #fff;
	margin: 2px 0;
}