Chris Reynolds
I’m a developer for WebDevStudios
I’m an author for Pluralsight
I make lots of plugins
I also have a theme on WordPress.org
Lots of my stuff is on Github, though
I tweet a fair amount
Go Real Salt Lake!
In the beginning…
…or this
…or this
WTF is all this stuff?
There must be a better way!
How it works
Template parts
How it works
Template parts
How it works
A user adds as many parts as they want
But what if you’re not on a Page?
What if you’re on a Post or a Custom Post Type?
But what if you’re not on a Page?
Select what post types you want to support
https://github.com/WebDevStudios/WDS-Simple-Page-Builder/wiki/Page-Builder-Options
But what if you’re not on a Page?
Set a global default
https://github.com/WebDevStudios/WDS-Simple-Page-Builder/wiki/Page-Builder-Options#global-template-parts
But what if you’re not on a Page?
Create custom fallback layouts for all posts of a type or name them and call them directly in the code
https://github.com/WebDevStudios/WDS-Simple-Page-Builder/wiki/Setting-Saved-Layouts
This makes the magic happen
<?php wds_page_builder_load_parts(); ?>
Use this to load a specific, saved layout
<?php wds_page_builder_load_parts( 'my-layout-name' ); ?>
Set up options for wrapping each template part in an HTML container
Pre-load options and hide them from the Options page
function this_register_options() {
wds_register_page_builder_options( array(
'hide_options' => true, // this hides the options from the options
// page, use 'disabled' to display them as
// disabled input fields
'parts_dir' => 'parts', // where the template parts are stored
'parts_prefix' => 'part', // the template part prefix, like
// part-my-template-part.php
'use_wrap' => 'on', // on is TRUE
'container' => 'div', // the container type, can be any valid
// HTML5 element
'container_class' => 'template-part wrap', // default classes
// for the wrapper
'post_types' => array( 'post', 'page', 'car' ), // allowed post
// types
) );
}
add_action( 'init', 'this_register_options' );
Add theme support for Page Builder
function wds_setup_theme() {
add_theme_support( 'wds-simple-page-builder' );
wds_page_builder_theme_support( array(
'hide_options' => 'disabled', // set to true to hide them
// completely
'parts_dir' => 'pagebuilder', // directory the template parts
// are saved in
'parts_prefix' => 'part', // the template part prefix,
// e.g. part-template.php
'use_wrap' => 'on', // Whether to use a wrapper
// container. 'on' is TRUE
'container' => 'section', // HTML container for Page
// Builder template parts
'container_class' => 'pagebuilder-part', // can use multiple classes,
// separated by a space
'post_types' => array( 'page', ), // add any other supported post
// types here
) );
}
add_action( 'after_setup_theme', 'wds_setup_theme' );
Add theme support for Page Builder
if ( current_theme_supports( 'wds-simple-page-builder' ) ) {
// do stuff
}
Ever wanted to conditionally load a javascript file on a certain page, but only if that page was using a particular feature or component?
Page Builder makes this easy-peasy
add_action( 'wds_page_builder_after_load_parts', 'load_flipster' );
/**
* Function to conditionally enqueue the flipster js based on whether the
* template part is in use on the page.
* @since 0.1.0
* @return void
*/
function load_flipster() {
$parts = get_page_builder_parts();
// only load flipster on pages that use the coverflow part
if ( in_array( 'coverflow', $parts ) ) {
wp_enqueue_script( 'jquery-flipster', $this->url . '/assets/bower/
jquery-flipster/dist/jquery.flipster.min.js', array( 'jquery' ),
'20150723', true );
}
}
Page Builder Areas
They’re kind of like widget areas
Restrict template parts to specific areas
/**
* Part Name: My Template Part Name
* Description: A cool description about my part
* Areas: before_content, after_content, content, hero
*/
Coming Soon!
Add external folders for template parts (plugin, parent/child theme support)
