Theming with PageLines

There are many different ways to theme with PageLines, but today we’re going to talk about, what is in my opinion, the best way to build a PageLines child theme. For the purpose of this tutorial I’m going to refer you to Nicks Base Theme, a skeleton folder structure to get you on your way. It serves as a basis for any new PageLines theme I start.

PageLines & LESS

With PageLines utilizing LESS, you have to throw out the normal notion of theming. With PageLines, it’s core library of LESS variables, and onboard compiler, it very much becomes an “all-in-one” package. All you need is a text-editor (I use Sublime), and a browser. With PageLines child themes, we can control every aspect of the style without having to override the CSS. Sound confusing? It can be, but hopefully you’ll have a greater understanding once you’ve finished reading this.

The styled bits of PageLines are located within the /less directory. In this directory you’ll find dozens of LESS files. You’ll also find a style.less file in every section within core, and on the PageLines Store. These files are then combined, and cached, on save or section activation, into one dynamic and virtual css file.
Child themes also have a style.less file. This .less file holds all of the themes styles, leaving the CSS file void of anything (other than the document headers which load the theme in WordPress). So all of your LESS syntax (which is really like raw meat, unprocessed CSS), goes into style.less. Great.

Some Logic

So let’s say you want to get rid of the padding on .hentry-pad. Normally, it has a padding-bottom of 20px or whatever. So you’d peck .hentry .hentry-pad {padding:0;} into place, which does the job, great. But now both are loading. We can clean this up completely. All you have to do is create a /less folder in your child theme, and copy .pl-core.less from pagelines/less to your child theme’s /less directory. What happens, is that the compiler will see that you have the same file in your theme, and will compile that instead of the one in core.

This is huge! This means that PageLines, has one of the cleanest theming methods around. This also means you could create an entirely new theme using the compiler and options API. What I mean by “clean” is that there’s no CSS overwrites in source, keeping it squeaky clean. It’s really quite brilliant.

So what I recommend is copying over a few files to start with, including variables.less, colors.less, and mixins.less. Try something like, alter the main color of @red to something else. Then watch as the entire framework reflects your change instantaneously. Don’t want a reset.less? Erase the contents, and leave the empty file in your child themes /less directory. Then poof! No reset.less.

Variables & Mixins

Your custom variables for color and stuff, those guys can go into variables.less, or colors.less. Really doesn’t matter which. Then, you can utilize those variables in your child themes, sections, LESS file. The same goes for the mixins. Add your custom mixins to mixins.less in your child themes /less directory, then you can use those mixins across your entire child theme, and style.less files presiding inside sections, in your child theme. Now that is some Inception type shit right there.

Sections

Sections can live inside the /sections directory in your child theme. These sections will load first, over core if the same one happens to be duplicated. Sections are really the “meat” of a child theme, and hold pretty much all the content and interactivity. So with that being said, most of the actual “theme” lies within the sections. Maybe a custom home page section running a query fetching featured posts, or maybe it’s an all-in-one sliding section with multiple content sources. The point is, the design of the theme, lies within the sections. Combining and massaging them into a final piece, now that is the art of logic.

Functions

So most of the sections of your theme and, maybe the theme in general will have some options for the user. These can all be combined into one super options panel, that can live as a tab under Site Options–>Your Theme within PageLines admin. The best way to do this, is to create a new PageLines Options Tab with a sweet little function. You can see an example of this within Nicks Base Theme’s functions.php.

Ideally it’s all combined into class for extra-special awesome-ness.

Looking Forward

So how long will this method be the best method? How long until it becomes obsolete? Well, that’s pretty hard to tell. What we do know is, PageLines V3 is actively being developed, and from what I’ve seen, themes will be treated differently. I’ve seen the first bits of V3 and holy-amazing awesomeness, it’s going to blow some socks off that’s for sure. Nobody, and I mean nobody, is doing it like the guys are doing with V3.

2 Replies
filed under
  • Dobri:

    This sounds absolutely great, thanks! What happens when the core .less files change though? Isn't that a concern when I completely replace the file being compiled?

    Tuesday 18th June, 2013, 12:00am

    • Nick:

      You're only copying the .less file from pagelines/less into yourchild/less, and those core less files rarely change. As long as a file of the same name is in yourchild/less it will skip over pagelines/less

      Tuesday 18th June, 2013, 12:00am

  • DMS Child Themes: Demystified - Better DMS:

    […] Further Reading & Resources http://demo.pagelines.me/theming/ http://docs.pagelines.com/developer/dms-theming http://nichola.us/theming/theming-with-pagelines/ […]

    Monday 30th September, 2013, 12:00am