Notifications
Clear all

wpForo 1.x.x [Closed] Make forum column clickable

10 Posts
2 Users
4 Likes
2,426 Views
Posts: 13
Topic starter
(@cherry)
Eminent Member
Joined: 5 years ago

Okay, this is where I currently am with it.. let me know what's good or bad or just plain wrong.. it all seems to be working on PC. Still nothing on mobile.

// For Forum info divs - if you have links in your forum description they will only be clickable from within the forum, not on the main index. 
jQuery(document).ready(function($) {
$(".wpforo-forum-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Extended layout topic titles
$(".wpf-forum-item").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Threaded layout topic titles
$(".wpf-thread").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Topics
$(".wpforo-topic-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
});
VereK
Posts: 501
(@verek)
Honorable Member
Joined: 6 years ago

There are snippet code templates in the plugin for PHP,CSS and JS, clone a JS template, edit it, rename it to whatever.

I tested this snippet now on a dev board, it works on mobile (Opera & Chrome) and desktop.

Full code:

add_action( 'wp_head', function () { ?>
<script>
// For Forum info divs
jQuery(document).ready(function($) {
jQuery("[id^=wpf-forum-] > div > div.wpforo-forum-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Extended layout topic titles
jQuery(document).ready(function($) {
jQuery("#wpforo #wpforo-wrap > div.wpforo-main.wpft-topic > div.wpforo-content > div.wpfl-1 >").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Threaded layout topic titles
jQuery("#wpf-cat-18 > div.wpf-threads > div.wpf-thread-list > div").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
});
});

</script>
<?php } );
Posts: 13
Topic starter
(@cherry)
Eminent Member
Joined: 5 years ago

This isn't working at all on mine. I pasted it exactly as you have it on the code snippets js clone (screenshot attached).

It didn't reject it this time, but it isn't working.

https://cherrysoda.nu/wom/community/

VereK
Posts: 501
(@verek)
Honorable Member
Joined: 6 years ago

@cherry,

The code does work for the limited scenarios on my dev board. You have to use the div and selector IDs appropriate to what your board uses and substitute those in the snippet provided by me. Each layout; Extended,Q&A,Threaded,Simplified will use unique div structures.

Example:

// For Simplified layout forum divs
jQuery(document).ready(function($) {
jQuery("#wpforo #wpforo-wrap > div.wpforo-main.wpft-forum > div.wpforo-content > div.wpfl-2 >").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});

It might prove impossible to make topic divs clickable in certain layout formats.

Use your browser developer tools to find the appropriate div IDs

Posts: 13
Topic starter
(@cherry)
Eminent Member
Joined: 5 years ago

Okay, I swapped out your divs for the generic divs and all seems to be working.

Still not what I would consider to be mobile friendly, but it's a start.

Here's my final JS:

add_action( 'wp_head', function () { ?>
<script>
// For Forum info divs
jQuery(document).ready(function($) {
jQuery(".wpforo-forum-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Extended layout topic titles
jQuery(".wpf-forum-item").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Threaded layout topic titles
jQuery(".wpf-thread").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
// For Topics
$(".wpforo-topic-info").click(function(){
window.location = $(this).find("a:first").attr("href");
return false;
});
});

</script>
<?php } );

And my final CSS (to show the hand on desktop): 

div.wpforo-forum-info:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}

div.wpf-forum-item:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}

div.wpf-thread:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}

div.wpforo-topic-info:hover {
cursor: hand;
cursor: pointer;
opacity: .9;
}
Page 2 / 2