Modular Page Builder

Modular page builder for WordPress

Basic usage

Out of the box, modules are available for header, text and image only.

You must add post type support for the builder add_post_type_support( 'page', 'modular-page-builder' );

You must handle the output of the page builder data manually. Here is an example of simply replacing the post content.

add_filter( 'the_content', function( $content, $id = null ) {

    $id = $id ?: get_the_ID();

    if ( post_type_supports( get_post_type( $id ), 'modular-page-builder' ) ) {
        $plugin  = ModularPageBuilder\Plugin::get_instance()->get_builder( 'modular-page-builder' );
        $content = $plugin->get_rendered_data( $id );
    }

    return $content;

});

Revisions

By default, WordPress does NOT revision post meta. If you want to revision the page builder data we reccommend you use the WP-Post-Meta-Revisions plugin. You just need to install and activate it, we have handled registering of the revisioned meta keys.

Custom Modules

• Register module using `$plugin->register_module( 'module-name', 'ModuleClass' );
  • Module Class should extend ModularPageBuilder\Modules\Module.
  • It should provide a render method.
  • Set $name property the same as module-name
  • Define all available attributes in $attr array.
  • Each attribute should have name, label and type where type is an available field type.

Extra Customization

• By default, your module will use the edit-form-default.js view.
• You can provide your own view by adding it to the edit view map: window.modularPageBuilder.editViewMap. Where the property is your module name and the view is your view object.
• You should probably extend window.modularPageBuilder.views.ModuleEdit.
• You can still make use of the built in field view objects if you want.

Available Field Types

• text
• textarea
• select
• html
• link
• attachment
• post_select

Text Field

Example.

array(
	'name'  => 'caption',
	'label' => __( 'Test Text Field', 'mpb' ),
	'type'  => 'text'
)

Select Field

Example.

array(
	'name'   => 'select_test',
	'label'  => __( 'Select Test', 'mbp' ),
	'type'   => 'select',
	'config' => array(
		'options' => array(
			array( 'value' => 'a', 'text' => 'Option A' ),
			array( 'value' => 'b', 'text' => 'Option B' )
		)
	)
)

Image Field

Example

array(
	'name'  => 'image',
	'label' => __( 'Test Image', 'mbp' ),
	'type'  => 'attachment',
	'config' => array(
		'button_text' => __( 'Custom Button Text', 'mbp' ),
	)
)