You are Here: Home / Articles by: Troy Templeman

LayoutPress 1.3.2

Upon the release of WordPress 4.4, a couple compatibility issues popped up with LayoutPress, which are fixed in this update. Bootstrap was also updated to the latest version. Happy New Year!

1.3.2

  • Fixed Layout Editor conflict with WordPress 4.4.
  • Fixed Row and Column expand/collapse control location in WordPress 4.4.
  • Updated Bootstrap to version 3.3.6.

Compatibility

Up to WordPress 4.4

Introducing LayoutPress Lite

The most common request we’ve received since launching LayoutPress is being able to try it before buying it.

To answer this request, today we are releasing a free version called LayoutPress Lite. This version is currently pending review for submission into the WordPress Theme Directory but in the meantime, we are making it available free to download here. It can also be dowloaded on the homepage by clicking the Try Now button.

Installation

  1. Download LayoutPress Lite.
  2. Install WordPress (if not already installed).
  3. Login to your WordPress Dashboard.
  4. Go to Appearance > Themes.
  5. On the Themes page, click Add New.
  6. On the Add Themes page, click Upload Theme.
  7. On the Add Themes page, click Choose File to locate the LayoutPress .zip file. Click Open. Click Install Now.
  8. On the Installing Theme from uploaded file page, click Activate.
  9. To start using LayoutPress, go to Appearance > LayoutPress.

Using LayoutPress Lite

LayoutPress Lite will give you an excellent idea of how the full version of LayoutPress works. The only limitation when compared to the full version is that you can only edit three templates – header, index and footer. However, if you want your website to have the same layout throughout, LayoutPress Lite is all you need!

LayoutPress Lite Templates
The Drag and Drop Page Layout Editor is exactly the same as in the full version. This lets you easily create a grid system by adding rows and columns and dragging native WordPress widgets into desired position. To learn more about editing templates, click here.

LayoutPress Drag and Drop Page Layout Editor
We are happy to let you try LayoutPress with this version and if you enjoy it as much as we do, we encourage you to upgrade to the full version to receive extra features.

Upgrade

If you decide to upgrade to the full version of LayoutPress, you will receive the following additional features:

Try Now Buy Now

LayoutPress 1.3.1

It was recently found that on some servers with older versions of MySQL, it was not possible to save the addition of new rows, columns and widgets. This version fixes that issue by making LayoutPress compatible with all versions of MySQL, as well as fixing minor debug error messages in the LP Code and LP Editor widgets.

1.3.1

  • Added compatibility with all versions of MySQL.
  • Fixed debug error messages on LP Code and LP Editor widgets.

Compatibility

Up to WordPress 4.3

Introducing the LP Editor Widget

In the recent release of LayoutPress 1.3, one of the biggest features added was the LP Editor widget, a WYSIWYG editor to add and format plain text, HTML or PHP.

This editor is based on the popular CKEditor and allows you to easily add content in LayoutPress with common word processor features and without any HTML knowledge. The content that you add is automatically converted to HTML, which can be edited by clicking the Source button in the editor toolbar. It also supports PHP, making it a powerful alternative to the LP Code widget.

layoutpress-lp-editor-widgetTo use LP Editor:

  1. Click on the widget title bar to expand the widget’s interface.
  2. Under Widget Class, enter the class of the widget (if desired).
  3. Under Title, enter the title of the slide (if desired).
  4. Under Content, enter the desired content inside the editor.
  5. Click Save to save the widget’s customization.

For more information on how to use the editor, please visit www.ckeditor.com.

LayoutPress 1.3

In our biggest update to date, LayoutPress 1.3 is packed with bug fixes, formatting fixes, framework updates and a partial rewrite to increase compatibility with third party widgets. In addition, the new LP Editor widget was added, which provides a WYSIWYG editor for adding and formatting text, HTML or PHP.

1.3

  • Fixed how widgets are generated by using WordPress widget function instead, making it more compatible with third party widgets.
  • Added extra WordPress widget hooks to help resolve potential issues with widgets that load their own scripts using standard WordPress method.
  • Fixed bug where widget “Save” button doesn’t work in latest WordPress version.
  • Removed the post pagination heading on static pages.
  • Added title to search results page.
  • Added title to archive page.
  • Fixed bug where post thumbnails weren’t displaying.
  • Added LP Editor widget, a WYSIWYG editor for text, HTML or PHP.
  • Updated Bootstrap to version 3.3.5.
  • Updated jQuery to version 1.11.3.

Compatibility

Up to WordPress 4.3

LayoutPress 1.2.1

Change Log

  • Fixed bug that caused comment list not to display on single post page.
  • Added copyright declaration to style.css.
  • Updated README.txt file and formatted in standard plugin readme.txt markdown.
  • Updated Bootstrap to version 3.3.2.

Compatibility

Up to WordPress 4.1

LayoutPress 1.2

On the heels of LayoutPress 1.1 being released, Bootstrap was updated again and a couple more bugs found, which have been fixed for version 1.2.

Change Log

  • Fixed bug in LP Code widget where characters ‘ and \ don’t save in widget setting.
  • Fixed bug where “include header” and “include footer” doesn’t remain unchecked.
  • Fixed flicker on arrows when resizing columns.
  • Removed warning when LP Loop widget isn’t included in layout.
  • Removed white space in header and footer scripts.
  • Updated Bootstrap to version 3.3.1.

Compatibility

Up to WordPress 4.1

LayoutPress 1.1

It’s been several months since LayoutPress has been released and feedback has been great but a couple minor bugs were found. They have been fixed along with some other tweaks and updates.

Change Log

  • Fixed bug where widget settings would only be saved in Layout Editor if “Save Layout” button was clicked in addition to widget “Save” button.
  • Fixed bug where some widgets pop out of columns when expanded.
  • Removed default menu styling from style.css.
  • Updated Bootstrap to version 3.2.0.
  • Removed unused files/folders.
  • Improved security.

Compatibility

Up to WordPress 4.0

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