Theming

PageLines has one the worlds most advanced theming engines and is bff's with LESS. This means that building themes with PageLines will actually make you feel like a super hero.

Why theme with us?

Why theme with us?

To start, we've got the best theming engine around. Second, you can make hella bank if you get your theme on the store.
LESS & Bootstrap

LESS & Bootstrap

We've fully embraced LESS and Twitters Bootstrap libraries. Save time and headaches with pre-packed amazingness.
Live on the edge

Live on the edge

With the PageLines Beta plugin, you'll have instantaneous access to bleeding-edge commits by our Unicorn loving developers.

In Framework

LESS can be used within the Custom CSS box, located under Custom Code within PageLines. Variables can also be assigned here as well. This is the easiest way to get started with LESS.

Customize Plugin

Adding a style.less file will let you use all the features of LESS, just as a child theme would. If you don't need sections, and want to utilize a code editor, this is the way to go.

Child Theme

Using a child theme is the professional way to theme using PageLines. With LESS, and custom sections, you can easily package and sell your themes on the store.

Method Comparison Chart

In Framework Customize Plugin Child Theme
Can use LESS yes yes yes
Safe from updates yes yes yes
Custom Sections no no yes
Custom Page Templates no no yes
Makes you a better person no no yes

Child Theme Structure a dissection without the smell

FREE Theme Example - MUD Theme
MUD Theme

Theme Demo:http://demo.pagelines.com/mud

Project Home:http://pagelines.com/store/themes/mud/

This holy-smokes-it's-free theme is completely free for personal use, and commercial use, and was designed to give you an idea of what's possible with some CSS foo and PageLines Framework. Download the PageLines Theming Kit.

/sections
Your custom and modified sections live inside this directory.
setup.php
Loads the parent theme. Don't tamper with this. Gnomes are watching you.
info.txt
Provides long description for store, and changelog
style.css
Used to identify as child theme to the parent theme
style.less
All custom LESS and CSS live here
functions.php
All custom hooks and actions live here
welcome.php
It's highly recommended (but optional) to have a welcome panel with appropriate info.
16x16 welcome.png
Welcome panel will autoload a 16x16 icon named welcome.png
thumb.png
Artwork sized 300x225 used throughout the theme and store to identify theme
splash.png
Artwork sized 750 x 350 - only needed for selling on the PageLines Store
screenshot.png
Theme screenshots used on the PageLines Store. If multiple screenshots are desired, number appropriately. Ex: screenshot-1.png,screenshot2.png, etc.
PageLines Hook Examle

We've just about included the entire Twitter Bootstrap library. We've made a few mods to fit inside the framework, so markup such as the grid is a bit different. Check out the "Grid" link on the Tools page on the demo for markup samples. All of your classes are still included, as are the colored variables. We haven't included the progress bar, or any of the other "app" type of CSS. If in doubt, check out the /less directory within the theme to see what libraries we've kept.

Bootstrap by Twitter

Methods

LESS can be used together with PageLines in a number of different ways. It all just boils down to personal preference. A few methods are outlined below.

Variables

You assign a variable like @mud-base to a value like #6e0000. Then, you use it like p {color:@mud-base;}. We have a wide assortment of variables ready for you to use.

Mixins

Mixins are sets of CSS rules. A common mixin is the box-shadow property. With LESS, there's no more writing vendor prefixes. PageLines has a library of built-in mixins, outlined below.

Tip:Disable the LESS caching system while working locally. Simpy add define('PL_LESS_DEV',true); to your wp-config file, and this will turn off the caching system. DO NOT use this on a production rig, or you'll face a nuclear melt-down. You have been warned!

Note:Using PageLines LESS variables will seal a dynamic relationship between the users Color Controls in Wordpress admin. LESS variables can be used within the Custom CSS/LESS box in Wordpress admin, and within any style.less file. Example: color:@pl-text;

Color Variables

These variables are controlled by the users set Color Options in Wordpress admin. Example Use: color:@pl-text;

@pl-text Body text color
@pl-link Link text color
@pl-header Heading color
@plHeaderFont Heading font family
@plHeaderWeight Heading font weight
@pl-footer Footer text color
@font-size Default font size
@line-height Default line height
@plBaseFont Font family
@plBaseWeight Font weight
@plAltFont Alternative font
@plAltWeight Alternative font weight

Layout Variables

These variables are built upon the users layout settings in Layout Editor, in Wordpress admin. Example Use: max-width:@pl-sdebar-width;

@pl-base Page background color
@pl-page-width User set page width
@pl-content-width Uset set content width
@pl-responsive-width User set responsive width
@pl-sidebar-width User set sidebar width
@pl-secondary-width User set secondary sidebar width

Note:These variables are set dynamically by the user under Layout Settings, and are helpful for layout out pages manually, or for applying to certain elements in a child theme. It's worth noting, that if a page is set to full width, the following variable @pl-sidebar-width will not return anything.

Color Variables

