how to create an Elementor widget for advanced custom fields

Preface

Sometimes you need to add custom fields to a post type. for example, if your post is about a book, you may need to have publisher name, publish date and author fields behind of post content that contains abstract of book. but there is no specific Elementor widget for Advanced custom fields. you must use and insert these fields one by one in your templates.

Steps to create an Elementor widget for advanced custom fields

In the previous article, I show you how to create a grouped comparison of product attributes with advanced custom fields and Yith compare plugin. In this article, I create an Elementor widget to show a group of advanced custom fields on the single product page.

If you want to have some additional attributes for each product and showing them on the product page, there are some solutions but no one is perfect. I want to have several groups of attributes and show each group in a separate section of the page. So I developed a Widget and put it in a plugin for my specific problem. note that I keep my code very simple for learning proposes.

1- create a simple plugin structure

<?php
/**
 * Plugin Name: Elementor ACF Widget
 * Description: Elementor Widget to show a group of advanced custom fields
 * Plugin URI:  https://avengering.com/
 * Version:     1.3.0
 * Author:      Ali Sohrabi
 * Author URI:  https://avengering.com/
 * Text Domain: elementor-advanced-custom-fields
 */

a plugin structure is a simple PHP file inside a directory. as you can see there is some comment line in the first lines of file. this file must be named as the directory name. you can find complete help in this address https://codex.wordpress.org/Writing_a_Plugin

2- add Elementor widget structures

Creating a widget for Elementor is very different from creating a widget for WordPress itself. you must create a class that derives from Widget_Base class.you can find a full document here https://developers.elementor.com/creating-a-new-widget/

you must create a “widget” folder under the plugin root directory. I have put Widget_Base derived class in the “acf4ele.php” file.

<?php
namespace Elementoracf4ele\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Acf4Ele
 *
 * Elementor widget for ACF.
 *
 * @since 1.0.0
 */
class acf4ele extends Widget_Base {

then you must declare at least 8 functions in this class. 6 of them are very simple functions that you can understand them by visiting the source code.

	public function get_name() 
	public function get_title() 
	public function get_icon() 
	public function get_categories() 
	public function get_script_depends() 

you can find detailed information about these 5 functions in the above link. the two remained functions described in the following paragraphs.

3- add parameter input controls for design time

in the Elementor designer panel, you have the choices to change some Controls of a Widget. but you need some more Controls, for example, the group_ID of advanced custom fields. in the _register_controls function, you must define these Controls.

	protected function _register_controls() {
		$this->start_controls_section(
			'section_content',
			[
				'label' => __( 'Content', 'elementor-acf4ele' ),
			]
		);

		$this->add_control(
			'groupid',
			[
				'label' => __( 'ACF Group ID', 'elementor-acf4ele' ),
				'type' => Controls_Manager::TEXT,
			]
		);

		$this->end_controls_section();

With  $this->start_controls_section command, a new section appears in designer panel of Elementor.  it is named as ‘section_content’ and labeled as ‘Content’ with ‘label’ =>

__( ‘Content’, ‘elementor-acf4ele’ ) .

this section include a Control named as ‘groupid’ witch labeled as ‘ACF Group ID’ and type of Text ‘type’ => Controls_Manager::TEXT, finally this section is closed with $this->end_controls_section(). now you have a control that must be filled by Group_ID parameter.

To finding group_ID of a parameter group in ACF you must go to Custom Fields>Fields Group menu. then select the desired group. now select the Edit link. In the new window go to the right upper corner and copy the group ID and paste it to the Elementor Control panel.

4- modify the “Render()” procedure

this is the main part of the Widget that appears on the front page. you need a little modification to the code that I published in the previous post.

protected function render() {
		echo '<div class="title">';
		echo  '<table>';
		
		$settings = $this->get_settings_for_display();
        $fields = acf_get_fields($settings['groupid']);
		foreach( $fields as $field ){
			  echo  '<tr class="price"><td>';
		      echo $field['label']; 	
		      echo '</td>';
		      echo "<td>";
              echo get_field($field['name'],$post_id); 
              echo "</td></tr>";
		}
		echo '</table></div>';
	}

you can find the complete source code of this project at https://github.com/alisohrabit/ACF4Elementor. Consider as I apply the new versions to GIT, you may find some modifications from the above codes.

Conclusion

As you can see this is very simple to add a new widget to Elementor. now we have a widget that shows a table of a group of additional parameters of a post. these additional parameters are prepared by Advanced custom fields plugin and you can put them grouped, in any section of the page. in the next article of this series, I will create a single product template in Elemntor and use this widget to show the advanced properties of the product on this template.

A few things to note:

1. Your plugin should only include the widget class file if Elementor is active and loaded.

2. There are other methods available to make your widget more reactive like _content_template() which lets you recreate the render() method in JavaScript to be used in the Editor which uses the MarionetteJS template engine and using it will render the content of the widget on any instantly on any change to one of his controls without making a request to the server.

3. There are many types of controls you can add to your widget to make it easier to configure. We have a separate section with a full list of available controls.