Making entire cell clickable

Question

I have a div container with a title and content as shown in the picture.

Here is the markup:

$output .= '<h1 class="list_title">';
    $output .= '<a href="' . get_permalink () . '">'.the_title ('','',false) . '</a>';                  
$output .= '</h1>';

$output .= '<div class="list_content">';
    $output .= '<a href="' . get_permalink () . '">';
        $output .= wp_trim_words ($post->post_content, $content_length );
    $output .= '</a>';
$output .= '</div>';

In these two components, I added get_permalink so that users can click either the title or the content to go to the post link.

However, I am trying to make it so that user can click anywhere in the cell (such as the empty space as B to go to the link.

Can anyone tell me how I can make the whole cell clickable instead just the title or content?

Answer 1

Put div inside <a> and maybe add display: block to <a> :

$output .= '<a href="' . get_permalink () . '">';
    $output .= '<div class="list_content">';
        $output .= wp_trim_words ($post->post_content, $content_length );
    $output .= '</div>';
$output .= '</a>';

Answer 2

What you want to do is wrap the whole <div> in an <a> tag;

$output .= '<a href="' . get_permalink () . '">'.the_title ('','',false) . '</a>';  
$output .= '<h1 class="list_title">';

$output .= '<div class="list_content">';
    $output .= '<a href="' . get_permalink () . '">';
        $output .= wp_trim_words ($post->post_content, $content_length );
$output .= '</div>';
    $output .= '</a>';

I removed the <h22> tag, it was empty.

Answer 3

Reverse the order of your tags. The <div> should be inside the <a> .

 $output. = '<a href="'.get_permalink().'">'; $output. = '<div class="list_content">'; $output. = wp_trim_words($post - > post_content, $content_length); $output. = '</a>'; $output. = '</div>'; 

That means that the whole div is a link .