[Resolved] Making blog post container clickable…

Home Forums Support [Resolved] Making blog post container clickable…

Home Forums Support Making blog post container clickable…

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #602419
    artie

    Hi, there!

    So, a specific need found me. I would like to make each blog post container clickable. Now to access a blog post one must click on the header. But I think it would be easier to simply click the whole container. What would be the best way to do it?
    Also is it just me or each row is getting smaller in height? Is there a way to make all rows consistent?

    #602864
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #602936
    artie

    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 πŸ˜€

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

    #603140
    Tom
    Lead Developer
    Lead Developer

    You’re welcome! Glad I could help πŸ™‚

    #605001
    artie

    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… πŸ˜€

    #605117
    David
    Staff
    Customer Support

    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;
        }
    }
    #605180
    artie

    Ok, it works.

    Thank you David. πŸ™‚

    #605182
    David
    Staff
    Customer Support

    Glad we could help

    #610680
    artie

    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?

    #611121
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #611174
    artie

    I knew that there was a room for improvement. πŸ˜€ It’s perfect now.

    Thank you Tom.

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

    #611541
    Tom
    Lead Developer
    Lead Developer

    No problem πŸ™‚

    #1727547
    Stef

    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

    #1727790
    David
    Staff
    Customer Support

    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

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