Introduction
ControlKit is a small WordPress plugin that helps you organize and register Elementor widgets.
It offers a simple method: Place the ControlKit/ folder in your theme, along with the widget PHP files and their optional styles, and then add them to the Set__kit.php file.
The plugin will automatically include and register the widget categories.
What ControlKit provides:
- Dynamic loading of widget files from the active theme.
- Automatic detection and registration of categories that inherit from \Elementor\Widget_Base.
- A secure installation process that copies example templates to your theme when needed.
- Helpful functions (in Controller.php) to make adding controls within widgets easy.
Installation
After installing the plugin, you will need to add some required files to your theme for it to function correctly.
1) First,Create a page.php file in your theme's root directory.
Add the following code to page.php.
Note: Add The Code Inside page.php
Full Code
Note: You Can Add Any Your Code Inside page.php
2) Secondly,
Add a folder inside your template root named 'ControlKit'
Inside the 'ControlKit' folder, add the following files
For the style folder, you can add all the widget style files.
For the widget folder, you can add all the widget files you want.
You can go to the widget.php option to get the complete code.
For the Set__kit.php file, go to its option to get the associated code.
Writing Widget Code
This is the basic code to start building the widget that will appear in Elementor
In the widget folder, add a file named widget_one.php as an example, then place the following code inside it.
Don't forget to add the name of the widget file you created inside 'widgets' in the 'Set__kit.php' file.
Full Code
Set__kit.php (Important File)
Location:
The file should return an array that lists widget file paths (relative to the
ControlKit
folder) and optional explicit class names. Example:
Full Code
return [
'widgets' => [
'widget/widget_one.php',
],
'classes' => [
'Elementor_Widget_One',
],
];
- In the widgets array, add all the widget filenames you created after 'widget/'
- In the classes array, add all the class file names for the widgets you created. You will find them in 'class Class_Name extends Widget_Base'
Controller.php — helper functions
The ControlKit class (in Controller.php) exposes static helpers used
inside
widget register_controls() methods. Click a control below to see usage notes and
example code.
This code will create a separator between other controls, where you can add an separator with a distinctive name indicating what is done under this separator.
Full Code
FastRenderer::hr(
$this,
'ID_HR_1',
'Separator'
);
This code will allow you to display the text input, which will enable you to display
an input of type Text.
Full Code
FastRenderer::renderText(
$this,
'ID_EXAMPLE_TEXT',
'Text Example',
'Hey, I\'m Mark Den.',
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_EXAMPLE_TEXT']
This code will allow you to display the TextArea.
Full Code
FastRenderer::renderTextArea(
$this,
'ID_EXAMPLE_TEXTAREA',
'Type Description',
'Creating fluid experiences and striking visuals. A freelancer during the day,
a creative thinker, and an aspiring innovator at night.',
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_EXAMPLE_TEXTAREA']
This code will allow you to display the Number Input.
Full Code
FastRenderer::renderNumber(
$this,
'ID_EXAPLE_NUMBER',
'Number Control',
3,
3,
100,
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_EXAPLE_NUMBER']
This Feature Will Add A CheckBox Function.
Full Code
FastRenderer::renderCheckBox(
$this,
'ID_EXAMPLE_CHECBOX',
'Example ChecBox',
'on',
'Off',
'off',
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_EXAMPLE_CHECBOX'] // The verification value is either 'on' or 'off'
This Feature Will Add A Radio Function.
Full Code
$EXAMPLE_VAR = [
'EXAMPLE_1' => [
'title' => __('EXAMPLE 1', 'Example__Trans'),
'icon' => 'eicon-gallery-grid',
],
'EXAMPLE_2' => [
'title' => __('EXAMPLE 2', 'Example__Trans'),
'icon' => 'eicon-gallery-grid',
],
];
FastRenderer::renderRadion(
$this,
'ID_EXAPMLE_RADION',
'Radion Example',
$EXAMPLE_VAR,
'EXAMPLE_1'
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_EXAPMLE_RADION']
This Feature Will Add A image Function.
Full Code
FastRenderer::renderImage(
$this,
'ID_EXAMPLE_IMAGE',
'Choose Author Image',
'',
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
print_r($settings['ID_EXAMPLE_IMAGE']);
This Give You An Array With The Image Data Like This:
Array
(
[id] => 123
[url] => https://example.com/image.jpg
[size] => full
[alt] => An example image Title
)
This Feature Will Add A fonts Function.
Full Code
$FONTS_ARRAY = [
'font_size' => [
'default' => [
'size' => 4.5,
'unit' => 'rem',
],
],
'font_weight' => [
'default' => 'bold',
],
'font_family' => [
'default' => 'DM Serif Display',
],
'line_height' => [
'default' => [
'size' => 83,
'unit' => 'px',
],
],
'letter_spacing' => [
'default' => [
'size' => -1.8,
'unit' => 'px',
],
],
];
FastRenderer::Fonts(
$this,
'ID_EXAMPLE_FONTS',
'Fonts',
$FONTS_ARRAY,
[]
);
To Use This Code You Need To Add This Code To The Render Function To Apply The
Styles To The Element Like This:
For Example If You Want To Apply The Styles To A Heading You Can Do It Like This:
Example Heading
'OwnFont_' Is A Fixed Prefix That You Need To Add Before The ID To Make It Work.
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
print_r($settings['ID_EXAMPLE_FONTS']);
This Give You An Array With The Fonts Data:
Note: The default formatting settings for the elements you will be
adding Elementor formatting to will prevent Elementor formatting from being applied,
so you must delete them for Elementor formatting to appear.
This Feature Will Give You Hex Color Code.
Full Code
FastRenderer::render_B_Color(
$this,
'ID_BG_COLOR',
'My Color',
'#ff0000',
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_BG_COLOR']; // This Give You The Color Value Like This: #ff0000
To Use This Code You Can Add The Value Inside Element Style Like This:
Example Div
This Feature Will Add A Drop Down Menu That Include All category Name From Your Website
Full Code
FastRenderer::renderCategory(
$this,
'ID_CATEGORY',
'Choose Category',
[],
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_CATEGORY']; // This Give You The Category Name That Selected From Drop Down Menu
This Feature Will Add A Drop Down Menu That Include All category Name From Your Website
Full Code
FastRenderer::renderSolo_Icone(
$this,
'ID_EXAMPLE_SOLO_ICONE',
'Thumbnail Icon',
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
print_r($settings['ID_EXAMPLE_SOLO_ICONE']); // This Give You The Array With The Icon Data Like This:
Array (
[value] => eicon-image-bold
[library] => solid
)
You Can Use The Value To Render The Icon Like This:
This Feature Will Add A Drop Down Menu That Include All dropDown Name From Your Website
Full Code
$DROPDOWN_EXAMPLE = [
'EXAMPLE_1' => __('EXAMPLE 1', 'Translate Domain'),
'EXAMPLE_2' => __('EXAMPLE 2', 'Translate Domain'),
'EXAMPLE_3' => __('EXAMPLE 3', 'Translate Domain'),
];
FastRenderer::renderDrop__Down(
$this,
'ID_DROPDOWN_EXAMPLE',
'Select Choice',
'EXAMPLE_1',
$DROPDOWN_EXAMPLE,
[]
);
You can retrieve the value from this code by:
$settings = $this->get_settings_for_display();
echo $settings['ID_DROPDOWN_EXAMPLE']; // This Give You The Selected Value From Dropdown Like This: EXAMPLE_1
All Above This Functions Will Add Inside Loop Like This Loop:
$$Widget = new WP_Query([
'posts_per_page' => 2,
'category_name' => $settings['ID_CATEGORY_EXAMPLE'],
]);
if ($Widget->have_posts()) {
while ($Widget->have_posts()) {
$Widget->the_post();
// Your Code To Display The Post
}
wp_reset_postdata();
}
This function will give you the title from the episode posts as HTML with control over the tag name and its class.
Full Code
FastRenderer::renderTitle('h2', 'class_1 class_2 class');
This function will give you the Excerpt Text With Control The Length Of Text And The value added at the end of the text.
Full Code
FastRenderer::renderExcerpt(
'20',
'...'
);
