Making blog post container clickable...

Hi there,

You could use some javascript like this:

jQuery( document ).ready( function($) {
    var body = $( 'body' );
    if ( body.hasClass( 'blog' ) || body.hasClass( 'archive' ) ) {
        $( '.type-post' ).on( 'click', function() {
            var link = $( this ).find( '.entry-title a' ).attr( 'href' );
            if ( link ) {
                window.location = link;
            }
        } );
    }
} );

That can be added to your existing scripts, or within the wp_footer hook wrapped in <script></script> elements.

Then add this CSS:

.blog .type-post, 
.archive .type-post {
    cursor: pointer;
}

Oh snap, it actually worked beautifully. Thank you.

I added it within wp_footer and wordfence thought I was doing something bad. White listing that action allowed this javascript to be added. <-- That's for someone who would think that adding javascript will brake something.

Now I need to learn what else I can do with these hooks :D

And of course, Thank you Tom for this theme, I really enjoy it.

You're welcome! Glad I could help :)

Hey, Tom!

I know I marked this one solved but I think that script could use a little improvement. And I hope it's ok to hijack my own post, so that I don't need to make a new topic for the same question.

Anyway, as I said it worked nicely. Only when you move cursor horizontally from one side to the other, cursor stays as a hand all the time. It's probably because containers are simply linked together, right?
Whereas when you move cursor vertically, cursor between containers changes to usual pointy one.
So, that little improvement would be making horizontal containers as their own entities, so that cursor between them changes to the pointy one.

Gosh, I hope it's understandable... :D

Hi, its more a CSS issue, the vertical column gaps are generated using left padding, so they are still part of the element. You can try swapping the padding for margins:

@media (min-width: 768px) {
    .post.generate-columns {
        padding-left: 0px;
        margin-left: 30px;
    }
}

Ok, it works.

Thank you David. :)

Glad we could help

Hello there!

I'll just hijack this post one more time. That last code works nicely for desktop size. But in tablet mode and also in mobile view that element is stretching through whole container width. It's invisible of course but you can easily click on the white space near blog container and it will open blog post itself. And I think that this invisible element doesn't allow for blog containers to rearrange themselves nicely in tablet mode also (unless there is something else).

So is there something to contain that clickable element within containers?

In the JS, try replacing:

$( '.type-post' ).on( 'click', function() {

With:

$( '.type-post .inside-article' ).on( 'click', function() {

Then change the CSS to this:

.blog .type-post .inside-article, 
.archive .type-post .inside-article {
    cursor: pointer;
}

I knew that there was a room for improvement. :D It's perfect now.

Thank you Tom.

Oh, and David...Tom... I promise to leave this topic alone forever.

No problem :)

Now I'm doing the hijacking here :-).

I am using the wp show posts plugin. Can you tell me what I should modify in the script in order to make the whole post clickable?

I tried several things but without luck.

Thanks,

Stef

Hi there,

this is a question for WP Show Posts support - but check here where Tom provides some javascript for that:

https://wpshowposts.com/support/topic/customize-a-post/#post-12008