Jump to content

Make entire single Box div linkable/clickable?

Recommended Posts


Hi all. So, I have three bucket boxes underneath a slider and rather then just have the Title of each box be the linked element, I'd like the entire box div to be hot so that you can mouse over it, slight subtle b/g change to indicate its clickable and then if you click on it, will take you to the same link that is set in the box link field.

My example site in-progress: http://www.virtually-anywhere.com/wp/

I'd rather not have to use images here, to replicate the nice boxes I've made.



Share this post

Link to post
Share on other sites
James B

Hi there, you can set a class for each box and then assign the rollover effect using css. There's an option to add a custom class in the box meta settings.

Hot linking the entire box to go to the link set in the meta will be a bit more complicated as Pagelines Boxes only link the text and image by default. You'll need to add a filter to the boxes section to make the entire box a link. In order to do this you'll need the Base theme or customize plugin active on your site as the changes will need to go into the function.php. http://www.pagelines.com/wiki/How_to_Add_Customization

You can find out more about filters here http://codex.wordpress.org/Function_Reference/add_filter

The PL boxes filter is here http://phpxref.pagelines.com/nav.html?sections/boxes/section.php.source.html#l63

Another option you might want to look at without having to edit code is the Boxer Plugin. http://wordpress.org/extend/plugins/boxer/

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Thank you for the response, James. I'm sorry for the delay in getting back to you but I had thought I was on a subscribe/email thing to receive any updates to the topic, but evidently I was mistaken as I just decided to check my past posts in the chance that someone responded. You did.

So I have the Base theme active and understand the relation of adding the section code adjustments there. But I'm a little over my head when it comes to the filter code and what (and where exactly in the chunk of code you directed me to) I could add to make the entire individual box to the link that is dynamically set with the subject of the box contents. Is that something straightforward (for those that are aware) and possibly could be explained, or is it too much?

If I can insert that code, then your CSS rollover point is easy for me to manage and would be ideal.

I in fact researched and installed the Boxer plugin after I posted that a few weeks ago, but ran into some issues. Glad to know I was on the right course at that time, if you recommended it too. I'd rather use the PL boxes if I can, but if not I will go back and see if I can make it work.

Thanks again,


Share this post

Link to post
Share on other sites


Boxes don't offer this functionality "Out of the Box", if you wish for boxes to have this functionality, you can either do as James suggested or you can contact one of our Pros.


However, from viewing your site, it would appear that your boxes are just text. You could therefore, use the PageLines Grid and use HTML to create a similar layout to your boxes and wrap your HTML in an <a> tag.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites



I'm trying to figure this thing out as I want to the boxes to be clickable as well.


As a quick tryout I edited the core box extension code like this: (yes I know I should not modify core files, it is just a tryout to understand)

		return sprintf(
			'<a href="%s"><div id="%s" class="fbox %s"><div class="media box-media %s"><div class="blocks box-media-pad">%s%s</div></div></div></a>', $box_link,


basically just wrapping the div with <a href.


The output however is not working. instead it immediatly closes the a tag

<div class="grid-element-pad">
<a href="/#/"/>
<div id="fbox_7" class="fbox ">


any suggestions? will this happen if I use the filter method described above?

Share this post

Link to post
Share on other sites

I'm not sure if this behavior will occur with the filter method, but you can try it and see or you can try the solution at the end of Danny's post.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post

Link to post
Share on other sites

The filter option with the above mentioned filter doesn't produce any output. Looks like this is only used to get the default values for the boxes.

Only other filters I could find were box_more_link and pl_box_image, both not helping me out here.


Danny's option will work but I don't find that very good looking. also I already have another link in some of the boxes texts.


is there explanation on why the / is automatically added anyways?

Share this post

Link to post
Share on other sites



I apologize, but as you've doubtlessly read several times, we don't support editing core files.


Those codes are the standard pl core code links. Just research it as much as possible through the links James provided and apply the edits, We can't support an edit the to core code into the filter.


For this reason, we provide our Pros at http://www.pagelines.com/pros

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • yemoonyah
      By yemoonyah+
      Hi, even though I just got a SSL certificate, I can't get the green padlock to appear due to the following error:
      :A file with an insecure url of "http://yemoonyah.com/wp-content/plugins/pl-section-boxes/check.svg" was loaded via the javascript file: https://yemoonyah.com/wp-includes/js/jquery/jquery.js?ver=1.12.4 on line 3. The insecure URL may not be directly contained in the script file and may exist elsewhere."
      I figured if I delete and re-install the plugin it might fix the problem but will my boxes on the website still be there? Or do I have to redesign everything all over again if I delete the plugin and then re-install it?
    • Audun MB
      By Audun MB+

      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 

    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.