Articles & Tutorials

The articles and tutorials here are provided free of charge, and are fueled by caffeine.

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;
}

2 Comments

  1. Picture of Ryan Cole
    Ryan Cole says:

    This looks interesting. Does it work better than the built in pagination? I had some trouble with that one as a lot of my pages have conditional content selected by the URL and that get’s a bit hairy when it makes something like thepage.com/p1/243. Looks like a great extension. I need to get on that for my own blog. :)

  2. Picture of Steve Dennis
    Steve Dennis says:

    I haven’t had *nearly* enough experience with EE to know whether it’ll work with your implementation sorry :)  Could be worth a try though, it’s pretty easy to implement.  Cheers!

Commenting is not available in this weblog entry.