OOP in WordPress Themes

Like, really.

Created by @tforrer and @msebel,

Software engineers at Blogwerk.

Anatomy of a WordPress theme

  1. Predefined template hierarchy
  2. No defined structure for resources
  3. No (real) container for business logic

The template hierarchy

Disadvantages

If you need to provide a customer theme with many different templates and business logic, you'll some following problems:

  1. Everything is at root level: Page templates, template parts and the WordPress theme templates.
  2. With 50+ files, you'll have difficulties finding the right one.
  3. You might even get naming problems.

Why bother?

Fun fact: We're a WordPress agency. That's why.

We have 150+ individual customer solutions based on WordPress. What we want (need!) is reusability, standards, clean object oriented code, a meaningful file structure.

Example: twentyfourteen

  • This is not a bad example.
  • But it will "only" provide you with very basic blog functionality.
  • But what if we have to add more customer specific templates/views?

Request lifecycle

Theme object

Views

In complex themes you have a lot more views to store

ajax dialogs, backend views, widget content,

template parts, page templates, etc.

What's our goal?

Now how do we organize this?

Yo mamma already told you:

clean up your room

  1. Organize your files in a meaningfull way.
  2. Use *more* template parts.
  3. Add other HTML views, like AJAX dialogs.

Example: mobilesport.ch

  • Customer Theme with many views. It has a total of 60 views.
  • One of the first projects to use our oop-theme structure.
  • Views are separated by concerns.

Resources

What about everything else? (S)CSS, scripts, language files, images, fonts? You could do what you want here, but let us give you some advice.

The file structure

  • resources: fonts, images, language files, scripts, styles. Feel free for example to create sub folders like "backend" or "frontend" for styles.
  • src: Namespaced business logic.
  • views: HTML/PHP template files.
  • Theme Root: only style.css, index.php and functions.php to load the stack

Good to go: basic theme

Example

simple view template

  • View logic only in HTML
  • and basic template functions for the loop

Or you could use

Twig

as a templating system

Component-based theme extensions

Extend a theme, where no suitable / satisfying plugins exist

  1. Each additional functionality can be organized in components
  2. Register custom post types and taxonomies
  3. Register their specific views
  4. Provide backend customizations

Encapsulation

Another example of encapsulation. Recently we've had a severe case of "oh that class starts growing too big".

class Challenger extends Entity

  • Naming is important: We chose "challenger" instead of "user"
  • Has methods like "getProfileLink", "getDevice" or "getAvatar"

Encapsulation

Then we wanted to add friendship functionality to the challenger entity. While developing, we noticed, that it's a bit more complex than expected.

And suddenly the challenger class grew from 200 lines to around 500 lines.

Solution: Separating the concerns, by giving the friendship their own entity class. Now we have a 200 and 300 line class.

The results of encapsulation

The results of encapsulation

Examples

Website for ENSI based on WordPress

Individual Software on top of WordPress

A complex website: ensi.ch relaunch

Content organisation

Theme structure

Menu component

What about child themes?

they work too

but

  • Real inheritance of theme class (or component classes)
  • Resource and view files overridable in any location

stepchallenge.ch: Individual software

Connect your Fitbit, Jawbone or Withings device and challenge other users on the platform. The app should motivate end users to have more activity than their opponent over a period of time.

Why. On Earth.

Would someone use WordPress to code a web app?

Well, why not?

  • Most important: Namespaces, structure, components.
  • Second: I know WordPress inside out.
  • Make use of WordPress: Rewriting, page templates, static content, cache functions. Extend the backend with custom admin capabilities (e.g. challenge- or user management).

Load balanced WordPress infrastructure.

Outlook

Theme Tests

PHPUnit, Behat, mink, selenium

Dependency Management

MVC

Check us out

on Github

github.com/blogwerk/oop-theme-plugin
github.com/blogwerk/oop-theme-example

Follow us on Twitter

@tforrer, @msebel and @blogwerk