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.

* Set admin enqueue scripts for PT: Tabs widget for Page Builder
function pt_tabs_enqueue_admin_scripts( $parameters ){
	$parameters['mustache-js'] = 'mustache-js';
	$parameters['admin-js']    = true;
	return $parameters;
add_filter( 'pt-tabs/enqueue_admin_scripts', 'pt_tabs_enqueue_admin_scripts' );

* Set frontend enqueue scripts for PT: Tabs widget for Page Builder
function pt_tabs_enqueue_frontend_scripts( $parameters ){
	$parameters['main-js']  = true;
	$parameters['main-css'] = true;
	return $parameters;
add_filter( 'pt-tabs/enqueue_frontend_scripts', 'pt_tabs_enqueue_frontend_scripts' );

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:

* Set admin enqueue scripts for PT: Tabs widget for Page Builder
function pt_tabs_enqueue_admin_scripts( $parameters ){
	$parameters['mustache-js'] = 'beauty-mustache.js';
	return $parameters;
add_filter( 'pt-tabs/enqueue_admin_scripts', 'pt_tabs_enqueue_admin_scripts' );

* Set frontend enqueue scripts for PT: Tabs widget for Page Builder
function pt_tabs_enqueue_frontend_scripts( $parameters ){
	$parameters['main-js']  = false;
	$parameters['main-css'] = false;
	return $parameters;
add_filter( 'pt-tabs/enqueue_frontend_scripts', 'pt_tabs_enqueue_frontend_scripts' );

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:


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


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

    great plugin anyway 🙂


  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 ( 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!

    1. 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. Thanks so much for this plugin. I have a similar issue to the one described above but I can’t seem to make it work.

    1. I have a button link in tab 1 (overview) that I want to link so it goes to Tab #2 (Due Degree options.
    2. I put in the jS code in the header of the page but the link does not work.

    The page is here:

    1. Under overview tab I want “Learn More” under the heading M.L.S. Degree options to go to the second tab when it’s click. You can see I added the link but the JS code is not working.

    I put the JS code above in the header of the page.


  13. Hi Gene,

    sorry for the late reply…

    I’ve looked at your page and the click works ok. When I click on the “learn more” button it opens the second tab. So I guess, you already worked it out.

    Take care!

  14. Hi,

    We need an important features for our work.

    -> Widget hide if user is not logged in
    We use the Page Builder in many websites. On many landing pages, certain content on these pages may only be visible when the user is logged in. This means that logged in users receive more information than users who are not logged in.
    Concrete example:
    Redundant content that exists on many similar pages is not visible to users who are not logged in.
    – Search engines are not logged in, so there is no duplicate content
    – Price lists may only be visible on these pages for registered and logged-in members.
    There are many reasons why certain content on a web page should only be displayed after a login.
    There are plugins with which you can hide content according to certain rules, e.g. “Hide this” or “Restrict content”.
    But this not works in “Tabs widget for Page Builder”.
    The only option is to hack the widget, but it is a lot of work to change them after their updates.

    The solution is very simple, it lacks 2 parameters for example: codeBefore, coderAfter. In the text field “codeBefore” one then simply carries the ShortCode, e.g. for plug-in “Hide this” [hide for = “! logged in], then enter [/ hide] in the” coderAfter “text box.
    We’ve added the 2 fields in “Tabs widget for Page Builder” (inc/class-tabs-widget.php) so we can use the widget for both normal and hidden content.
    I think that many users of the “Tabs widget for Page Builder” appreciate this possibility, because you can also insert other functions with the 2 additional fields.

    It is a pity that the widget do not have this possibility. Either you have to use the hacking or other external widgets.
    Is it possible that you add 2 additional fields in the widget to expand the function of the widget in this regard?
    It does not take long to integrate the additional fields, making the widget much more flexible.

    Best regards

  15. Further improvement measure:
    can you add the tab_id to the li class for more style flexibility?
    (inc/class-tabs-widget.php -> public function widget)

    So I have the ability to give each tab its own color code.


    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab-" role="tab">


    <li class="nav-item tab-">


  16. Hi Gregor,

    This is by far (and probably will be for a long time) the best tab plugin that is truly compatible with siteorigin page builder. Great job!!!

  17. Hi George, Thank you for the widget.

    When utilizing the tab function at this website: [url removed] , the text line breaks and all the text pushes to the right when it is supposed to be at the bottom of the tabs.

    However the same tab function at this website: [url removed] which has the same design but has one less column of widgets works fine.

    Banseok Koo

    1. Hi Banseok,

      it looks like the theme might be overwriting the some CSS code, so this might help you out:

      .pt-tabs__content {
      float: left;

      Add this CSS code to Appearance -> Customize -> Additional CSS.

      Take care!

Leave a comment

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