Page Builder makes it easy to bundle prebuilt layouts into your theme or plugin. We've made a point of not including any of these into the Page Builder core, relying mainly on other themes and plugins to add the layouts that work with their unique designs.
Use the below function to register a location for your prebuilt layout files. Replace siteorigin
with your theme or plugin namespace. Change folder path as required, in this example we're storing our layouts in the /inc/layouts
folder
/**
* Register a custom layouts folder location.
*/
function siteorigin_layouts_folder( $layout_folders ) {
$layout_folders[] = get_template_directory() . '/inc/layouts';
return $layout_folders;
}
add_filter( 'siteorigin_panels_local_layouts_directories', 'siteorigin_layouts_folder' );
Edit the page containing your layout. In Page Builder, click Layouts > Import/Export > Download Layout. To change your layout name as seen in Page Builder, edit the JSON file and locate the name/value pair at the end of the file "name":"Home"
. Change the name
value as required. In this example, our layout is named Home
. To add a thumbnail for each layout, include a JPG or PNG file with the same filename as the JSON file you'd like to use it for. For example, if your JSON file was named home.json
, your thumbnail image would be named home.jpg
. Finally, copy both the JSON layout file and thumbnail to your layouts directory location. Navigate to Layouts > Prebuilt layouts in any Page Builder page to view and test your layout.
If you'd like your layout images to populate on other domains, make use of the External URL field wherever possible. For example, when adding a row background you can either use the Select Image button or insert a URL into the External URL field. Using the External URL field will ensure the image loads on domains other than your own.
You can find an example theme here. starter-theme
was created from underscores and isn't intended for production usage. Within the example theme you'll find the following:
At the end of the theme's functions.php
file we conditionally require a Page Builder compatibility file.
/**
* Page Builder by SiteOrigin compatibility file.
*/
if ( defined( 'SITEORIGIN_PANELS_VERSION' ) ) {
require get_template_directory() . '/inc/siteorigin-page-builder.php';
}
In our compatibility file we register the location of our prebuilt layouts folder.
/**
* Register a custom layouts folder location.
*/
function starter_theme_layouts_folder( $layout_folders ) {
$layout_folders[] = get_template_directory() . '/inc/layouts';
return $layout_folders;
}
add_filter( 'siteorigin_panels_local_layouts_directories', 'starter_theme_layouts_folder' );
In our layouts folder we've included a demo layout and matching thumbnail.
You can find an example child theme here. Our child theme uses SiteOrigin Corp as its parent theme. Within the example child theme you'll find the following:
In the child theme functions.php
file we register the location of our prebuilt layouts folder.
/**
* Register a custom layouts folder location.
*/
function siteorigin_corp_child_layouts_folder( $layout_folders ) {
$layout_folders[] = get_stylesheet_directory() . '/layouts';
return $layout_folders;
}
add_filter( 'siteorigin_panels_local_layouts_directories', 'siteorigin_corp_child_layouts_folder' );
In our layouts folder we've included a demo layout and matching thumbnail.
You can find an example plugin here. Within the example plugin you'll find the following:
In the main plugin file we register the location of our prebuilt layouts folder.
/**
* Register a custom layouts folder location.
*/
function so_prebuilt_layouts_folder( $layout_folders ) {
$layout_folders[] = plugin_dir_path( __FILE__ ) . '/layouts';
return $layout_folders;
}
add_filter( 'siteorigin_panels_local_layouts_directories', 'so_prebuilt_layouts_folder' );
In our layouts folder we've included a demo layout and matching thumbnail.
By default, Page Builder doesn't apply any sorting and layouts are ordered as they're identified. You can sort layouts once Page Builder has identified them by using the siteorigin_panels_prebuilt_layouts
filter. The siteorigin_panels_prebuilt_layouts
filter has a single filter containing the $layouts
array.
For example, the following PHP will alphabetically sort layouts by their layout id.
add_filter( 'siteorigin_panels_prebuilt_layouts', function( $layouts ) {
// Sort layouts alphabetically.
usort( $layouts, function( $a, $b ) {
return strcmp( $a['id'], $b['id'] );
} );
return $layouts;
} );