How To Create Widget With Advanced Custom Fields Pro

Advanced Custom Fields Pro is a great plugin for extending WordPress with different types of fields which come with great UI. Fields can be added to posts, pages, user screens and few other forms like the widget. In this tutorial, we will learn how to create a widget and add ACF fields to the widget form. The widget will be really simple with input fields for title, text, button label, and button link drop-down.

 

Creating Custom Widget

To use ACF with widget we need to create a new widget where we will display data from ACF fields.

The widget can be created by extending WP_Widget class and some of its methods. Documentation on Codex has an example of how to extend the class. We will use the example from Codex page and modify the class name, widget name, and method which displays content of the widget to the front end.

<?php

if(!class_exists('CtaWidget')) {

  class CtaWidget extends WP_Widget {

    /**
    * Sets up the widgets name etc
    */
    public function __construct() {
      $widget_ops = array(
        'classname' => 'cta_widget',
        'description' => 'CTA Widget built with ACF Pro',
      );
      parent::__construct( 'cta_widget', 'CTA Widget', $widget_ops );
    }

    /**
    * Outputs the content of the widget
    *
    * @param array $args
    * @param array $instance
    */
    public function widget( $args, $instance ) {
      // outputs the content of the widget
    }

  }

}

/**
 * Register our CTA Widget
 */
function register_cta_widget()
{
  register_widget( 'CtaWidget' );
}
add_action( 'widgets_init', 'register_cta_widget' );

We have created a class with the name CtaWidget which has the constructor and three other methods. In constructor method, we set widget name, description, and classname attribute which will be used as CSS class attribute.

Method responsible for displaying widget data on the front end is called widget, and since we haven’t yet created ACF field, we will leave it empty for now.

In this tutorial we will not use methods form and update, but it is necessary to extend them in our class.

1. A widget without input fields, that we have just created.

 

 

Creating ACF fields

Advanced Custom Field plugin comes in two versions Free and Pro. The free version doesn’t allow us to place ACF fields in widgets, so in this tutorial, I am using Pro version.

We will create new field group called “CTA Widget” and add some fields to it:

  1. Title – text field
  2. Text – text area field
  3. Button Label – text field
  4. Button Link – page link

Text field and text area field are simple input fields for entering text. The page link field is the type of drop down input where all posts and pages are listed. This field can be customized so that we can filter only certain post type to show in drop down, or posts which have a certain taxonomy.

Another option that we can set in the page link field is to select multiple values. But since we now need one value to be selected, we will not change that option.

Now that we have created the field, we need to set the location where our field group will display. In the image bellow, you will see that I did set to display field group if “Widget” screen is equal to the name of our widget which is “CTA Widget”.

 

2. ACF fields which we will use in widget

 

We can now go and check whether our field group is showing in our widget. To do that we will go to Appearance > Widgets. If everything went well we should see our fields. We can also populate them with the content while we are here.

3. Widget with ACF fields

 

Output Widget Content

We came to the part where we need to display widget data to the front end.

In order to do that we need to update our widget method and use ACF API functions(the_field, get_the_field) to retrieve the data. When we are using this functions in widget class, we need to pass them two arguments. First one is the name of the field for which we want to retrieve the data and the second is the post ID or in our case, the widget ID prefixed with widget_.

  /**
    * Outputs the content of the widget
    *
    * @param array $args
    * @param array $instance
    */
    public function widget( $args, $instance ) {
      // outputs the content of the widget
      if ( ! isset( $args['widget_id'] ) ) {
        $args['widget_id'] = $this->id;
      }

      // widget ID with prefix for use in ACF API functions
      $widget_id = 'widget_' . $args['widget_id'];

      $title = get_field( 'title', $widget_id ) ? get_field( 'title', $widget_id ) : '';
      $btn_label = get_field( 'button_label', $widget_id );
      $btn_link = get_field( 'button_link', $widget_id ) ? get_field( 'button_link', $widget_id ) : '#';

      echo $args['before_widget'];

      if ( $title ) {
        echo $args['before_title'] . esc_html($title) . $args['after_title'];
      }
      
      the_field( 'text', $widget_id );

      if($btn_label) {
        echo '<a href="' . esc_url($btn_link) . '" class="button">' . esc_html($btn_label) . '</a>';
      }

      echo $args['after_widget'];
      
    }

We should now see our data displayed on front end.

 

Conclusion

With Advanced Custom Fields plugin we can easily create custom fields for our WordPress posts and pages. The plugin comes with the variety of fields which also have a great user interface out of the box. Pro version of the plugin comes with more advanced fields like Repeater Field, Gallery Field, Flexible Content Field and also has more sections in which we can include ACF fields.

 

About the Author

Freelance WordPress developer who offers full stack web development services. Occasionally writes about business and WordPress development. When not in front of the computer can be found on a bicycle or enjoying good beer.

Leave a Reply 0 comments

Leave a Reply:







SUBSCRIBE TO NEWSLETTER

Subscribe here in order to occasionally receive updates about new posts

x