[Resolved] Make div all linkable in element

[William]

Hi there,

Is there a way to make a div element all linkable to the category of that post in the header element? – the bit in yellow:

So it mimics the functionality you can see here.

[David]

Hi there,

can you link me to a page where you want to add this functionality?

[William]

Sure thing, such as here and here.

[David]

Without editing the HTML you can use some CSS like this to make the header elements meta-category clickable:

.page-hero .meta-category {
    display: inline-block;
    position: relative;
}
.page-hero .meta-category a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[William]

That does not seem to have done anything.

I am trying to replicate the click area that you can see with this theme here.

[Elvin]

Hi,

For this page:
Link

Any particular reason why you want to keep its html this way?

Consider changing the HTML structure of its Header Element to this:

<div class="meta-category">
    <a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag">
        <span class="cat-first-letter">C</span>  <p style="display:inline-block;">- Claude McKay need to make all a link</p>
    </a>
</div>

So that everything is wrapped similar to your reference.

[William]

That’s great thank you – is there a way to have the text centered vertically against the big letter and have the same hover effects as this?

Also, can the linking area for the text is just on the text – is it possible to have some sort of padding so the linking area around the text is the same as here?

[Tom]

Are any of the links you’ve shared your actual page that you’re working on? I’ve looked through and all the links seem to be the same site where the look of it seems complete?

Let me know 🙂

[William]

The actual page is this page<–This is the site I am working on.

But as with my last comment, I reference another theme to copy similar functionality as I said here:

That’s great thank you – is there a way to have the text centered vertically against the big letter and have the same hover effects as this?

Also, can the linking area for the text is just on the text – is it possible to have some sort of padding so the linking area around the text is the same as here?

[Tom]

This should help vertically center it:

.meta-category {
    display: flex;
    align-items: center;
}

.meta-category p {
    margin-bottom: 0;
}

To make the entire thing a link, you should do something like this:

<a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/ class="meta-category">
    <span class="cat-first-letter">C</span>  <p style="display:inline-block;">- Claude McKay need to make all a link</p>
</a>

[William]

Thank you for that – centering works a treat.

As for the link – I would require something generic so that the link for the div element changes to the primary category of the post – possible using the shortcode for {{post_terms.category}}, however, not sure how to implement this correctly?

[Tom]

So you need the URL to update based on the category? Which category, exactly? The current one?

[William]

That’s correct – whatever the post category is, the link should update to that category.

[David]

How are you currently creating the category meta?

[William]

For this page, the header element is:

	<div class="meta-category">
    <a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag">
        <span class="cat-first-letter">[cat-first-letter]</span>  <p style="display:inline-block;"> - {{post_terms.category}}</p>
    </a>
</div>

<h1 class='post-title'>
	{{post_title}}
</h1>

<div class="post-excerpt">
	[post-excerpt]
</div>

But where the a href needs to update according to the category of the post (to link to that category) and to link the whole div element ‘meta-category’.

[Author]

Posts