Show User’s Liked Posts in Bricks with WP ULike

This Pro tutorial shows how posts liked by the currently logged in user via WP ULike can be shown on a Page in Bricks.

Step 1

Install and activate WP ULike.

By default, the plugin will be active for the post post type. To change this, go to the Content Types tab in the plugin’s settings page and select your desired post types in the “Post Types Filter” field.

While there you can change the appearance of the like button and any others settings as needed.

Step 2

The default button position on single posts is after the content.

You may want to add a top margin to space it out a bit.

Edit your single post template with Bricks and add this at Settings (gear icon) → PAGE SETTINGS → CUSTOM CODE → Custom CSS:

.wpulike {
	margin-top: 2em;
}

Step 3

View a few posts on the frontend and like them so we have some data for testing.

Create a Page called “My Profile” or “My Content” for showing the posts that the user has liked.

Add a Section and inside its Container Posts element or set up a Query Loop.

Use the query icon to select your post type. If this is for the built-in post post type, there is no need to make any changes since it is the default in Bricks.

If you’d like to add the like button in the loop, add this shortcode:

[wp_ulike]

Step 4

Let’s filter the posts from the above to only those that the current user has liked.

Add this in child theme’s functions.php or a code snippets plugin:

// Restrict the posts to those liked by the currently logged-in user
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	// if we are not a Page having a slug of "my-content" or if WP ULike is not active, return the query vars.
	if ( ! is_page( 'my-content' ) || ! class_exists( 'WpUlikeInit' ) ) {
		return $query_vars;
	}

	if ( $element_id === 'gzrnne' ) { // replace gzrnne with the Bricks ID of your Posts element or Query Loop element
		$args = array(
			// 'type'     => 'post', // posts, comment, activity, topic - post is default
			// 'period'   => 'all', // default
			// 'order'    => 'DESC', // default
			// 'status'   => 'like', // default
			// 'page'     => 1, // default
			'per_page' => 100 // 10 is default - specify a number greater than the max. num of posts in your site
		);

		$data = wp_ulike_get_user_data( get_current_user_id(), $args );
		// print( '<pre>' . print_r( $data, true ) . '</pre>' );

		$liked_posts = [];

		foreach ( $data as $item ) {
			$liked_posts[] = $item->itemID;
		}
		// print( '<pre>' . print_r( $liked_posts, true ) . '</pre>' );
	
		if ( $liked_posts ) {
			$query_vars['post__in'] = $liked_posts;
		}
	}

	return $query_vars;
}, 10, 3 );

Change is_page( 'my-content' ) accordingly. If you are showing this on the site’s static homepage, then you’d change it to is_front_page().

Replace gzrnne with the Bricks ID of your Posts element or the Query Loop element.

References

https://wordpress.org/support/topic/user-profile-liked-posts/#post-12703733

L548 in /wp-content/plugins/wp-ulike/includes/functions/queries.php.