kingcomposer-overwrite-element

How to overwrite an element of KingComposer page builder

Hi folks,

It’s me, Anthony again.

Back to tutorial development series. Today, I will introduce how to add new param into an element and overwrite the template layout of an element, it means how an element displays on front-end.

Next article, I will introduce about live editor template for an element.

Let’s start!

In this example, I will use the kc_button element for example:

I want to create a button with description lines bellow, so the processes are

  1. Add new text input param for the description text of label button
  2. Change the template layout of kc_button element to display the second line

Add param to an element

KingComposer provides a method for adding new param for an element. You can read more about the method from link add param document.
The snippet as bellow, you can add that into functions.php of theme or your plugin file.

 

 

In here, I want to display the second line after current text label field of kc_button, so I choose position is 2. The type for param is ‘editor’. I want put more rich text there. Read more about param types here 

Now go to edit a page and add Button Element and check setting. Gotcha! We have results.

kingcomposer-overwrite-element-button

Description param added into element setting

 

Try the page on front-end. You still see one line there? Because we did not change the template to display the second line

Next steps, we change how the kc_button display. But please save the content of page first.

 

Overwrite Template Layout an Element

In standard, KingComposer will look though /kingcomposer/ folder on the activated theme to file all templates layout of elements.

So we just put the template on the element into that folder. We can not change the file name of element, we must follow struct for layout is

[shortcode_tag/element_slug].php

In this case we put kc_button.php into /kingcomposer/ folder. We have structure as screenshot

Ok, what’s next.

First, we must test is template layout right? Just try to refresh front-end of the page you created before. You see nothing there right? Because the template file overwrites is empty.

Now we locate to /wp-content/plugins/kingcomposer/shortcodes/kc_button.php and copy whole content on that file to new file we created.

 

 

We have special function is ‘extract’ at line #8. It imports variables from an array into the current symbol table. Read more
In line #3, we add new init variable for desc_line attribute to ensure it always empty on start

 

Now we add new snippet at line #64

 

Then save file and test the frontend end.

kingcomposer-overwrite-element-button-result

Kc_button after add new description

 

That’s all.