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.

1. Install Thematic.
2. Download and extract thematic-pjax in the WordPress themes folder.
3. Add custom functionality in functions.php and style to taste within style.css.
4. PJAX functionality is controlled by the Thematic navigation menu. To override this behavior, modify thematic-pjax.js.
5. 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.

It is often asserted that the poor man’s failure in the competition of the market is caused by his lack of education. Equality of opportunity, it is said, could be provided only by making education at every level accessible to all. There prevails today the tendency to reduce all differences among various peoples to their education and to deny the existence of inborn inequalities in intellect, will power, and character. It is not generally realized that education can never be more than indoctrination with theories and ideas already developed. Education, whatever benefits it may confer, is transmission of traditional doctrines and valuations; it is by necessity conservative. It produces imitation and routine, not improvement and progress. Innovators and creative geniuses cannot be reared in schools. They are precisely the men who defy what the school has taught them.

In order to succeed in business a man does not need a degree from a school of business administration. These schools train the subalterns for routine jobs. They certainly do not train entrepreneurs. An entrepreneur cannot be trained. A man becomes an entrepreneur in seizing an opportunity and filling the gap. No special education is required for such a display of keen judgment, foresight, and energy. The most successful businessmen were often uneducated when measured by the scholastic standards of the teaching profession. But they were equal to their social function of adjusting production to the most urgent demand. Because of these merits the consumers chose them for business leadership.

Ludwig von Mises - Human Action