• Home
  • Quick Start
    • Color Schemes
  • Documentation
    • Shortcodes
    • JaW Hooks
    • Screenshots of ThemeOptions
  • Tutorials
  • Forum
  • Contact
Log In

  • Home
  • Quick Start
    • Color Schemes
  • Documentation
    • Shortcodes
    • JaW Hooks
    • Screenshots of ThemeOptions
  • Tutorials
  • Forum
  • Contact

HomeCodeHow to add element to RevoComposer
show2

How to add element to RevoComposer

  • admin
  • Posted in Codefor DevelopersRevoComposerTutorials
0
SHARES
SHARESHARESHARESHARE
SHARESHARE

In case of you want to add some elements to RevoComposer, you can use our filters in your Child Theme.

Simply add this code to your child theme’s function.php

function my_revocomposer_elements($elements){
     
    $myelements = array();
    $myelements[] = array(
        "name" => "Awesome Shortcode",//name it
        "desc" => 'Some description',//add description
        "id" => "build_my_element", //build_ preposition is required!
        "type" => "builder", //do not change it 
        'icon' => 'jaw-icon-heart-off',
        "size" => 12, //default size
    );



    $elements['my_shortcodes'] = array(
        "name" => "My Shortcodes", //name it
        "desc" => '', //add description
        "id" => "build_my_shortcodes", //build_ preposition is required!
        "type" => "builder_bookmark", //do not change it 
        'content' => $myelements,
        "header" => false //do not change it 
    );
    

     return $elements;
}
//ADD element to revocomposer
add_filter('jaw_revocomposer_elements', 'my_revocomposer_elements',10,1);




function my_revocomposer_elements_editor($editors){ 
    $of_options = array();
            
    /* ==== CONTENT ==== */
    $of_options[] = array(
        "name" => "Content",
        "type" => "sectionstart");

    $of_options[] = array(
        "name" => "My Title",
        "desc" => "Enter a title",
        "id" => "title",
        "std" => "",
        "type" => "text"
    );

    $of_options[] = array(
        "type" => "sectionend");
        
    /* ==== Design ==== */
    $of_options[] = array(
        "name" => "Design",
        "type" => "sectionstart");

    $of_options[] = array(
        'id' => 'my_switch',
        'type' => 'toggle',
        'name' => 'My Switch',
        'desc' => 'Switch me',
        'std' => '1',
        "options" => array("1" => "On", "0" => "Off")
    );

    $of_options[] = array(
        "type" => "sectionend");
        
        
    /* ==== BAR ====    SHOULD BE HERE ! */
    $of_options[] = array(
        "name" => "Bar",
        "hide_if_layout" => array('shortcodes'),
        "type" => "sectionstart");

    $of_options[] = $editors['global_bar_type']; 
    $of_options[] = $editors['global_custom_link'];

    $of_options[] = array(
        "hide_if_layout" => array('shortcodes'),
        "type" => "sectionend");
    /* === END of BAR === */



    $editors['my_element'] = $of_options;
    
    return $editors;

}
// ADD settings (editor) for element
add_filter('jaw_revocomposer_elements_editor', 'my_revocomposer_elements_editor',10,1);

Bear in mind these rules:

new elements

Result should looks like this:

result1 result2

Now if you save the page, RevoComposer generates shortcode with name “jaw_YOUR_ELEMENT_ID_WITHOUT_builder_PREPOSITION”

By this tutorial it will be: [jaw_my_element title="" ...  ]

On frontend we get this.

print1

How to handle with it? Now you have to create shortcode with this name. Please follow this tutorial.

Second part of this tutorial

Related Posts

wphooks
0 comments
JaW Hooks

Actions jaw_before_usermanagement and jaw_after_usermanagement

menu-widget6
0 comments
CodeTutorials

How to add more Widget areas to menu.

wphooks
0 comments
JaW Hooks

Filter jaw_get_template_part

New options

How to add new items to Theme Options

show

How to create own shortcode

Related Posts

wphooks
0 comments
JaW Hooks

Actions jaw_before_usermanagement and jaw_after_usermanagement

menu-widget6
0 comments
CodeTutorials

How to add more Widget areas to menu.

wphooks
0 comments
JaW Hooks

Filter jaw_get_template_part

install-t6
0 comments
Tutorials

How to set Custom Stock Ticker

Tags

  • add
  • builder
  • Elements
  • new
  • page builder
  • revocomposer
  • Shortcodes
  • Was this Helpful ?
  • yes   no
Copyright © 2016 jawtemplates - WordPress Design Studio Disable responsivity