Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jordan Grey
Courses Plus Student 183 PointsHTML/CSS/Jquery: Make Wordpress Div Clickable
Hi There,
I am trying to make my entire post clickable in wordpress. I've followed some tutorials but I am having a bit of a problem.
So the first DIV 'mkdf-tours-standard-item' wraps the entire post. I've added the link tag directly below the first DIV and set the tour-test class as follows
a.tour-test{
display:block;
width:100%;
height:100%;
top:0;
left:0;
z-index:9999;
}
However, the entire div is not clickable at all. Any ideas on what direction I should look in?
PAGE CODE
<div <?php post_class('mkdf-tours-standard-item'); ?> style="cursor: pointer;" > <a class="tour-test" href="<?php the_permalink(); ?>"></a> <?php if(has_post_thumbnail()) : ?> <div class="mkdf-tours-standard-item-image-holder"> <a href="<?php the_permalink(); ?>"> <?php echo mkdf_tours_get_tour_image_html($thumb_size); ?>
<?php $main_info_array = mkdf_tours_get_tour_info_table_data_cheked(get_the_ID());?>
<div class="mkdf-info-section-part mkdf-tour-item-main-info home-tour-item-list">
<h6 class="inclusions">CruisePlus Inclusions</h6>
<ul class="mkdf-tour-main-info-holder clearfix">
<?php
//query for getting attributes
$args = array(
'post_type' => 'tour-attributes',
'post_status' => 'publish',
'posts_per_page' =>-1,
'orderby'=>'menu_order',
'order'=> 'ASC'
);
$posts = new WP_Query( $args );
$orr = get_post_meta(get_the_ID(),mkdf_tours_attributes, true);
$arr = array();
foreach ($posts->posts as $key => $value) {
$arr[] = $value->ID;
}
$getIDs = array_intersect($arr,$orr);
$count=$main_info_array[0]['value'];
$count=count($count);
$test = count($getIDs);
if(count($main_info_array)) {
foreach($main_info_array as $item) {
// print_r($item);
?>
<?php if($item['value']) { ?>
<li class ='clearfix mkdf-tours-checked-attributes'>
<div class="col6 mkdf-value">
<div class="display-tb">
<div class="display-cell">
<?php if($item['value']) {
if(is_array($item['value']) && count($item['value'])) {
if($test>5) {
$item_value=array_slice($item['value'], 0, 4);
$i = 0;
foreach ($getIDs as $key => $value) {
if ($i++ > 4) break;
?>
<div class="col6 mkdf-tour-main-info-attr">
<?php print get_the_title($value); ?>
</div>
<?php } ?>
<div class="col6 mkdf-tour-main-info-attr">& much more....</div>
<?php
}
else {
foreach ($getIDs as $key => $value) { ?>
<div class="col6 mkdf-tour-main-info-attr">
<?php print get_the_title($value); ?>
</div>
<?php }
}
} else {
print get_the_title($value);
}
}; ?>
</div>
</div>
</div>
</li>
<?php }
}
}
?>
</ul>
</div>
<!---code end-->
<?php if(mkdf_tours_get_tour_label_html()) : ?>
<?php endif; ?>
</a>
<?php
global $post;
$subtitle=get_post_meta($post->ID,'mkdf_tours_custom_label',true); ?>
<div class="subtitle_text_above"><span><?php echo $subtitle; ?></span></div>
</div>
<?php endif; ?>
<div class="mkdf-tours-standard-item-content-holder">
<a class="packagelink" href="<?php the_permalink(); ?>"></a>
<div class="mkdf-tours-standard-item-title-price-holder">
<h5 class="mkdf-tour-title" <?php voyage_mikado_inline_style($title_style);?> >
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h5>
</div>
<div class="mkdf-tours-standard-item-rating">
<?php echo mkdf_tours_get_tour_rating_html(); ?>
</div>
<div class="mkdf-tours-details">
<?php
// get the departure time
$date=get_field('departure_date', false, false);
$date = new DateTime($date);
//get the tour category
$categories = wp_get_post_terms($post->ID, 'tour-category');
?>
<span> <?php echo $date->format('M j, Y'); ?></span> <?php if(!empty($categories[0]->name)){ ?>| <span><?php echo $categories[0]->name; ?></span><?php } ?>
<p class="tofrom"><?php the_field('to_from'); ?></p>
<!-- get the room type, price from and currency-->
<p class="mkdf-price-cad"><?php the_field('room_type'); ?>: <span>$<?php the_field('price_from'); ?></span> <small>pp<?php the_field('currency'); ?></small></p>
</div>
<div class="mkdf-tours-standard-item-bottom-content">
<?php $main_info_array = mkdf_tours_get_tour_info_table_data_cheked(get_the_ID());?>
<div class="mkdf-info-section-part mkdf-tour-item-main-info home-tour-item-list">
<ul class="mkdf-tour-main-info-holder custom-tour-info clearfix">
<?php $count=$main_info_array[0]['value'];
$count=count($count);
if(count($main_info_array)) {
foreach($main_info_array as $item) { ?>
<?php if($item['value']) { ?>
<li class="clearfix <?php if(!empty($item['html_class'])) {
echo esc_attr($item['html_class']);} ?>">
<div class="col6 mkdf-value">
<?php if($item['value']) {
if(is_array($item['value']) && count($item['value'])) {
if($count>5) {
$item_value=array_slice($item['value'], 0, 4);
$i = 0;
foreach ($getIDs as $key => $value) {
if ($i++ > 4) break;
?>
<div class="col6 mkdf-tour-main-info-attr">
<?php print get_the_title($value); ?>
</div>
<?php } ?>
<div class="col6 mkdf-tour-main-info-attr">& much more....</div>
<?php
}
else {
//asort($item['value']);
// foreach($item['value'] as $item) {
foreach ($getIDs as $key => $value) { ?>
<div class="col6 mkdf-tour-main-info-attr">
<?php print get_the_title($value); ?>
</div>
<?php }
}
} else {
print get_the_title($value);
}
}; ?>
</div>
</li>
<?php }
}
}
?>
</ul>
</div>
<!---code end-->
</div>
<div class="learn-more">
<a href="<?php the_permalink(); ?>">Learn More <i class="lnr lnr-chevron-right"></i></a>
</div>
</div>
</div>
1 Answer
Richard Dale
Courses Plus Student 56 PointsThat looks like the way I'd do it. Did you add a position relative to your main post div?
I'm on my phone so if that isn't the answer post back and I'll look when I'm on a PC.