Building Custom Visual Composer Elements
Post on 11-Apr-2017
Embed Size (px)
BUILDING CUSTOM VISUAL COMPOSER ELEMENTShttp://wcsd2017.creahive.comhttps://github.com/btdogan/wcsd17-building-custom-visual-composer-elements
HiMy name is BurakToday I am gonna talk about Building Custom Visual Composer Elements.2
BUILDING CUSTOM VISUAL COMPOSER ELEMENTSBurak Dogan Engineer (MSc, MBA)
I am a mechanical engineer, I built a tunnel which connects Europe and Asia. Also I have been doing software development for more than 10 years.
I decided to quit mechanical engineering at top of my career to pursue another challenge and moved to beautiful San Diego 3 years ago.Please bare with my accent, I am Turkish.
I am helping big agencies on their development jobs also I have my own clients.
Gravity FormsContact Form 7Revolution SliderLayer SliderNinja FormsWoo CommerceEssential Grid200+ Premium Addons
Also it supports these plugins and there are over 200 addons you can buy from their marketplace.7
Advanced Grid BuilderShortcode MapperorYou can build your own custom element.
Anyway, these addons may not fit your design well, or what is in your mind. In this kind of situations, you can use built in Advanced Grid Builder or Shortcode Mapper.
Or you can build your own custom elements.8
To build a custom element or customize one, Visual Composer API provides the vc_map function.
Also it has a parameter where you define what is in the element editor.9
Number 1: CategoriesNumber 2: Name of the elementNumber 3: Description of the elementNumber 4: Icon10
And this is the element settings window. Each of these sections is another array of parameters of the params parameter.
vc_map function allows us to add an element to the elements list.As you see on line 4, there is an action to thevc_before_initVisual Composer hook, so our function will be called before Visual Composer init.
Also we need the shortcode to display our element. We use the base parameter as the shortcode tag to connect our shortcode with our element.12
There are different approaches you can follow to add a custom element. You can add it to your themes function.php file.Or you can create a plugin.
We want to build thingsFASTEFFICIENTSCALABLEAnd RE-USABLESO13
We can hang out at the beach at weekends, or watch a movie with our friends at nightinstead of spending time in front of the screen. 14
Twenty Seventeen with bootstrap.jQueryCustom Post TypeIsotope plugin.
This file is long so I split it into pieces.18