SlideShare a Scribd company logo
BUILDING CUSTOM VISUAL COMPOSER ELEMENTS
http://wcsd2017.creahive.com
https://github.com/btdogan/wcsd17-building-custom-visual-composer-elements
BUILDING CUSTOM
VISUAL COMPOSER
ELEMENTS
Burak Dogan
Engineer (MSc, MBA)
• Gravity Forms
• Contact Form 7
• Revolution Slider
• Layer Slider
• Ninja Forms
• Woo Commerce
• Essential Grid
• 200+ Premium Addons
Advanced Grid Builder
Shortcode Mapper
or
You can build your own
custom element.
<?php vc_map( /*parameters*/ ); ?>
https://wpbakery.atlassian.net/wiki/display/VC/Inner+API
1
2
3
4
FAST
EFFICIENT
SCALABLE
RE-USABLE
• Twenty Seventeen
with bootstrap.
• jQuery
• Custom Post Type
• Isotope plugin.
http://wcsd2017.creahive.com/team-members-example-1/
http://wcsd2017.creahive.com/team-members-example-2/
QUESTIONS?
THANK YOU!

More Related Content

What's hot

Features: A better way to package stuff in Drupal
Features: A better way to package stuff in DrupalFeatures: A better way to package stuff in Drupal
Features: A better way to package stuff in Drupal
Rob Knight
 
Interoperability of components built with different frameworks
Interoperability of components built with different frameworksInteroperability of components built with different frameworks
Interoperability of components built with different frameworks
Souvik Basu
 
Testing your Single Page Application
Testing your Single Page ApplicationTesting your Single Page Application
Testing your Single Page Application
Wekoslav Stefanovski
 
Going mobile with RichFaces
Going mobile with RichFacesGoing mobile with RichFaces
Going mobile with RichFaces
Lukáš Fryč
 
CreateJS hackathon in Zurich
CreateJS hackathon in ZurichCreateJS hackathon in Zurich
CreateJS hackathon in ZurichHenri Bergius
 
RichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component DevelopmentRichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component Development
Lukáš Fryč
 
Wordpress as a Backend
Wordpress as a BackendWordpress as a Backend
Wordpress as a Backend
Andrew Duthie
 
Decoupling Content Management with Create.js
Decoupling Content Management with Create.jsDecoupling Content Management with Create.js
Decoupling Content Management with Create.js
Henri Bergius
 
Booting up with polymer
Booting up with polymerBooting up with polymer
Booting up with polymer
Marcus Hellberg
 
Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!
Souvik Basu
 
Blazor - The New Silverlight?
Blazor - The New Silverlight?Blazor - The New Silverlight?
Blazor - The New Silverlight?
Christian Nagel
 
DevPira2019 - Blazor
DevPira2019 - BlazorDevPira2019 - Blazor
DevPira2019 - Blazor
Gustavo Bellini Bigardi
 
Javascript in Web development
Javascript in Web developmentJavascript in Web development
Javascript in Web development
Kiran Prajapati
 
Salesforce Apex Hours : Node red for salesforce
Salesforce Apex Hours : Node red for salesforceSalesforce Apex Hours : Node red for salesforce
Salesforce Apex Hours : Node red for salesforce
Amit Chaudhary
 
Create - Decoupled CMS interface
Create - Decoupled CMS interfaceCreate - Decoupled CMS interface
Create - Decoupled CMS interface
Henri Bergius
 
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
Bob German
 
Decoupling Content Management
Decoupling Content ManagementDecoupling Content Management
Decoupling Content Management
Henri Bergius
 
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
Dexter Yang
 
A Smooth Transition to HTML5
A Smooth Transition to HTML5A Smooth Transition to HTML5
A Smooth Transition to HTML5
Chris Bannon
 

What's hot (20)

Features: A better way to package stuff in Drupal
Features: A better way to package stuff in DrupalFeatures: A better way to package stuff in Drupal
Features: A better way to package stuff in Drupal
 
Interoperability of components built with different frameworks
Interoperability of components built with different frameworksInteroperability of components built with different frameworks
Interoperability of components built with different frameworks
 
Testing your Single Page Application
Testing your Single Page ApplicationTesting your Single Page Application
Testing your Single Page Application
 
