I AM LISTENING TO
|
WHAT I LIKE
  • en
  • de

Extending the Visual Composer Row element with a new property

7. November 2014








Extending the Visual Composer Row element with a new property

Visual Composer for WordPress provides many ways to extend its functionality. There are already many add-ons available for this dynamic page builder, but its easy to do the extending yourself,  by following the hints in the documentation ;)

In this small tutorial we are adding a “type” field to allow a special css class to be added to each of our row containers.

New Visual Composer element properties can be easily added by using the vc_add_param function. See documentation for more information. In our case we are adding a property to the vc_row element.

ADJUSTING YOUR THEME

By adding the following lines to your themes functions.php, this new property will show in the admin row settings popup.

The new setting will be saved, when you save your document, but you wont see any changes on the frontend yet! Our goal is to switch a css class depending on the type we selected.

Each element within Visual Composer has its own template and these templates can be overruled using your own theme templates. In this case vc_row.php.

  1. Create a new folder “vc_templates” in your theme or child-theme.
  2. Copy vc_row.php from /wp-content/plugins/js_composer/includes/templates/shortcodes/ to your newly created folder.

BEFORE

The file contents should look something like this:

AFTER

Now we are adding the magic from the backend to the frontend :) This is how the altered version should look like in your theme folder

We added
‘type’ => ‘in_container’
to the shortcode parameter extraction, with a default setting.

We also added the resulting type to our row wrapper
$output .= ‘<div class=”‘.$type.’ ‘.$css_class

Visual Composer allows you to modify any of its elements that way and extend it with your own options or mighty extensions ;) Visual Composer allows some nice custom tweaking, you just need to look a bit closer at the documentation, which is not always that simple to follow :)

Enjoy coding …




2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
AlexMarga Recent comment authors
  Subscribe  
newest oldest most voted
Notify of



Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs

 

I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Previous Next