WP Bakery Page Builder - Add URL option to make entire column clickable - Updated 22 June 2023

functions.php

<?php

/* add this to your theme's functions.php file */

/* Add option for URL to column settings */

vc_add_param("vc_column", array(
    "type" => "vc_link",
	"class" => "",
	"heading" => "Column Link",
	"param_name" => "column_link"
));

/* Add option for URL to column_inner settings */

vc_add_param("vc_column_inner", array(
    "type" => "vc_link",
	"class" => "",
	"heading" => "Column Link",
	"param_name" => "column_link"
));

?>

vc_column.php

<?php

/* place this file in [your-theme]/vc_templates/ */

if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

/* This file modifies the vc_column output to accomodate the otional URL parameter */

/**
 * Shortcode attributes
 * @var $atts
 * @var $el_id
 * @var $el_class
 * @var $width
 * @var $css
 * @var $offset
 * @var $content - shortcode content
 * @var $css_animation
 * Shortcode class
 * @var WPBakeryShortCode_Vc_Column $this
 */
$el_class = $el_id = $width = $parallax_speed_bg = $parallax_speed_video = $parallax = $parallax_image = $video_bg = $video_bg_url = $video_bg_parallax = $css = $offset = $css_animation = '';
$output = '';
$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts );

wp_enqueue_script( 'wpb_composer_front_js' );

$width = wpb_translateColumnWidthToSpan( $width );
$width = vc_column_offset_class_merge( $offset, $width );

$css_classes = array(
	$this->getExtraClass( $el_class ) . $this->getCSSAnimation( $css_animation ),
	'wpb_column',
	'vc_column_container',
	$width,
);

if ( vc_shortcode_custom_css_has_property( $css, array(
	'border',
	'background',
) ) || $video_bg || $parallax
) {
	$css_classes[] = 'vc_col-has-fill';
}

$wrapper_attributes = array();

$has_video_bg = ( ! empty( $video_bg ) && ! empty( $video_bg_url ) && vc_extract_youtube_id( $video_bg_url ) );

$parallax_speed = $parallax_speed_bg;
if ( $has_video_bg ) {
	$parallax = $video_bg_parallax;
	$parallax_speed = $parallax_speed_video;
	$parallax_image = $video_bg_url;
	$css_classes[] = 'vc_video-bg-container';
	wp_enqueue_script( 'vc_youtube_iframe_api_js' );
}

if ( ! empty( $parallax ) ) {
	wp_enqueue_script( 'vc_jquery_skrollr_js' );
	$wrapper_attributes[] = 'data-vc-parallax="' . esc_attr( $parallax_speed ) . '"'; // parallax speed
	$css_classes[] = 'vc_general vc_parallax vc_parallax-' . $parallax;
	if ( false !== strpos( $parallax, 'fade' ) ) {
		$css_classes[] = 'js-vc_parallax-o-fade';
		$wrapper_attributes[] = 'data-vc-parallax-o-fade="on"';
	} elseif ( false !== strpos( $parallax, 'fixed' ) ) {
		$css_classes[] = 'js-vc_parallax-o-fixed';
	}
}

if ( ! empty( $parallax_image ) ) {
	if ( $has_video_bg ) {
		$parallax_image_src = $parallax_image;
	} else {
		$parallax_image_id = preg_replace( '/[^\d]/', '', $parallax_image );
		$parallax_image_src = wp_get_attachment_image_src( $parallax_image_id, 'full' );
		if ( ! empty( $parallax_image_src[0] ) ) {
			$parallax_image_src = $parallax_image_src[0];
		}
	}
	$wrapper_attributes[] = 'data-vc-parallax-image="' . esc_attr( $parallax_image_src ) . '"';
}
if ( ! $parallax && $has_video_bg ) {
	$wrapper_attributes[] = 'data-vc-video-bg="' . esc_attr( $video_bg_url ) . '"';
}

$css_class = preg_replace( '/\s+/', ' ', apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, implode( ' ', array_filter( $css_classes ) ), $this->settings['base'], $atts ) );
$wrapper_attributes[] = 'class="' . esc_attr( trim( $css_class ) ) . '"';
if ( ! empty( $el_id ) ) {
	$wrapper_attributes[] = 'id="' . esc_attr( $el_id ) . '"';
}
$output .= '<div ' . implode( ' ', $wrapper_attributes ) . '>';
$innerColumnClass = 'vc_column-inner ' . esc_attr( trim( vc_shortcode_custom_css_class( $css ) ) );
$output .= '<div class="' . trim( $innerColumnClass ) . '">';

/* Inserted to check whether a link is present in the settings */
if( !empty($column_link) ){
    $column_link_array = vc_build_link($column_link);
    $column_link = esc_url($column_link_array['url']);
    $column_target = $column_link_array['target'];
    $column_rel = $column_link_array['rel'];
    $column_title = $column_link_array['title'];
    $output .= "<a href='$column_link' ";
    $output .= ( $column_target == '_blank' ) ? "target='_blank' " : '';
    $output .= ( $column_rel == 'nofollow' ) ? "rel='nofollow' " : '';
    $output .= ( $column_title !== '' ) ? "title='$column_title' " : '';
    $output .= "class='big_link' style='position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999;'aria-hidden='true'></a>";
}
/* End Changes - Resume base code */

