CSS

HTML/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

That 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.