Visual Composer is a premium plugin for WordPress that adds drag and drop functionality to the page and post editor of WordPress admin. You can read more about Visual Composer on its developer’s page.
The obvious plus of Visual Composer is allowing non-programmers to come up with non-standard complicated mark up for their pages. However, in the hands of a developer, Visual Composer can become a very powerful tool for speeding up development of pages with complicated layouts and custom HTML elements.
Visual Composer comes with pre-defined content elements that allow the editor to add different types of content to the page (for example: headings, videos, text areas and many other webpage components) as well as set layouts/grids that the editor would like the page to have.
The number of content elements that Visual Composer comes with is great, however, sometimes the website editor might need a content element that does not yet exist. Here, I will quickly demonstrate how you can create a new custom content element for Visual Composer.
If I were to describe the process briefly it would be as follows:
- Define the options of the new content element (see zaroutski_vc_register_banner_section_shortcode())
- Register this new content element with Visual Composer ( see zaroutski_vc_register_banner_section_shortcode())
- Register a new shortcut to use in conjunction with the new content element (see vc_banner_section_shortcode())
- Define how the new shortcode should rendering (see render_cta_button_section())
That’s it. Once that’s all done you will have access to the new content element via the Visual Composer’s admin interface as well as through using the WordPress’s stock [zaroutski-banner-section] means.
The code below needs to be added to the functions.php file: