Tabs widget for Page Builder

This post will serve as a quick summary/docs page for our new Tabs widget for Page Builder plugin.

Firsty I would like to address the issues:

  • this widget works only in the Page Builder by SiteOrigin editor, so don’t use it in WordPress sidebars as a regular widget. This issue has been fixed in version 1.1.0., so you can now use this widget also in the WP sidebars.
  • the front end design is “bare bones”. It has only the default Bootstrap design of the tabs: link. So you should style it to your own liking with custom CSS. Maybe we will add some custom skins in the future, but I can’t make any promises.

Both items on the above list might be fixed in later version of the plugin, but again, I can’t make any promises.

There are no settings in the plugin, just two WordPress filters:

  • ‘pt-tabs/enqueue_admin_scripts’ and
  • ‘pt-tabs/enqueue_frontend_scripts’

You can make use of them to disable enqueuing of certain files, that might be already enqueued in the theme.

The above filters have default values, so with this code there would be no changes. But for example in our Beauty theme by Proteus Themes, we are using this filter code:

With this code we are disabling the enqueuing of the frontend scripts, because we already have the appropriate bootstrap JS and CSS code included inside our theme. And we also use the mustache.js library inside the theme and so we just pass the name of the registered library (this also saves us from enqueueing a second copy of mustache.js).

I hope this posts helped you in some way, otherwise I would advise you to check the plugin code (it’s a small plugin). Or you can ask questions in the support section of the plugin: https://wordpress.org/support/plugin/tabs-widget-for-page-builder.

 

24 comments on “Tabs widget for Page Builder

  1. Hi, there is little bug in this plugin: there

    class-tabs-widget.php

    on line 59 there should not be
    it should be on line 58.

    great plugin anyway 🙂

    Regards

  2. Hey man great plugin, only problem is the initial active tab doesn’t remove its class active when another tab is clicked.. thanks

  3. Hi, I’ve got a problem with your plugin. I’m trying to turn restaurant menu on my website into tabbed version. I’m using Restaurant plugin (https://wordpress.org/plugins/restaurant) and Page Builder, but this restaurant plugin doesn’t work with yours. Only the first tab content is visible (in all tabs where I used this plugin). But i.e. simple Text plugin works fine (even along with restaurant ones).

    Could you help me?

  4. Hmm… I don’t think this is the case. The plugin is all php. I also analyzed the website with browser dev tools and found out that the content of every tab related to restaurant plugin is the same. I was changing value of ‘display’ selector from ‘block’ to ‘none’ and vice versa, and every tab’s content was the same. I tried different tab order few times but every restaurant related tab content is always equal to the first tab with restaurant widget.

  5. Hi Tom,

    aha I see, there is no JS code indeed.

    I don’t know what could be the problem… could you please try to add some different content on some of the tabs. Just add a text editor widget, with some content, on the 3rd tab and see if the tab displays that content on front-end. That will let you know, if the tabs plugin is not working ok, or if the restaurant plugin does not work ok in a tabbed content.

    Take care!

    • I’m sorry if my English is not so good (I’m not native speaker) but I explained that:
      “But i.e. simple Text plugin works fine (even along with restaurant ones).”

  6. Hi Tom,

    your English is great! I guess I missed that from your previous comment, I’m sorry…

    That does mean, that the Restaurant plugin is not working ok in a tabbed content and I can’t really help you with that, since that is not my plugin.

    Take care!

  7. Hello!

    Awesome plugin! Thank you for building it.

    I notice that I can’t insert a in between tab link, for example, on one of the tabs, i put a program description, on the second tab i insert the program rules. On the fist tab, I can’t insert a button labeled “Please check the rules” and link it to the second tab, even though the link is #Tab-something.

    Is there any workaround?

  8. Is there a way to change the default “start” tab in the “Tabs Widget for Page Builder” version? I want my tabs in their current order, but I don’t want the first tab opened. I saw a similar post answer this, but it looks like it was not specifically related to the SiteOrigin version. Perhaps you can add a checkbox to the plugin to mark that tab you want opened by default (otherwise it opens the first)?

  9. Hi Lars,

    there is no option like that in the plugin, however you could trigger a click on the tab you want to be opened by default with some custom JS/jQuery code on the page ready event. The click code would looks something like this:

    jQuery( ‘.pt-tabs a[href=”#tab-massage”]’ ).click();

    where the ‘#tab-massage’ is the tab you want to have opened by default.

    Take care!

  10. Hi,

    yes it’s possible, but you would need to add some custom JS code to your page, where the tabs widget is being used. Something like this:

    Add this code in a text widget above the tabs widget.

    Take care!

    PS: the tabs widget on this page is not our tabs widget for page builder… it’s some other plugin, just so you know.

  11. Hi thanks for the help i now use the tabs from protetus. To bad that the code is not working. Don’t know what i’m doing wrong. Do I need to change the code somewhere? I now made a new row above the tab widget with this code in the text editor is that the right way? I also tried to set the code in the tab I want te link is using. Doesnt work also. Do you know what im doing wrong?

    If you click on my website it’s the only link there. That link is supposed to open the 3th tab. ” Mijn bijdragen”

  12. Hi,

    yes you have to change the code I gave you to:

    Then the link like this should trigger the tab:
    http://i317248.iris.fhict.nl/S6/?page_id=262#tab-mijn-bijdragen

    Take care!

Leave a Reply

Your email address will not be published. Required fields are marked *