• Accordion Tab Title URLs in WordPress

In case you couldn’t tell from my last blog post, I am not a web designer by trade. My day job comes as a Network Consultant, meaning I have a very technical background in things like operating systems, networking equipment, and server hardware/software; but limited knowledge when it comes to things like HTML, PHP,  and CSS. That’s why I chose the WordPress platform when it came time to start a website for my podcast. It’s user-friendly, has tons of community support via themes and plugins, and can be highly customizable for those that are adventurous. Today, I am going to share with you one of the customizations I used on this very site to make Accordion Tab Titles link to URLs of my choosing.

 

 

First off, you may be asking what an accordion tab title even is. The “Who are the hosts?” section on our Home page is an example of one. Here’s another:

accordion-menu-example

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

An accordion menu is basically a menu element on a webpage with several sub-items that can be collapsed or expanded by clicking on the title heading. (Think like how an accordion player expands and contracts his instrument, hence the name.) You can also have an accordion menu that stays statically expanded and is not collapsible, such as the example from our Home page. In this case, when the menu cannot be collapsed, clicking on the title heading does nothing. I thought this was kind of lame and decided that I wanted those title headings to still be clickable and just link to a URL of my choosing. Unfortunately, this ability was not baked into the plugin that I use to create my WordPress pages, so I had to edit a few lines of code in order to get it to work. Here’s how I did it…

 

Pre-Requisites

1. WPBakery Visual Composer Plugin for WordPress – This plugin comes included in many themes but you can purchase it standalone HERE
2. Basic knowledge of PHP, HTML, and WordPress Shortcodes

Disclaimer

This tutorial involves altering php files in your Visual Composer plugin. This can potentially BREAK your site. ALWAYS have a backup copy of the original plugin files available that you can upload to your webhost if something bad happens. I am NOT a php programmer. I am NOT an expert at this.  Any changes you make are done AT YOUR OWN RISK and I CANNOT SUPPORT YOU IF YOU BREAK YOUR SITE.

 

OverView

By default, when you add a new accordion menu to your page using Visual Composer, the only field you are presented with for each individual section of the menu is the section title. We need to customize the Visual Composer Editor to include an additional field in this menu for the URL we want the link to go to. That will give us a parameter we can use to tell the Visual Composer Plugin that we want to use this URL for the link that appears for each section title of the accordion menu.

Step-By-Step

1. If not already done, install the WPBakery Visual Composer plugin into your WordPress installation. (Follow their documentation if you don’t know how.)

 

2. In WordPress, go to edit the page you want to add the accordion menu to. Make sure you’re in VisualComposer mode and not “Classic Editor”.

 

3. Click Add Element and select Accordion. You should now see something like this at the bottom of your page: Capture2

 

If you hover your mouse where the red box is, a yellow pencil icon will appear and that’s where you can put in the title of the overall menu (“Who are the hosts?” in my example). If you click on the gray pencil in the center (blue box), here is where you can give each section of the accordion a title (me and my dad’s name in my example). As you can see, there is only one field. We need to change that.

 

4. After you enter in your titles, save the changes made to your page. Now go to Plugins -> Editor in your WordPress Dashboard. At the top right where it says “Select which plugin to edit”, make sure you choose WPBakery Visual Composer from the dropdown menu. Then look for the link under that which says “js_composer/config/maps.php” and click it.

 

5. Now the main editor window contains the contents of the map.php file. This file is what tells the Visual Composer Editor which fields to ask you for when you are editing elements on your page. Scroll down and look for the line that says “Accordion Section”. (Protip: Use the find feature to locate this line quicker. Ctrl+F does it in most Windows browsers.) The section of code should look like this:

 

vc_map( array(
 "name" => __("Accordion Section", "js_composer"),
 "base" => "vc_accordion_tab",
 "allowed_container_element" => 'vc_row',
 "is_container" => true,
 "content_element" => false,
 "params" => array(
 array(
 "type" => "textfield",
 "heading" => __("Title", "js_composer"),
 "param_name" => "title",
 "description" => __("Accordion section title.", "js_composer")
 ),
),
 'js_view' => 'VcAccordionTabView'
) );

 

As you see, this code is dedicated to the Accordion Section Tab element. The vc_map function essentially “maps” custom Visual Composer WordPress shortcodes to parameters that can be manipulated with functions in other PHP files. The VC Editor you use when you edit your pages is just a visual representation of these shortcode options. All you really need to know here is that there’s only one parameter array here, for the title, and we need to add another one for our Title URL. We’re going to add to the last few lines of this function based on the same syntax used for the title field and just modify it a bit to be used as the Title URL field. Your new code will look like the following.

 

vc_map( array(
 "name" => __("Accordion Section", "js_composer"),
 "base" => "vc_accordion_tab",
 "allowed_container_element" => 'vc_row',
 "is_container" => true,
 "content_element" => false,
 "params" => array(
 array(
 "type" => "textfield",
 "heading" => __("Title", "js_composer"),
 "param_name" => "title",
 "description" => __("Accordion section title.", "js_composer")
 ),
 array(
 "type" => "textfield",
 "heading" => __("TitleURL", "js_composer"),
 "param_name" => "titleurl",
 "description" => __("Accordion section title url.", "js_composer")
 ),
 ),
 'js_view' => 'VcAccordionTabView'
) );

 

