[Resolved] Filter – put an anchor on post links.

[Peter]

Hi,
For a client we are building a Recent News section on the client’s frontpage of their website.

It’s a small section that loads the four most recent short news from the client in a single row four column section.

The client wants each post header link to link to a listing of all their short news stories.

The challenge is that the client wants an anchor on each link in the section on the frontpage that points to the specific item in the listing.

We’re currently using the SPECTRA post carusel to generate the Recent News section on the client’s frontpage. (See the url in the Private Information section.)

But I would like to use GenerateBlocks QueryLoop for this.

Since the anchor must be the individual post_url in order to jump to the specific post on the listing (archive), I have tried to solve this programmatically through a filter in the functions.php/Code Snippets plugin, but it does not work. (See filter code in the Private Information section.)

But it doesn’t work – it’s not the right code in the filter.

I can’t seem to target the post ID in the filter.

Also see the clarification urls in the Private Information section.

Thank you in advance
Cheers
Peter

[David]

Hi there,

tricky one.
But we have some hooks in GB that may work…

// Add post-id-{get_the_id} as ID Attribute on all query loop item
add_filter( 'generateblocks_attr_grid-item', function( $attributes, $settings ){
	if ( $settings['isQueryLoopItem'] && !is_admin()  ) {
    	$attributes['ID'] = 'post-id-'.get_the_id();
	}
	return $attributes;
}, 10, 2 );
// inject custom jump link after container-block open if block has custom-loop class
add_filter( 'generateblocks_after_container_open', function( $output, $attributes, $block ){
    if ( isset($attributes["className"]) && 'custom-loop' == $attributes["className"] && !is_admin() ) {
        $output .= '<a class="post-jump-link" href="some_url/#post-id-' . get_the_id() . '" aria-label="Go to the post titled ' . get_the_title() . '"></a>';
    }
    return $output;
},10,3);

Change the href base URL in $output .= '<a href="some_url/#post-id-'.....
Edit the query loop for your front page, select the Post Template block and give it a class of custom-loop

This should inject the custom anchor link into the containers HTML.

[Peter]

Hi Dave ,
Thank you very much for your reply with a hook.

Unfortunately, it doesn’t work the way I want it to.

I have made a short screenrecording with some annotations fro you to see if you have the time.

A link is provided in the Private Informationa area.

I hope to hear from you soon.

Thank you!

Peter

[Peter]

Ooops, I should have written David instead of Dave – my mistake… David

[David]

Don’t worry about the name 🙂
I made some edits to the code above:
https://generatepress.com/forums/topic/filter-put-an-anchor-on-post-links/#post-2519953

Can you update that code.
What it will do is:

1. All Query Loop posts post container HTML will be given a unique ID of their Post ID eg. id="post-id-123"

2. The Query Loop Post Template block with the Class of custom-loop will get an anchor link injected into its container.
Its HTML will look like this:

<a class="post-jump-link" href="some_url/#post-id-1463" aria-label="The current post title"></a>

Its a hidden link with an aria label containing the post title.

3. Add this CSS:

.custom-loop {
    position: relative;
}
.post-jump-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

It will position that button to make the entire container become that link.

So you can remove the Dynamic Single Post Link from the Headline block displaying the title

The smooth scroll on the archive. That i cannot do, maybe the Page Scroll to ID plugin can handle that for you

[Peter]

Hi David,

Thank you for all your immense help.

I have updated the code snippet with the changes to the script you have made.

But now there’s a new issue.

It puts a anchorlink on the entire page – and it’s an anchor to some arbitrary post-id, as far as I can see.

The link does go to the Latest News page – but it doea that no matter where I place my cursor on the frontpage.

Is it the CSS or is it in the new code? I can’t really tell…

Please see the urls and screenshot in the Private information section.

Thanks again

Peter

[David]

That will be CSS related.
Where can i see this on the actual site ? The link provide i still see the older content ?

[Peter]

Hi David,

Again – thank you very much for your help – it’s awesome!

I am sending you two urls.

On url no. 1 you can see the problem in full bloom.
Try and move your cursor around and down to also the second section (another Query Loop) on that page.
You’ll see that the post-id is the same on all posts.

On url no. 2 I got it working :-).

So your code works!

It’s more or less the same setup on both with a few more plugins on the first.

cheers Peter

[Peter]

No, the issue is there on both urls I sent you.

You mention it’s a CSS thing – can you help me clarify that? 🙂

Thanks again.

P.

[David]

Oh… its adding the jump links into every container …. which is what this code does:

// inject custom jump link after container-block open if block has custom-loop class
add_filter( 'generateblocks_after_container_open', function( $output, $attributes, $block ){
    if ( in_array( 'custom-loop', $attributes ) && !is_admin() ) {
        $output .= '<a class="post-jump-link" href="some_url/#post-id-' . get_the_id() . '" aria-label="Go to the post titled ' . get_the_title() . '"></a>';
    }
    return $output;
},10,3);

But it should only apply to containers that have the custom-loop class. I assume that code has not been changed ?

[Peter]

Hi David,
Sorry to keep returning about this.

I think I have the right code that you provided – will you please check the code in the Private Information?

I put the ‘custom-loop’ classname on both the top Container and the on the Post Template inside the Query Loop.

Maybe that’s bad practice, but now it works on the dev-site. (See URL1)

That made the frontpage work, but moved the problem to the target page.(See URL2)

So for that I added the page-id classname on the CSS you provided, like so:
CSS:
.page-id-31 .custom-loop {
position: relative;
}
.page-id-31 .post-jump-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

… and that made it all work… yeai…

BUT: On the client’s website it still puts a link to a post-id on everything – even the logo… (See URL3). It’s so sad…

What am I doing wrong?

[Peter]

Hi David,

The problem occurs as soon as there are more than one query loop on the page.

I just added another query loop to the frontpage on the dev-site and it’s acting the same way with a post-id link on everything.

Peter

[Peter]

Hi David,

Is this the reason?

// Add post-id-{get_the_id} as ID Attribute on all query loop item
add_filter( ‘generateblocks_attr_grid-item’, function( $attributes, $settings ){
if ( $settings[‘isQueryLoopItem’] && !is_admin() ) {
$attributes[‘ID’] = ‘post-id-‘.get_the_id();
}
return $attributes;
}, 10, 2 );

Doesn’t this code put a id link on all QueryLoop items?

cheers

Peter

[Peter]

It’s everything in the viewport that get assigned to a podt-link

[David]

The issue is related to this code:

// inject custom jump link after container-block open if block has custom-loop class
add_filter( 'generateblocks_after_container_open', function( $output, $attributes, $block ){
    if ( in_array( 'custom-loop', $attributes ) && !is_admin() ) {
        $output .= '<a class="post-jump-link" href="some_url/#post-id-' . get_the_id() . '" aria-label="Go to the post titled ' . get_the_title() . '"></a>';
    }
    return $output;
},10,3);

It is what adds the <a> to the container blocks, but it should only affect the containers with the custom-loop class.
But i just tested it, and its affecting all containers. hmmm… i will need to do some testing… i did say it was Tricky 🙂

[Author]

Posts