1. Home
  2. Docs
  3. FAQ
  4. Common Examples of Customization

Common Examples of Customization


Introduction
Frequently Asked Questions

Introduction

This document goes over how to ‘zero out’ styles on common GD design elements. GeoDirectory items inherit styles from the active theme, but in some cases you may want to style these items differently than. In those cases you can use the examples below to zero out the styles, and then modify them further to create your own style.

As an example of how GD inherits styles, consider that most modern themes make it possible to customize the font color and size of an H2 heading, most often used as a section or secondary emphasis header on a page after the page title.

GeoDirectory V2 makes widespread use of the “gd_post_meta” widget. In the following code example, the gd_post_meta function is being used to display custom fields in a tab:

<div class="geodir-post-meta-container">
<h2 class="fieldset-example">Example</h2>
</div>

What you are seeing here is that GeoDirectory V2 is wrapping a common H2 element in a div. The div ‘geodir-post-meta-container’ allows you to add additional targeted custom styles to each individual element, but GeoDirectory is simultaneously not applying any styles to that same H2 element. The H2 element will be styled just like any other H2 element on your site.

What we can offer here in this page are examples of how to zero out styles applied to the classes that are most common in GeoDirectory V2, so you can proceed to style the HTML as you see fit. In most cases you should be able to do this by adjusting the settings for common HTML elements in your theme options. However, if you need help with custom styles you can either create Custom CSS yourself or hire a web designer to do it for you.

Location Switcher – gd_location_switcher

Change the color of the blue text for the active location.

/*Change the color of the active text*/
gd-search-field-near.in-location .geodir-search-input-label, .gd-search-field-near.in-location input {
   color: #4CAF50;
}
/*Hide suggestions with CSS*/
.gdlm-location-suggestions {
    display: none !important;
}

Search Bar – gd_search

/*Hide the grey lines*/
.geodir-loc-bar {border: none}

/*Hide the cog for advanced search options*/
.geodir-show-filters {display: none}
/*Hide the icon in the search for field*/
body .geodir-listing-search.gd-search-bar-style .geodir-loc-bar .clearfix.geodir-loc-bar-in .geodir-search .gd-search-input-wrapper .geodir-search-input-label {
    display: none;
}
/*Hide the search for field*/
body .geodir-listing-search.gd-search-bar-style .geodir-loc-bar .clearfix.geodir-loc-bar-in .geodir-search .gd-search-input-wrapper .geodir-search-input-label + input.search_text {
    display: none;
}
/*Hide the search near field */
.gd-search-field-near {
    display: none;
}

Use widget logic to control widget display

You may want to show widgets only on certain pages. To do that you will need a 3rd party plugin. There are several options out there. You might want to try Widget Logic. We don’t provide support for it, but it is very lightweight and provides support for WordPress conditional logic.

See the plugin here: https://wordpress.org/plugins/widget-logic/

You can see a variety of options here for controlling display: https://codex.wordpress.org/Conditional_Tags

Common examples include:
Only shows the widget if the post type is Places: geodir_get_current_posttype()=='gd_place'
for a single GD Place detail page: is_singular( 'gd_place' )
for a GD Place Archive Page: is_post_type_archive('gd_place')
for a specific category: in_category( 'category-name' )
for a GD Place Category archive for a specific category: is_post_type_archive('gd_place') && in_category( 'some-category-slug' )
for only the WordPress Front Page is_front_page()

Display of fields with Tabs UI, GD Output Locations, and gd_post_meta

Most display of custom fields and listing data is displayed through Tabs UI, GD Output Locations, and gd_post_meta.

Switch From Output Location to Post Meta to Control Icons and Labels

In some cases you may want to display a field in the Detail page sidebar without icon or label.
GD Output Locations doesn’t give you the options to adjust that, so you will need to show the field in GD Post Meta instead.

  • Find the field email in CPT – Settings – Custom Fields – Email
  • Find “Show in extra output locations” and remove “Details page sidebar”, then save
  • Go to WP – Appearance – Widgets
  • Add GD > Post Meta and add to your sidebar.
  • Adjust the options to set the display as you like.
  • You can start with the most general example at the top, then remove it and use more specific examples listed below.

