Create shortcodes for Materialize Tabs

<h3 class="entry-title">Create shortcodes for Materialize Tabs</h3>
Posted on



 

Goal Create a series of shortcodes that generates the tabs component from materialize.

Requirements

- Set Tab Titles
-  Tab content can be short code

Future Improvement

- Define or determine number of tabs.

Sources
- https://materializecss.com/tabs.html

 

function prepare_tcp_tabs () {

add_shortcode(‘tcp_tab_content’, function ($atts, $content = null) {
		$id = ”;
		if ($atts && $atts{‘id’}) {
			$id = $id . $atts{‘id’};
		}
		$html = ‘<div id="' . $id. '" class="col s12">‘ .
			do_shortcode( $content) . 
		‘</div>‘;
		return $html;
	} );

	add_shortcode('tcp_tabs', function ($atts, $content = null) {
		$html = ‘<div class="row">‘ .
        ‘<div class="col s12">‘ .  
          do_shortcode( $content) . 
        ‘</div>‘ .
      ‘</div>‘;
    
		return $html;
	} );

	add_shortcode(‘tcp_tab_titles’, function ($atts, $content = null) {
		$html = '<ul class="tabs">' .  
					do_shortcode( $content) . 
				‘</ul>‘;
		return $html;
	} );

	add_shortcode(‘tcp_tab_header’, function ($atts, $content = null) {

		$id = ‘#’;
		$name = ”;
		if ($atts && $atts{‘id’}) {
			$id = $id . $atts{‘id’};
		}
		if ($atts && $atts{‘name’}) {
			$name = $atts{‘name’};
		}
		$html = ‘<li class="tab col s4"><a href="' . $id . '">‘ . $name . ‘ </a></li>‘;
		return $html;
	} );
	
	
}
add_action( ‘init’, ‘prepare_tcp_tabs’ );

The resulting shortcodes can be now used as in the image below

]