create-live-template

Create an element support live editor template for KingComposer page builder

This guide is an example of the simple plugin which supports CSS System and the live template.
Our element will look like this

ex-service

So, it has :

  • Icon
  • Title
  • Description

Each attribute can adjust color, font size, font weight, text align, margin, padding, .etc.

Let’s start to create it.

Create new plugin

There are many documents out there about creating a plugin for WordPress.

In this step, we call new plugin is kc_addons. then place some information into the header of the file as the screenshot

ex-kc-addons

Now save it and go back to the admin of website, go to Plugins then you will see the new plugin there. Now just active it.

Define element

Now we define element into the plugin with kc_add_map function. Please ensure that you put the function inside your init function via init hook.

We have snippet code bellow

 

Ok, try edit a page and check is element added yet.

ex-service-panel

Element added

 

Now add element into page then you will see the setting panel

ex-service-setting

kc_service setting

 

Enter your content and Ctrl + S to save and try open current page on frontend

ex-service-template-not-found

Oops, we got a warning about template layout for the element.

You can follow post to solve that http://docs.kingcomposer.com/display-the-output-of-the-shortcode/

In this case, I will do another way. I will define the template path for my elements to use for other elements which we will put all of them into /templates/ folder of the plugin.

I add some more snippet to define it as

Now, We just create new files kc_services.php inside /templates/ folder

And put some sample data to ensure it works

And the result is

ex-service-data

It works!!!

Let’s Make up it with more HTML tags

In this step, we have important notice. Take a look line #3

This command will generate a CSS ID for each element. KC will base on that to use for CSS system for ensuring there are not any conflict between CSS of multi-instance element on a page.

We will use this for the Live Editor template also.

CSS System

To make-up for an attribute of kc_service element, we can use the custom CSS from file on a theme. But It is the good way to deliver bad quality website because the user can not modify style for content unless editor CSS files.

So how to make a set of options for the user using to change element style with a UI. Please read more about CSS system from links bellow:

http://docs.kingcomposer.com/available-param-types/css-field/

Use CSS system for my Element

 

With kc_service, with Icon I want to set follow property CSS:

icon size, margin, padding, color… They apply into the <i> tag of the icon, we will have the selector in CSS field is ‘.icon i’

The title for element has selector is ‘.title’

The description for element has selector is ‘.description’

We can have multi CSS field on an element, but on a CSS field, we can have the multi selector and CSS property. So we can combine in just one CSS field as snippet

We have follow full code for CSS field:

Now try the admin panel you will see how it works.

ex-service-css

 

Live Template

Now you have a great element with CSS custom, it works on both backend and frontend this.

But when you edit with frontend when update setting element, a loading status will display. because the KingComposer needs to reload template shortcode with current values and display it back.

So how to remove that loading and make element looks better with the user without a flash screen. That is a live template.

Please looks back the full code of maps above, line #30

I added the attribute live template path for the element and structure of plugin looks like bellow

ex-service-templates

The live template is a standard javascript template which provided by WordPress – see more

Now, copy all content source code from the standard template to live template.

Then change all tags PHP <?php ?> to <# #>

And your code must follow javascript structure.

Please compare the standard template with live template after change as

 

After register live template, the KingComposer will not load data with ajax any more, it will use the template javascript you created to put values and render to page immediately

That’s all.

  • Сергей

    Please fix kc_services.php on kc_service.php

    • Anthony Pham

      Hi Cepren,

      Seem that is not from our KC standard elements. Which theme are you using?
      Please contact the theme provider to solve your issues.

      Hope that convenient for your plan.

  • Сергей

    You did not understand me. I’m talking about errors on this page.
    Here : https://drive.google.com/file/d/0B4v-56LVbsYSUzlFb2dadG04WDg/view
    and here: https://drive.google.com/file/d/0B4v-56LVbsYSVzhYcEswU3pacDQ/view

    Just killed half the evening to understand what I’m doing wrong, although did everything according to Your instructions.
    PS. Very grateful for Your creation. Keep it up guys! If you need a beta tester, please contact .

    • Anthony Pham

      Ah sorry about that, I through that you are talking about our plugin errors haha.

      About the name kc_service.php it is element for one service, that why I put it name is kc_service.
      For example: When you have 4 services on 4 columns, you have to put each of them into columns. And they are one by one.

      Hope that make sense.

    • Anthony Pham

      Also, you can join our facebook group to report errors, we are grateful to help you and discussion to make KC growup