Remove tabs

Put all details in a singleview page, one on top of the other...

few members are not fond of the tabs in the details page. They asked us how to remove them and replace them with all details showing one after the other.

This is fairly simple to do.

First we will have to remove the tabs completely by adding this snippet in our theme functions.php:

remove_action( 'geodir_details_main_content', 'geodir_show_detail_page_tabs',60);

Now we can create a new function to add back what we need and we can do that by taking the corresponding parts from the function we just removed (geodir_show_detail_page_tabs).

In the example below I called it my_geodir_show_detail_page_tabs and all I did, is removing the html that was displaying the content in the tabs. This part of the code is approx after the middle of the original function. I also wrapped the content in a new div for basic styling purposes. You cam add more html if needed for example to separate elements with a title for each (Description, Map, Reviews and so on).

function my_geodir_show_detail_page_tabs()<br />
{</p>
<p>    global $post, $post_images, $video, $special_offers, $related_listing, $geodir_post_detail_fields;</p>
<p>    $post_id = !empty($post) && isset($post->ID) ? (int)$post->ID : 0;<br />
    $request_post_id = !empty($_REQUEST['p']) ? (int)$_REQUEST['p'] : 0;<br />
    $is_backend_preview = (is_single() && !empty($_REQUEST['post_type']) && !empty($_REQUEST['preview']) && !empty($_REQUEST['p'])) && is_super_admin() ? true : false; // skip if preview from backend</p>
<p>    if ($is_backend_preview && !$post_id > 0 && $request_post_id > 0) {<br />
        $post = geodir_get_post_info($request_post_id);<br />
        setup_postdata($post);<br />
    }</p>
<p>    $geodir_post_detail_fields = geodir_show_listing_info('detail');</p>
<p>    if (geodir_is_page('detail')) {</p>
<p>        $video = geodir_get_video($post->ID);<br />
        $special_offers = geodir_get_special_offers($post->ID);<br />
        $related_listing_array = array();<br />
        if (get_option('geodir_add_related_listing_posttypes'))<br />
            $related_listing_array = get_option('geodir_add_related_listing_posttypes');</p>
<p>        $related_listing = ";<br />
        if (in_array($post->post_type, $related_listing_array)) {<br />
            $request = array('post_number' => get_option('geodir_related_post_count'),<br />
                'relate_to' => get_option('geodir_related_post_relate_to'),<br />
                'layout' => get_option('geodir_related_post_listing_view'),<br />
                'add_location_filter' => get_option('geodir_related_post_location_filter'),<br />
                'list_sort' => get_option('geodir_related_post_sortby'),<br />
                'character_count' => get_option('geodir_related_post_excerpt'));</p>
<p>            $related_listing = geodir_related_posts_display($request);<br />
        }</p>
<p>        $post_images = geodir_get_images($post->ID, 'thumbnail');<br />
        $thumb_image = ";<br />
        if (!empty($post_images)) {<br />
            foreach ($post_images as $image) {<br />
                $thumb_image .= '<a href="' . $image->src . '">';<br />
                $thumb_image .= geodir_show_image($image, 'thumbnail', true, false);<br />
                $thumb_image .= '</a>';<br />
            }<br />
        }</p>
<p>        $map_args = array();<br />
        $map_args['map_canvas_name'] = 'detail_page_map_canvas';<br />
        $map_args['width'] = '600';<br />
        $map_args['height'] = '300';<br />
        if ($post->post_mapzoom) {<br />
            $map_args['zoom'] = " . $post->post_mapzoom . ";<br />
        }<br />
        $map_args['autozoom'] = false;<br />
        $map_args['child_collapse'] = '0';<br />
        $map_args['enable_cat_filters'] = false;<br />
        $map_args['enable_text_search'] = false;<br />
        $map_args['enable_post_type_filters'] = false;<br />
        $map_args['enable_location_filters'] = false;<br />
        $map_args['enable_jason_on_load'] = true;<br />
        $map_args['enable_map_direction'] = true;<br />
        $map_args['map_class_name'] = 'geodir-map-detail-page';</p>
<p>    } elseif (geodir_is_page('preview')) {</p>
<p>        $video = isset($post->geodir_video) ? $post->geodir_video : ";<br />
        $special_offers = isset($post->geodir_special_offers) ? $post->geodir_special_offers : ";</p>
<p>        if (isset($post->post_images))<br />
            $post->post_images = trim($post->post_images, ",");</p>
<p>        if (isset($post->post_images) && !empty($post->post_images))<br />
            $post_images = explode(",", $post->post_images);</p>
<p>        $thumb_image = ";<br />
        if (!empty($post_images)) {<br />
            foreach ($post_images as $image) {<br />
                if ($image != ") {<br />
                    $thumb_image .= '<a href="' . $image . '">';<br />
                    $thumb_image .= geodir_show_image(array('src' => $image), 'thumbnail', true, false);<br />
                    $thumb_image .= '</a>';<br />
                }<br />
            }<br />
        }</p>
<p>        global $map_jason;<br />
        $map_jason[] = $post->marker_json;</p>
<p>        $address_latitude = isset($post->post_latitude) ? $post->post_latitude : ";<br />
        $address_longitude = isset($post->post_longitude) ? $post->post_longitude : ";<br />
        $mapview = isset($post->post_mapview) ? $post->post_mapview : ";<br />
        $mapzoom = isset($post->post_mapzoom) ? $post->post_mapzoom : ";<br />
        if (!$mapzoom) {<br />
            $mapzoom = 12;<br />
        }</p>
<p>        $map_args = array();<br />
        $map_args['map_canvas_name'] = 'preview_map_canvas';<br />
        $map_args['width'] = '950';<br />
        $map_args['height'] = '300';<br />
        $map_args['child_collapse'] = '0';<br />
        $map_args['maptype'] = $mapview;<br />
        $map_args['autozoom'] = false;<br />
        $map_args['zoom'] = "$mapzoom";<br />
        $map_args['latitude'] = $address_latitude;<br />
        $map_args['longitude'] = $address_longitude;<br />
        $map_args['enable_cat_filters'] = false;<br />
        $map_args['enable_text_search'] = false;<br />
        $map_args['enable_post_type_filters'] = false;<br />
        $map_args['enable_location_filters'] = false;<br />
        $map_args['enable_jason_on_load'] = true;<br />
        $map_args['enable_map_direction'] = true;<br />
        $map_args['map_class_name'] = 'geodir-map-preview-page';</p>
<p>    }</p>
<p>    ?></p>
<p>    <div class="geodir-singleview" id="gd-singleview" style="position:relative;"><br />
      				<?php	if (geodir_is_page('detail')) {<br />
                                    the_content();<br />
                                } else {<br />
                                    /** This action is documented in geodirectory_template_actions.php */<br />
                                    echo apply_filters('the_content', stripslashes($post->post_desc));<br />
                                }</p>
<p>                                echo $geodir_post_detail_fields;?><br />
                                <div id="geodir-post-gallery" class="clearfix"><?php<br />
                                echo $thumb_image;?></div><?php<br />
                                /** This action is documented in geodirectory_template_actions.php */<br />
                                echo apply_filters('the_content', stripslashes($video));// we apply the_content filter so oembed works also;<br />
                                echo wpautop(stripslashes($special_offers));<br />
                                geodir_draw_map($map_args);<br />
                                comments_template();<br />
                                echo $related_listing; ?></p>
<p></div><br />
<?php } 