Alter Address Display

Add a line break between label and value

You may want to put the address on a new line after the field label.
First follow the instructions above to add the address using GD Post Meta.
Then add another GD Post Meta for address.
Set them up as shown in this image.

/* GeoDirectory V2 - sitewide display of fields with the gd_post_meta element. */
.geodir_post_meta {
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
    line-height: inherit !important;
    text-indent: 0px !important;
}

/* GeoDirectory V2 subfields shown in tabs with Tabs UI */
.geodir-tabs .geodir-post-meta-container {
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
    line-height: inherit !important;
}

/* GeoDirectory V2 Individual subfields shown in details page sidebar with gd_output_location widget */
.geodir-output-location .geodir-output-location-detail .geodir_post_meta {
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
    line-height: inherit !important;
    text-indent: 0px !important;
}

/* GeoDirectory V2 Business Hours Styles*/
.geodir-field-business_hours {
    text-align: inherit !important;
}

How can I adjust how many listings are shown per row?

There are 3 shortcodes that display lists of listings: gd_loop, gd_listings, and gd_linked_posts

Each of these takes the layout param; use the shortcode builder to set the correct value for the default layout count of listings per row.

gd_post_badge examples

What are some examples for gd_post_badge?

Claim Listings

[gd_post_badge key="claimed" condition="is_not_empty" badge='<i class="fas fa-check-circle"></i>Verified' bg_color="#ff8040" txt_color="#ffffff" size="small" alignment="right" css_class="verified"]

[gd_post_badge key="claimed" condition="is_empty" badge='<i class="far fa-question-circle"></i>Unclaimed' bg_color="#ff8040" txt_color="#ffffff" size="small" alignment="right" css_class="unverified"]

Visit my website

[gd_post_badge key="website" condition="is_not_empty"  badge='Visit my <a href="%%input%%"><i class="fas fa-music"></i> website</a>' bg_color="#800080" txt_color="#ffffff"]

How can move design elements on top of each other?

CSS can be used to move elements on top of each other to create complex and unique layouts. If you need help with this kind of customization you will need to contact a GD Expert. The CSS below is only an example applied to the Grid Layout 5 of the Archive Items on an archive page. CSS would need to be created for each of the layouts (List and Grid 2,3,4, and 5) to apply the customization to each case.

In the examples below a custom CSS class was added to each GD block in the archive item template to make them easy to identify: .block-gd-title, .block-gd-favorite

