You are Here: Home / 2014 / May

Introducing LayoutPress

After a year in development, I’m proud to introduce LayoutPress. LayoutPress is a WordPress starter theme with an intuitive interface for visually creating page layouts with WordPress widgets, helping to rapidly prototype, design and develop WordPress themes.

Why LayoutPress?

I created LayoutPress because I needed a tool like it to help me build WordPress websites. I really love WordPress but one thing I don’t like is that it requires a fair bit of coding to create a custom WordPress theme. The more you want to customize it, the more coding you have to do, particularly if you want different designs for different pages. Although I enjoy coding to a certain degree, I’m a visual designer and prefer to do things visually.

The Problem

Something in WordPress that has always intrigued me is widgets (see image below). Being able to drag and drop modules into your page without coding makes it both easier to build a WordPress website and easier for the client to update it. However, the limitation with widgets is that they are usually only in sidebars (and sometimes footers) in most WordPress themes. Sure, you can add widget areas to other parts of the page – but that requires more coding that I don’t want to do.

WordPress Widgets

I always wondered, why can’t you add widgets to any part of the page? Why can’t you easily change the layout?

Research

I looked around to see if these questions were already answered and found there were several options available but most went above and beyond what I was looking for, offering many more bells and whistles then I needed. I understand that approach for catering to a large user base with a wide range of technical skills, but I just wanted a visual page layout editor that you could drag widgets into. Nothing more and nothing less. If I did require more, I could simply find and install plugins instead of bogging my site down with built in features I didn’t want or need.

The Solution

Since I couldn’t find what I was looking for, I decided to build exactly what I wanted – a lightweight and minimal starter theme that I could visually build page layouts with and drag and drop WordPress widgets into, using the least amount of code possible. Enter LayoutPress.

Underscores

When it comes to building WordPress themes, there’s no better place to start than with Underscores, a minimal WordPress starter theme created and used by the Automattic Theme Team to build free and premium WordPress themes. Starting with this would bake the standard WordPress coding conventions right into LayoutPress.

Bootstrap

It only made sense to also build in Bootstrap, the most popular front-end framework on the web. This would give LayoutPress a responsive grid system, dozens of interface components and useful JavaScript extensions.

Template Hierarchy

Something that was important to me was being able to edit templates in the WordPress Template Hierarchy. This way, only one template needs to be edited for similar post types, instead of creating templates on a page by page basis. Also important was being able to edit the headers and footers and the option to include them in each template, giving full control of the page from top to bottom, not only the content area in between. The result is the template list you are presented with when going to Appearance > LayoutPress.

LayoutPress Template Hierarchy
As you see, child templates are indented under their parent. Editing a parent template would apply its changes to all its children, unless the child template has already been edited (and hence “disconnected” from its parent).

Add Template

The template list above is only the most commonly used templates in the Template Hierarchy. To add more specific templates in the hierarchy, or even add custom page templates that you can later apply to single posts or pages, you can Add Template (eg. about-page).

LayoutPress Add Template

Header / Footer Scripts

There may be times when you may need to add custom header scripts and footer scripts for CSS stylesheets, Web Fonts, Google Analytics, JavaScript, etc. Instead of digging through the code to do this, they can simply be added in Header Scripts and/or Footer Scripts.

LayoutPress Header Scripts

Export / Import Templates

After editing your templates, you may be so happy with them that you may want to use them on another site! Export Templates lets you download your templates and Import Templates lets you import those templates to another site.

LayoutPress Export Templates

Drag and Drop Page Layout Editor

The real fun begins after you click on a template and you’re presented with the drag and drop page layout editor. This page looks similar to the standard WordPress Widgets page but the sidebars are replaced with rows and columns that you can build an entire grid system with. This grid is based on the 12 column grid system in Bootstrap, which is built into LayoutPress.

LayoutPress Drag and Drop Page Layout Editor
Here you can add rows, add columns, resize columns and drag widgets into columns. Clicking on the header of rows, columns and widgets expand and collapse them so you can maximize your workspace. There’s also the option to select or clone other templates without leaving the editor.

Site Customizer

LayoutPress Live CSSUsually after your done with the structure of your website, the next step is to style it. WordPress has a great built in Site Customizer but LayoutPress extends it by adding styling options for many key elements such as background, fonts, font sizes, colours and line height. In addition, you can add custom CSS styles that are applied in real time.

LP Widgets

In addition to standard WordPress widgets, LayoutPress comes with many custom widgets that add standard WordPress functionality and other commonly used modules:

  • LP Site Title – Automatically displays the Site Title, as specified in WordPress’ General Settings.
  • LP Site Description – Automatically displays the Site Tagline, as specified in General Settings.
  • LP Site Menu – Automatically displays the default WordPress site menu with links to all Pages.
  • LP Loop – Automatically displays the default WordPress loop for displaying WordPress content.
  • LP Code – Extends the default WordPress Text widget to allow HTML, PHP and JavaScript.
  • LP Image – Upload an image or select an existing image with the WordPress Media Uploader.
  • LP Carousel – Displays a Bootstrap Carousel with animating slides, pictures and captions.
  • LP Site Generator – A common footer element that displays “Powered by WordPress”.

Conclusion

LayoutPress has already sped up my web design and development workflow dramatically and I think it will do the same for you. For more information, please read the documentation or if you’re ready to get started, buy now.

Twitter

[twitter-timeline id=453565034719739904 username=layoutpress]

Facebook