This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Add Custom Tabs Builder Element

  • Creator
    Topic
  • #12993
    mizzinc
    Participant

    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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #13008
    Jason Bobich
    Keymaster

    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 ...
    }
    #13011
    mizzinc
    Participant

    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.

    #13026
    Jason Bobich
    Keymaster

    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.

    #13028
    mizzinc
    Participant

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.