Why I made an entire div clickable in WordPress

September 28, 2016

Often times, I come across a problem when designing sites with WordPress. Whether it’s trying to add functionality to a template in order to match the mockup, or it is simply trying to find out where, and why, the CSS I have added is being overridden (ugh!). Either way, I find myself digging in WordPress more often than not.Recently, I had to find a way for a Beaver Builder template to match the approved mockup. One particular problem I had not experienced before was styling the archived blog posts, and making the entire div clickable.

 

Often times, I come across a problem when designing sites with WordPress.

The big issue

To give you a better idea of the issue — the user was only able to click on the title, image, and link of the blog to access the blogs page. However, the functionality I wanted included having the entire div clickable. Luckily, I came across an article written by Chris Coyier at https://css-tricks.com that explained in detail how I could change the blog archives from this:

 

…to this (the entire div being clickable):

 

How to fix the issue

First, I needed to activate a plugin with the functionality of including jQuery in posts and pages which I found in the plugin, “jQuery in Posts Pages.” Then, once I activated the plugin, I was able to add the code mentioned in the Chris Coyier article:

Lastly, I updated the jQuery snippet to function with the particular CSS class that I needed, which was .fl-post-grid-text.

Success!!!

Now, the entire div is clickable and it creates the user experience that I was needing.