- This topic has 13 replies, 2 voices, and was last updated 2 years, 11 months ago by David.
-
AuthorPosts
-
June 18, 2018 at 12:40 am #602419artie
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?June 18, 2018 at 10:21 am #602864TomLead DeveloperLead DeveloperHi 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; }
June 18, 2018 at 12:25 pm #602936artieOh 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.
June 18, 2018 at 8:02 pm #603140TomLead DeveloperLead DeveloperYou’re welcome! Glad I could help π
June 21, 2018 at 2:02 am #605001artieHey, 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… π
June 21, 2018 at 5:06 am #605117DavidStaffCustomer SupportHi, 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; } }
June 21, 2018 at 6:50 am #605180artieOk, it works.
Thank you David. π
June 21, 2018 at 6:51 am #605182DavidStaffCustomer SupportGlad we could help
June 28, 2018 at 7:26 am #610680artieHello 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?
June 28, 2018 at 7:28 pm #611121TomLead DeveloperLead DeveloperIn 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; }
June 28, 2018 at 10:37 pm #611174artieI 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.
June 29, 2018 at 7:58 am #611541TomLead DeveloperLead DeveloperNo problem π
April 9, 2021 at 6:37 am #1727547StefNow 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
April 9, 2021 at 7:08 am #1727790DavidStaffCustomer SupportHi 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
-
AuthorPosts
- You must be logged in to reply to this topic.