Active Link in Query Loop Block

Hi there,

so by default the post won’t know its the current post.
But what we co is create some dynamic CSS to swap colors if the post IDs match.

1. add this PHP Snippet to your site:

function add_current_post_css() {
    if ( is_single() ) {
        global $post;
        $post_id = $post->ID;
        printf( '<style type="text/css">.%s { --current-post: #f00; }</style>', 'post-' . $post_id );
    }
}
add_action( 'wp_head', 'add_current_post_css' );

1.1 note this line: --current-post: #f00; change the #f00 to the highlight color.

2. in Customizer > Colors create a new color in the pallet and call it: current-post
Set its hex color to the NON highlight color.

3. Edit your Query Loop and select the block that you want to highlight the background or the text, and set it to the current-color in the pallet.

Hmmm…. ok. So if i follow that top link the post ID is 7089
In theory you could:

1. Edit the headline block that shows that link
2. give it an Advanced > Additional CSS Class of: post-7089
3. set its background color to the current-post color.

And that should work too… i just cannot make it dynamic – ie. other static links you would have to apply the same steps for each

Glad to hear that!