You are Here: Home / Documentation

Documentation

Overview

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.

WordPress

WordPress Dashboard
LayoutPress is built for WordPress, the most popular Content Management System in the world, powering over 65 million websites. WordPress has over 30,000 plugins with any functionality imaginable, many of which have widgets that can be used in LayoutPress.

Underscores

LayoutPress is built on top of Underscores, a minimal WordPress starter theme created and used by the Automattic Theme Team to build free and premium WordPress themes. Therefore, the standard WordPress coding conventions used in Underscores are baked right into LayoutPress.

Bootstrap

LayoutPress uses Bootstrap, the most popular front-end framework for developing responsive, mobile first projects on the web. It includes a responsive grid system, dozens of interface components and useful JavaScript extensions.

Responsive and Mobile-Friendly

All websites created with LayoutPress are automatically responsive, reconfiguring its layout to fit the screen size of the device it’s being viewed on, creating the optimum experience on desktop, tablet or phone. Depending on the size of the viewport, the width will be 1200px, 992px or 768px wide. For viewports less than 768px wide, the columns become fluid and stack vertically.

Template Hierarchy

LayoutPress utilizes templates in the WordPress Template Hierarchy so that you can customize one template for similar post types (such as posts, pages, archives, etc.). You can also add more specific templates within the Hierachy or custom templates that can be applied to any post or page.

WordPress Template Hierarchy
Above is a graphical representation of the Template Hierarchy (an interactive version can be seen here). The black blocks represent the type of page being requested (e.g. Search Result Page, Single Post Page, Static Page). All other blocks represent the template that WordPress looks for to render that page, in order from left to right. If a template is not available, WordPress looks for the next template in the hierarchy until one is found. The blue blocks are templates that LayoutPress includes by default. Therefore, all orange blocks are skipped by default (but you can add any of these if you wish). For more information on LayoutPress templates, see Templates below.

Note: The .php file extension is stripped off the end of LayoutPress templates.

Drag and Drop Page Layout Editor

LayoutPress takes the pain out of creating layouts with an intuitive visual page layout builder, letting you easily create a grid system by adding rows and columns and dragging native WordPress widgets into desired position. All without a line of code.

LayoutPress Drag and Drop Page Layout Editor
See Edit Template below for more information on the layout editor and how to edit templates.

Custom widgets

In addition to standard WordPress widgets, LayoutPress comes with many custom widgets that add standard WordPress functionality and other commonly used modules – with more being added regularly. See LP Widgets below for more information on each custom widget.

Site Customizer

LayoutPress extends the built in WordPress theme customizer with 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. See Customize below for more information.

Requirements

  • WordPress version 3.2 or greater.
  • A server with PHP version 5.3 or greater.
  • A server with MySQL version 5.0 or greater.
  • A desktop or laptop computer.
  • A monitor with screen resolution of 1024 x 768 pixels or greater.
  • A mouse or graphics tablet.
  • A modern web browser.
A working knowledge of WordPress, HTML, CSS, PHP and JavaScript is an asset.

Installation

LayoutPress Install Theme

  1. Install WordPress (if not already installed).
  2. Login to your WordPress Dashboard.
  3. Go to Appearance > Themes.
  4. On the Themes page, click Add New.
  5. On the Install Themes page, click upload.
  6. Click Choose File to locate the LayoutPress .zip file. Click Open. Click Install Now.
  7. On the Installing Theme from uploaded file page, click Activate.
  8. To start using LayoutPress, go to Appearance > LayoutPress.
Note: Upon activation, LayoutPress replaces the default WordPress Widgets page under Appearance > Widgets.

Templates

LayoutPress utilizes templates in the WordPress Template Hierarchy so that you can customize one template for similar post types (see Template Hierarchy above). To view LayoutPress templates, go to Appearance > LayoutPress. Templates are listed in order of the Template Hierarchy.

LayoutPress Templates
Header and Footer are not part of the Template Hierarchy but they appear above and below every other template (unless you Edit any other template and uncheck Include Header / Include Footer).

