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.

5 thoughts on “Remove tabs

  1. Hi,
    Is there a new (and maybe easier) way to do that in the V2 ? Tried to adapt that, but it seems folders have changed…
    Thanks

    1. Ok, found the shortcode => [gd_single_tabs show_as_list=”1″]

  2. Paolo:

    At the end of this, your function says: echo apply_filters(‘the_content’, stripslashes($video));// we apply the_content filter so oembed works also;

    This causes filters on the_content to run multiple times (for me, embedding a voucher after the main content and again after the vide), and is a different behavior then if the tabs are maintained.

    You might want to look at this function: https://codex.wordpress.org/Function_Reference/wp_oembed_get to see if it helps.

  3. Very cool. I can imagine the result is a very clean and crisp page. Do you have a demo page to view where this has been done? I’d love to see the final result before I decide that this might be right for me. Thank you for your continuous innovations!

    1. You can see the result on the demo site used to test the code snippets, before publishing it here:

      For future readers: I may remove the function to test new code snippets on that demo page so that example could vanish.

      In any case the code can be tested in 30 seconds on any staging website. Just copy and paste as instructed and delete in case you want to roll back to the details page with tabs.

      I’ve also added an alternative method that requires only JS and CSS.

      Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.