advanced custom fields widget for elementor

how to create an Elementor widget for advanced custom fields

Home » blog » how to create an Elementor widget for advanced custom fields

Table of Contents

Categories

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

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.

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.

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.

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’ =>elementor control panel for widget

__( ‘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.

find group id of advanced custom field
group ID of ACF group

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.

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.

 

a good manual

5.0 rating
December 2, 2019

this is a perfect manual for anyone how want to create a widget for AFC

narges hafez
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on pinterest
Share on reddit
Share on email