Indented templates are child templates of the parent template they are indented under. Editing a parent template will automatically apply the same layout to all child templates under it (unless a child template has been disconnected from it’s parent). Editing a child template will disconnect it from from its parent. For example, if you edit Index and nothing else, that layout will be applied to all child templates under it (and hence every page on your website) because it is the highest level parent template. If you would like a different layout for all your pages, you would then edit the Page template to disconnect it from Index.

WordPress uses these templates under the following conditions:

  • index – Template used if more specific template below is not available.
  • 404 – Template used to render a 404 error page.
  • search – Template used to render a search results page.
  • archive – Template used to render an archive Index page.
    • taxonomy – Template used to render the archive index page for custom taxonomies.
    • category – Template used to render a category archive index page.
    • tag – Template used to render a tag archive index page.
    • author – Template used to render an author archive index page.
    • date – Template used to render a date-based archive index page.
  • single – Template used to render a single attachment page and single post page.
    • attachment – Template used to render a single attachment page.
    • single-post – Template used to render a single post page (listed in Posts > All Posts).
  • page – Template used to render a static page (listed in Pages > All Pages).
  • front-page – Template used to render the home page.
  • home – Template used to render the posts index page.
Note: To display the WordPress content that is being requested, the LP Loop widget must be included in your layout.

Editing Templates

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, select the template you wish to edit (e.g. Index, Archive, Single, etc.).
  3. On the Edit template page, make the desired changes (see how to add Rows, Columns and Widgets below).
  4. Click Save Layout.
  5. Click [Your Site Title] > Visit Website to view your website.

Grid System

LayoutPress uses a grid system for creating page layouts, which is made up of a series of rows and columns that contain your content. Rows are used to create horizontal groups of columns. Each row can hold up to 12 columns. Columns are used to create vertical groups of widgets. There’s no limit to the number of widgets that can be added to a column.

layoutpress-grid-system
LayoutPress comes with a default layout with the most commonly used widgets included in it.

Rows

  • To add a row, click Add Row.
  • To expand or collapse a row, click the Row title bar.
  • To remove a row, click X in the Row title bar.

Columns

  • To add a column, click on Add Column.
  • To expand or collapse a column, click the Column title bar.
  • To resize the width of a column, click the left and right arrows in the title bar.
  • To remove a column, click X in the Column title bar.

Widgets

A widget is a self-contained area of a web page that adds content and/or performs a specific function. Widgets provide a simple and easy-to-use way of giving design and structure control to the user that requires little or no coding experience. Widgets are limited to sidebars and footers on most WordPress Themes but in LayoutPress the whole page is made up of widgets. This gives the user more control of the layout without having to code.

To add a widget to the layout:

  1. On the Edit template page, under Available Widgets, click the desired widget title bar and hold the mouse button down.
  2. Drag the widget to the desired location and release the mouse button.
  3. Click Save Layout to save the widget’s location.

To customize a widget:

  1. Click the widget title bar to expand the widget’s interface.
  2. Make the desired customization (if available).
  3. Click Save to save the widget’s customization.

To move a widget:

  1. Click the widget title bar, hold the mouse button down.
  2. Drag the widget to the desired location and release the mouse button.
  3. Click Save Layout to save the widget’s location.

To remove a widget, click Delete at the bottom of the widget. Click Save Layout.

To remove a widget but keep it’s settings, click the widget title bar, hold the mouse button down, drag the widget to the area underneath Inactive Widgets and release the mouse button. This widget can be added later with the same settings.

Note: LayoutPress adds a custom CSS Widget Class field to every widget, making it is easy to target individual widgets for CSS styling.

Save Layout

To save a layout, click Save Layout in the top right corner of the page. Please note this only saves the structure of the page (i.e. number and location of rows, columns and widgets). It does not save customizations made to widgets. To save customizations made to a widget, click Save in the widget settings.

Select Template to Edit

If you would like to edit another template:

  1. In the Select Template to Edit drop down, select the desired template to edit.
  2. Click Select.
Note: Any unsaved changes to the current template will be lost.

