The Layouts plugin adds drag-and-drop functionality to Bootstrap-based WordPress themes. It allows you to design page layouts from the WordPress admin. When you distribute Layouts-based themes, your end-users too can create their own new layouts and also edit the ones that you have created.

The Layouts plugin works with themes that are integrated with it and the ones that are not. The main difference is that when a theme is integrated with Layouts, you can use it to design any part of the site, from header, contents and sidebars, to the footer. When a theme is not integrated with Layouts, you can use it to design the content part of your site, while the rest is defined by the theme itself.

Technical requirements for Layouts integration

Layouts works closely with the Bootstrap grid system. Any WordPress theme that already uses Bootstrap can be easily integrated with Layouts. In order to use Layouts with themes that do not load Bootstrap, you first need to load the Bootstrap framework.

How Layouts plugin works

Layouts plugin creates new “layout” objects, which allow you to design themes using a drag-and-drop interface. A layout is based on the Bootstrap grid-system and includes rows and columns.

You can design layouts as templates for all posts in a post type, or you can design the contents of any specific single page on its own (for example a homepage or contact page).

Here are some example layouts and how you would typically assign them to content:

 

Page Layout Content Displayed How it Works
Homepage A homepage is a single page, just like “Contact” or “About Us” ones. You can create separate layouts to design the content of specific single pages or posts. A homepage typically displays content from different parts of the site. You can create Layouts cells with Views, which display lists of contents. You can also use the Visual Editor cells to add texts, media, or post fields.
Post belonging to a custom post type A template layout is used to display all single-item pages belonging to a (custom) post type. It normally displays different post fields that belong to that item. Fields are displayed using any number of Visual Editor cells.
Archive page An archive page displays a list of content items. The WordPress Archive cell lets you design how this content list is displayed. You can even add a custom search to the WordPress Archive cell to allow visitors to filter the listed contents based on different parameters.

Kinds of cells that Layouts supports

The cells library that comes with Layouts offers flexible functionality without clutter. Instead of a bloated list of cells, with numerous configuration options, Layouts gives you cells that work as building blocks.

Here are some of the cells that you will find in Layouts:

 

Cell Example What it displays
Visual Editor
 Static texts, media, and post fields
MenuMenu Cell Backend Menu Cell Frontend WordPress menu
WidgetWidget Cell Backend Widget Cell Frontend A single WordPress widget
Widget Area A whole Widget area with all the widgets it contains. Widget areas can be edited on the Appearance -> Widgets page.
Comments
 Comments Cell Frontend The comments section for pages and blog posts
ViewViews Cell Backend View Cell Post Grid Frontend Lists of content like posts and pages
Toolset form
 Forms Cell Frontend A form for front-end content submission and editing

 

When you are ready to start building your custom cells, we recommend reading a tutorial about turning your PHP code into Layouts cells 

PHP integration for Layouts

As mentioned above, if you want to use Layouts to design your whole site, including header, sidebars, and footer, you need to integrate your theme with the plugin.

This is done by editing the template files and replacing the standard WordPress output with the Layouts plugin output. Most themes have an output loop that looks similar to this:

while ( have_posts() ) : the_post();

          …

endwhile;

 You need to replace it with a single function for Layouts render:

the_ddlayout();

For detailed steps, please read the guide on integrating Layouts with themes.

Now that your theme is integrated with Layouts, you might be wondering what should be your next steps. Here are the steps that Toolset team recommends for your Layouts-based designs.

  1. Do a ‘paper design’ of the layouts of different parts of your site
  2. Identify elements that appear on every page (like header and footer) and create a parent layout for them. Create child layouts for the different page layouts (read more on hierarchical layout design).
  3. Create the Views, WordPress Archives, and Forms cells for different parts of the theme.
  4. Use the Layouts Cells API to turn your existing PHP code into drag-able Layouts cells.
  5. If you are creating themes for redistribution, please refer to our documentation about building Toolset-based themes.