.wp-block-geodirectory-geodir-widget-post-title.block-gd-title {
    position: relative;
    z-index: 2;
    top: -58px;
    left: 0px;
    background-image: linear-gradient(to bottom, transparent, #FFF);
    color: black;
    height: 2em;
}

.wp-block-geodirectory-geodir-widget-post-fav.block-gd-favorite {
    position: relative;
    z-index: 2;
    top: -110px;
    left: 0px;
}

Font Awesome 5 JS SVG Styling with CSS

GeoDirectory uses Fontawesome 5 JS icons that draw in svg inline. To set the color of the icon means setting the color of the svg. Here are a couple examples.

/*Sidebar Address field, change the color of the home icon */
.geodir-i-location svg.svg-inline--fa.fa-home.fa-w-18 {
    color: red;
}

/*  Hide Phone Icon in SD Contacts Area   */
.sd-contacts svg.svg-inline--fa.fa-phone.fa-w-16.profile_icon {
    display: none !important;
}

/*  Hide Link Icon in SD Contacts Area   */
.sd-contacts svg.svg-inline--fa.fa-external-link-square-alt.fa-w-14 {
    display: none !important;
}

/*  Hide FB Icon in SD Contacts Area   */
.sd-contacts svg.svg-inline--fa.fa-facebook.fa-w-14 {
    display: none !important;
}

Read more: FA SVG Symbol styling (external link)

Frequently Asked Questions

Where should I add CSS snippets?

CSS should be added through the Customizer, in the “Additional CSS” tab.

Detail Page Template Columns

You might want to ‘spice up’ your Detail Page template and do it without a builder. Here is an example of some commonly used fields called with the gd_post_meta shortcode and arranged into a 3 column layout.

Add the CSS with the Customizer -> Additional CSS
Then copy paste the Details Page Contents into your GD Details template

/*Columns Demo*/
.column8675309 {
    float: left;
    width: 33.33%;
}

/* Clear floats after the columns */
.row8675306:after {
    content: "";
    display: table;
    clear: both;
}

Detail Page Contents

<div class="row8675306">
  <div class="column8675309">[gd_post_rating show="stars"][gd_post_meta key="post_category"][gd_categories title_tag="h4" post_type="0" hide_empty="1" hide_count="1" sort_by="count" max_level="1" max_count="all" max_count_child="all"]</div>
  <div class="column8675309">[gd_post_meta key="address"]</div>
  <div class="column8675309">[gd_post_meta key="phone"][gd_post_meta key="email"]</div>
</div>

Map Bubble Examples

How do I remove reviews from the map bubble?

This can be done with CSS, or by customizing the plugin template.

.geodir-bubble-meta-bottom {display:none!important;}

Archive Item Examples

How can I get that “cover image” type style with my listing images?

There are a couple ways to change the images. This will ‘fit’ the image into the space more, useful for images that are more square than rectangular.

.geodir-image-container ul.geodir-images li img {
    object-fit: cover!important;
    height:100%!important;
}

How do I customize the description (post_content) in listing on an archive page or gd_listing shortcode?

If you want to remove the description completely from all listings across the site, then edit the Archive Item template for the CPT and remove the [gd_post_meta key=’post_content’ show=’value-strip’]. Read more about the Archive Item template here.

If you want to shorten it, that can be done with CSS. The following examples shorten the length of the text and hide the “Read More” and the link’s gradient brackground. Adjust the following CSS to meet your needs:

/* GD Archive Item - limit post_content length */
.geodir-field-post_content {
   max-height: 50px;
}
/* GD Archive Item - hide Read More link and background */
.geodir-field-post_content .gd-read-more {
    display: none !important;
}

How can I target or style different layouts?

Here is a scaffold you can use to target different layouts:

/*Apply Stylings for List View Layout*/
.geodir-listview li .gd-list-item-right {
    background-color:#e8e8e8; /*Background Color*/
}

/*Apply Stylings for Grid 2 Layout*/
.geodir-gridview.gridview_onehalf li{
    background-color:#e8e8e8; /*Background Color*/
}

/*Apply Stylings for Grid 3 Layout*/
.geodir-gridview.gridview_onethird li{
    background-color:#e8e8e8; /*Background Color*/    
}

/*Apply Stylings for Grid 4 Layout*/
.geodir-gridview.gridview_onefourth li{
    background-color:#e8e8e8; /*Background Color*/    
}

/*Apply Stylings for Grid 5 Layout*/
.geodir-gridview.gridview_onefifth li{
    background-color:#e8e8e8; /*Background Color*/    
}

How can I use BB to edit the GD Details (or other GD) templates? As soon as I open I get an error that says the page should not be linked to.

Try the following for the GD Details Page Template, as an example:

  1. Open the CPT Settings – Advanced – and choose a different (temporary) page for the GD Details page.
  2. Open the original GD Details Page with BB, Edit as needed, Save and Publish.
  3. Open the CPT Settings – Advanced – and choose the original GD Details page (again)

How do I change the address format?

At this time changing the format is a customization that you can accomplish with a filter. We provide an example here below.

With a later version a tool for editing the address format will be introduced. Until that time, if you need help with these examples you should contact a GD Expert.

Options:
Remove or rearrange %%street%% or other parts as desired.
Remove the _br wherever you would like an element to stay on the same line.

add_filter('geodir_cf_address_template','_my_new_address_format');
function _my_new_address_format($format){
$format = "%%street_br%% %%neighbourhood_br%% %%city_br%% %%region_br%% %%zip_br%% %%country%%"; // default
return $format;
}

A more complex example for multiple formats:

add_filter('geodir_cf_address_template','_my_new_address_format');
function _my_new_address_format($format){
global $post;

if($post->post_type=='gd_place'){
$format = "%%city_br%% %%region_br%% %%zip_br%% %%country%%";
}else{
$format = "%%street_br%% %%neighbourhood_br%% %%city_br%% %%region_br%% %%zip_br%% %%country%%";
}

return $format;
}

You can also use the geodir_is_page($page_type); to detect the page type and insert the appropriate format.

gd_post_images Examples

With a gallery, how can I set a maximum number of images to display?

You can adjust how many images users are allowed to upload with Pricing Package settings. If you just want to limit the number of images displayed so you can regulate your page layout you can use the CSS below and adjust it to meet your needs.

/* gd_post_images gallery - show max 2 images */
ul.geodir-gallery li:nth-child(1n+3) {
    display: none;
}
/* gd_post_images gallery - show max 3 images */
ul.geodir-gallery li:nth-child(1n+4) {
    display: none;
}

Comments, Ratings and Favorites

Read more about CPT Rating settings:
Read more about the Multiratings Addon:

Remove ratings and Reviews

If you only want to disable ratings without disabling comments you can find the settings at:

Places – Settings – General – Show Advanced – Disable Ratings without disabling comments for this post type

To remove ratings and comments take the following steps

  1. GD Detail page tabs – Remove the Reviews tab using the Tabs UI to hide the reviews form
  2. GD Details template – Remove the gd_post_rating element from the GD Detail page template
  3. GD Archive Item template – Remove the gd_post_rating element from the Archive Item template
  4. Map Bubble – Add the Custom CSS below to remove the .geodir-post-rating class from the Map Bubble on the Archive and Detail pages
/*GD -  Remove map bubble ratings on gd_place Archive pages*/
.post-type-archive-gd_place .gd-bubble .geodir-post-rating{
    display: none;
}
.geodir-bubble-meta-bottom {
 display:none!important;
}

/*GD -  Remove map bubble ratings on gd_place Detail pages*/
.single-gd_place .gd-bubble .geodir-post-rating {
    display: none;
}
/*GD -  Remove Archive item rating from gd_place Archive pages*/
li.gd_place .geodir-post-rating {
    display: none;
}
Disable comments on WordPress Posts and Pages

It is possible to remove any visual trace of ratings using the steps listed above, but you can also turn off the WordPress setting that allows users to add comments. You can disallow users from posting comments on your site by adjusting the settings at:

WordPress – Settings – Discussion – Default Article Settings – Allow people to post comments on new articles UNCHECK

That setting will only disallow comments for new posts. Comments must also be disallowed on existing posts. To do that you can edit each post individually and find the setting Allow Comments – Uncheck. You can also do that through a bulk edit.

Remove favorites

You can disable favorites in the CPT settings, for example:

Places – Settings – General – Show Advanced – Disable Favorites for this post type

Account Management

Read more about Account Management with GeoDirectory here: https://wpgeodirectory.com/docs-v2/geodirectory/account-management/

Remove WordPress Admin Bar

WordPress has a “WP Way” policy that prohibits plugin and theme authors from hiding the WordPress admin bar.

You can use the following code snippet to hide the admin bar.

Read more about customizing with PHP Code Snippets: https://wpgeodirectory.com/docs-v2/faq/customizing/#custom-code

PHP Snippet to remove the admin bar
add_filter('show_admin_bar', '__return_false');

Was this article helpful to you? Yes 2 No 1