Tabs widget – how to link to a specific tab

This question kept coming up on the Tabs widget for page builder plugin support, so I decided to write this short post about it.

How can we link to a specific tab?

This can be done with a bit of custom JavaScript code.

First we have to add a class and a href to the link/button, that will trigger the tab to open. For this example we will use this link <a class="js-trigger-tab" href="#tab-test-2">open test tab</a>. In the href you have to write the ID of the tab content div (in our example: #tab-test-2) that you want to open and you also have to set the class of the link to js-trigger-tab.

Then we need to add the JS code, which will open the tab:

That’s it 🙂

Let me know, if you have any questions in the comments section below.

WordPress – How to set “direct” filesystem method

There is only one short line of code needed to set the filesystem method for your WordPress site.

This line of code has to be added to wp-config.php file of your WordPress install. First search the wp-config.php file for “FS_METHOD” in case that it’s already defined. If that’s the case, then just change the value to “direct”. Otherwise add this line:

above this comment in the wp-config.php file:

So the code in wp-config.php will look like this :

That’s it 🙂

More info on FS_METHOD.

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.

 

How to add a custom post type into the sub-menu of a custom menu

Yeah I know the title is a bit weird, but it describes the problem that I faced today. I started developing my first real plugin and I wanted to achieve the following:

  1. create an admin menu page, with function add_menu_page()  -> easy,
  2. add a sub-menu page called “settings”, with function add_submenu_page() -> easy,
  3. register a custom post type and put it under the menu from point 1. -> easy, but not for a beginner  🙂

Maybe a picture will help.

Main admin menu

“TTLM” is a menu page that I created, “settings” is the sub-menu page. I wanted to add a custom post type named “Teams” to be placed in between.

This is how I accomplished it:

 

So basically:

  1. when registering a custom post type set the ‘show_in_menu’ argument to false,
  2. when adding a sub-menu item set the callback function to NULL and the menu_slug to the custom post type, e.g. ‘edit.php?post_type=your_custom_post_type_name_goes_here’

I hope this helps and if you have any questions don’t hesitate to ask in the comments bellow.