How To Create Theme Layouts in SiteOrigin Page Builder – WordPress

Let’s continue the awesomeness, this time with one of the light and freemium WordPress page builder, I absolutely recommend this plugin, with tons of predefined Widgets, and perfect stuff where you can create your site in just a matter of hours.

So what I’m thinking this time is to create and extend SiteOrigin Page Builder by creating Theme Layouts, SiteOrigin Page Builder does have lists ready to be triggered and added widgets, just don’t have the functionality I need and instead let’s create our own.

Let’s get started

Syntax

function dreamarchers_prebuilt_layouts( $layouts ) {
    $layouts['cta'] = array(
        // We'll add a title field
        'name' 			=> __( 'Layout Name', 'rs-theme' ),    											// Required
        'description' 	=> __('Layout Description', 'rs-theme'),    									// Optional
        'screenshot' 	=> 'get_stylesheet_directory_uri() . '/assets/images/tpl/cta-screenshot.png,    // Optional
        'widgets' 		=> array(),
        'grids' 		=> array(),
        'grid_cells' 	=> array(),
    );

   return $layouts;
}
add_filter( 'siteorigin_panels_prebuilt_layouts', 'dreamarchers_prebuilt_layouts' );

That’s much all we need, I know you think, “what the heck?”, yep at first glance, you’ll think of it as a mess and hard to grasp what data should be in there, but it’s pretty easy, once you get it going and understand how it works.

What we’re trying to achieve here is simply add our own Theme Layout to an existing $layouts array, hence we’re just using filter here.

Complete Example

So here, I’ve added a complete Layout example, it does the following.

• It display single row
• With two grid-cell in it
• On the first grid-cell we’ve added SO Headline Widget
• and WP Text Editor on the second grid-cell
• it’s self explainatory, hope it helps you continue.

add_filter( 'siteorigin_panels_prebuilt_layouts', 'dreamarchers_prebuilt_layouts' );
/**
 * Add Theme SO Layout
 * @param  Array $layouts This contain lists of layouts added to panels layouts
 * @return Filtered $layout Array
 */
function dreamarchers_prebuilt_layouts( $layouts ) {
	// var_dump(  $layouts );

    $layouts['cta'] = array(
        // We'll add a title field
        'name' 			=> __( 'Call-to-Action (CTA)', 'rs-theme' ),    	// Required
        'description' 	=> __('', 'rs-theme'),    							// Optional
        'screenshot' 	=> get_stylesheet_directory_uri() . '/assets/images/tpl/cta-screenshot.png',     // Optional
        'widgets' 		=> array(
        	0 => array(
        		'headline'  => array(
        			'text' 			=> __( 'Let\'s Get Started with Your Project Today!', 'so-widgets-bundle' ),
					'tag'  			=> 'p',
					'font_size'  	=> '28',
					'color'  		=> '#ffffff',
        		),
				'divider' 	=> array(
					'style'  		=> 'none',
				),
				'info' 			=> array(
					'class' => 'SiteOrigin_Widget_Headline_Widget',
					'id' 	=> '1',
					'grid' 	=> '0',
					'cell' 	=> '0',
				),
			),
			1 => array(
				'title' 		=> __( '', 'rs-theme' ),
				'text' 			=> __( '<a href="/order-now/" class="btn btn-outline-primary">Get Started</a>', 'rs-theme' ),
				'filter' 		=> false,
				'info' 			=> array(
					'class' => 'WP_Widget_Text',
					'id' 	=> '2',
					'grid' 	=> '0',
					'cell' 	=> '1',
				),
			),
        ),
        'grids' 		=> array(
			0 => array(
				'cells' => '2',
				'style' => array(),
			),
        ),
        'grid_cells' 	=> array(
			0 => array(
				'weight' 	=> '0.75',
				'grid' 		=> '0',
				'style' => array(
					'vertical_alignment' => 'center'
				),
			),
			1 => array(
				'weight' 	=> '0.25',
				'grid' 		=> '0',
				'style' => array(
					'vertical_alignment' => 'center'
				),
			),
        ),
    );

   return $layouts;

}

That’s it, happy coding ^_^