Going mobile with RichFaces
Going mobile with RichFacesGoing mobile with RichFaces
Going mobile with RichFaces
 
CreateJS hackathon in Zurich
CreateJS hackathon in ZurichCreateJS hackathon in Zurich
CreateJS hackathon in Zurich
 
RichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component DevelopmentRichFaces CDK: Rapid JSF Component Development
RichFaces CDK: Rapid JSF Component Development
 
Wordpress as a Backend
Wordpress as a BackendWordpress as a Backend
Wordpress as a Backend
 
Decoupling Content Management with Create.js
Decoupling Content Management with Create.jsDecoupling Content Management with Create.js
Decoupling Content Management with Create.js
 
Booting up with polymer
Booting up with polymerBooting up with polymer
Booting up with polymer
 
Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!
 
Blazor - The New Silverlight?
Blazor - The New Silverlight?Blazor - The New Silverlight?
Blazor - The New Silverlight?
 
DevPira2019 - Blazor
DevPira2019 - BlazorDevPira2019 - Blazor
DevPira2019 - Blazor
 
Javascript in Web development
Javascript in Web developmentJavascript in Web development
Javascript in Web development
 
Salesforce Apex Hours : Node red for salesforce
Salesforce Apex Hours : Node red for salesforceSalesforce Apex Hours : Node red for salesforce
Salesforce Apex Hours : Node red for salesforce
 
Create - Decoupled CMS interface
Create - Decoupled CMS interfaceCreate - Decoupled CMS interface
Create - Decoupled CMS interface
 
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
 
A team 43 C
A team 43 CA team 43 C
A team 43 C
 
Decoupling Content Management
Decoupling Content ManagementDecoupling Content Management
Decoupling Content Management
 
新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践新版阿尔法城背后的前端MVC实践
新版阿尔法城背后的前端MVC实践
 
A Smooth Transition to HTML5
A Smooth Transition to HTML5A Smooth Transition to HTML5
A Smooth Transition to HTML5
 

Viewers also liked

3Com 03-0104-004 I
3Com 03-0104-004 I3Com 03-0104-004 I
3Com 03-0104-004 I
savomir
 
international monetary fund
international monetary fund international monetary fund
international monetary fund
zainulla
 
3Com WDBPCK0010BBK
3Com WDBPCK0010BBK3Com WDBPCK0010BBK
3Com WDBPCK0010BBK
savomir
 
3Com 3CRWE51196
3Com 3CRWE511963Com 3CRWE51196
3Com 3CRWE51196
savomir
 
Ensayo tics
Ensayo ticsEnsayo tics
Ensayo tics
mileidy diaz bernal
 
Formato n ousado_paramaterial_labgeogebra_citid2017_v3
Formato n ousado_paramaterial_labgeogebra_citid2017_v3Formato n ousado_paramaterial_labgeogebra_citid2017_v3
Formato n ousado_paramaterial_labgeogebra_citid2017_v3
Clara Moncada
 
Рудолф Щайнер. Гьотевите съчиненияGa 1a 1
Рудолф Щайнер. Гьотевите съчиненияGa 1a 1 Рудолф Щайнер. Гьотевите съчиненияGa 1a 1
Рудолф Щайнер. Гьотевите съчиненияGa 1a 1
Георги Календеров
 
Another woman's house
Another woman's houseAnother woman's house
Another woman's house
Tiffany Thompson
 
Base De Datos- Access
Base De Datos- AccessBase De Datos- Access
Base De Datos- Access
Mileydi Taizan
 
Contestacion de accidente de transito
Contestacion de accidente de transitoContestacion de accidente de transito
Contestacion de accidente de transito
Yandaly Ramirez
 
Modulo 1. quimica organica
Modulo 1. quimica organicaModulo 1. quimica organica
Modulo 1. quimica organica
Kaira Lopez Trotman
 
Ensayo1 simce lenguaje_1_basico_2014
Ensayo1 simce lenguaje_1_basico_2014Ensayo1 simce lenguaje_1_basico_2014
Ensayo1 simce lenguaje_1_basico_2014
Carolina Vicencio
 
College admission system
College admission system College admission system
College admission system
Sourabh Upadhyay
 
