PressTigers
Using Page Builder Extension to Add Custom Columns Layout in Unyson Framework
- November 10, 2016
- Leave a comment
In Unyson framework, multiple pages with custom columns layout can be created by utilizing visual drag and drop page builder extension. With a specific theme directory structure, Unyson framework can be extended. Following is the WordPress theme directory structure for builder extension:
wp-content → Themes → twentysixteen → framework-customizations → extensions → builder
In order to add custom columns layout in Unyson, you may need to add the following files for builder extension:
- Config.php
- Static.php
.
In config.php file, use the following code to add items width array for custom columns:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<?php if (!defined('FW')) die('Forbidden'); $cfg = array(); $cfg['default_item_widths'] = array( '1_6' => array( 'title' => '1/6', 'backend_class' => 'fw-col-sm-2', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-2', ), '1_5' => array( 'title' => '1/5', 'backend_class' => 'fw-col-sm-15', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-15', ), '1_4' => array( 'title' => '1/4', 'backend_class' => 'fw-col-sm-3', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-3', ), '1_3' => array( 'title' => '1/3', 'backend_class' => 'fw-col-sm-4', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-4', ), '1_2' => array( 'title' => '1/2', 'backend_class' => 'fw-col-sm-6', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-6', ), '2_3' => array( 'title' => '2/3', 'backend_class' => 'fw-col-sm-8', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-8', ), '3_4' => array( 'title' => '3/4', 'backend_class' => 'fw-col-sm-9', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-9', ), '5_12' => array( 'title' => '5/12', 'backend_class' => 'fw-col-sm-5', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-5', ), '7_12' => array( 'title' => '7/12', 'backend_class' => 'fw-col-sm-7', 'frontend_class' => 'fw-col-xs-12 fw-col-sm-7', ), '1_1' => array( 'title' => '1/1', 'backend_class' => 'fw-col-sm-12', 'frontend_class' => 'fw-col-xs-12', ), ); |
In static.php file, use the following code to add custom CSS and register style for custom Grid Columns layout:
|
1 2 3 4 5 6 7 8 9 10 |
<?php if (!defined('FW')) die('Forbidden'); if (!is_admin()) { wp_register_style( 'fw-ext-builder-frontend-grid', get_template_directory_uri() .'/framework-customizations/extensions/builder/static/frontend-grid.css', array(), fw()->theme->manifest->get_version() ); } |
Additionally, frontend-grid.css file should be placed by creating a static directory.
User Comments