Re-order Tabs in a listing detail page

the ultimate guide with plenty of examples!

This article is about GeoDirectory V1, if using V2 please see: https://wpgeodirectory.com/reordering-tabs-in-geodirectory-v2/

Previously we provided an example about adding a new Tab with custom content, in the listing detail page. Today we are going to show you how to change the order of the tabs.

To be more precise, we are going to move the reviews tab to be the default and active tab, just like in our upcoming theme Whoop!

To re-order tabs as mentioned in the previous article we will use this filter: geodir_detail_page_tab_list_extend.

Simply copy the following code snippet into your active theme’s functions.php file and save. If you now refresh any of your listings details page, you will see that the review tab is the 1st tab and it is the active tab.

[php]

// this is the snippet that adds the filter, calling the function below.
add_filter(‘geodir_detail_page_tab_list_extend’, ‘geodir_detail_page_tab_list_extend’) ;

// this is the function that does the re-ordering that we call with the add filter snippet above.
function geodir_detail_page_tab_list_extend($tab_array)
{

// here you can modify the array and re-arrange tabs as you wish, you can create a completely new array too.

// this is the review tab, by default is the 7th, but here we moved it to position 1.
if(isset($tab_array[‘reviews’])){
$new_tab_array[‘reviews’] = $tab_array[‘reviews’];// set in new array
// IMPORTANT the following code tells GeoDirectory that this is the new default active tab
$new_tab_array[‘reviews’][‘is_active_tab’]=’1′;
unset($tab_array[‘reviews’]);//unset in old one
}

// this is the post profile tab, by default is the 1st
if(isset($tab_array[‘post_profile’])){
$new_tab_array[‘post_profile’] = $tab_array[‘post_profile’]; // set in new array
// IMPORTANT the following code tells GeoDirectory that this is no longer the default active tab
$new_tab_array[‘post_profile’][‘is_active_tab’]=”;
unset($tab_array[‘post_profile’]);//unset in old one
}

// this is the post info tab (optional for custom fields), by default, if available, is the 2nd.
if(isset($tab_array[‘post_info’])){
$new_tab_array[‘post_info’] = $tab_array[‘post_info’];// set in new array
unset($tab_array[‘post_info’]);//unset in old one
}
// this is the images tab, by default is the 3rd
if(isset($tab_array[‘post_images’])){
$new_tab_array[‘post_images’] = $tab_array[‘post_images’];// set in new array
unset($tab_array[‘post_images’]);//unset in old one
}

// this is the video tab, appears only if there are videos and by default is the 4th
if(isset($tab_array[‘post_video’])){
$new_tab_array[‘post_video’] = $tab_array[‘post_video’];// set in new array
unset($tab_array[‘post_video’]);//unset in old one
}

// this is the speacial offer tab, appears only if there are special offers and by default is the 5th
if(isset($tab_array[‘special_offers’])){
$new_tab_array[‘special_offers’] = $tab_array[‘special_offers’];// set in new array
unset($tab_array[‘special_offers’]);//unset in old one
}

// this is the map tab, by default is the 6th
if(isset($tab_array[‘post_map’])){
$new_tab_array[‘post_map’] = $tab_array[‘post_map’];// set in new array
unset($tab_array[‘post_map’]);//unset in old one
}

// this is the related listing tab, it is optional and by default is the 8th
if(isset($tab_array[‘related_listing’])){
$new_tab_array[‘related_listing’] = $tab_array[‘related_listing’];// set in new array
unset($tab_array[‘related_listing’]);//unset in old one
}

// now we set any remaining tabs that have not been assigned an order
foreach($tab_array as $key=>$tab){
$new_tab_array[$key]=$tab;
}

return $new_tab_array ;
}
[/php]

If you are using fieldsets in tabs, the tab index is assigned automatically and unfortunately it isn’t that obvious to figure out.

If you paste the follwing code snippet in your active theme’s functions.php file instead of the previous function, tabs will disappear from the listing details page and instead you will see the array with all its info, including all tab indexes.

[php]
add_filter(‘geodir_detail_page_tab_list_extend’, ‘geodir_detail_page_tab_list_extend_profile’) ;
function geodir_detail_page_tab_list_extend_profile($tab_array)
{
print_r($tab_array);
}
[/php]

Result:

tab-array

By doing so you can find the tab index for your custom tab made with fieldset. At this point remove the above code snippet and use the correct tab index for your function to re-order tabs.

Developers. if you wish to dig into the tab array, you may find it here : geodir_detail_page_tabs_array

Different orders only for 1 Custom Post Type

Many times, members using the Custom Post Type add-on asked how to re-order tabs differently for different custom post types.

Let’s say for example that you want events to show regular tabs and places to show your custom order. In this case we would need to add the filter only if the detail page visited belongs to the Custom Post Type : Places (gs_place).

Adding the function below in your active theme’s functions.php file, you will get exactly that:

[php]
// This is the add filter action which will use the function below to re-order tabs.
add_filter(‘geodir_detail_page_tab_list_extend’, ‘geodir_detail_page_tab_list_extend’) ;

