Below, you’ll find a detailed guide on how to add the Tabby Responsive Tabs Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Tabby Responsive Tabs Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Tabby Responsive Tabs Plugin and the shortcodes it provides:
"Tabby Responsive Tabs is a WordPress plugin that enhances your website's usability by creating responsive tabbed content. It's easily customizable and mobile-friendly."
- [tabby]
- [tabbyending]
Tabby Responsive Tabs [tabby] Shortcode
The Tabby Responsive Tabs plugin shortcode enables the creation of responsive tabs within your WordPress content. It uses the shortcode [tabby] to add a new tab. The shortcode function cc_shortcode_tabby initializes the first tab and sets the global reset_firsttab_flag. It accepts several attributes like ‘title’, ‘open’, ‘icon’, ‘class’, and ‘required’. The ‘title’ attribute is used to set the tab’s title, which is sanitized and converted to a suitable format. The ‘open’ attribute, if set, or if the target URL parameter matches the tab title, activates the tab. The ‘icon’ attribute allows you to add a Font Awesome icon to the tab title. The ‘class’ attribute lets you add a custom CSS class to the tab content.
Shortcode: [tabby]
Parameters
Here is a list of all possible tabby shortcode parameters and attributes:
title– The title of the tabopen– If set, the tab will be active on page loadicon– Font-Awesome icon to display on the tabico– Non-AutoPrefixed icon to display on the tabclass– CSS class to apply to the tabrequired– If set to TRUE, the tab must be filled out
Examples and Usage
Basic example – A basic usage of the tabby shortcode to create a tab with a title.
[tabby title="Tab Title"]Advanced examples
Creating a tab with a title, an icon from font-awesome, and setting it to be open by default.
[tabby title="Tab Title" icon="star" open="true"]Adding a custom CSS class to the tab and the tab content. This can be useful for custom styling.
[tabby title="Tab Title" class="custom-class"]Using the shortcode to create a tab with a title, an icon, and making it required. If the required attribute is set to TRUE, the tab will not be able to be closed.
[tabby title="Tab Title" icon="star" required="true"]PHP Function Code
In case you have difficulties debugging what causing issues with [tabby] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'tabby', 'cc_shortcode_tabby' );Shortcode PHP function:
function cc_shortcode_tabby( $atts, $content = null ) {
//* initialise $firsttab flag so we can tell whether we are building the first tab
global $reset_firsttab_flag;
static $firsttab = TRUE;
if ($GLOBALS["reset_firsttab_flag"] === TRUE) {
$firsttab = TRUE;
$GLOBALS["reset_firsttab_flag"] = FALSE;
}
$args = shortcode_atts( array(
'title' => '',
'open' => '',
'icon' => '',
'ico' => '',
'class' => '',
'required' => FALSE,
), $atts );
$tabtarget = sanitize_title_with_dashes( remove_accents( wp_kses_decode_entities( $args['title'] ) ) );
$tab_title_element = cc_sanitize_html_element( get_option( 'cc_tabby_tab_title_element', 'h2' ) );
$class = sanitize_html_class( $args['class'] );
//* initialise urltarget
$urltarget = '';
//* grab the value of the 'target' url parameter if there is one
if ( isset ( $_REQUEST['target'] ) ) {
$urltarget = sanitize_title_with_dashes( $_REQUEST['target'] );
}
//* Set Tab Panel Class - add active class if the open attribute is set or the target url parameter matches the dashed version of the tab title
$tabcontentclass = "tabcontent";
if ( $class != '' ) {
$class = ' ' . $class;
$tabcontentclass .= " " . $class . "-content";
}
if ( ( ( $args['open'] ) && ( $urltarget == '' ) ) || ( isset( $urltarget ) && ( $urltarget == $tabtarget ) ) ) {
$tabcontentclass .= " responsive-tabs__panel--active";
}
//* Set the icon style for font awesome
switch ( esc_html( get_option( 'cc_tabby_fa_icon_style', 'regular' ) ) ) {
case 'solid':
$faclass = 'fa-solid';
break;
case 'thin':
$faclass = 'fa-thin';
break;
case 'light':
$faclass = 'fa-light';
break;
case 'duotone':
$faclass = 'fa-duotone';
break;
default: //* regular
$faclass = 'fa';
}
//* Add span for icon if icon (font-awesome) or ico (non-autoprefixed) is present
if ( $args['icon'] ) {
$addtabicon = '<span class="' . $faclass . ' fa-' . sanitize_html_class( $args['icon'] ) . '"></span>';
} elseif ( $args['ico'] ) {
$addtabicon = '<span class="' . sanitize_html_class( $ico ) . '"></span>';
} else {
$addtabicon = '';
}
//* test whether this is the first tab in the group
if ( $firsttab ) {
//* Set flag so we know subsequent tabs are not the first in the tab group
$firsttab = FALSE;
//* Build output if we are making the first tab
return '<div class="responsive-tabs">' . "\n" . '<' . $tab_title_element . ' class="tabtitle' . $class . '">' . $addtabicon . wp_kses( $args['title'], array( 'br' => array(), 'strong' => array(), 'em' => array(), 'i' => array() ) ) . '</' . $tab_title_element . '>' . "\n" . '<div class="' . sanitize_text_field( $tabcontentclass ) . '">' . "\n";
}
else {
//* Build output if we are making a subsequent (non-first tab)
return "\n" . '</div><' . $tab_title_element . ' class="tabtitle' . $class . '">' . $addtabicon . wp_kses( $args['title'], array( 'br' => array(), 'strong' => array(), 'em' => array(), 'i' => array() ) ) . '</' . $tab_title_element . '>' . "\n" . '<div class="' . sanitize_text_field( $tabcontentclass ) . '">' . "\n";
}
}
Code file location:
tabby-responsive-tabs/tabby-responsive-tabs/tabby-responsive-tabs.phpTabby Responsive Tabs [tabbyending] Shortcode
The ‘tabbyending’ shortcode from the Tabby Responsive Tabs plugin is used to close a tab. It checks if default styles are active, and if not, enqueues the necessary styles and scripts. It also resets the first tab flag.
Shortcode: [tabbyending]
Examples and Usage
Basic example – The shortcode ‘tabbyending’ is used to close a tab section. It does not require any parameters or attributes.
[tabbyending /]Advanced examples
While the ‘tabbyending’ shortcode does not require any parameters or attributes, it can be combined with other shortcodes to create more complex tab structures. Here are a few examples:
Creating a tab section with two tabs:
[tabby title="Tab 1"]
Tab 1 content here
[tabby title="Tab 2"]
Tab 2 content here
[tabbyending /]Creating a tab section with nested tabs:
[tabby title="Tab 1"]
Tab 1 content here
[tabby title="Tab 2"]
Tab 2 content here
[tabby title="Sub Tab 1"]
Sub Tab 1 content here
[tabbyending /]
[tabbyending /]Note: The ‘tabby’ shortcode is used to start a new tab, and the ‘tabbyending’ shortcode is used to close a tab or a group of tabs. Each ‘tabby’ shortcode should have a corresponding ‘tabbyending’ shortcode.
PHP Function Code
In case you have difficulties debugging what causing issues with [tabbyending] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'tabbyending', 'cc_shortcode_tabbyending' );Shortcode PHP function:
function cc_shortcode_tabbyending( $atts, $content = null ) {
//* add screen styles, but only if the customiser or a custom styles plugin is not active
if ( ( !function_exists( 'cc_remove_tabby_default_css' ) ) && ( !function_exists( 'cc_remove_tabby_default_style' ) ) && ( 1 == get_option( 'cc_tabby_default_styles' ) ) ) {
wp_enqueue_style( 'tabby' );
}
//* Add print-only styles
wp_enqueue_style( 'tabby-print' );
//* Add script
wp_enqueue_script( 'tabby' );
//* action hook to add custom styles etc
do_action( 'cc_tabby' );
$GLOBALS["reset_firsttab_flag"] = TRUE;
return '</div></div>';
}
Code file location:
tabby-responsive-tabs/tabby-responsive-tabs/tabby-responsive-tabs.phpConclusion
Now that you’ve learned how to embed the Tabby Responsive Tabs Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply