-
Hello,
for quite some time I have been trying to find a way to make footer menus with blocks. The native navigation block just doesn’t have enough styling options, so I’m trying GB Query Loop.
Is there a way for GB Query Loop to mark the current page or post with some class? Or maybe there’s a better way to get wp_nav_menu -like output with blocks?
-
Hi there,
Is there a way for GB Query Loop to mark the current page or post with some class?
It’s possible, but it will require custom CSS as well. If you go that route, it’s better to just use the Navigation block since the feature is already there by default, and you can style it with CSS, as you’ll be using CSS anyway.
-
Well, I have a few issues with the navigation block.
- Unlike the Query Loop, Navigation block items cannot have icons.
- URLs are set inside the block and are not updated (by post ID) if they change.
- And as I said before, it cannot be styled with the GB.
So I would like to try the CSS solution for the Query Loop. I guess that it would involve body classes somehow 🙂
-
It’s a bit tricky, you will need to use a JS to add the current-post class to the query item:
<script>document.addEventListener("DOMContentLoaded", function() { // Step 1: Get the body classes const bodyClasses = document.body.classList; // Step 2: Find the class that starts with 'postid-' in the body bodyClasses.forEach(className => { if (className.startsWith('postid-')) { // Extract the number from 'postid-XXXX' const postId = className.split('postid-')[1]; // Step 3: Look for the element with class 'post-[number]' const matchingElements = document.querySelectorAll(<code>.post-${postId}</code>); // Step 4: Add 'current-post' class to each matching element matchingElements.forEach(element => { element.classList.add('current-post'); }); } }); }); </script>Then add a class to the headline block which represents the title, eg.
query-post-title, then you can use CSS to style the item:.current-post.gb-query-loop-item .query-post-title a { color:red; /*add more css*/ } -
The new (GB 2.0 alpha 1) Query Loop does not output ID’s 🙂
Would be nice if the new Query Loop would mark the current item automatically.
-
The new (GB 2.0 alpha 1) Query Loop does not output ID’s 🙂
It does.
Have you tried the solution yet?
-
I mean… I checked the code and (unlike the old loop) it doesn’t have post ID’s:
<ul class="gb-looper-7858d77a"> <li class="gb-loop-item my-class"> <a class="gb-text-5ebadb3a" href="https://link/"><span class="gb-shape">1</span><span class="gb-text">Text</span></a> </li> <li class="gb-loop-item my-class"> <a class="gb-text-5Text href="https://link/"><span class="gb-shape">2</span><span class="gb-text">Text</span></a> </li> <li class="gb-loop-item my-class"> <a class="gb-text-5Text href="https://link/"><span class="gb-shape">3</span><span class="gb-text">Text</span></a> </li> </ul> -
Cannot edit the post a second time, so here’s the code again:
<ul class="gb-looper-7858d77a"> <li class="gb-loop-item my-class"> <a class="gb-text-5ebadb3a" href="https://link/"><span class="gb-shape">1</span><span class="gb-text">Text</span></a> </li> <li class="gb-loop-item my-class"> <a class="gb-text-5ebadb3a" href="https://link/"><span class="gb-shape">2</span><span class="gb-text">Text</span></a> </li> <li class="gb-loop-item my-class"> <a class="gb-text-5ebadb3a" href="https://link/"><span class="gb-shape">3</span><span class="gb-text">Text</span></a> </li> </ul> -
Hum..you are right, a workaround is to use 2 query loop blocks, one to display “title” (current post), and the other to display all rest posts and exclude the current post.
-
Hmm, that would make the current post always a first item or I’m missing something?
Also, “Exclude current post” didn’t work for me. -
Hi there,
the missing post_class values are down as an issue and we are looking at how to add them back in.
To add the current class, but tricky. But try this:1. Add this PHP Snippet
function modify_post_item_block($block_content, $block) { // Check if the block has the classes 'post-item' and 'placeholder' if (strpos($block['attrs']['className'] ?? '', 'post-item') !== false) { // Get the current post ID and the queried page ID $current_post_id = get_the_ID(); $current_page_id = get_queried_object_id(); if ($current_post_id == $current_page_id) { $block_content = str_replace('placeholder', 'current-post', $block_content); } else { $block_content = str_replace('placeholder', '', $block_content); } } return $block_content; } add_filter('render_block', 'modify_post_item_block', 10, 2);2. select the Loop Item block and in its CSS Classes add:
post-item placeholderThe code above, if it works, will replace the
placeholderwith thecurrent-postclass if its ID matches he current post. -
Hello,
it actually works! Thanks David 🙂
But it would be nice to have this built in.
-
Glad to be of help
- You must be logged in to reply to this topic.