Enable Tab Deep Linking

Whether you’re using the Tabs element of the layout builder or the [tabs] shortcode in your content, the Theme Blvd framework uses Bootstrap’s tabs with some custom styling. By default, there’s no way for tab deep linking, but we’ve built in a custom way to get it going.

What do I mean by tab deep linking? — This means you can link to your page containing the tabs in a way that will open a specific tab on page load.

First, you need to filter themeblvd_tabs_deep_linking to true, from your child theme’s functions.php.

add_filter( 'themeblvd_tabs_deep_linking', '__return_true' );

Now, some extra JavaScript will be enabled in the framework that looks for a potential tab ID in the URL of every page. Also, the ID’s generated within tabs will be more human readable. The ID of the tab you’re linking to will be the name of the tab in all lowercase, replacing any spaces with underscores — i.e. “Our Vision” will have ID, our_vision.

So now when linking to a tab, you just need to prefix the ID of the tab with #tab_ in the URL you link to like this:

http://your-site.com/page-with-tabs/#tab_our_vision