Tendencias pedagógicas
Tendencias pedagógicasTendencias pedagógicas
Tendencias pedagógicas
yin cedeño
 
The Revolution Will Not Be Televised… It’s screenless
The Revolution Will Not Be Televised… It’s screenlessThe Revolution Will Not Be Televised… It’s screenless
The Revolution Will Not Be Televised… It’s screenless
Steve Hilton
 
Crm
CrmCrm
Crm
Kau0998
 
Praying For Our Enemy
Praying For Our EnemyPraying For Our Enemy
Praying For Our Enemy
Rick Peterson
 
Majo cyborg
Majo cyborgMajo cyborg
Majo cyborg
Eros Guerrero
 
Using Adwords Ad Extensions
Using Adwords Ad ExtensionsUsing Adwords Ad Extensions
Using Adwords Ad Extensions
Jun Baranggan
 
Obtención de etileno
Obtención de etilenoObtención de etileno
Obtención de etileno
Vivian Bolaños
 

Viewers also liked (20)

3Com 03-0104-004 I
3Com 03-0104-004 I3Com 03-0104-004 I
3Com 03-0104-004 I
 
international monetary fund
international monetary fund international monetary fund
international monetary fund
 
3Com WDBPCK0010BBK
3Com WDBPCK0010BBK3Com WDBPCK0010BBK
3Com WDBPCK0010BBK
 
3Com 3CRWE51196
3Com 3CRWE511963Com 3CRWE51196
3Com 3CRWE51196
 
Ensayo tics
Ensayo ticsEnsayo tics
Ensayo tics
 
Formato n ousado_paramaterial_labgeogebra_citid2017_v3
Formato n ousado_paramaterial_labgeogebra_citid2017_v3Formato n ousado_paramaterial_labgeogebra_citid2017_v3
Formato n ousado_paramaterial_labgeogebra_citid2017_v3
 
Рудолф Щайнер. Гьотевите съчиненияGa 1a 1
Рудолф Щайнер. Гьотевите съчиненияGa 1a 1 Рудолф Щайнер. Гьотевите съчиненияGa 1a 1
Рудолф Щайнер. Гьотевите съчиненияGa 1a 1
 
Another woman's house
Another woman's houseAnother woman's house
Another woman's house
 
Base De Datos- Access
Base De Datos- AccessBase De Datos- Access
Base De Datos- Access
 
Contestacion de accidente de transito
Contestacion de accidente de transitoContestacion de accidente de transito
Contestacion de accidente de transito
 
Modulo 1. quimica organica
Modulo 1. quimica organicaModulo 1. quimica organica
Modulo 1. quimica organica
 
Ensayo1 simce lenguaje_1_basico_2014
Ensayo1 simce lenguaje_1_basico_2014Ensayo1 simce lenguaje_1_basico_2014
Ensayo1 simce lenguaje_1_basico_2014
 
College admission system
College admission system College admission system
College admission system
 
Tendencias pedagógicas
Tendencias pedagógicasTendencias pedagógicas
Tendencias pedagógicas
 
The Revolution Will Not Be Televised… It’s screenless
The Revolution Will Not Be Televised… It’s screenlessThe Revolution Will Not Be Televised… It’s screenless
The Revolution Will Not Be Televised… It’s screenless
 
Crm
CrmCrm
Crm
 
Praying For Our Enemy
Praying For Our EnemyPraying For Our Enemy
Praying For Our Enemy
 
Majo cyborg
Majo cyborgMajo cyborg
Majo cyborg
 
Using Adwords Ad Extensions
Using Adwords Ad ExtensionsUsing Adwords Ad Extensions
Using Adwords Ad Extensions
 
Obtención de etileno
Obtención de etilenoObtención de etileno
Obtención de etileno
 

Similar to Building Custom Visual Composer Elements

Theming and Branding in App Builder
Theming and Branding in App BuilderTheming and Branding in App Builder
Theming and Branding in App Builder
JohnMcGuigan10
 
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版Joseph Chiang
 
Extending Power BI with your own custom visual
Extending Power BI with your own custom visualExtending Power BI with your own custom visual
Extending Power BI with your own custom visual
Jan Pieter Posthuma
 
HOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLDHOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLD
Aleksandr Maklakov
 
