How to edit the Tabs IDs on Visual Composer

EDIT summer 2016: the new version of Visual Composer adds this feature automatically.

By default, Visual Composer’s tabs IDs are not editable, and are instead auto-generated with lots of unsemantic characters on them to avoid id duplication on the page.

This is fine, but, eventually, we may want a more user-friendly approach when it comes to bringing links to the user.

Additionally, Google may indirectly provide some benefits when a post-hash content is semantic on a given link with parameters (like custom Jump To’s on the Google’s impresion of the page).

Here’s a quick method to get your tab IDs editable in Visual Composer.

I’ve have yet to find some time and create a function to make it upgrade-proof but here’s the quick and dirty…

  1. Go to js_composer/config/map.php, and open it.
  2. Search for “Tab ID”
  3. Change the line that says ‘type’ => ‘tab_id’, for ‘type’ => ‘textfield’,
  4. Save, close and update the file

You should now find that on the backend the Tab ID field is editable.

The Modal Window for the individual tab (grey pencil icon for that tab) will show an editable textfield for the Tab ID
The Modal Window for the individual tab (you have to previously click on the grey pencil icon for that tab) will show an editable textfield for the Tab ID

Finally, remember to Save and Update the Post. Also change accordingly Menu links if you relied on them to open tabs, as it was our case.


3 people super-liked this.

5 thoughts on “How to edit the Tabs IDs on Visual Composer

  1. Hello, I have a problem with that you have explained.

    When you change the id tab and you go to the tab, you have the link something like this:

    But this is when you navigate with tabs, but if you have a personalized menu and create an item with subitem, in the subitem you have to put again “”. Here is my problem because if I go to the main menu and click in the subitem mi link is this:

    How can I delete the first underscore???

  2. Hi there!

    Yes, Visual Composer will always add a #tab before the custom id, like #tab-some-custom-keywords-here.
    So if you create custom menu items on Appearence > Menus, you have to write its URL the same exact way (with #tab-whatever).

    In case that your custom menu link adds an unexpected underscore when saving the Menu, then I don’t know what could it be, really.
    I would need to take a closer look. But it shouldn’t happen.

    Is there some javascript error in your Browser’s Console when loading the Appearence > Menus screen?


  3. Hi,

    I‘m testing and I’m sure that is the Theme because when I put the menu on the top instead of main and works OK. When I navigate on mobile also it works well and if I activate another theme it it’s also OK. So I have concluded that is the Theme.

    Thank you very much for your help.

    Take care and I’m wating for another post.


  4. Hi there! The last versions of Visual Composer allow us to customize our tabs IDs, also for the Tour sections!

    (Here’s their official docs.)

    Otherwise I’d suggest to search on that same file I talked about for some section called “Tour ID” or similar and proceed with the same method.


Leave a Reply

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