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.
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.
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.
I always wondered, why can’t you add widgets to any part of the page? Why can’t you easily change the layout?
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.
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.
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.
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.
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).
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).
Header / Footer 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.
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.
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.
Usually 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.
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 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”.
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.