Basic Structure

// Shortcode: [upb-example]<p>Example Contents</p>[/upb-example]

add_action( 'upb_register_element', function ( $element ) {

    $attributes = array(); // Shortcode Attribute fields

    $contents = '<p>Example Contents</p>'; // Shortcode conents. false for self-closed or array() for nested shortcode.

    $_upb_options = array();

    $element->register( 'upb-example', $attributes, $contents, $_upb_options );
});

Adding element Name and Icon

$_upb_options = array(
    'element' => array(
        'name' => 'UPB Example',
        'icon' => 'mdi mdi-format-text' // https://cdn.materialdesignicons.com/1.8.36/
        'tag' => 'theme' // Optional. Available: New, Soon, Theme, WooCommerce, WordPress
     ),

     // ...
);

Adding meta for contents and settings panel

  • Show help text on contents panel and settings fields panel
$_upb_options = array(

// ...

'meta' => array(
    'contents' => array(
        'help' => '<h2>Want to add contents?</h2><p>Choose a section and drag elements</p>',
    ),

    'settings' => array(
        'help' => '<h2>Text Settings?</h2><p>section settings</p>',
    )
),

// ...

);

Adding CSS/JS




$_upb_options = array(

// ...

    'assets' => array(
        'preview' => array(
            'css' => get_theme_file_uri( 'css/upb-preview/style.css' ) ),
            'js'  => get_theme_file_uri( 'js/upb-preview/scripts.js' ) ),

            'inline_js' => ';(function ($, upb) { $("#id").jqueryPlugin() }(jQuery, _UPB_PREVIEW_DATA[upbComponentId]));',
            ),
        'shortcode' => array(
            'css' => get_theme_file_uri( 'css/upb-shortcode/style.css' ) ),
            'js'  => get_theme_file_uri( 'js/upb-shortcode/scripts.js' ) ),

            'inline_js' => ';(function ($) { $("#id").jqueryPlugin() }(jQuery));',
            )
        )
// ...

);

Preview CSS and JS files only load when an element dropped to Column to use. inline_js fired when some attributes changed or new item added or deleted.

Shortcode CSS and JS files only load if a shortcode used on specific page.

Adding attributes

title - attribute

array(
    'id'    => 'title', // for ID: title there is a build-in function: upb_title_input( $title = '', $desc = '', $default='' )
    'title' => esc_html__( 'Title', 'ultimate-page-builder' ),
    'desc'  => wp_kses_post( __( 'Description', 'ultimate-page-builder' ) ),
    'type'  => 'text',
    'value' => '',
)

Using built-in function for ID: title

array_push( $attributes, upb_title_input( esc_html__( 'Title', 'ultimate-page-builder' ), '', esc_html__( 'New title', 'ultimate-page-builder' ) ) );

// or

$attributes = array(
    // ...
    upb_title_input( esc_html__( 'Title', 'ultimate-page-builder' ), '', esc_html__( 'New title', 'ultimate-page-builder' ) )
    // ...
);

Shortcode:

[upb-example title="Title..."]<p>Example Contents</p>[/upb-example]

enable - attribute

array(
    'id'    => 'enable', // for ID: enable there is a build-in function: upb_enable_input( $title = '', $desc = '', $default=true )
    'title' => esc_html__( 'Enable / Disable', 'ultimate-page-builder' ),
    'desc'  => wp_kses_post( __( 'Enable or Disable Element display', 'ultimate-page-builder' ) ),
    'type'  => 'toggle',
    'value' => true,
)

Using built-in function for ID: enable

array_push( $attributes, upb_enable_input( esc_html__( 'Enable / Disable', 'ultimate-page-builder' ), '' ) );

// or

$attributes = array(

    // ...

    upb_enable_input( esc_html__( 'Enable / Disable', 'ultimate-page-builder' ) )

    // ...

);

Shortcode:

[upb-example title="Title..." enable="true"]<p>Example Contents</p>[/upb-example]

device-hidden

  • attribute (device specific hide element)
array(
    'id'      => 'device-hidden',
    'title'   => esc_html__( 'Hide on device', 'ultimate-page-builder' ),
    'desc'    => wp_kses_post( __( 'Hide element on specific media device', 'ultimate-page-builder' ) ),
    'type'    => 'device-hidden',
    'value'   => array(), // Empty array
    'options' => upb_responsive_hidden()
)

Using built-in function for ID: device-hidden

array_push( $attributes, upb_responsive_hidden_input() );

// or

$attributes = array(

    // ...

    upb_responsive_hidden_input(),

    // ...

);

Shortcode:

[upb-example device-hidden="sm,xs"]<p>Example Contents</p>[/upb-example]

