Using Twitter Bootstrap With Ultimate Page Builder

Building WordPress themes using Twitter Bootstrap with Ultimate page builder has never been easier. UPB has simplified the process and brings an action hook as well as a filter to make it easy for WordPress theme developers to provide Bootstrap Framework support in their WP Themes with Ultimate Page Builder.

Ultimate page builder has grounded up using customized grid system like Twitter Bootstrap so that anyone can build theme without any complication. Here is the way to stop default grid system and provide support of default Twitter Bootstrap.

Adding Support for Twitter Bootstrap

Just copy and paste the following snippet in your theme's functions.php. The code will stop default grid system.

function your_theme_prefix_upb_theme_support() {
   // Supporting custom grid layout
   add_theme_support( 'upb-custom-grid-layout' );
}

add_action( 'after_setup_theme', 'your_theme_prefix_upb_theme_support' );

Adding Bootstrap Grid Classes

As Ultimate page builder uses a customized grid system and adds upb prefixes for container-fluid, container, row, and col. When you use Twitter Bootstrap grid system, you need to withdraw upb prefixes from the grid classes. Just add the following filter to your theme's functions.php, it removes upb prefixes and adds Bootstrap grid classes.

if ( ! function_exists( 'your_theme_prefix_upb_grid_system' ) ){
    function your_theme_prefix_upb_grid_system( $grid ) {
        $grid[ 'name' ] = esc_html__( 'Starter Grid', 'text-domain' );
        $grid[ 'allGridClass' ] = 'column';
        $grid[ 'prefixClass' ] = 'col';
        $grid[ 'groupClass' ] = 'row';
        $grid[ 'defaultDeviceId' ] = 'xs';
        $grid[ 'groupWrapper' ] = array(
            'container-fluid' => esc_html__( 'Fluid Container', 'text-domain' ),
            'container' => esc_html__( 'Fixed Container', 'text-domain' ),
            'container-none' => esc_html__( 'No Container', 'text-domain' ),
        );

            return $grid;
        }
    }
    add_filter( 'upb_grid_system', 'your_theme_prefix_upb_grid_system' );

HTML Grid Output Before Adding Filter

<div class="upb-container-fluid"> 
    <div id="" class="upb-row"> 
        <div class="upb-col upb-col-xs-4"></div> 
        <div class="upb-col upb-col-xs-4"> </div> 
        <div class="upb-col upb-col-xs-4"></div> 
    </div> 
</div>

HTML Grid Output After Adding Filter

<div class="container-fluid"> 
    <div id="" class="row"> 
        <div class="column col-xs-4"></div> 
        <div class="column col-xs-4"> </div> 
        <div class="column col-xs-4"></div> 
    </div> 
</div>

NOTE: Don't forget to enqueue Twitter Bootstrap Stylesheet and JavaScript files into your theme.

Example of Bootstrap 4

//--------------------------------------------------------------
// Bootstrap 4 Grid System
//--------------------------------------------------------------
if ( ! function_exists( 'fashionstore_upb_grid_system' ) ):
    function fashionstore_upb_grid_system( $grid ) {
        $grid[ 'name' ]            = esc_html__( 'Starter Grid', 'fashionstore' );
        $grid[ 'allGridClass' ]    = 'column';
        $grid[ 'prefixClass' ]     = 'col'; // bs .col-md-6 .col-sm-12
        $grid[ 'groupClass' ]      = 'row'; // bs .row
        $grid[ 'defaultDeviceId' ] = 'xs'; // bs .row

        $grid[ 'groupWrapper' ] = array(
            'container-fluid' => esc_html__( 'Fluid Container', 'fashionstore' ),
            'container'       => esc_html__( 'Fixed Container', 'fashionstore' ),
            'container-none'  => esc_html__( 'No Container', 'fashionstore' ),
        ); // bs container

        return $grid;
    }
endif;

add_filter( 'upb_grid_system', 'fashionstore_upb_grid_system' );


//----------------------------------------------------------------
// Adding Page Builder Custom Grid Support
//----------------------------------------------------------------
function fashionstore_upb_theme_support() {
    // Ultimate Page Builder
    add_theme_support( 'upb-custom-grid-layout' );
}

add_action( 'after_setup_theme', 'fashionstore_upb_theme_support' );    


//----------------------------------------------------------------
// Preview Devices
//----------------------------------------------------------------
// https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