Once you’re done editing the code, you must click “Update File” for the changes to become active. Now go back to edit the page we added the accordion menu to earlier. Click the gray pencil again to edit one of your Section Titles. You should now see something similar to this:

Capture3

Go ahead and put in the URL you want to use and click Save. However, we’re not done yet!

6. In Step 5, we told Visual Composer that our Accordion Sections should have a TitleURL field in addition to the original Title field. Now we need to tell Visual Composer what to do with the information it receives from that field. For this we need to go back to our Plugin Editor and find the “js_composer/composer/shortcodes_templates/vc_accordion_tab.php” file. The code in this file is what determines how your WordPress theme formats and displays the title headings in your accordion menus. (For some reason WordPress does not make this straightforward to get to. You have to click a few of the other files before seeing the full list of .php files. Just keep clicking around until you see the big list of files.) The original code will look like this:

 


<!--?php $output = $title = ''; extract(shortcode_atts(array(  'title' =--> __("Section", "js_composer")
), $atts));

$css_class = apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, 'wpb_accordion_section group', $this->settings['base']);
$output .= "\n\t\t\t" . '</pre>
<div class="'.$css_class.'" style="padding-left: 30px;">';
 $output .= "\n\t\t\t\t" . '
<h3 class="wpb_accordion_header ui-accordion-header"><a href="#'.sanitize_title($title).'">'.$title.'</a></h3>
';
 $output .= "\n\t\t\t\t" . '
<div class="wpb_accordion_content ui-accordion-content clearfix">';
 $output .= ($content=='' || $content==' ') ? __("Empty section. Edit page to add content here.", "js_composer") : "\n\t\t\t\t" . wpb_js_remove_wpautop($content);
 $output .= "\n\t\t\t\t" . '</div>
';
 $output .= "\n\t\t\t" . '</div>
<pre style="padding-left: 30px;"> ' . $this->endBlockComment('.wpb_accordion_section') . "\n";

echo $output;

 

Now, I’m not going to pretend that I can break down exactly what is going on for each line in this file, but I can tell you that Line 10 is where the hyperlink and URL are being determined. Currently, the actual text of the hyperlink is coming from our “$title” parameter, and the URL for it is an anchor link based on a santized (aka shortened) version of that “$title” parameter, created using the .sanitize_title function. The first thing we need to do is declare our newly created “$titleurl” variable in this file, and use it in place of the .sanitize_title function. This will give us the link we want to use when the page is on our site. The new code looks like this:

 


<!--?php $output = $title = ''; extract(shortcode_atts(array(  'title' =--> __("Section", "js_composer"),
 'titleurl' => '#'
), $atts));

$css_class = apply_filters(VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, 'wpb_accordion_section group', $this->settings['base']);
$output .= "\n\t\t\t" . '</pre>
<div class="'.$css_class.'" style="padding-left: 30px;">';
 $output .= "\n\t\t\t\t" . '
<h3 class="wpb_accordion_header ui-accordion-header"><a href="'.$titleurl.'" target="blank">'.$title.'</a></h3>
';
 $output .= "\n\t\t\t\t" . '
<div class="wpb_accordion_content ui-accordion-content clearfix">';
 $output .= ($content=='' || $content==' ') ? __("Empty section. Edit page to add content here.", "js_composer") : "\n\t\t\t\t" . wpb_js_remove_wpautop($content);
 $output .= "\n\t\t\t\t" . '</div>
';
 $output .= "\n\t\t\t" . '</div>
<pre style="padding-left: 30px;"> ' . $this->endBlockComment('.wpb_accordion_section') . "\n";

echo $output;

 

Our new line 6 is where we declare the variable and give it a default value. In this case, I chose “#” so that if you don’t need for the title to go to a specific URL, clicking the link does nothing. Our new line 11 (previously line 10) is now using the “$titleurl” variable from our shortcode as the URL address for the link. Click Update File to save your changes.

 

That’s it! You’re done. If you go view the page that contains your accordion menu, the section titles should now be hyperlinks to URLs of your choosing. If you have any issues, feel free to comment on this post and I’ll do my best to try and help.

 

Resources

Visual Composer Developer Knowledgebase – This is a reference page that completely explains the Visual Composer API and how to customize it. It’s targeted for developers so it’s not terrible easy to understand but this is how I figured out what I was trying to do was possible. Start here if your having problems with your code or you want a better understanding of what’s going on under the hood.

 

WordPress Shortcodes API – Official WordPress documentation explaining how shortcodes are used. Again, targeted more towards developers, but gives you background information that may help you with this customization or others that you may want to do.

  • vince

    Great code!

    I used this code and everything seems to work fine except that the page did not get the ‘titleurl’, it still gets the default value (#) even though I have declared the link in the backend.

    Visual Composer ver: 4.3.3

    • vince

      Got it working now, the accordion title now has a link, but the problem now is it does not transfer to the link url.

      • Mike Carroll

        After you make the code changes, the Title field should control whether the link displays or not, and the TitleURL field controls where the link actually goes when clicked. Do you have both field filled out?