Saturday, February 4, 2012

Introducing Skellie, a real wordpress theme skeleton

So lately at work I've been stuck doing custom wordpress projects to keep the money flow steady while others do the cool stuff -.-

Problem #1:
Everytime a new project started we picked a new "empty" base theme.

It was supposed to be the basis for building our own. But almost no project looked the same.
We always had to go in and change everything in the templates.

Sometimes html5 was not allowed, sometimes the structure had to be totally different and functionality was not needed.
Sometimes it was grid960, sometimes boilerplate with again our implementation changing like using scss or not.

So have fun cleaning and recoding all the stupid wordpress templates that your theme came along with.

We ended up using almost nothing from the initial template but were stuck with 100 functions within functions.php to which we had to add 10 more.

Problem #2
So I started from scratch until I reached a point contemplating about get_template_part.

If you don't know what that is (lucky you), it's basically including a different file with a fallback to a default file:.
So you can get_template_part('loop', get_post_type()) and if there's a loop-$postType.php file found it will be loaded.
Otherwise loop.php is loaded.

No other configuration can happen. Also all those template parts have to reside in your base theme directory.

My last project had around 45 template parts...
There had to be a better way of doing this.

Thoughts on Problem #1
I couldn't care less about theme inheritance.
There's no point if your theme has no functionality you really need.

So the best theme for me would be a theme with nothing in functions.php (or at most just a few commented out lines code so I don't have to lookup things like how to add custom thumbnail sizes).

I would not want my theme to decide what kind of css framework I'm going to use and would not like 100 stupid functions printing html that I would have to edit or never use.

Thoughts on Problem #2
I would love to at least be able to configure my template parts. Pass some parameters in cleanly so I can skip putting logic in them or splitting them into more template parts.

Also I would love the ability to group and structure them differently. I want my preview templates (that do not show the full content) in a preview folder. Template parts are not templates.

In combination with the above, how cool would it be if I could pass the excerpt length as a parameter to the template part and then maybe with more parametrization I wouldn't need more than 1-2 template parts.

Enter Skellie

Skellie is a real skeleton of a theme and attempts to solve the aforementioned problems:

Solution to Problem #1
  • Your functions.php will be empty apart from a function allowing Skellie to provide the view architecture and take over from wordpress.
  • Your layout will be minimal.
  • Your default partials will be non-existent apart from examples and so you can test how it works. 
  • There are no stylesheets or javascript. Modernizr and normalise.css are in place if you want them but not enabled.
  • The header is html5 but together with the footer it's just 20 lines so feel free to remove it.
 Solution to Problem #2

Layouts and Templates
Skellie provides partials and layouts and redesigns the way templates work.
The template is still the main part of the application.

A layout is the wrapper around your page content. Calling the header, footer and sidebars amongst other common things should be in the layout.

You can have several layouts like 3-columns, 2-columns-1-sidebar along with your default but you shouldn't need that many. All of them will be in the same directory (layouts/) in any case.

You can still select a template for your pages as usual. However your template can now select its layout using with a special comment (or assume default.php).

The template should now only contain the main content of the page and call upon partials to help it render stuff.

Partials
Partials are like views, getting rid of get_template_part. From within a layout, template or even another partial you can use
echo $this->partial('<slug>', '<type>', $args)
and it will looks for the first partial it finds located in the following paths:
  1. partials/<slug>/<type>.php
  2. partials/<slug>.php
  3. partials/<slug>/default.php
$args is an optional associative array. Everything you pass into it along with some default arguments will be accessible using $this.

E.g. if $args is array('someVar' => 'someValue') then $this->someVar will be 'someValue' within the partial.

Notes:
PHP 5.3 is required.
I am aware that using Closures with including files is weird.
If something feels still extra it will be removed.
The code is experimental and everything can change.
Feedback is appreciated.

3 comments:

  1. Hi Thanos, this is a very good idea — thanks.

    ReplyDelete
    Replies
    1. Let me know how it works out if you try it :)

      Delete
  2. Nice post. I was checking constantly this blog and I’m impressed! Extremely useful info specially the last part I care for such information a lot. I was seeking this certain info for a long time. Thank you and good luck. wordpress theme

    ReplyDelete