//This is the actual function to re-order tabs
function geodir_detail_page_tab_list_extend($tab_array)
{

// before creating the new array which will re-order the tabs, we check if the custom post type is "Places"

if ( ‘gd_place’ == get_post_type() ) {

// here you can modify the array and re-arrange tabs as you wish, you can create a completely new array too.

// this is the review tab, by default is the 7th, but here we moved it to position 1.
if(isset($tab_array[‘reviews’])){
$new_tab_array[‘reviews’] = $tab_array[‘reviews’];// set in new array
// IMPORTANT the following code tells GeoDirectory that this is the new default active tab
$new_tab_array[‘reviews’][‘is_active_tab’]=’1′;
unset($tab_array[‘reviews’]);//unset in old one
}

// this is the post profile tab, by default is the 1st
if(isset($tab_array[‘post_profile’])){
$new_tab_array[‘post_profile’] = $tab_array[‘post_profile’]; // set in new array
// IMPORTANT the following code tells GeoDirectory that this is no longer the default active tab
$new_tab_array[‘post_profile’][‘is_active_tab’]=”;
unset($tab_array[‘post_profile’]);//unset in old one
}

// this is the post info tab (optional for custom fields), by default, if available, is the 2nd.
if(isset($tab_array[‘post_info’])){
$new_tab_array[‘post_info’] = $tab_array[‘post_info’];// set in new array
unset($tab_array[‘post_info’]);//unset in old one
}
// this is the images tab, by default is the 3rd
if(isset($tab_array[‘post_images’])){
$new_tab_array[‘post_images’] = $tab_array[‘post_images’];// set in new array
unset($tab_array[‘post_images’]);//unset in old one
}

// this is the video tab, appears only if there are videos and by default is the 4th
if(isset($tab_array[‘post_video’])){
$new_tab_array[‘post_video’] = $tab_array[‘post_video’];// set in new array
unset($tab_array[‘post_video’]);//unset in old one
}

// this is the speacial offer tab, appears only if there are special offers and by default is the 5th
if(isset($tab_array[‘special_offers’])){
$new_tab_array[‘special_offers’] = $tab_array[‘special_offers’];// set in new array
unset($tab_array[‘special_offers’]);//unset in old one
}

// this is the map tab, by default is the 6th
if(isset($tab_array[‘post_map’])){
$new_tab_array[‘post_map’] = $tab_array[‘post_map’];// set in new array
unset($tab_array[‘post_map’]);//unset in old one
}

// this is the related listing tab, it is optional and by default is the 8th
if(isset($tab_array[‘related_listing’])){
$new_tab_array[‘related_listing’] = $tab_array[‘related_listing’];// set in new array
unset($tab_array[‘related_listing’]);//unset in old one
}

// now we set any remaining tabs that have not been assigned an order
foreach($tab_array as $key=>$tab){
$new_tab_array[$key]=$tab;
}

return $new_tab_array ; } // If Check for Places ends here

// Here we tell GeoDirectory to use the regular array for all other custom post types.
else { return $tab_array ; }

}
[/php]

What we did is very simple, we wrapped the function’s code with a conditional tag to check if the Custom Post Type is gd_place. and at the end we added an else statement to tell GeoDirectory to use the regular tab array for any other Custom Post Type.

Different orders for each Custom Post Types

You can also create different orders for each of your Custom Post Types.

[php]
// This is the add filter action which will use the function below to re-order tabs.
add_filter(‘geodir_detail_page_tab_list_extend’, ‘geodir_detail_page_tab_list_extend’) ;

//This is the actual function to re-order tabs
function geodir_detail_page_tab_list_extend($tab_array)
{

// before creating the new array which will re-order the tabs, we check if the custom post type is "Places"
if ( ‘gd_place’ == get_post_type() ) {

// here goes the code to re-order the tabs for Places. The code reamin the same as in above examples.

} // If Check for Places ends here

// check if the custom post type is "Events"
elseif ( ‘gd_event’ == get_post_type() ) {

// here goes the code to re-order the tabs for Events. The code reamin the same as in above examples.

} // If Check for Events ends here

// check if the custom post type is "People"
elseif ( ‘gd_people’ == get_post_type() ) {

// here goes the code to re-order the tabs for People. The code reamin the same as in above examples.

} // If Check for People ends here

// Here we tell GeoDirectory to use the regular array for any other custom post types.
else { return $tab_array ; }
}
[/php]

Different orders per Category, Price package or whatever you need

The same concept previously applied for Custom Post Types can be applied to categories, prices or anything else.

Instead of using the conditional tag used to check for Custom Post Types:

[php]if ( ‘gd_people’ == get_post_type() )[/php]

You would use a conditional tag to check if the listing belong to a specific category, example: restaurant:

[php]if ( has_term ( ‘restaurant’, ‘gd_placecategory’ ) ) [/php]

We don’t use in_category() because GeoDirectory uses custom taxonomies, so we use has_terms(). The first argument is the Category ID (as an integer) or slug / name (as a string), while the second argument is the custom taxonomy.

For price package you would use a conditional tag to check if the listing belong to a specific price package, example price package with ID 7:

[php]global $post; if ( $post->package_id == 7)[/php]

Given that the price package ID is an element of the $post variable we need to call the global variable 1st.

Have you used any of these functions and maybe extended it for your custom needs? If you share it with us we will add it to this post and give you credit for it!

If you have any questions, please don’t hesitate to ask…

If you need support with any of these functions, please submit your request in the support forum, response will be faster.

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.

2 thoughts on “Re-order Tabs in a listing detail page

  1. Hi friends, it is not working with the Supreme Theme

    1. hi,

      support is provided exclusively in our forum. That question has been asked in the past, so if you do a search you’ll find the solution.

      Otherwise, please open a support topic in the forum.

      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.