The Elementor plugin for WordPress allows users to easily create and customize their website using a drag-and-drop interface. However, one common problem that users may encounter is the inability to duplicate a widget within Elementor. This can be frustrating when you want to reuse a widget with similar settings or content.
To solve this problem, you can use a custom PHP function that adds a duplicate button to each widget in Elementor. When clicked, this button will duplicate the widget and all its settings, allowing you to easily create copies of widgets.
Here’s an example of how you can implement this functionality using the wpsnippets_duplicate_elementor_widget() function:
function wpsnippets_duplicate_elementor_widget() {
// Check if Elementor is active
if (defined('ELEMENTOR_PATH') && class_exists('ElementorWidget_Base')) {
// Register the duplicate button
add_action('elementor/element/after_section_end', function($element, $section_id) {
// Add the duplicate button to the advanced tab
if ($section_id === 'section_advanced') {
$element->start_controls_section('section_duplicate', [
'label' => __('Duplicate', 'text-domain'),
'tab' => ElementorControls_Manager::TAB_ADVANCED,
]);
$element->add_control('duplicate_widget', [
'label' => __('Duplicate Widget', 'text-domain'),
'type' => ElementorControls_Manager::BUTTON,
'button_type' => 'success',
'text' => __('Duplicate', 'text-domain'),
'event' => 'wpsnippets_duplicate_widget',
]);
$element->end_controls_section();
}
}, 10, 2);
// Duplicate the widget
add_action('elementor/element/'.$widget_name.'/duplicate', function($new_widget_id, $widget) {
// Get the widget settings
$settings = $widget->get_settings();
// Set a new unique ID for the duplicated widget
$settings['_element_id'] = $new_widget_id;
// Create a new widget instance with the duplicated settings
$new_widget = new ElementorWidget_Base($settings);
// Add the duplicated widget to the page
$widget->parent->add_child($new_widget, $widget->get_id());
}, 10, 2);
}
}
add_action('elementor/widgets/widgets_registered', 'wpsnippets_duplicate_elementor_widget');
This code snippet adds a duplicate button to each widget in Elementor by hooking into the elementor/element/after_section_end action. It registers the button in the advanced tab of the widget settings and triggers the wpsnippets_duplicate_widget event when clicked.
When the duplicate button is clicked, the elementor/element/{$widget_name}/duplicate action is triggered. This action duplicates the widget by creating a new widget instance with the same settings and a new unique ID. The duplicated widget is then added to the page using the add_child() method.
This code snippet can be useful in situations where you need to quickly create copies of widgets in Elementor without manually recreating their settings and content. It saves time and effort by automating the duplication process.
Examples
Example 1: Duplicate Widget Issue in Elementor
This use case addresses the problem of duplicate widgets in Elementor, where multiple instances of the same widget are displayed on the page. The code example demonstrates how to prevent this issue by checking if the widget has already been rendered before rendering it again.
function wpsnippets_prevent_duplicate_widget( $widget ) {
static $rendered_widgets = array();
if ( in_array( $widget->get_name(), $rendered_widgets ) ) {
return;
}
$widget->render_content();
$rendered_widgets[] = $widget->get_name();
}
add_action( 'elementor/widget/render_content', 'wpsnippets_prevent_duplicate_widget' );
In this code example, we define a custom function wpsnippets_prevent_duplicate_widget that checks if the widget has already been rendered by keeping track of the rendered widgets in the $rendered_widgets array. If the widget has already been rendered, the function returns early without rendering it again. Otherwise, it renders the widget’s content and adds the widget’s name to the $rendered_widgets array.
Example 2: Exclude Specific Widgets from Duplicate Check
This use case builds upon the previous example and demonstrates how to exclude specific widgets from the duplicate check. Sometimes, you may want certain widgets to be rendered multiple times on the page. The code example shows how to achieve this by adding an additional check in the wpsnippets_prevent_duplicate_widget function.
function wpsnippets_prevent_duplicate_widget( $widget ) {
static $rendered_widgets = array();
// Exclude specific widgets from duplicate check
$excluded_widgets = array( 'widget_name_1', 'widget_name_2' );
if ( in_array( $widget->get_name(), $rendered_widgets ) && ! in_array( $widget->get_name(), $excluded_widgets ) ) {
return;
}
$widget->render_content();
$rendered_widgets[] = $widget->get_name();
}
add_action( 'elementor/widget/render_content', 'wpsnippets_prevent_duplicate_widget' );
In this code example, we introduce the $excluded_widgets array that contains the names of the widgets that should be excluded from the duplicate check. We modify the conditional statement to check if the widget is in the $excluded_widgets array and return early without rendering it again if it is. This allows specific widgets to be rendered multiple times while preventing duplicates for other widgets.
Example 3: Reset Rendered Widgets on Page Reload
This use case addresses the scenario where you want to reset the rendered widgets on page reload. This can be useful when you have dynamic content or when you want to allow duplicate widgets on subsequent page loads. The code example demonstrates how to reset the $rendered_widgets array on page reload.
function wpsnippets_reset_rendered_widgets() {
static $rendered_widgets = array();
$rendered_widgets = array();
}
add_action( 'wp', 'wpsnippets_reset_rendered_widgets' );
In this code example, we define a custom function wpsnippets_reset_rendered_widgets that resets the $rendered_widgets array to an empty array. We hook this function to the wp action, which is triggered on every page load. This ensures that the $rendered_widgets array is reset on each page reload, allowing widgets to be rendered again without being treated as duplicates.