Make Content Section Clickable

Usually, you could wrap all of your content in a link element () and set that to display: block so it wraps around all of the content. Then you could use CSS to make it full height/width etc..

However, TinyMCE (the WP editor) strips block link elements. Unfortunately, this means you'd either need to:

a) Disable the visual editor
b) Use javascript to create the hover/link effect

Let me know if you need more info :)

I used jQuery for the click on the section and the rest I've done with CSS. Thank you!

Awesome, no problem! :)

Hi, I want to do the same: Link a whole section to another part of the website.
But unlike Nate, I would love to get more information on how to do so, as my knowledge in this area is quite limited.
Thanks,
Annika

Perhaps this will help?: https://css-tricks.com/snippets/jquery/make-entire-div-clickable/

Hi Tom,
as always very fast reply, thanks a lot for the link.
For you as a pro this probably is piece of cake, but I - as a beginner - am struggling a bit.

What I understand is:
Put the link to before the desired div (in my case this that would be the div with the id "generate-section-6".
Is there a way of doing this in the wordpress frontend, or do i have to go into the source-code, modify it here and upload it again via ftp?

Thanks a heap,
Annika

You could try adding something like this into your section content:

<a href="#YOUR-URL" class="section-link"><!-- link --></a>

Then your jQuery would be something like (adding in the wp_footer hook):

<script>
    jQuery(".generate-sections-container").on( 'click', function() {
        var div_link = $(this).find("a.section-link").attr("href");

        if ( ! div_link ) {
            return false;
        } else {
            window.location = div_link;
        }

        return false;
    });
</script>

Totally untested, but should work in theory. I know some page builders out there have this kind of functionality baked in.