Request open a tab by clicking on a page link, tab deep linking

[bartwindrum]

Jason, I’m using tabs extensively on 3 primary pages on my site. I wonder: is it in the realm of possibility to enhance Akita to enable making a clickable link to activate a tab?

Topic

[Jason Bobich]

Hey Bart,

I’ve had various people ask about this in the last couple years across different themes. I’ll add this to the next update to the framework, but this isn’t going to come out for awhile.

Unfortunately allowing this to be possible I think is really too complicated to try and do from a child theme the way it is now.

You’d have to re-write the entire themeblvd_tabs() function from your child theme because it has no filter in it. It would need to be re-written to use some human-readable ID for each tab that always remains the same, opposed to generating a random ID every time the page loads for each tab like “tab_1_xxxxxxxxxxxxxx”.

Note: This was originally done so people could have multiple tabs elements on the same page without ever having conflicts. If I could do it over again, I would just take whatever the user puts for the Title of the tab, and make it into an ID like “My Tab 1” would become “mytab1” for example.

Anyway, then you’d have to enqueue a javascript file in your child theme and write the necessary jquery to interact with the tabs based on whether there’s a #whatever in the URL.

[bartwindrum]

Even as a non-coder I suspected it’d be involved to try to work around. The issue arose for me when referencing where a reader will find subsequent information and that mention is at the bottom of tab 1, referring to the top of tab 2. So a user friendly clickable link would require that the page scroll (and not reload the page).

Over and out.

[Jason Bobich]

This is in there for the next update. I will probably forget when the next update gets posted, so I’ll just post the info here now, for future reference.

=======

So, starting in Akita 2.1.4 or Akita 2.2.0, which ever comes first, you can do this from your child theme’s functions.php to enable tab deep linking.

add_filter( 'themeblvd_tabs_deep_linking', '__return_true' );

The ID of the tab you’re linking to will be the name of the tab in all lowercase, replacing any spaces with underscrores — i.e. “My Tab Title” has id “my_tab_title”.

And then when linking to a tab, you need to prefix the id of the tab with “tab_” — For example:

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

[bartwindrum]

Jason, thank you for adding this! Happy spring.

[Jason Bobich]

You’re welcome!

[Wendell Harness]

I’m pleased to report that this works in Jump Start as well.

[Jason Bobich]

Yup, should work in all themes using latest framework. 😉

[Author]

Replies