• Plugin Author Phi Phan

    (@mr2p)


    In this tutorial, we will show you how to use MFB to display any kind of content, not just real meta fields. You can use it as a placeholder to display your content with your familiar PHP code, instead of building custom Gutenberg blocks. The following example still queries meta fields, but you can get the idea and display anything with post_id as a context parameter.

    This tutorial will show you how to query content from a related post type using dynamic fields. These fields are called dynamic because they are not real, but only placeholders to display content. We will use ACF for this example, but you can apply the same technique to any meta-field framework with the hook meta_field_block_get_block_content. The example we will use is Event and Location. Events will have fields like title, start date, price, etc. Locations will have fields like title (name), city, address, etc. We will use an ACF post object field named event_location in the event post type to store its location ID. Here is the code to display location information on a single event template or in a query loop of event type:

    // Display the name (title) of the location. You also should choose the tag name setting as a heading tag such as h1, h2, h3, etc.
    add_filter(
      'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) {
        $field_name = $field['name'] ?? '';
    
        // Replace prefix_location_name with your unique name.
        if ('prefix_location_name' === $field_name ) {
          // Get post id for location post.
          $event_location_id = get_field('event_location', $post_id);
    
          // Has a value.
          if ($event_location_id ) {
            $block_content = get_the_title($event_location_id);
          }
        }
    
        return $block_content;
      }, 10, 4
    );
    
    // Display the address of the location.
    add_filter(
      'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) {
        $field_name = $field['name'] ?? '';
    
        // Replace prefix_location_address with your unique name.
        if ('prefix_location_address' === $field_name ) {
          // Get post id for location post.
          $event_location_id = get_field('event_location', $post_id);
    
          // Has a value.
          if ($event_location_id ) {
            $block_content = get_field('address', $event_location_id);
          }
        }
    
        return $block_content;
      }, 10, 4
    );
    
    // Display the city of the location.
    add_filter(
      'meta_field_block_get_acf_field', function ( $block_content, $post_id, $field, $raw_value ) {
        $field_name = $field['name'] ?? '';
    
        // Replace prefix_location_city with your unique name.
        if ('prefix_location_city' === $field_name ) {
          // Get post id for location post.
          $event_location_id = get_field('event_location', $post_id);
    
          // Has a value.
          if ($event_location_id ) {
            $block_content = get_field('city', $event_location_id);
          }
        }
    
        return $block_content;
      }, 10, 4
    );

    To use these three dynamic fields, you need to drop three MFB instances into your template or page and set the field type for all of them as ACF. Then, set the field name for them as prefix_location_name, prefix_location_city, and prefix_location_address respectively. The above example is for a one-to-one or one-to-many relationship. For a many-to-many relationship, you should use an ACF relationship field to connect two post types. In that case, you need to modify the above snippets to loop through all locations and display their content in a markup of your choice. To display the reverse direction, i.e., event information on the location page, you should enable bidirectional relationships for your post object or relationship fields and write similar code to query event data.

    Phi.

    • This topic was modified 1 year ago by Phi Phan.
  • The topic ‘How to use MFB to display ‘dynamic’ fields?’ is closed to new replies.