Bricks Query Loop – Checking for Current Post on Single Posts

A user asked:

Current Item Query Styling

Is there a “current item” option in queries?

I have a list of cpt items on my cpt single page (for navigation) – i want the “current” item to be in a different style than the others, but i cant find any indictation in the dom that it has an attribute or anything like it.

We can define a tiny custom function that returns true or false depending on whether the ID of post in the loop equals the ID of the current single post and have this be the value of a custom data attribute in Bricks for identifying/styling the current post.

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

function bl_is_current_post() {
  return get_the_ID() === get_queried_object_id();
}

get_the_ID() returns the ID of the post in the loop.

get_queried_object_id() returns the ID of the current single post (the “host” post).

Whitelist the bl_is_current_post function.

Ex.:

<?php 

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'bl_is_current_post'
  ];
} );

You should also add other functions (native or custom) being used in your Bricks instance besides bl_is_current_post. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

Edit your single post or CPT template with Bricks.

Add a Section and inside its Container, a Block element.

Enable query loop.

Select post type if needed.

Go to STYLE → ATTRIBUTES.

Add an attribute like this:

Name: data-current

Value:

{echo:bl_is_current_post}

Open any single post of your post type and observe the DOM.

data-current="1" will now be added in the HTML markup for the current post.

You can now add custom CSS like this for the QL-enabled Block, for example:

%root%[data-current="1"] h4 {
  color: red;
}

to set the color of the current single post’s title (assuming, it’s h4 level heading) to red.