$output .= '<div class="wpb_wrapper">';
$output .= wpb_js_remove_wpautop( $content );
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';

echo $output;

vc_column_inner.php

<?php

/* place this file in [your-theme]/vc_templates/ */

if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

/* This file modifies the vc_column_inner output to accomodate the otional URL parameter */

/**
 * Shortcode attributes
 * @var $atts
 * @var $el_class
 * @var $el_id
 * @var $width
 * @var $css
 * @var $offset
 * @var $content - shortcode content
 * Shortcode class
 * @var WPBakeryShortCode_Vc_Column_Inner $this
 */
$el_class = $width = $el_id = $css = $offset = '';
$output = '';
$atts = vc_map_get_attributes( $this->getShortcode(), $atts );
extract( $atts );

$width = wpb_translateColumnWidthToSpan( $width );
$width = vc_column_offset_class_merge( $offset, $width );

$css_classes = array(
	$this->getExtraClass( $el_class ),
	'wpb_column',
	'vc_column_container',
	$width,
);

if ( vc_shortcode_custom_css_has_property( $css, array(
	'border',
	'background',
) ) ) {
	$css_classes[] = 'vc_col-has-fill';
}

$wrapper_attributes = array();

$css_class = preg_replace( '/\s+/', ' ', apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, implode( ' ', array_filter( $css_classes ) ), $this->settings['base'], $atts ) );
$wrapper_attributes[] = 'class="' . esc_attr( trim( $css_class ) ) . '"';
if ( ! empty( $el_id ) ) {
	$wrapper_attributes[] = 'id="' . esc_attr( $el_id ) . '"';
}
$output .= '<div ' . implode( ' ', $wrapper_attributes ) . '>';
$innerColumnClass = 'vc_column-inner ' . esc_attr( trim( vc_shortcode_custom_css_class( $css ) ) );
$output .= '<div class="' . trim( $innerColumnClass ) . '">';

/* Inserted to check whether a link is present in the settings */
if( !empty($column_link) ){
    $column_link_array = vc_build_link($column_link);
    $column_link = esc_url($column_link_array['url']);
    $column_target = $column_link_array['target'];
    $column_rel = $column_link_array['rel'];
    $column_title = $column_link_array['title'];
    $output .= "<a href='$column_link' ";
    $output .= ( $column_target == '_blank' ) ? "target='_blank' " : '';
    $output .= ( $column_rel == 'nofollow' ) ? "rel='nofollow' " : '';
    $output .= ( $column_title !== '' ) ? "title='$column_title' " : '';
    $output .= "class='big_link' style='position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999;'aria-hidden='true'></a>";
}
/* End Changes - Resume base code */

$output .= '<div class="wpb_wrapper">';
$output .= wpb_js_remove_wpautop( $content );
$output .= '</div>';
$output .= '</div>';
$output .= '</div>';

echo $output;

DO NOT DO THIS. Even if it wasn't a bad idea because you'd have to do it for every 👏 single👏 column👏, it can cause accessibility issues. Without having a semantically clickable element, there's no target for assistive technology.

I'm using it for Anchor ID, & it works for me :)

I didn't say it wouldn't work. I said it's a bad solution.

…

On Thu, Sep 14, 2023 at 3:02 AM Abdullah Ijaz ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ DO NOT DO THIS. Even if it wasn't a bad idea because you'd have to do it for every 👏 single👏 column👏, it can cause accessibility issues. Without having a semantically clickable element, there's no target for assistive technology. I'm using it for Anchor ID, & it works for me :) — Reply to this email directly, view it on GitHub <https://gist.github.com/RichardNesbitt/5ed1198ef75ef53fcc820419e57307ee#gistcomment-4692107> or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACIMJHI5XLBVXTZMCTG3PQLX2LI2TBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVA4TGOBRHEZTQNFHORZGSZ3HMVZKMY3SMVQXIZI> . You are receiving this email because you authored the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

@RichardNesbitt everything works fine in the backend, but frontend-wise the column is still not clickable :/

WPB Version 6.4.2

Hi I am trying to get this to work for me. I am able to add the link in the back end, but it is not working in the front end. I may be putting the second lot of code in the wrong place? I cannot find [your-theme]/vc_templates/ */. I found this which I hoped was the same thing
Jevelin: Visual Composer Compatibility(beta!) Page Template (page-vc.php).

Where do I find vc_templates? I tried theme file editor in wordpress and I searched the files on cpanel

Or is there an easier way??

Im am just winging it, any help would be appreciated!!!

@jennyLupo i just pasted both vc files in the theme root folder, since i also dont have any /vc_templates/ folder. maybe that might also be the issue for me.

my theme is bought of envato.