Advanced Customizations

Filters can be added to a child theme, custom plugin, or via the Code Snippets plugin.

Full-Width Containers Using CSS

Page Builder uses JavaScript for full-width and full-width stretched rows. Using JavaScript ensures that full-width functionality works with any theme. The filters below can be used to disable JavaScript and use CSS for full-width container functionality.

The below example is taken from our SiteOrigin Corp theme:

add_filter( 'siteorigin_panels_theme_container_width', function( $container ) {
	return '1140px';
} );

add_filter( 'siteorigin_panels_theme_container_selector', function( $selector ) {
	return '.site-content .corp-container';
} );

siteorigin_panels_theme_container_width
Use this filter to return the theme’s content container width value.

siteorigin_panels_theme_container_selector
Use this filter to return the theme’s content container class name and parent.

The above values must be changed to match your theme. The above values must not be left unchanged unless you’re using the SiteOrigin Corp theme.

LazyLoad

If you’re using the popular LazyLoad JavaScript script, you can make Page Builder output images inline to allow for them to be lazy loaded. You can do this by adding the following PHP to your site:

add_filter( 'siteorigin_lazy_load_compat', '__return_true' );

This will add the image using the data-bg attribute and allow the LazyLoad script to load the image.

Page Builder can output the image via the style attribute instead of the data-bg attribute via an additional filter. This should allow for other lazy load scripts to also work:

add_filter( 'siteorigin_lazy_load_compat', '__return_true' ); // This filter is required.
add_filter( 'siteorigin_lazy_load_inline_background', '__return_true' );

Add Custom Column Sizes

The provided filter allows you to introduce custom column size options in the “Add Row” interface of Page Builder. In the given example, using the key “2” adds a new size configuration specifically for when you select a two-column layout.

To customize the sizes for a different number of columns, adjust the key accordingly. For instance, using $sizes[ 3 ][] = array( 50.3, 31.1, 18.6 ); will present a new size choice for a three-column layout with the following distribution: Column A at 50.3%, Column B at 31.1%, and Column C at 18.6%.

add_filter( 'siteorigin_panels_column_sizes', function( $sizes ) {
	$sizes[ 2 ][] = array( 61.8, 38.2 ); // Add Golden Ratio.

	return $sizes;
} );

Disable Admin Classic Editor Notice

By default, SettingsPage BuilderGeneral: Use Classic Editor for new posts is enabled. When a new post is created in a post type for the first time, an admin notice is displayed, letting the user know about the default and where to change it. The below filter can be used to disable this notice.

add_filter( 'so_panels_show_classic_admin_notice', '__return_false' );

Disable Pages Add New Dropdown

Disable the editor type dropdown displayed next to the PagesAdd New button. Applies to all post types.

add_filter( 'so_panels_show_add_new_dropdown_for_type', '__return_false' );

Disable Block Editor “Add SiteOrigin Layout Block” Button

Disable the Add SiteOrigin Layout Block button that appears under the Block Editor when a SiteOrigin Layout Block hasn’t been inserted.

add_filter( 'siteorigin_layout_block_show_add_button', '__return_false' );

Remove Page Builder News Dashboard Widget

function so_remove_dashboard_news() {
	remove_meta_box( 'so-dashboard-news', 'dashboard', 'normal' );
}
add_action( 'admin_menu', 'so_remove_dashboard_news' );

Remove Sydney Theme Default Row Padding

By default the theme Sydney adds 100px top and bottom padding. The below snippet will change this 100px default to 0.

function so_sydney_padding_override( $attr, $style ) {
	if ( empty( $style['padding'] ) ) {
		$attr['style'] .= 'padding: 0; ';
	}

	return $attr;
}
add_filter( 'siteorigin_panels_row_style_attributes', 'so_sydney_padding_override', 15, 2 );

Disable the SiteOrigin Installer

add_filter( 'siteorigin_add_installer', '__return_false' );