Elementor – how to create your own custom post plugin

In this article you will learn how to add a custom post in Elementor through our plugin. In the previous guide: Creating your own plugin that adds a widget to the Elementor plugin we created a plugin that adds custom widgets to the Elementor plugin. Now we would like to create a widget for our plugin that would add posts of its own type, specified in the widget, and a field that we would also choose from Elementor. This will be the same solution as in REDO JSComposer Additional – plugin adding widget to WPBakery only instead of WPBakery the target plugin will be Elementor.

Elementor – how to create your own custom post plugin

Let’s start working on the widget.

We create another widget in the widgets folder and call it customPostRedo.php, which will store the CustomPostRedo.

.

We need to return to the root folder of our plugin and edit the main.php file. We need to point the path to our widget and its class in the main E_REDO. To do this we add the same way as in the projects widget. php – path in require_once() and add a path to CustomPostRedo in register_widgets().

All set. We are going to edit our customPostRedo.php file. Give a proper name for namespace and add paths to the appropriate classes to use in our code. Add a check for the ABSPATH and then define the name of our class CustomPostRedo inheriting a class Widget_Base – Elementor plugin class.

We’re going to create a class that supports our widget – CustomPostRedo. We define several built-in functions of Elementor, calling our widget.

Go to the main function _register_controls(), which will retrieve what type of custom post you want to display and what post fields you want to get in the view. To get this we need to download the list of custom posts and their fields and custom fields to the Elementor widget. We will base this on the get_option(‘cptui_post_types’) and created in the file main.php function prepareCustomFields(). Downloading a list of post types is analogous to how we created it in the article: REDO JSComposer Additional – plugin adding widget to WPBakery – this is where the functions and lists on which we will work are explained.

We have already prepared a list with types of posts and their fields. We create a section in our widget and give the appropriate label to indicate that it will be a section to choose the post type.

We can now display the possible types of posts to choose from. It is important to remember that each parameter name is individual and unique. If the names of any parameters are repeated – our widget will not work. It is important to name our parameter properly so that we can operate on them later on (it must be consistent to identify each parameter so that we know what it is responsible for). To display the types of posts we use the $_custom_posts_params for which we add a separate radio-button, using elementor add_control(). We define the parameter name – ‘post-type’. $key – to the array it will pass us – ‘post-type-type custom post’ – which will always be the individual name for each post type. The post type uses the type CHOOSE inherited from Controls_Manager – this type is synonymous with radio-button. In the options table, add the value $key from our list.

Now close the section for custom posts.

Subsequent sections of our widget will be created in a foreach loop for the value of the $_custom_posts storing the post type and for each post type the field types that can be displayed. Inside the loop we define a section for each post type that stores the field types. The field types will be stored in a list $custom_params for which the loop foreach where we assign the appropriate radio-buttons in the created section.

In the same loop for lists $_custom_posts, we create subsequent sections for custom fields – individually for each post type.

The whole function code _register_controls() :

We have received a view in the elementary containing all the sections that store the relevant values:

Now we would like the values selected in the widget to be displayed in the view. The display will be very similar to widget for WPBakery. The difference will be that it’s not in the $atts array as in WPBakery, but in the $settings array, which is completed by the get_settings_for_display() function, which returns the widget parameters and their values. The view will be passed on in the render() function.

We download a list of post types selected in the widget. Create an empty $postTypes to which we will forward the post types. Using the foreach loop we search the $settings. If the array key contains ‘post_type-‘ and the value for the key is not empty, we pass the value to $postTypes.

We’ve already downloaded the list of post types downloaded from the widget. Now we move on to displaying a view for them. The first step is to check if the $postTypes contains the post types. If it is not empty for each post type, an array displays the container and name of the post type.

For each type of posting we download a list of posts. In the $args table, we specify for which post type we want to download the list and the number of posts. In the $query we make a WP_Query on the board $args. The posting list contained in $query is forwarded to the $postList table, which will store the downloaded posts.

Now we’re checking that the $postList is not empty. If not, we will display a container for each character and its title.

Now search the $settings table and display the selected fields. As with the post types using strpos() we check if the key contains ‘post-field‘ or ‘customfield‘ and display these fields accordingly. The display is similar to WPBakery – I refer to this article – link if you do not understand the code below.

The whole file code customPostRedo.php:

Summary

We have received a view that displays the posts of the selected custom post type and their fields, which we also select in the widget. This view can be easily converted using CSS, because each div of a field is individually named with the post type name and field type name.

It is important to remember when creating similar widgets for Elementor, that parameter names must have unique names – if any parameter name is repeated, the widget will not work properly. It is also worth using variable debugging to check the contents of our lists on which we operate.