add_filter( 'upb_preview_devices', function () {
    return array(
        array(
            'id'     => 'xl',
            'class'  => 'col-xl-',
            'title'  => esc_html__( 'Extra large', 'fashionstore' ),
            'icon'   => 'mdi mdi-desktop-mac',
            'width'  => '1200px',
            'active' => TRUE
        ),
        array(
            'id'     => 'lg',
            'class'  => 'col-lg-',
            'title'  => esc_html__( 'Large', 'fashionstore' ),
            'icon'   => 'mdi mdi-laptop-mac',
            'width'  => '992px',
            'active' => FALSE
        ),
        array(
            'id'     => 'md',
            'class'  => 'col-md-',
            'title'  => esc_html__( 'Medium', 'fashionstore' ),
            'icon'   => 'mdi mdi-tablet-ipad',
            'width'  => '768px',
            'active' => FALSE
        ),
        array(
            'id'     => 'sm',
            'class'  => 'col-sm-',
            'title'  => esc_html__( 'Small', 'fashionstore' ),
            'icon'   => 'mdi mdi-tablet',
            'width'  => '576px', // @media (min-width: 576px)
            'active' => FALSE
        ),
        array(
            'id'     => 'xs',
            'class'  => 'col-',
            'title'  => esc_html__( 'Extra Small', 'fashionstore' ),
            'icon'   => 'mdi mdi-cellphone-iphone',
            'width'  => '372px',
            'active' => FALSE
        ),
    );
} );


//----------------------------------------------------------------
// Responsive Hidden Inputs based on Twitter Bootstrap v4 alpha
//----------------------------------------------------------------
add_filter( 'upb_responsive_hidden_input', function ( $input ) {
    $input[ 'split' ]   = 5;
    $input[ 'suffix' ]  = array( '-up' => '&uarr;', '-down' => '&darr;' );
    $input[ 'disable' ] = array(
        'hidden-xs-up' => array( 'hidden-xl-up', 'hidden-lg-up', 'hidden-md-up', 'hidden-sm-up' ),
        'hidden-sm-up' => array( 'hidden-xl-up', 'hidden-lg-up', 'hidden-md-up' ),
        'hidden-md-up' => array( 'hidden-xl-up', 'hidden-lg-up' ),
        'hidden-lg-up' => array( 'hidden-xl-up' ),

        'hidden-xl-down' => array( 'hidden-lg-down', 'hidden-md-down', 'hidden-sm-down', 'hidden-xs-down' ),
        'hidden-lg-down' => array( 'hidden-md-down', 'hidden-sm-down', 'hidden-xs-down' ),
        'hidden-md-down' => array( 'hidden-sm-down', 'hidden-xs-down' ),
        'hidden-sm-down' => array( 'hidden-xs-down' )
    );

    return $input;
} ); 


//----------------------------------------------------------------
// Responsive Hidden Inputs based on Twitter Bootstrap v4
// Based on https://getbootstrap.com/docs/4.0/utilities/display/
//----------------------------------------------------------------

add_filter( 'upb_responsive_hidden_options', function () {

    $devices = upb_devices();

    $hidden_devices = array_map( function ( $device ) {
        return array(
            'id'    => $device[ 'id' ] === 'xs' ? 'd' : sprintf( 'd-%s', $device[ 'id' ] ),
            'title' => $device[ 'title' ],
            'icon'  => $device[ 'icon' ]
        );
    }, $devices );

    return array_values( $hidden_devices );
} );


add_filter( 'upb_responsive_hidden_input', function ( $input ) {
    $input[ 'split' ]   = 5;
    $input[ 'suffix' ]  = array( '-none' => '&times;', '-block' => '&#10003;' );
    $input[ 'disable' ] = array(
        'd-none'    => array( 'd-block' ),
        'd-sm-none' => array( 'd-sm-block' ),
        'd-md-none' => array( 'd-md-block' ),
        'd-lg-none' => array( 'd-lg-block' ),
        'd-xl-none' => array( 'd-xl-block' ),

        'd-block'    => array( 'd-none' ),
        'd-sm-block' => array( 'd-sm-none' ),
        'd-md-block' => array( 'd-md-none' ),
        'd-lg-block' => array( 'd-lg-none' ),
        'd-xl-block' => array( 'd-xl-none' )
    );

    return $input;
} );

You can combine one .d-*-none class with one .d-*-block class to show an element only on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-none shows the element only on medium and large devices). Please check more on https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

results matching ""

    No results matching ""