Add Custom Tabs Builder Element

[mizzinc]

Hi Jason,

I am considering adding a custom tabs element for the layout builder. Basic requirement is to add few more fields (Tab #1 Name, Tab #1 Image, Tab #1 Position, Tab #1 Company).

Reviewing the support documentation I see the formatting options uses type, ‘tabs’, which is generated from the ‘themeblvd_tabs_option’ function.

So, using the themeblvd_add_builder_element() method how would you go about implementing this?
At a glance I need to recreate the themeblvd_tabs_option() function to create the extra fields, but how to hook in to themeblvd_option_fields()?

I hope that makes sense.

– Michael

Topic

[Jason Bobich]

Hi,

Here’s a starting point for you copying from the Builder’s API you can use:

/**
 * Setup options for tabs.
 */
$tab_options = array(
	'subgroup_start' => array(
		'type'		=> 'subgroup_start',
		'class'		=> 'tabs'
	),
	'setup' => array(
		'id' 		=> 'setup',
		'name'		=> __( 'Setup Tabs', 'themeblvd_builder' ),
		'desc'		=> __( 'Choose the number of tabs along with inputting a name for each one. These names are what will appear on the actual tab buttons across the top of the tab set.', 'themeblvd_builder' ),
		'type'		=> 'tabs'
	),
	'height' => array(
		'id' 		=> 'height',
		'name'		=> __( 'Fixed Height', 'themeblvd_builder' ),
		'desc'		=> __( 'Apply automatic fixed height across all tabs.<br><br>This just takes the height of the tallest tab\'s content and applies that across all tabs. This can help with "page jumping" in the case that not all tabs have equal amount of content. It can also help in the case when you\'re getting unwanted scrollbars on the inner content areas of tabs.', 'themeblvd_builder' ),
		'std'		=> 1,
		'type'		=> 'checkbox'
	),
	'tab_1' => array(
		'id' 		=> 'tab_1',
		'name'		=> __( 'Tab #1 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the first tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_2' => array(
		'id' 		=> 'tab_2',
		'name'		=> __( 'Tab #2 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the second tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_3' => array(
		'id' 		=> 'tab_3',
		'name'		=> __( 'Tab #3 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the third tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_4' => array(
		'id' 		=> 'tab_4',
		'name'		=> __( 'Tab #4 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the fourth tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_5' => array(
		'id' 		=> 'tab_5',
		'name'		=> __( 'Tab #5 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the fifth tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_6' => array(
		'id' 		=> 'tab_6',
		'name'		=> __( 'Tab #6 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the sixth tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_7' => array(
		'id' 		=> 'tab_7',
		'name'		=> __( 'Tab #7 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the seventh tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_8' => array(
		'id' 		=> 'tab_8',
		'name'		=> __( 'Tab #8 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the eighth tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_9' => array(
		'id' 		=> 'tab_9',
		'name'		=> __( 'Tab #9 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the ninth tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_10' => array(
		'id' 		=> 'tab_10',
		'name'		=> __( 'Tab #10 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the tenth tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_11' => array(
		'id' 		=> 'tab_11',
		'name'		=> __( 'Tab #11 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the eleventh tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'tab_12' => array(
		'id' 		=> 'tab_12',
		'name'		=> __( 'Tab #12 Content', 'themeblvd_builder' ),
		'desc'		=> __( 'Configure the content for the twelfth tab.', 'themeblvd_builder' ),
		'type'		=> 'content',
		'options'	=> array( 'page', 'raw', 'widget' )
	),
	'subgroup_end' => array(
		'type'		=> 'subgroup_end'
	)
);

/**
 * Add My Tabs element
 */
themeblvd_add_builder_element( 'my_tabs', 'My Tabs', 'none', $tab_options, 'display_my_tabs' );


/**
 * Display My Tabs element
 */
function display_my_new_element( $id, $options, $location ) {
	// Display tabs ...
}

[mizzinc]

Thanks Jason,

Yes I understand how to do the above.
Where it calls ‘type= > ‘tabs’. I would like to know how to add my own custom tabs field options.

[Jason Bobich]

I honestly wouldn’t even know where to being explaining how to change that, as it’s not something that’s meant to be changed. You’ve got the function that displays it, the function that sanitizes it, and the javascript that makes it work.

I’m just not sure what I can really tell you for what you’re trying to do. You could add “upload” type options in the array of options there with each tab’s content, but then they’re not going to show/hide with the javascript of the option. It just has several parts customized around its current, specific functionality.

[mizzinc]

Thanks Jason. That’s no problem at all. I suppose, I could just edit the main files, but that would definitely be an absolute last resort.

I will just approach my customisation from another angle.

[Author]

Replies