background - attributes (adding background input group)

  • For background UPB Have built-in function.

$attributes = array();

$attributes = array_merge( $attributes, upb_background_input_group() );

Example Code:

add_action( 'upb_register_element', function ( $element ) {

    $attributes = array(

        upb_title_input( esc_html__( 'Example Title', 'ultimate-page-builder' ), '', esc_html__( 'New Example', 'ultimate-page-builder' ) ),

        upb_enable_input( esc_html__( 'Example Enable / Disable', 'ultimate-page-builder' ) ),

        upb_responsive_hidden_input();
    );

    $attributes = array_merge( $attributes, upb_background_input_group() );

    $attributes = array_merge( $attributes, upb_css_class_id_input_group() );

    $contents = '<p>Example Contents</p>';

    $_upb_options = array(

        'element' => array(
            'name' => 'Example',
            'icon' => 'mdi mdi-format-text'
        ),

        'meta'    => array(
            'contents' =>array(
                'help' => '<p>Create new row, generate columns for large, medium, small and extra small devices.</p>',
            ),
            'settings' => array(
                'help' => '<h2>Example Settings?</h2><p>example settings</p>',
            ),
        ),
    );

    $element->register( 'upb-example', $attributes, $contents, $_upb_options );

});

Creating preview template:

  • Create a directory named upb-templates in your theme directory then create previews directory under upb-templates directory.
  • Create a php file as your element name like: upb-example.php

  • Now upb-example.php is your Vue.JS template of upb-example component.

Example template

<?php 
    defined( 'ABSPATH' ) or die( 'Keep Silent' ); 
?>
<div v-show="enabled" :id="elementID" :class="addClass()" v-ui-draggable v-preview-element :style="backgroundVariables">
    <upb-preview-mini-toolbar :parent="parent" :model="model"></upb-preview-mini-toolbar>

    <!-- {{ attributes }} {{ contents }}-->
    <div v-html="contents"></div>
</div>
  • v-show="enabled" when user toggle show or hide element.

  • :id="elementID" element id for css use. Bind with id

  • :class="addClass()" generate css classes with users given one. addClass method generate preview css also and you can add your custom class on addClass(['class-1', 'class-2']) or addClass('class-1')

  • If you want to remove preview css then pass 2nd argument false like: addClass('class-1', false)

  • v-ui-draggable is a directive to make element draggable and droppable to other column.

  • v-preview-element

  • :style="backgroundVariables" is style binding with computed background variables.

  • <upb-preview-mini-toolbar :parent="parent" :model="model"></upb-preview-mini-toolbar> mini toolbar component.

  • v-html="contents" add contents with Vue v-html directive.

Preview Template With Ajax Preview


$_upb_options = array(
    'preview' => array(
        'ajax' => TRUE,
    )
    // ...
)

Ajax Hook will be wp_ajax__upb_{REGISTERED_ELEMENT_ID}_preview_contents

Example:


add_action( 'wp_ajax__upb_{REGISTERED_ELEMENT_ID}_preview_contents', function () {

    upb_check_ajax_access();

    if ( empty( $_POST[ 'id' ] ) ) {
        wp_send_json_success();
    } else {

    ob_start();
    ?>
        <div>YOUR TEMPLATE CODE</div>
    <?php
    $data = ob_get_clean();
    wp_send_json_success( $data );

    }

Creating shortcode template:

  • Create a directory named upb-templates in your theme directory then create shortcodes directory under upb-templates directory.
  • Create a php file as your element name like: upb-example.php

Example shortcode

<?php 
    defined( 'ABSPATH' ) or die( 'Keep Silent' );

    // $attributes, $contents, $settings, $tag

    if ( ! upb_is_shortcode_enabled( $attributes ) ) {
        return;
    }
?>

<div id="<?php upb_shortcode_id( $attributes ) ?>" class="<?php upb_shortcode_class( $attributes, $tag ) ?>">
    <style scoped>
        :scope {
        <?php upb_shortcode_scoped_style_background($attributes) ?>
            }
    </style>
    <div><?php echo do_shortcode( $contents ) ?></div>
</div>
  • Available variables on shortcode template:

    • $attributes - Attributes
    • $contents - Contents
    • $settings - UPB Options
    • $tag - Short code tag
  • upb_is_shortcode_enabled( $attributes ) prevent display shortcode when its disabled

  • upb_shortcode_id( $attributes ) print shortcode id

  • upb_shortcode_class( $attributes, $tag ) print classes

  • UPB Shortcode supports scoped css with polyfill for non supported browsers

  • upb_shortcode_scoped_style_background($attributes) ?> to generate background css

results matching ""

    No results matching ""