Voting System in Bricks using WP ULike

Updated on 16 Feb 2023

This Pro tutorial provides the steps to add upvote and downvote buttons using WP ULike Pro for posts output via Bricks‘ Query Loop and order the posts by the number of upvotes first and then by published date.

Step 1

Install and activate WP ULike and WP ULike Pro.

Go to ULike → Configuration → Content Types → Posts.

Select the StackVotings template. See this page for a live demo of this template.

If you’d like the voting buttons to not automatically appear near the bottom of your single posts, set “Automatic display” to OFF.

By default, voting is enabled for everyone incl. non logged-in visitors. If you’d like to restrict this to only the users that are logged in, set “Only logged in users” to ON.

Step 2

Edit your posts list Template or Page with Bricks.

Copy the JSON code from here and paste it in the Bricks editor.

The important steps here are the use of WP ULike’s shortcode inside the for displaying the voting buttons and the META QUERY.

Here we are setting the meta query to either posts that do not have the like_amount meta key (i.e., posts that have not been voted yet) or posts that have at least 1 upvote.

Step 3

Next, we need to order the posts by the number of upvotes and then by published date in descending order.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( $element_id === 'xexxen' ) {
		$query_vars['orderby'] = [ 'meta_value_num' => 'DESC', 'date' => 'DESC' ];
	}

	return $query_vars;
}, 10, 3 );

Replace xexxen with the Bricks ID of your query loop element.

If you’d like to set up a Page for showing users’ posts, follow Show User’s Liked Posts in Bricks with WP ULike.

Update

If you’d like to hide the downvote buttons, change the up arrow and add a box around add this sample custom CSS and modify as needed:

.wpulike-stack-votings .wpulike_total_vote {
	border: 1px solid #e1e1e1;
	width: 80px;
	height: 80px;
	justify-content: center;
}

.wpulike-stack-votings button.wp_ulike_btn[aria-label="Dislike Button"] {
	display: none;
}

.wpulike-stack-votings .wp_ulike_put_image:after {
	background-image: url('https://images2.imgbox.com/c6/3f/ZrFvfJwR_o.png'); 
}

.wpulike-stack-votings .wp_ulike_put_image.wp_ulike_btn_is_active:after {
	filter: none;
}

References

Order Posts by Likes with elementor custom skin loop template – Documentation | WP Ulike Plugin

Shortcodes – Documentation | WP Ulike Plugin