Select Template to Clone

If you would like to clone a layout from another template:

  1. In the Select Template to Clone drop down, select the desired template to clone.
  2. Click Select.
Note: Cloning will overwrite the current layout. After cloning a template, you must save it once in edit mode for the changes to take effect.

LP Widgets

In addition to standard WordPress widgets, LayoutPress comes with many custom widgets that add standard WordPress functionality and other commonly used modules – with more being added regularly. See LP Widgets below for more information on each custom widget.

LP Site Title

Automatically displays the Site Title, as specified in Settings > General > Site Title.

LayoutPress LP Site Title Widget
There are no custom settings for this widget.

LP Site Description

Automatically displays the Site Tagline, as specified in Settings > General > Tagline.

LayoutPress LP Site Description Widget
There are no custom settings for this widget.

LP Site Menu

Automatically displays the default WordPress site menu with links to all Pages (listed in Pages > All Pages).

LayoutPress LP Site Menu Widget
There are no custom settings for this widget.

LP Loop

Automatically displays the default WordPress loop for displaying content for Posts, Pages, etc.

layoutpress-lp-loop-widget
There are no custom settings for this widget.

Note: If you wish to include any WordPress content (such as Posts, Pages, etc.), you must include the LP Loop widget in your layout.

LP Code

Extends the default WordPress Text widget to allow HTML, PHP and JavaScript in addition to plain text.

layoutpress-lp-code-widget
To customize LP Code:

  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 widget (if desired).
  4. In the next block, enter the desired code.
  5. Click Save to save the widget’s customization.

LP Image

Upload an image or select an existing image with the WordPress Media Uploader.

LayoutPress LP Image Widget
To customize LP Image:

  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 Image Url, click Upload File.
  4. Located the desired image.
  5. Under Link to, enter the image link URL (if desired).
  6. Click Save to save the widget’s customization.

Displays a Bootstrap Carousel with animating slides, pictures and captions.

LayoutPress LP Carousel WidgetTo customize LP Carousel:

  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 Image Url, click Upload File to locate the image for the slide.
  4. Under Title, enter the title of the slide (if desired).
  5. In the next box, enter the description of the slide (if desired).
  6. To add a slide, click Add Slide and repeat steps 3-5 (if desired).
  7. Click Save to save the widget’s customization.

LP Site Generator

A common footer element that displays “Powered by WordPress”.

LayoutPress LP Site Generator Widget
There are no custom settings for this widget.

LP Editor

A WYSIWYG editor to add and format plain text, HTML or PHP.

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.

Adding Widgets

If the default WordPress and LayoutPress widgets are insufficient for your needs, you can add new widgets by searching the WordPress Plugins Directory. Please note, not all plugins have widgets.

WordPress Install Twitter Widget Plugin
To add a new widget:

  1. Go to Plugins > Add New.
  2. On the Install Plugins page, under Search, enter the widget you are searching for (e.g. twitter widget).
  3. Click Search Plugins.
  4. On the Search Results page, click Install Now on the desired plugin.
  5. On the Installing Plugin page, click Activate Plugin.

If the plugin has a widget, the widget will now appear under Available Widgets on the Appearance > LayoutPressEdit template pages.

Note: LayoutPress does not guarantee to work with all plugins.

Add Template

LayoutPress comes with the standard templates in the WordPress Template Hierarchy. However, you can add more specific templates in the hierarchy (e.g. page-$idsingle-$posttype, etc.) or add a custom template that can be applied to a specific post or page (e.g. about-page).

LayoutPress Add Template
To add a template:

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, under Add Template, enter the desired name of the new template.
  3. Click Add Template.
  4. To edit the new template, click on the name of the new template.

Custom Templates

LayoutPress Custom TemplateTo apply a custom template to a page:

  1. Go to Pages > All Pages.
  2. Click on the page you want to apply a custom template.
  3. On the Edit page, in the Page Attributes box, under Template, select the desired template.
  4. Click Update.
  5. To view your page with the custom template, click View Page.

Deleting Templates

