-
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 thepost__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?
-
David
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. -
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 🙂
- You must be logged in to reply to this topic.