Rapid development with Rails
Rapid development with RailsRapid development with Rails
Rapid development with Rails
Yi-Ting Cheng
 
BizTalk Server Extensibility
BizTalk Server ExtensibilityBizTalk Server Extensibility
BizTalk Server Extensibility
BizTalk360
 
Typescript 102 angular and type script
Typescript 102   angular and type scriptTypescript 102   angular and type script
Typescript 102 angular and type script
Bob German
 
SPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flowSPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flow
Vincent Biret
 
Improve your web dev workflow in Visual Studio
Improve your web dev workflow in Visual StudioImprove your web dev workflow in Visual Studio
Improve your web dev workflow in Visual Studio
David Paquette
 
Playing in the Sandbox by Wictor Wilén
Playing in the Sandbox by Wictor WilénPlaying in the Sandbox by Wictor Wilén
Playing in the Sandbox by Wictor Wilén
Wictor Wilén
 
Spring insight what just happened
Spring insight   what just happenedSpring insight   what just happened
Spring insight what just happened
Boulder Java User's Group
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
Caesar Chi
 
CUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in ShareCUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in Share
Alfresco Software
 
Deep dive into share point framework webparts
Deep dive into share point framework webpartsDeep dive into share point framework webparts
Deep dive into share point framework webparts
Prabhu Nehru
 
Widgets neil
Widgets neilWidgets neil
Widgets neil
RavingTiger
 
2014 - DotNetCologne: Build, Builder, Am Buildesten
2014 - DotNetCologne: Build, Builder, Am Buildesten2014 - DotNetCologne: Build, Builder, Am Buildesten
2014 - DotNetCologne: Build, Builder, Am Buildesten
Daniel Fisher
 
A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...
A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...
A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...
The Hong Kong Institute of Building Information Modelling (HKIBIM)
 
Client Side Performance for Back End Developers - Cambridge .NET User Group -...
Client Side Performance for Back End Developers - Cambridge .NET User Group -...Client Side Performance for Back End Developers - Cambridge .NET User Group -...
Client Side Performance for Back End Developers - Cambridge .NET User Group -...
Bart Read
 
Lean frontend development
Lean frontend developmentLean frontend development
Lean frontend development
Matteo Guidotto
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
MartinSotirov
 

Similar to Building Custom Visual Composer Elements (20)

Theming and Branding in App Builder
Theming and Branding in App BuilderTheming and Branding in App Builder
Theming and Branding in App Builder
 
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
 
Extending Power BI with your own custom visual
Extending Power BI with your own custom visualExtending Power BI with your own custom visual
Extending Power BI with your own custom visual
 
HOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLDHOW TO DRONE.IO IN CI/CD WORLD
HOW TO DRONE.IO IN CI/CD WORLD
 
Rapid development with Rails
Rapid development with RailsRapid development with Rails
Rapid development with Rails
 
BizTalk Server Extensibility
BizTalk Server ExtensibilityBizTalk Server Extensibility
BizTalk Server Extensibility
 
Typescript 102 angular and type script
Typescript 102   angular and type scriptTypescript 102   angular and type script
Typescript 102 angular and type script
 
SPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flowSPS calgary 2017 introduction to azure functions microsoft flow
SPS calgary 2017 introduction to azure functions microsoft flow
 
Improve your web dev workflow in Visual Studio
Improve your web dev workflow in Visual StudioImprove your web dev workflow in Visual Studio
Improve your web dev workflow in Visual Studio
 
Playing in the Sandbox by Wictor Wilén
Playing in the Sandbox by Wictor WilénPlaying in the Sandbox by Wictor Wilén
Playing in the Sandbox by Wictor Wilén
 
Spring insight what just happened
Spring insight   what just happenedSpring insight   what just happened
Spring insight what just happened
 
Morden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web AppsMorden F2E Education - Think of Progressive Web Apps
Morden F2E Education - Think of Progressive Web Apps
 
CUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in ShareCUST-2 New Client Configuration & Extension Points in Share
CUST-2 New Client Configuration & Extension Points in Share
 
Deep dive into share point framework webparts
Deep dive into share point framework webpartsDeep dive into share point framework webparts
Deep dive into share point framework webparts
 
Widgets neil
Widgets neilWidgets neil
Widgets neil
 
