Layouts Guide

User Manual:

Open the PDF directly: View PDF PDF.
Page Count: 3

Layouts plugin can add draganddrop functionality to any WordPress theme, based on
Bootstrap. Using Layouts, endusers build and edit entire page layouts, from within the
WordPressadmin,usingaconvenientdraganddropinterface.
Displaying Layouts in Your Themes
Toadddraganddroplayoutstoyourtheme,youneedtoaddtheLayoutrendercalltotemplates:
the_ddlayout( 'default-layout' );
ThiscallwilldisplayanentireLayout.Youcanputitanywhereinthepage.
AtypicalpagethatincludesaLayoutlookslikethis:
<head>.. YOUR HEADER STUFF </head>
<body>
<div class=”container”>
<?php the_ddlayout(‘default-layout’);
</div>
</body>
The call to ‘the_ddlayout()’ includes everything needed to display the Bootstrap grid and the
draganddrop layout inside of it. We’ve left the containing Bootstrap DIV outside of the Layout call,
sothatyoucanincludeotherBootstrapelementsinthesamegrid,beforeandafterthelayout.
Hereisanexamplepagelayout.phptemplate,whichdisplaystheheader,layoutandfooter:
<?php
/*
Template Name: Layouts page template
*/
get_header( 'layouts' ); ?>
<?php the_ddlayout( 'default-layout' ); ?>
<?php get_footer( 'layouts' );
Creating your first Layout
NowthatyourthemerendersaLayout,it’stimetocreateitintheWordPressadmin.
Go to Layouts
→
Add new layout. Select between fixed and fluid width, pick a starting template (or       
‘empty’)andgiveitaname.
Ifyouneedhelpeditingalayout,watchthisclip:
http://d1ftqtsbckf6jv.cloudfront.net/basiclayouteditinga.mp4
Display a page with Layouts
Finally,wewanttoassignourLayouttocontent,sothatitusesitonthefrontend.
Looks at the ‘Page Attributes’ section in the page editors. Instead of the ordinary page template,
you’ll see an integrated selector, for choose a Layout, inside a page template. Each template that
candisplayaLayoutwillappear,withtheLayoutsyou’vecreated.
ChoosetheLayout,insidethepagetemplateandupdatethepage.
Turning your theme elements into draggable cells
Layouts comes with a simple API for registering custom cells. The API allows theme authors to
turntheirexistingfunctionalityintodraggablecells,whichenduserscaneasilymanipulate.
Cellshave:
1. AGUIthatallowsuserstoentersettings
2. Storageforcelloptions
3. Renderonthesite’sfrontendpages
Examplesforcelltypes,whichthemesmaydefine:
● Sliders
● Featurehighlights
● Testimonials
● Showcase
● Products
By defining their cell types, themes retain their uniqueness. They use the draganddrop engine
fromLayoutstoallowuserstobuildsitesthatincludetheuniquefeaturesinthetheme.

Navigation menu