Making WordPress dynamic, Thematic PJAX
WordPress
It’s no secret that WordPress is very popular, an incredible “14.7% of the top million websites in the world use it” and “22 out of every 100 new active domains in the US are running WordPress” (August 2011). Here at Stackd we host a lot of WordPress websites (most of our customers have at least one). Just like our customers that use WordPress, we’ve done our fair share of WordPress development.
Building “fluid dynamic” websites
WordPress is great, but out of the box it doesn’t (easily) allow for an emerging web development paradigm: the “fluid dynamic” website. Wait, “fluid dynamic” what?! So we might have made that one up, but you know it when you see it (or rather, feel it). It’s also known as SPA (Single Page Application), SPI (Single Page Interface), and the concept has been talked about as early as 2003. Basically, these websites strive to be like dynamic applications (ala desktop/native apps) with different “states” as opposed to the traditional “pages” of a document.
There is typically a perceivable transitional jolt from one page to the next. The next page’s data is retrieved from the server, the old page is unloaded, and the new page is rendered to screen.Stable UI affordances, such as toolbars, navigation elements, database query results and so forth, continually disappear and reappear.
For example, Twitter feels lightweight and intuitive. Click around: panels, functionality, and information display and hide dynamically, minimizing full page refreshes to break our flow of attention.
Old “new” Twitter
Hype Machine is a nifty music aggregator that helps you discover new music.
Browse while you listen, Hype Machine
The Hype Machine keeps track of what music bloggers write about. We handpick a set of kickass music blogs and then present what they discuss for easy analysis, consumption and discovery. This way, your odds of stumbling into awesome music or awesome blogs are high.
Listening to music on Hype Machine doesn’t stop or get interrupted as you click from page to page, entry to entry. Pretty cool right?
AJAX and HTML5 PushState
The difference between these two websites is in the (implementation) details. To be able to bookmark and have a working back button, Twitter uses what’s called a hashbang !#, a Google indexable “state identifier.” Essentially, Twitter looks at the resource after the !# and delivers the appropriate content.
Hype Machine takes advantage of a new capability, HTML5 PushState in addition to AJAX (PJAX), to achieve its dynamism. Best of all, if JavaScript isn’t enabled or a web browser doesn’t support PushState, it degrades to a good ole full page load.
Extending WordPress and Thematic
Right now, trying to turn a WordPress website into an intuitive, single page interface is daunting. Some plugins exist, but require pain and suffering (eg. redefining templates and layouts) to make pages look the same, regardless of dynamic or full page loads.
However, many WordPress websites are powered by one WordPress project in particular, Thematic, a go to CMS/theme framework. We could go on and on why it’s great, but don’t take our word for it. Lead developers Ian Stewart, Chris Gossmann, and Gene Robinson have done an awesome job in creating a powerful and extensible starting point for any WordPress project.
I’m proud to introduce Thematic PJAX, a WordPress Thematic child theme that makes a “fluid dynamic” WordPress possible. It stands on the shoulders of giants to be the easiest way so far to create a SPI. It builds on everything awesome about Thematic (SEO, extensibility, infinite customizability, bulletproof layouts, open-source) and transforms WordPress into a platform as sophisticated as other PJAX/SPI websites.
Design philosophy
Thematic PJAX, ensures consistency by adopting Thematic as a foundation. Sites built with normal Thematic should just work, and different layout types (Archive, Links, Full width) all dynamically change and properly display. By default, clicking on the navigation element loads content asynchronously without a full page reload. Finally, widget areas and theme hooks all work as expected.
Getting started
Building your next WordPress project with Thematic PJAX is easy.
- Install Thematic.
- Download and extract thematic-pjax in the WordPress themes folder.
- Add custom functionality in functions.php and style to taste within style.css.
- PJAX functionality is controlled by the Thematic navigation menu. To override this behavior, modify thematic-pjax.js.
- Activate the Thematic PJAX theme in the WordPress Dashboard.
If you’d like to try the Thematic PJAX difference for yourself or get more information, be sure to visit the project website. To contribute to the project or report bugs, check out the code on GitHub.
