How to create element with standard live template Join KC discussion

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.