Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Active Link in Query Loop Block

  • Hello, I’ve created a list of article links using the Query Loop block, and I need to highlight in a different color the active article link (the one that is actually opened and viewed in the browser). I’ve tried in every way with CSS but it’s not working. Could you help me? I’m putting the page URL in Private Information; the menu is located on the top right sidebar.
    Thank you very much for your help

  • 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.

  • Thank you very much David, it works very good, anyway for the first article link in the list is not working, I assume is because that link is not inside the query loop (it is just a paragraph). Is there any way to make that work as well?

  • 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

  • It works, thank you very much, David!

  • Glad to hear that!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.