2014 - DotNetCologne: Build, Builder, Am Buildesten
2014 - DotNetCologne: Build, Builder, Am Buildesten2014 - DotNetCologne: Build, Builder, Am Buildesten
2014 - DotNetCologne: Build, Builder, Am Buildesten
 
A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...
A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...
A New Development Platform Connecting BIM to Anything - Mr. Xiaodong LIANG Ch...
 
Client Side Performance for Back End Developers - Cambridge .NET User Group -...
Client Side Performance for Back End Developers - Cambridge .NET User Group -...Client Side Performance for Back End Developers - Cambridge .NET User Group -...
Client Side Performance for Back End Developers - Cambridge .NET User Group -...
 
Lean frontend development
Lean frontend developmentLean frontend development
Lean frontend development
 
Mobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to NativeMobile Vue.js – From PWA to Native
Mobile Vue.js – From PWA to Native
 

Recently uploaded

原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
3ipehhoa
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
ufdana
 
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
VivekSinghShekhawat2
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
JeyaPerumal1
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
laozhuseo02
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
Rogerio Filho
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
nirahealhty
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Sanjeev Rampal
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
Arif0071
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
JungkooksNonexistent
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
Gal Baras
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
3ipehhoa
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
keoku
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
natyesu
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
eutxy
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Brad Spiegel Macon GA
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
GTProductions1
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
3ipehhoa
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
laozhuseo02
 

Recently uploaded (20)

原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
原版仿制(uob毕业证书)英国伯明翰大学毕业证本科学历证书原版一模一样
 
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
一比一原版(CSU毕业证)加利福尼亚州立大学毕业证成绩单专业办理
 
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptxInternet-Security-Safeguarding-Your-Digital-World (1).pptx
Internet-Security-Safeguarding-Your-Digital-World (1).pptx
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...guildmasters guide to ravnica Dungeons & Dragons 5...
guildmasters guide to ravnica Dungeons & Dragons 5...
 
This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!This 7-second Brain Wave Ritual Attracts Money To You.!
This 7-second Brain Wave Ritual Attracts Money To You.!
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
test test test test testtest test testtest test testtest test testtest test ...
test test  test test testtest test testtest test testtest test testtest test ...test test  test test testtest test testtest test testtest test testtest test ...
test test test test testtest test testtest test testtest test testtest test ...
 
Latest trends in computer networking.pptx
Latest trends in computer networking.pptxLatest trends in computer networking.pptx
Latest trends in computer networking.pptx
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
急速办(bedfordhire毕业证书)英国贝德福特大学毕业证成绩单原版一模一样
 
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
一比一原版(SLU毕业证)圣路易斯大学毕业证成绩单专业办理
 
BASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptxBASIC C++ lecture NOTE C++ lecture 3.pptx
BASIC C++ lecture NOTE C++ lecture 3.pptx
 
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
APNIC Foundation, presented by Ellisha Heppner at the PNG DNS Forum 2024
 
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
一比一原版(LBS毕业证)伦敦商学院毕业证成绩单专业办理
 
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptx
 
Comptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guideComptia N+ Standard Networking lesson guide
Comptia N+ Standard Networking lesson guide
 
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
1比1复刻(bath毕业证书)英国巴斯大学毕业证学位证原版一模一样
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 

Building Custom Visual Composer Elements

Editor's Notes

  1. Hi My name is Burak Today I am gonna talk about Building Custom Visual Composer Elements.
  2. 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. Also it supports these plugins and there are over 200 addons you can buy from their marketplace.
  4. 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.
  5. 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.
  6. Number 1: Categories Number 2: Name of the element Number 3: Description of the element Number 4: Icon
  7. And this is the element settings window. Each of these sections is another array of parameters of the params parameter.
  8. vc_map function allows us to add an element to the elements list. As you see on line 4, there is an action to the vc_before_init Visual 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.
  9. There are different approaches you can follow to add a custom element. You can add it to your theme’s function.php file. Or you can create a plugin. We want to build things FAST EFFICIENT SCALABLE And RE-USABLE SO…
  10. We can hang out at the beach at weekends, or watch a movie with our friends at night instead of spending time in front of the screen.
  11. This file is long so I split it into pieces.