At this point, all we have to do is to add the action call again with the new function name:

add_action( 'geodir_details_main_content', 'my_geodir_show_detail_page_tabs',60);

The CSS + Javascript Shortcut

There is an alternative method that only requires few lines of CSS and Javascript. If using the following code, you should not be using the method previously described.

CSS to be placed in GeoDirectory >> Design >> Scripts >> Custom style css code

<br />
ul.geodir-tabs-content.entry-content li {<br />
  display: block !important;<br />
}<br />

JS to be placed in GeoDirectory >> Design >> Scripts >> Footer script code

<br />
<script>if(jQuery('.geodir-tab-head').length){<br />
    jQuery(".geodir-tab-head a").each(function(){<br />
        //get the values we need<br />
        var id = jQuery(this).data("tab");<br />
        var title = jQuery(this).html();<br />
        //set the values we need<br />
        jQuery(this).attr('href',id);<br />
        jQuery(id).prepend('<h2>'+title+'</h2>');<br />
    });<br />
}<br />
</script>

The Javascript adds the titles to the sections and makes them linkable with the url #value.

Do you have a website where you used the above code and maybe extended this functions of this tutorial? Let us know in the comments down below and we will update the post with your awesome additions.

Published by Paolo

Paolo Tajani is the co-founder and growth hacker of AyeCode LTD. With his business partner Stiofan, they are the makers of the GeoDirectory, UsersWP and Invoicing plugins for WordPress. Paolo developed his first WordPress website in 2008. In 2011 he met Stiofan O'Connor and together they started building and marketing successful themes and plugins for WordPress. Today their products are used by +100.000 active websites.

Loading...