If you are creating a theme, or section, using these variables will ensure that your section or theme is styled automatically. Their values, will change dynamically using different shades of the users set background color in Color Control. Here's an example of these variables used with a white background. Here's an example of those same variables, used on a black background. And, here's a final example of those same variables again, used on a blue background.

@dark-base
@light-base
@baseContrastSlight
@baseContrast
@baseContrastMore
@baseContrastDark
@baseContrastDarkMore
@baseLighter
@baseLighterMore
@baseLighterMost
@baseDarker
@baseDarkerMore

Path Variables

@{plChildRoot} Used to specify root Child theme URL
@{plRoot} Used to set Parent theme dir
@{plSectionsRoot} Used to specify /sections dir
@{plExtendRoot} Used to specify section root in pagelines-sections plugin
@{plPluginsRoot} Used to specify base plugin path directory

Example Uses

// in sections
.foo{background: url(@{plSectionsRoot}/yoursection/img/bar.png);}

// in child themes
.foo{background: url(@{plChildRoot}/img/bar.png);}

Bootstrap Mixins

.border-radius() Round the corners of an element. Can be a single value or four space-separated values
.box-shadow() Add a drop shadow to an element
.transition() Add CSS3 transition effect (e.g., all .2s linear)
.box-sizing() Change the box model for an element (e.g., border-box for a full-width input)

Note:These are only the most common mixins that are pre-packed together with PageLines and the Twitter Bootstrap Library. Visit this page to see the entire mixin library.

Example 1: Border Radius

.foo {
  .border-radius(5px);
}

Example 2: Box Shadow

.foo {
  .box-shadow(inset 0 1px 0 rgba(255,255,255,0.8));
}

Example 3: Multiple Box Shadow Properties

.foo {
  .box-shadow(~"inset 0 1px 0 rgba(255,255,255,0.8),inset 1px 0 0 rgba(255,255,255,0.8)");
}

Example 4: Gradient

.foo {
  #gradient > .vertical(@blue,@green);
}

Hooks and filters are for the l33t; for those who aren't scared to dive in and make PageLines do things it's not meant to do out of the box.

To put it most elegantly, you can change things that are hard-coded with filters, and you can add things using hooks.

We have hundreds of "static" hooks already built-in. In addition, each custom section generates 4 "dynamic" hooks automagically.

See all static hooks →
pagelines action

Example of a hook, found within the MUD Theme.

PageLines Hook Examle

The image on your left, shows an example of hooking into the excerpt to show our own comments link. This hook lives in the functions.php file of our MUD sample theme, available within the PageLines Theme Kit below. In addition to the static hooks, each custom section you might create, will generate 4 "dynamic" hooks automagically.

  • pagelines_inside_bottom_yoursection
  • pagelines_inside_top_yoursection
  • pagelines_before_yoursection
  • pagelines_after_yoursection
Localhost

If you don't know a "localhost" is, then that's where you have to start. We work with Wordpress installed "locally" which essentially means turning your computer into a web server. There are quite a few tutorials on the web to show you how to do this like this one, or this one.

Version Control

Ditch the freakin' terrible program (A.K.A - FTP), and get onto version control. Ever taken down a site through FTP by accident, or over-written something? Pretty hard to roll back on that when it's toast! That's why we use Git.

PageLines Version Control
Code Editors

All code starts with some type of code editor. The best editors strike a balance between usability, package syntax, and "get out of my way" editing. These are a couple that we use.

Git Clients

Git Clients are like the vehicle to transport the code to it's destination. We use Tower for Mac, although there are many out there available. Mostly Mac based.

Beanstalk

Beanstalk is a premium service, that serves as a Git repo, with the added bonus of auto-deployment to your server. This service takes FTP out of the equation completely, not to mention that your code is now tracked with the option to rollback. Using Tower, together with Beanstalk, means one-click deployment.

      

We want you to build beautiful themes (then sell them on the PageLines Store), so we've built a full custom child theme built with all kinds of great stuff so you can get a full hands-on experience with what it feels like to develop using LESS and PageLines.

What's inside:

  • custom child theme called MUD
  • base starter theme
  • LESS cheet sheets
  • theme welcome panel

MUD Theme

MUD Theme

Inside your kit you'll find the MUD Theme; a full custom child theme packed with custom LESS, actions, and more for you to run with.

Base Theme

Base Theme

A blank child theme template. Does not include the welcome panel, but can setup just by adding welcome.php & welcome.png files.

Cheat Sheets

Cheet Sheet

A printable page with PageLines variables, mixins, and more right at your finger tips for easy reference.

Take a ride, a magic video ride as we recreate the front page of Tom's Shoes. The videos covers a quick overview, then dives right in to recreate the layout. The CSS was written prior to the video, but is very minimal, mostly adding elements to the navigation and reducing some default padding.

It's meant to show you how quickly, and easily it is to get professional results with very little time. In our case, just under 10 minutes.

Enroll in the developer program!