To delete a single template:

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, mouseover the desired template.
  3. Click Delete.

To delete multiple templates:

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, select the checkbox next to the templates to delete.
  3. In the Bulk Actions drop down menu, select Delete.
  4. Click Apply.
Note: Deleted templates cannot be restored.

Header Scripts

For more advanced users, LayoutPress lets you add custom header scripts, if necessary ( e.g. CSS stylesheets, Google Analytics, JavaScript, etc.). These scripts will appear before the closing </head> tag.

LayoutPress Header Scripts
To add a header script:

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, under Header Scripts, enter the necessary code.
  3. Click Save.

For more advanced users, LayoutPress lets you add custom footer scripts, if necessary (e.g. JavaScript). These scripts will appear before the closing </body> tag.

LayoutPress Footer Scripts
To add a footer script:

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, under Footer Scripts, enter the necessary code.
  3. Click Save.

Export Templates

Export Templates lets you export all templates to another LayoutPress installation.

LayoutPress Export Templates
To export templates:

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, under Export Templates, click Export.
  3. Under Export Templates, click Download Exported.

Import Templates

Import Templates lets you import templates from another LayoutPress installation. Please note that all current templates will be overwritten with the imported templates.

LayoutPress Import Templates
To import templates:

  1. Go to Appearance > LayoutPress.
  2. On the LayoutPress page, under Import Templates, click Choose File.
  3. Locate the exported .zip file and click Open.

Customize

WordPress LayoutPress CustomizeLayoutPress extends the built in WordPress theme customizer with styling options for many key elements such as background, fonts, font sizes, colours and line height.

To customize the appearance of your LayoutPress website, go to Appearance > Customize.

Site Title & Tagline

  1. Click on the Site Title & Tagline title bar to expand the interface.
  2. Edit the Site Title and/or Tagline of the website.
  3. Click Save & Publish.

Background

  1. Click on the Background title bar to expand the interface.
  2. Under body background-color, click select the desired color from the color picker or type in the HEX code.
  3. Under body background-image, click select a file, locate the desired image and click Open.
  4. Click Save & Publish.

Typography

  1. Click on the Typography title bar to expand the interface.
  2. Under body background-color, click select the desired background color from the color picker or type in the HEX code (e.g. #E4652D).
  3. Under font-family, select the desired font family.
  4. Under font-size, enter the desired font size (in pixels).
  5. Under line-height, enter the desired line height (in pixels).
  6. Under font-color, click select the desired font color from the color picker or type in the HEX code  (e.g. #E4652D).
  7. Under link color, click select the desired link color from the color picker or type in the HEX code (e.g. #E4652D).
  8. Under link hover color, click select the desired link hover color from the color picker or type in the HEX code  (e.g. #E4652D).
  9. Under headings font-family, click select the desired headings font family.
  10. Under headings color, click select the desired headings color from the color picker or type in the HEX code (e.g. #E4652D).
  11. Under headings font weight, enter the desired font weight for headings (e.g. normal, strong, etc.)
  12. Under h1 font-size, enter the desired h1 font size (in pixels).
  13. Under h2 font-size, enter the desired h2 font size (in pixels).
  14. Under h3 font-size, enter the desired h3 font size (in pixels).
  15. Under h4 font-size, enter the desired h4 font size (in pixels).
  16. Under h5 font-size, enter the desired h5 font size (in pixels).
  17. Under h6 font-size, enter the desired h6 font size (in pixels).
  18. Click Save & Publish.

Custom CSS

  1. Click on the Custom CSS  title bar to expand the interface.
  2. Enter the desired CSS selectors, properties and values (e.g. body {background-color:#d0e4fe;})
  3. Click Save & Publish.
  1. Click on the Navigation title bar to expand the interface.
  2. Select which menu you want to use for the primary navigation of your website.
  3. Click Save & Publish.

Static Front Page

  1. Click on the Static Front Page title bar to expand the interface.
  2. Under Front page displays, select Your latest posts or A static page. If A static page, select desired Front page and Posts page.
  3. Click Save & Publish.