Building Micro Web Applications using WordPress Pages
WordPress is a state-of-the-art publishing platform, and is one of the updisputed darlings of the Open Source and Web 2.0 world, it’s fair to say we’re all avid users of the platform here at NM towers.
With a little creativity and imagination, it’s relatively simple to build some additional functionality around the core content of your website, using WordPress as the application framework. It’s perhaps a little unconventional to do this, if I were faced with building a Web application from scratch, WordPress wouldn’t be the first choice to spring to mind, however there may be good reasons for choosing WordPress, despite the stiff competition. If the heart and soul of your website requires a solid publishing platform, but you want to tack on a few bells and whistles, then I would say WordPress is a viable option.
WordPress introduced the concept of Pages way back in version 1.5, to allow for the creation and management of static content pages outside the normal blog chronology. This shifted WordPress away from a blogging platform, opening up new possibilities for using it as a CMS.
WordPress Pages are deceptively powerful little things, each page can be handled by a different template, and so is a potential window into a micro Web application. Having the ability to attach arbitrary bits of data to a page through Custom Fields strengthens this position.
I’d like to describe a few techniques I’ve found useful when using pages in this manner.
Abstraction
First of all, a quick word about abstraction: just because you can scatter complex PHP code throughout your page template, doesn’t mean you should. Be kind to your presentational layer: keep the templates lean and mean, abstract away the more complex PHP into your theme’s functions.php, essentially creating your own custom set of Template Tags. OK, rant over.
Pretty URLs and Pagination
WordPress has an internal rewrite rule engine that enables content to be accessed via pretty, search engine friendly URLs, or permalinks. In fact, you can create your own custom rewrite rules using this engine, as described over here. However, if you just need to provide pagination over your page-constrained app, then WordPress provides a lesser-known rewrite rule: Paged Pages. So, if you have a page that can be accessed by the permalink /gallery/, this page can automatically be accessed by the permalinks /gallery/page/1/, /gallery/page/2/, … /gallery/page/{N}/. Essentially this allows for your page to be paged. Sounds like nonsense I know, but in this context your page is acting as a micro application, and pagination is crucial when displaying large amounts of information. So WordPress does the difficult part for you. Your job is to handle the pagination withn your page template. The key is getting a handle on which page of the micro-app your visitors are viewing, fortunately WordPress has an internal Singleton class instance, $wp, which can tell us this, cue code snippet:
Here, the get_page() method of the GalleryController class examines the ‘paged’ element of the $wp->query_vars array, and performs some sanitization, ensuring the page is at least 1, and that it is an integer.
/**
* Controller class for the Gallery Page
*/
class GalleryController {
// ...Code snipped...
/**
* Gets the current page of the gallery
*/
private function get_page() {
global $wp;
// Sanitize the current page, make sure it's an int and that it is at
// least 1, return 1 by default
return isset($wp->query_vars['paged']) ?
max(1, intval($wp->query_vars['paged'])) : 1;
}
// ...Code snipped...
}
OK, the next piece of the pagination puzzle is to ensure our micro-app spews out the appropriate permalinks. We don’t want to hard-code the base part of the permalink (what WordPress calls the page ‘slug’) into our application, as these are editable through WordPress. Fortunately WordPress provides assistance here as well, through the ‘matched rule’ property, we can use the following method to get the base part of the URL, and then append the /page/{N}/ part onto the base:
private function get_base() {
global $wp;
if (preg_match("|{$wp->matched_rule}|", $wp->request, $matches)) {
return $matches[1];
} else {
return false;
}
}
Note, this approach also works if the gallery is a sub-page of another page, get_base() would return /parent/sub-page/ in this instance, up to an arbitrary number of levels. The issue of rendering the appropriate content on the appropriate page is all that remains, that would be handled by the internals of the controller for your app.
Database
Lastly, every good web app needs a good database API, and the WordPress API is intuitive and I’ve found it effortless to get to grips with. It can be accessed through the Singleton $wpdb instance, here are a few key methods you’ll probably want to use:
- get_var() — returns 1 variable from the database, given a SELECT statement
- get_col() — returns 1 column from the database, given a SELECT statement
- get_row() — returns 1 row from the database, given a SELECT statement
- get_results() — returns multiple rows from the database, given a SELECT statement
- update() — updates existing data, given a table name and an array representing the single row to be updated
- insert() — inserts a new row, given a table name and an array representing the new row
- query() — for executing any database queries, update() and insert() are essentially specific wrappers around query()
- prepare() — prepares a query for safe use, given a SQL statement that uses sprintf syntax
That about wraps it up for now! We have the makings of an MVC approach using Pages and the WordPress API here, with the page template acting as the View, the controller class acting as the, errr, Controller, and the database API being used by a separate Model class. It probably needs fleshing out slightly, though!
I’ll publish links of our work that use this approach as and when they are available. In the meantime, does anyone else have examples of using WordPress in creative and innovative ways? Please share details in the comments below…
Steve wrote this on 25.04.08 – 7 comments
It's filed in the Blogging, Development, Web technology box
On May 15th, 2008 at 8:56 pm, Tochis responded:
Thank you for using my photo!
On May 17th, 2008 at 2:01 pm, Gary responded:
Thanks! Just what I was looking for! I’m just beginning to think about how I might do a site that makes it easy for teachers to generate beginning readers for kids with disabilities who are just learning to read. Think of the picture books you read when you were 4 except change the content to be interesting to a teenager. Wordpress is likely not the best platform for this but it has lots of what I want. Anyway, this article was very helpful.
On May 19th, 2008 at 12:02 pm, Steve responded:
@Tochis — you’re very welcome!
@Gary — glad you found this useful, I can see how WP is a good choice for what you’re trying to do, being such a strong publishing platform. Good luck!
On May 21st, 2008 at 2:27 pm, Wordpress makes a fine application framework — Gary Bishop responded:
[...] features such a site would have and found lots of overlap with what Wordpress already provides. A blog post by Steve Winton over at NixonMcInnes encouraged me to examine the possibilities [...]
On November 25th, 2008 at 3:19 pm, Chris responded:
Thanks Interesting page have you looked at building dynamic content in a wordpress page from say a user driven query?
I would be interested to see if people have done this before using wordpress and a second MYSQL database?
On March 22nd, 2009 at 5:03 pm, Kwatog Tech » Blog Archive » Wordpress as Application Framework responded:
[...] I think a post over at graduallythensuddenly.com on “WordPress Makes Drupal Irrelevant” explains it further. And if you want to make your application adhere to the MVC(model-view-controller) framework, somebody has just explained how to do it over at nixonmcinnes.co.uk. [...]
On March 26th, 2009 at 4:16 pm, chrisw responded:
@Gary: Depending on how far your teachers want to go, it might also be worth looking at Moodle (www.moodle.org). From their site:
“Moodle is a Course Management System (CMS), also known as a Learning Management System (LMS) or a Virtual Learning Environment (VLE). It is a Free web application that educators can use to create effective online learning sites.”