Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

PODs don’t display the post title, instead displays the post ID only

  • Hi,
    I’ve created two CPT (Projects & Products) via PODS and created two fields (related-products & related-project) with bi-directional relationship to each other.

    I can see and select the products and projects in the admin area. However I can’t make the PODS display the title of the projects or products in no way, only the post IDs are displayed at the frontend.

    I’ve also created a blok hook element in the GP with query loop for a post meta template to be displayed after the content of products and projects respectively. Even though I can see the related posts or projects on the backhand of element module, I can’t make them displayed on the front end.

    What might be wrong?

  • Hi there,

    I’m not familiar with PODs, but the relation fields are not supported by GB or GB Pro, you will need to write custom code for that.

    I’ve also created a blok hook element in the GP with query loop for a post meta template to be displayed after the content of products and projects respectively.

    In this case, you need to use generateblocks_query_loop_args filter to modify the post__in query arg to match the related project ids.

    Try follow the steps:

    1. Add a CSS class to the Grid block of the Query loop, eg. related-projects.
    Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

    2. Remove all parameters except POST TYPE and POSTS PER PAGE for the query loop.

    3. Add this PHP code, and change custom_field_slug with the actual field slug.

    add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
        if (
            ! empty( $attributes['className'] ) &&
            strpos( $attributes['className'], 'related-projects' ) !== false &&
            ! is_admin()
        ) {
            // Get the related post ID
            $queried_object = get_queried_object();
            $meta_key =  'custom_field_slug';
            $relationship = get_post_meta( $queried_object->ID, $meta_key, true );
          
            // Check if $relationship is not empty before using it
            if ( ! empty( $relationship ) ) {
                // Merge the current $query_args with the new args
                return array_merge( $query_args, array(
                    'post__in' => $relationship,
                ) );
            }
        }
    
        return $query_args;
    }, 10, 2 );
    

    Adding PHP: https://docs.generatepress.com/article/adding-php/

  • Thanks Ying, this is complicated than I thought.I’ve followed your instructions and tried to create a query loop inside the project page where related products need to be displayed. But I may be doing something wrong here. It gives a PHP error due to Polylang plugin. When I turned it off these errors appear.

    Warning: array_map(): Expected parameter 2 to be an array, string given in /home/customer/www/omerk50.sg-host.com/public_html/wp-includes/class-wp-query.php on line 2201

    Warning: implode(): Invalid arguments passed in /home/customer/www/omerk50.sg-host.com/public_html/wp-includes/class-wp-query.php on line 2201

    Should I switch to ACF instead of PODS to create related CPTs?

  • Hi there,

    check the Unilever HQ Post now. It is now displaying the related posts.
    In you Query Loop Parameters you had 2 empty parameter options set which was causing the query to fail, i have removed them.

  • Hi David,

    Many thanks, I can see it displays related product now. However, when I unselect one product, it still displays two of them. I cleaned the PODS cache and tried on a different browser but still I can see two products.

    Besides I can’t populate the related-products field in the Post meta boxes to retrieve them dynamically via GB’s heading block. I’m really struggling to retrieve PODS custom fields of the CPT’s to be dynamically pulled by Generateblocks. PODS shortcode’s work fine but I prefer to use dynamic data method to display meta fields.

    Screenshot of admin area

  • Besides I can’t populate the related-products field in the Post meta boxes to retrieve them dynamically via GB’s heading block.

    You need to use query loop block, and use the same method I provided earlier.

    However, when I unselect one product, it still displays two of them

    The reason that you are seeing 2 products is that the PHP code is inactive, so the query loop is just simply showing all latest products.
    https://app.screencast.com/UD1PJtRyHdM1T

  • Thanks Ying. I wrote a simple plugin to overcome the difficulty to manually enter fields in the functions for different custom posts and fields. It produces a generic shortcode that can be used in GP Elements to be placed in relevant posts. It seems to be working fine for now. Sharing here:

    <?php
    /*
    Plugin Name: Related Posts Plugin
    Description: Displays related posts using ACF relationship fields.
    Version: 1.0
    Author: MASA Studio
    */
    
    // Enqueue styles
    function related_posts_plugin_enqueue_styles() {
        wp_enqueue_style('related-posts-plugin-style', plugins_url('related-posts-plugin.css', __FILE__));
    }
    add_action('wp_enqueue_scripts', 'related_posts_plugin_enqueue_styles');
    
    // Add options page to the admin menu
    function related_posts_plugin_options_page() {
        add_options_page(
            'Related Posts Plugin Settings',
            'Related Posts Settings',
            'manage_options',
            'related_posts_plugin',
            'related_posts_plugin_options_page_html'
        );
    }
    add_action('admin_menu', 'related_posts_plugin_options_page');
    
    // Register and initialize settings
    function related_posts_plugin_register_settings() {
        register_setting('related_posts_plugin_options_group', 'related_posts_plugin_options');
    }
    add_action('admin_init', 'related_posts_plugin_register_settings');
    
    // Settings page HTML
    function related_posts_plugin_options_page_html() {
        ?>
        <div class="wrap">
            <h2>Related Posts Plugin Settings</h2>
            <form method="post" action="options.php">
                <?php settings_fields('related_posts_plugin_options_group'); ?>
                <?php $options = get_option('related_posts_plugin_options'); ?>
                <table class="form-table">
                    <tr valign="top">
                        <th scope="row">Relationship Field Name(s)</th>
                        <td>
                            <input type="text" name="related_posts_plugin_options[relationship_fields]" value="<?php echo esc_attr($options['relationship_fields']); ?>" />
                        </td>
                    </tr>
                    <tr valign="top">
                        <th scope="row">Post Type(s)</th>
                        <td>
                            <input type="text" name="related_posts_plugin_options[post_types]" value="<?php echo esc_attr($options['post_types']); ?>" />
                        </td>
                    </tr>
                    <tr valign="top">
                        <th scope="row">Posts Per Page</th>
                        <td>
                            <input type="number" name="related_posts_plugin_options[posts_per_page]" value="<?php echo esc_attr($options['posts_per_page']); ?>" />
                        </td>
                    </tr>
                </table>
                <?php submit_button(); ?>
            </form>
        </div>
        <?php
    }
    
    // Shortcode function to display related posts
    function display_related_posts_shortcode($atts) {
        $options = get_option('related_posts_plugin_options');
    
        $atts = shortcode_atts(array(
            'post_id' => get_the_ID(), // Default to current post ID
        ), $atts);
    
        // Get the attributes from the options
        $relationship_fields = isset($options['relationship_fields']) ? explode(',', $options['relationship_fields']) : array();
        $post_types = isset($options['post_types']) ? explode(',', $options['post_types']) : array();
        $posts_per_page = isset($options['posts_per_page']) ? intval($options['posts_per_page']) : -1;
    
        // Initialize output variable
        $output = '';
    
        // Flag to track if any related posts are found
        $related_posts_found = false;
    
        // Loop through each relationship field and post type
        foreach ($relationship_fields as $relationship_field) {
            foreach ($post_types as $post_type) {
                // Query arguments
                $query_args = array(
                    'post_type' => $post_type,
                    'posts_per_page' => $posts_per_page,
                    'meta_query' => array(
                        array(
                            'key' => $relationship_field,
                            'value' => '"' . $atts['post_id'] . '"', // Wrap post ID in double quotes
                            'compare' => 'LIKE', // Use LIKE operator for ACF relationship fields
                        ),
                    ),
                );
    
                // Get related posts
                $related_posts_query = new WP_Query($query_args);
    
                // Check if related posts exist
                if ($related_posts_query->have_posts()) {
                    // Set flag to true if related posts are found
                    $related_posts_found = true;
    
                    // Start building the output
                    $output .= '<div class="related-posts-grid">';
                    while ($related_posts_query->have_posts()) {
                        $related_posts_query->the_post();
                        // Display related post content
                        $output .= '<div class="related-post">';
                        // Link the post thumbnail to the post
                        if (has_post_thumbnail()) {
                            $output .= '<a href="' . esc_url(get_permalink()) . '">';
                            $output .= '<div class="post-thumbnail">' . get_the_post_thumbnail(get_the_ID(), 'large') . '</div>';
                            $output .= '</a>';
                        }
                        // Link the post title to the post
                        $output .= '<h2 class="post-title"><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></h2>';
                        $output .= '</div>'; // Close the related-post div
                    }
                    $output .= '</div>'; // Close the related-posts-grid div
                    wp_reset_postdata(); // Restore original post data
                }
            }
        }
    
        // If no related posts are found, display a message
        if (!$related_posts_found) {
       $output .= '<p>No related posts found.</p>';
       }
    
        // Return the output
        return $output;
    }
    add_shortcode('related_posts', 'display_related_posts_shortcode');

    In the settings page it allows you enter which CPT and which fields should be displayed in linked posts and displays them in a grid row with clickable thumbnails and titles. The accompanying CSS can be modified for customisation of the grid.

    .related-posts-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjust the minmax value as needed */
        gap: 10px;
    }
    
    .related-post {
        border: 1px solid #ddd;
        padding: 5px;
    }
    
    .post-thumbnail {
        overflow: hidden;
        position: relative;
        height: 0;
        padding-bottom: calc(3 / 4 * 100%); /* 4:3 aspect ratio */
    }
    
    .post-thumbnail img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .post-title {
        margin-top: 10px;
        font-size: 18px;
    }
  • Thanks for sharing 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.