Building Custom Visual Composer Elements

Download Building Custom Visual Composer Elements

Post on 11-Apr-2017

79 views

Category:

Internet

1 download

Embed Size (px)

TRANSCRIPT

PowerPoint Presentation

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 a javascript guy, but also I am in love with WordPress.

I am helping big agencies on their development jobs also I have my own clients.

3

4

6

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

https://wpbakery.atlassian.net/wiki/display/VC/Inner+API

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

1

2

3

4

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.

11

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

FASTEFFICIENTSCALABLERE-USABLE

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

http://wcsd2017.creahive.com/team-members-example-1/

http://wcsd2017.creahive.com/team-members-example-2/

QUESTIONS?

THANK YOU!

30

Recommended

View more >