Are you an aspiring WordPress developer looking to extend the functionality of Elementor? In this tutorial, we will guide you through the process of creating a simple yet powerful Elementor widget plugin called “RK Elementor Widget.” By the end of this tutorial, you’ll have a complete understanding of how to create custom Elementor widgets and empower your website with personalized post displays. Plus, you’ll have the opportunity to download the complete plugin code in a zip format from our website.
Creating a custom Elementor widget plugin can greatly enhance your website’s capabilities. With the RK Elementor Widget plugin, you can display posts based on categories, control the number of posts shown, and even customize the layout. Without further ado, let’s get started!
Setting Up the Plugin Structure
To begin, create a new folder on your local machine and name it “rk-elementor-widget”. This folder will serve as the foundation for our plugin. Within the “rk-elementor-widget” folder, create a new file called “custom-elementor-widget.php”. This file will contain the core functionality of our widget. Open “custom-elementor-widget.php” in a text editor and copy the code provided below
<?php
/**
* Plugin Name: Rk Elementor Widget
* Description: Widget to display posts based on category, weight, and amount of posts.
* Version: 1.0.0
* Author: Rocky
* Author URI: Your Website
*/
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
// Enqueue styles and scripts
add_action('elementor/frontend/after_enqueue_styles', function () {
wp_enqueue_style('custom-elementor-widget', plugin_dir_url(__FILE__) . 'custom-elementor-widget.css', array(), '1.0.0');
});
// Register the widget
add_action('elementor/widgets/widgets_registered', function () {
class Custom_Elementor_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'custom-elementor-widget';
}
public function get_title() {
return 'RK Elementor Widget';
}
public function get_icon() {
return 'eicon-posts-grid';
}
public function get_categories() {
return ['general'];
}
protected function _register_controls() {
$this->start_controls_section(
'section_content',
[
'label' => __('Content', 'custom-elementor-widget'),
]
);
$this->add_control(
'category',
[
'label' => __('Category', 'custom-elementor-widget'),
'type' => \Elementor\Controls_Manager::SELECT2,
'options' => $this->get_category_options(),
'multiple' => true,
'label_block' => true,
]
);
$this->add_control(
'amount',
[
'label' => __('Amount', 'custom-elementor-widget'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 5,
]
);
$this->add_control(
'offset',
[
'label' => __('Offset', 'custom-elementor-widget'),
'type' => \Elementor\Controls_Manager::NUMBER,
'default' => 0,
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings();
$args = array(
'category__in' => $settings['category'],
'posts_per_page' => $settings['amount'],
'offset' => $settings['offset'],
);
$query = new WP_Query($args);
if ($query->have_posts()) {
?>
<div class="custom-posts-wrapper">
<?php while ($query->have_posts()) {
$query->the_post(); ?>
<div class="custom-post">
<?php if (has_post_thumbnail()) { ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('large'); ?>
</a>
</div>
<?php } ?>
<h3 class="post-title">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h3>
</div>
<?php }
wp_reset_postdata(); ?>
</div>
<?php
} else {
echo __('No posts found', 'custom-elementor-widget');
}
}
private function get_category_options() {
$categories = get_categories();
$options = array();
foreach ($categories as $category) {
$options[$category->term_id] = $category->name;
}
return $options;
}
}
// Register the widget
\Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Custom_Elementor_Widget());
});Save the file and proceed to the next step.
Creating the Widget CSS File
In the “rk-elementor-widget” folder, create another file called “custom-elementor-widget.css”. This file will contain the CSS styles that define the appearance of our widget. Open “custom-elementor-widget.css” in a text editor and copy the provided CSS code below
.custom-post {
float: left;
margin-bottom: 20px;
width: 33.33%;
padding: 10px;
text-align: center;
}
.post-thumbnail {
display: flex;
position: relative;
justify-content: center;
object-fit: cover;
display: block;
overflow:hidden;
max-width: 100%;
transition: 310ms;
background: #000000;
border-radius:6px;
}
.post-thumbnail img{
transition: 310ms;
transform: scale(1.2);
opacity: 0.7;
}
.post-thumbnail img:hover{
transform: scale(1.1);
opacity: 1;
}
.post-content {
flex-grow: 1;
}
.post-title {
margin-top: 0;
}
.post-excerpt {
margin-bottom: 0;
}
/*
.custom-posts-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
*/
@media (min-width: 1025px) {
/* CSS in here for desktop only */
.custom-posts-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.custom-post:nth-child(1),
.custom-post:nth-child(2) {
width: 50%;
}
.custom-post:nth-child(3),
.custom-post:nth-child(4),
.custom-post:nth-child(5) {
width: 33.33%;
}
.custom-post:nth-child(6),
.custom-post:nth-child(7) {
width: 50%;
}
.custom-post:nth-child(8),
.custom-post:nth-child(9),
.custom-post:nth-child(10) {
width: 33.33%;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
.custom-posts-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.custom-post:nth-child(1),
.custom-post:nth-child(2) {
width: 50%;
}
.custom-post:nth-child(3),
.custom-post:nth-child(4),
.custom-post:nth-child(5) {
width: 33.33%;
}
.custom-post:nth-child(6),
.custom-post:nth-child(7) {
width: 50%;
}
.custom-post:nth-child(8),
.custom-post:nth-child(9),
.custom-post:nth-child(10) {
width: 33.33%;
}
}
@media (max-width: 768px) {
/* CSS in here for mobile only */
.custom-post {
width: 100%;
}
}
Save the file. The CSS code will be responsible for defining the layout and styling of the posts displayed by our widget.
Preparing the Plugin for Distribution
Once you have the plugin files ready, it’s time to package them into a zip file for distribution. Simply compress the entire “rk-elementor-widget” folder into a zip file using your preferred compression tool.
Installing and Activating the Plugin
Now that we have our plugin ready, it’s time to install and activate it on your WordPress website. Follow these steps
- Log in to your WordPress admin dashboard.
- Navigate to the “Plugins” section and click on “Add New”.
- Click on the “Upload Plugin” button at the top of the page.
- Choose the zip file you created in Step 3 and click “Install Now”.
- Once the installation is complete, click on “Activate Plugin” to activate the RK Elementor Widget.
Using the RK Elementor Widget
With the plugin successfully activated, you can now start using the RK Elementor Widget on your pages. Here’s how
- Open the Elementor editor by editing an existing page or creating a new one.
- In the Elementor widget panel, search for the “RK Elementor Widget”.
- Drag and drop the widget onto the desired section of your page.
- Configure the widget settings, such as selecting post categories, specifying the number of posts to display, and setting an offset if needed.
- Customize the widget’s appearance using the built-in Elementor styling options.
- Save the changes and preview your page to see the RK Elementor Widget in action, showcasing the posts based on your chosen settings.
Exploring Further Customization
Feel free to explore additional customization options for the RK Elementor Widget. You can modify the CSS styles in the “custom-elementor-widget.css” file to achieve the desired look and feel for your posts. You can also refer to the Elementor documentation to learn about advanced widget development techniques and further extend the functionality of your custom Elementor widgets.
Conclusion
Congratulations! You have successfully created your own custom Elementor widget plugin, the RK Elementor Widget. By following this step-by-step guide, you’ve gained valuable insights into the process of creating and distributing custom Elementor widgets. You can now display posts based on categories, control the number of posts shown, and enhance your website’s overall design and user experience.
Enjoy exploring the possibilities of Elementor widget development, and don’t hesitate to experiment and unleash your creativity to create even more powerful and versatile custom widgets. Happy coding!
