Blog - Page 7 of 10 - GeoDirectory

WordPress Add Class to Body

In many cases, the auto-generated classes are not sufficient and we may need to add some custom classes.

To add custom classes, we will use the WordPress filter:

body_class

Below we will show you snippets of the most requested examples.

But first a little introduction to explain to beginners more about Body Classes.

WordPress Custom Body Classes are something any WordPress developer will need to deal with, sooner or later.

Using a plugin for this would be overkill because in most cases all we need are a couple of lines of code.

So, how do we add WordPress Custom Body classes?

WordPress has both a body_class function and a body_class filter (hook).

The body_class function is used in themes to add the classes autogenerated by WordPress, to the body tag of your website.

This is how it is added to the header.php file of your theme:

<body <?php body_class($class); ?>>

Depending on which page is visited, WordPress will output specific classes.

1) For the default “Hello World” post, the body classes are:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

2) The body classes of the sample page are:

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar customize-support">

3) The body classes of the category archive pages are:

<body class="archive category category-uncategorized category-1 logged-in admin-bar no-sidebar hfeed customize-support">

4) The body classes of the author archive page are:

<body class="archive author author-admin author-1 logged-in admin-bar no-sidebar hfeed customize-support">

5) The body class of the home page (assuming you have one)

<body class="home blog logged-in admin-bar no-sidebar hfeed customize-support">

The 5 examples provided above, are common to most default themes when the admin user is logged in.

When logged out, the classes will be slightly different.

Classes in HTML are used to style a web page via CSS.

When copying the following snippets into your functions.php file, new custom body classes will appear on your website markup.

We will be using the body_class filter.

Adding a WordPress custom body class

function my_custom_body_class($classes) {<br />
// add 'my-class' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class');

This will add the new class: “my-class” to the body tag of all pages of your website.

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class customize-support">

What if I need to add more than 1 class?

Adding 2 or more WordPress custom body classes

function my_custom_body_classes($classes) {<br />
// add 'my-class' and 'my-class-2' to the default autogenerated classes, for this we need to modify the $classes array.<br />
$classes[] = 'my-class';<br />
$classes[] = 'my-class-2';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom classes via body_class filter<br />
add_filter('body_class','my_custom_body_classes');

This will be the result:

<body class="home blog logged-in admin-bar no-sidebar hfeed my-class my-class-2 customize-support">

What if I want to add a body class only on one particular page where we want to add some custom style via CSS?

Adding a WordPress custom body class to a specific page

This can be done in several ways:

1) Add a custom body class using the page ID

function my_custom_body_class_id($classes) {<br />
// add 'my-class' only to page with ID 1.<br />
if ( is_page( '1' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_id');

This will be the result on the page with id 2, while all other pages will not have the custom class.

<body class="page page-id-2 page-template-default logged-in admin-bar no-sidebar my-class customize-support">

2) Add a custom body class using the page slug

function my_custom_body_class_slug($classes) {<br />
// add 'my-class' only to page with slug contact-form.<br />
if ( is_page( 'contact-form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_slug');

This will add the custom class “my-class” on the page with the slug contact-form, while all other pages will not have the custom class.

3) Add a custom body class using the page title

function my_custom_body_class_title($classes) {<br />
// add 'my-class' only to page with title Contact Form.<br />
if ( is_page( 'Contact Form' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_title');

This will add the custom class “my-class” on the page with the title Contact Form, while all other pages will not have the custom class.

4) Add a custom body class using the page template

function my_custom_body_class_template($classes) {<br />
// add 'my-class' only to pages using my custom template.<br />
if ( is_page_template( 'my-custom-page-template' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_template');

This will add the custom class “my-class” on the page using the template my-custom-page-template. All other pages will not have the custom class.

We can also add the custom class to a category or tag page, both via ID or category/tag slug.

Adding a WordPress custom body class to a category or tag archive

1) Categories

function my_custom_body_class_category($classes) {<br />
// add 'my-class' only to the my-category archive.<br />
if ( is_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_category');

2) Tags

function my_custom_body_class_tag($classes) {<br />
// add 'my-class' only to the my-tag archive.<br />
if ( is_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_tag');

This will only add the custom body class in the archive page of the category my-category and tag my-tag.

We can also add a custom body class to the single page of every post in the category my-category or with the tag my-tag.

We will use in_catgeory and has_tag functions.

1) Categories (both archive and single page)

function my_custom_body_class_in_category($classes) {<br />
// add 'my-class' to the my-category archive and single posts of the category.<br />
if ( in_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_in_category');

2) Tags (both archive and single page)

function my_custom_body_class_has_tag($classes) {<br />
// add 'my-class' to the my-tag archive and single posts with that tag.<br />
if ( has_tag( 'my-tag' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_has_tag');

These last 2 examples will add the custom class in both the archive page and the single page.

Adding the Category name as WordPress custom body class in each post

If you wish to add the category nice name as a custom body class to each post, you will need the following snippet:

function my_custom_body_class_category_in_single($classes) {<br />
     if (is_single() || is_category()) {<br />
       global $post;<br />
       foreach((get_the_category($post->ID)) as $category) {<br />
         $classes[] = $category->category_nicename;<br />
       }<br />
     }<br />
     return $classes;<br />
   }<br />
add_filter('body_class','my_custom_body_class_category_in_single');

For example, if you are visiting a post of the category “Travel” the above snippet will add the body class Travel so that you can style posts of each category differently.

Adding a WordPress custom body class when visited from a mobile device

We can easily do so using the wp_is_mobile function.

function my_custom_body_class_mobile( $classes ) {<br />
    if ( wp_is_mobile() ) {<br />
        $classes[] = 'mobile';<br />
    }<br />
    return $classes;<br />
}<br />
add_filter( 'body_class', 'my_custom_body_class_mobile' );

Custom body classes can also be added to 1 or all pages created by a plugin (depending on the plugin).

GeoDirectory

GeoDirectory adds its custom body classes. Every GeoDirectory page for example will have the body class: geodir-page.

If the advance search and/or the custom post type add-on are installed, the classes: geodir_advance_search and geodir_custom_posts will be added respectively.

Example of a GD Home page:

<body class="single single-post postid-1 single-format-standard logged-in admin-bar no-sidebar customize-support">

In listings pages (custom post type or category archive) you will find a different class for each Custom Post Type.

For example in Places, there will be post-type-archive-gd_place.

In the listing details page you will also find a different class for each Custom Post Type used, for example in Places there will be: single-gd_place.

However, there could be a time when other custom body classes could be needed. Let’s give some examples:

1) Add a custom body class to the location page

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_location_custom_body_class');</p>
<p>function gd_location_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('location')) {<br />
$classes[] = 'gd-location';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

the same conditional tag

geodir_is_page()

can be used for any gd page, for example for the preview page:

2) Add a custom body class to the listing preview page

// add extra class via body_class filter<br />
add_filter('body_class', 'gd_preview_custom_body_class');</p>
<p>function gd_preview_custom_body_class($classes)<br />
{<br />
if (geodir_is_page('preview')) {<br />
$classes[] = 'gd-preview';<br />
}<br />
// return the modified $classes array<br />
return $classes;<br />
}

3) Add a custom body class on detail page for different price packages

 // add extra custom class via body_class filter<br />
add_filter('body_class','gd_price_custom_body_class');<br />
function gd_price_custom_body_class($classes) {<br />
global $post;<br />
if ( $post->package_id == 1) {<br />
$classes[] = 'price-1';<br />
}<br />
elseif ( $post->package_id == 2) {<br />
$classes[] = 'price-2';<br />
}<br />
else {}<br />
// return the modified $classes array<br />
return $classes;<br />
}

4) Add a custom body class in the search page for different CPT searched

add_filter('body_class','gd_search_cpt_custom_body_class');</p>
<p>function gd_search_cpt_custom_body_class($classes) {<br />
if (isset($_GET['stype']) == 'gd_place') {<br />
$classes[] = 'search_gd_place';<br />
}<br />
return $classes;<br />
}

WooCommerce

1) Add a custom body class to all WooCommerce pages

function my_custom_body_class_woo($classes) {<br />
// add 'my-class' to all woocom pages.<br />
if ( is_woocommerce() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo');

2) Add a custom body class to the Shop page only

function my_custom_body_class_woo_shop($classes) {<br />
// add 'my-class' only to the shop page.<br />
if ( is_shop() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_shop');

3) Add a custom body class to the Product Category page

function my_custom_body_class_woo_cat($classes) {<br />
// add 'my-class' only to the product category archives.<br />
if ( is_product_category() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat');

4) Add a custom body class to a specific Product Category page

function my_custom_body_class_woo_cat_a($classes) {<br />
// add 'my-class' only to a specific product category archive.<br />
if ( is_product_category( 'my-category' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_cat_a');

5) Add a custom body class to the Product page

function my_custom_body_class_woo_prod($classes) {<br />
// add 'my-class' to product pages.<br />
if ( is_product() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod');

6) Add a custom body class to a specific Product page

function my_custom_body_class_woo_prod_a($classes) {<br />
// add 'my-class' only to the my-product single page.<br />
if ( is_product( 'my-product' ) )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_woo_prod_a');

There are plenty of other WooCommerce conditional tags such as

is_product_tag() for tag archives
is_cart() for the shopping cart page
is_checkout() for the checkout page
is_account_page() for the customer account pages

You can find them all here: https://docs.woothemes.com/document/conditional-tags/

Adding WordPress custom body classes to pages generated by other plugins

The same can be done for any plugin offering conditional tags.

For example, you can find the conditional tags of bbPress here: https://codex.bbpress.org/bbpress-conditional-tags/

an example?

1) add a custom body tag to all bbPress pages you will need this:

function my_custom_body_class_bbpress($classes) {<br />
// add 'my-class' only to bbpress page.<br />
if ( is_bbpress() )<br />
$classes[] = 'my-class';<br />
// return the modified $classes array<br />
return $classes;<br />
}</p>
<p>// add my custom class via body_class filter<br />
add_filter('body_class','my_custom_body_class_bbpress');

You will find conditional tags for BuddyPress too and most of the best plugins out there.

Removing Body Classes

While you can add something via filters, you can also remove it:

function remove_body_class( $classes ) {</p>
<p>foreach ( $classes as $key =&amp;amp;gt; $value ) {<br />
if ( $value == 'my-class' ) unset( $classes[ $key ] );<br />
}</p>
<p>return $classes;</p>
<p>}<br />
add_filter( 'body_class', 'remove_body_class' );

Are you having trouble adding or removing body classes from your WordPress website? Ask for a specific example in a comment down below and I will do my best to provide it!

A Directory Plugin for Elementor pro

today we released GeoDirectory V 2.0.0.85.

In this version, the integration with Elementor is tighter than ever. Especially with Elementor Pro.

Now you can design all templates of GeoDirectory using Elementor Pro and Elementor’s dynamic widgets.

We also started creating ready-made templates for you to use on your site, as the starting point for more complex templates or simply to get familiar with the process.

We’ll add more templates in the coming weeks, and we hope you’ll enjoy this new version and its features.

In the video below, Stiofan, we’ll walk you through this new version’s features and how you can customize GeoDirectory templates with Elementor Pro and its dynamic widgets.

How to use Elementor Pro Contact Forms inside GeoDirectory listings

We didn’t stop there. Until this new version, you could only use Ninja Forms as a contact form for the listings.

Now you can use Elementor Pro forms too. The following video shows you how to add the contact form while designing the Listing single-page template.

If you use Elementor extensively, you probably noticed one thing that we added that we think to improve Elementor. The hide conditions in the CSS.

The new dynamic content conditions hide any element easily with CSS.

If you didn’t notice, Stiofan uses it at min 3.54 of the video.

In this video about the integration with Elementor PRO Dynamic Content. you can see a more detailed explanation of this new feature.

Stiofan also explains in detail, how to use GeoDirectory data with the Elementor PRO widgets. For example, how to populate an Elementor Gallery with images from a listing. Or images added by used in the reviews.

He also shows us how to hide for example the rating stars, when there are no ratings.

Now that we have explored the integration between GeoDirectory and Elementor, let’s see how to:

Create an Elementor Directory Website by only using free plugins.

As usual, if you have any questions, don’t hesitate to comment below!

Google recently added some new schema properties to help with disrupted events. Our Events addon from version 2.0.0.17 now support these new properties.

We have added a new predefined field called “Event Disruption” if you have events that have been disrupted you should add this custom field. You can add this custom field under Events > Settings > Custom Fields > Predefined Fields

Adding the Field

ADVANCED NOTE: With the release of GD core 2.0.0.82 there is a new option when adding a field called “DB Default value“, this sets the value in the database for all listings when initially adding the field. It is highly recommended to leave this blank. However, if for example ALL your events have been canceled you could set this to cancelled (lower case and two L’s). It is not needed to set a value if your event is still running as normal but if you want to show a notice on each listing that it is still running as normal and be able to advanced filter events still running then you can set this to scheduled.

Adding the field is the same as all others. The options values should not be changed, these are specific for the event Schema.

Advanced Search Filtering

This field is filterable and can filter any type of disruptions. If you wish to be able to filter by “No Disruption” it is best to set the “DB Default ” value of the field to scheduled when adding the field so that all current listings inherit this status (this can also be done via export / re-import to update).

Showing an Event Status

By default, the event status will show in the archive item, details and map bubble templates.

You can also add your own badges to help inform users. A general badge to show users the status:

[gd_post_badge key="event_status" condition="is_not_empty" badge="Status: %%input%%" bg_color="#0073aa" txt_color="#ffffff" alignment="left"]

Or even status specific badges such as once for cancelled:

[gd_post_badge key="event_status" condition="is_equal" search="cancelled" icon_class="fas fa-exclamation-circle" badge="%%input%%" bg_color="#ff0000" txt_color="#ffffff" alignment="left"]

Schema Markup

Both the Schema properties eventStatus and eventAttendanceMode have been implemented and markup is all automatic. If your event has been moved online then the website field will be used as the event URL in the schema.

The setting are explained to users when adding/editing a listing, but for reference;

Cancelled – Set this when the event is cancelled.
Postponed – If the event has been postponed to a later date, but the date isn’t known yet
Rescheduled – If the event date has been changed from the original.
Moved Online – If the event has been moved online, in this case the website URL will be used as the event attendance URL.

New features to manage the COVID-19 emergency

With the continuing world Covid-19 crisis, we are adding features to help directory owners. GeoDirectory 2.0.0.82 included new Google schemas for Event disruption and a pre-defined field to let event owners set a disruption status. Below we will go over two of the main features in this version:

Temporarily Closed Field

In your custom post type (CPT) settings page under custom fields, you will see a new pre-defined custom field called “Temporarily Closed” this field will;

Dynamically set all business hours to closed. This means you can leave the current business hours as is and on the frontend, they will display as closed and the schema data will also show closed.
Using the GD Notifications widget which is placed on the details page by default, this will show a message in a warning box stating that the business is closed. You can customize the message shown by editing the “placeholder” text in the custom field, %s can be used to show the CPT name. eg: “This %s is closed due to Government guidelines regarding Covid-19” the %s will be replaced with the CPT name.

As suggested in the Event disruption examples, this field can be used to filter businesses to show closed ones last or used to show custom badges.

150 New Schema Types

Note: Schema data is embedded data on your webpage that search engines can read to know specific information about a post. For example, when you see a rating or a price in a google search, this data is from schema data on the page.

Google recently added the new schema type CovidTestingFacility which can be used to list a Covid-19 testing center. We decided now was a good time to refresh our list of schema types. Our old list of 93 schemas was hand-picked to be most relevant to a directory. Now many years later, some new ones have been added and some are more fitting. We have also converted the select field into a search field so its easier to search the 243 schema types.

We can all help stop COVID-19 and if you are not a health care professional, the best way to do it is to stay at home.

At AyeCde we never had a central office, we all work remotely, and staying at home for us is just another day at the office.

It can be done and you should do an effort to make it the new normal for you too. At least until this emergency is over.

But what else can we do to help? As web and directories developers, there are a few things that we can do to help our communities.

Help spreading the correct information and not the virus

Every country, region, city, town, every single location has its own procedures to manage this emergency.

If you have a local directory, make sure to provide the right information for your local population and tourists.

Information about what people should and shouldn’t be doing during a complete shutdown is vital.

Especially about what to do in case someone suspects that they have contracted the virus. Who to call and or where to go and not to go.

Help your local businesses to survive

With cities in partial or complete shutdowns, local businesses may have a hard time surviving.

As a directory developer, they are all potentially your customers and if they disappear, you disappear.

This may not be possible for everyone, but for the most creative out there, it’s definitely an option and they should start selling some of their products and services online.

I’m not sure if deliveries are allowed everywhere, but they should still be possible in most countries. If customers can’t go to them, help them go to their customers.

Our Invoicing plugin can be of great help in a similar situation. Where a customer just needs to have a simple system to start receiving payments online.

Installing it is very easy and anyone can start accepting payments online with it, literally in a matter of minutes. If PayPal is enough, it’s also 100% free.

There are other solutions like WooCOmmerce or Easy Digital Downloads for those who need to manage more complex projects.

Make sure that business owners you are in contact with are aware of similar solutions and offer them your services to help them install and configure whatever they need to keep doing business.

Publish in your directories places providing delivery services

Because many will start providing delivery services, it is important to give them as much visibility as possible by listing them on your directory correctly.

Adding the “delivery” filter to your advance search setup will be important too.

Least but not last, think about sharing the info in the directory’s social media and everywhere. You’ll help your community members get what they want and your business to stay afloat.

Do you have other ideas?

Feel free to share what you are doing to help your community through your directory website, in the comment section down below.

You could provide inspiration to other fellow directory and web developers.

airbnb like listing page geodirectory avada

approximately 6 months ago we released V2 of GeoDirectory and we promised it would be a lot easier to customize your design with it.

Being compatible with most page builders and themes, you could already do fantastic template designs with GeoDirectory V2, but now that we are fine-tuning it, you will be able to do even more awesome stuff with it.

We decided to start with Avada and the Fusion Builder.

With the current version of GeoDirectory, you had to :

add new widget areas in Avada
add the GD widgets needed to complete the design
finally, use these widgets areas through the Fusion Builder

You could achieve almost anything with that and CSS later, but it wasn’t intuitive nor as easy as customizing a design with the default elements of Fusion Builder.

GeoDirectory Elements will be within the Fusion Builder

From the next version of GeoDirectory which will be 2.0.0.68 (beta available on GitHub now), all GeoDirectory Widgets / Shortcodes / Blocks, will also be available as Elements of the Fusion Builder.

This makes it a lot easier to design, and we can now dig into the tutorial on how to create a page to look similar to Airbnb’s listings page or search results page.

Assuming you have installed Avada and GeoDirectory, this is how I made it.

Disclaimer: It was not possible to design a page that looks like Airbnb ONLY with GeoDirectory and Fusion Builder. I had to write a few lines of CSS. 11 new rules, 5 for the archive page template (the listings page) and 6 for the archive item page template (each listing inside the listings page).

That said, I’m not really an Avada expert, and there are so many options that probably what I did, could be done without as much CSS. Maybe even none.

I’ll leave that to Fusion Builder Masters to tell. If you know of solutions to avoid my custom CSS, I’d appreciate you letting me know via a comment down below, and I’ll update the tutorial.

1 Create the needed Custom Fields

I started adding the custom fields that AirBnB uses through Place > Settings. I only added the exact one I needed to replicate the design and save time, but everything can be done.

We needed four selects for :

Guests
Bedrooms
Beds
Bathrooms

and one multisect for amenities like:

Kitchen
Pool
Air Conditioning

2 Editing the Archive Page Template

After publishing a few dummy listings, I needed a new Archive Page template. I called the page Avada Listings 1 and assigned it via GeoDirectory settings as the new Archive page template.

Then I needed to prepare the page and make it use the entire screen. I know there is an option to make Avada pages use the full-width of the screen, but that affects the whole site, so I used CSS to do that.

.geodir-archive #main .fusion-row {max-width:100%}
html:not(.avada-has-site-width-percent) .geodir-archive #main {padding:0} 
.geodir-archive #main  {padding:0}
.geodir-archive .post-content .fusion_builder_column_1_2.fusion-column-first > .fusion-column-wrapper {padding-left: 8% !important;}
.geodir-archive .avada-page-titlebar-wrapper {display:none}

What the above does is simple. Makes the area below the header and above the footer using the full width of the screen, removes general padding, and adds padding only to the left of the listings list. It also hides the Avada title bar that, on a similar page, is not necessary. The page will look like this:

Now we can edit the page with Fusion Builder. You can use both Front End and Back End, but the preview of the Front End won’t be 100% accurate, the reason why I used the back end builder.

We need two columns, and in the right column, we will add the GD > Map element, while in the left column, we will add :

GD > Search
GD > Loop Actions
GD > Loop
GD > Loop Paging

The only options that we need to tweak are for the Map, where we need to set the height at 85vh. To obtain the fixed map effect on scroll, I used a plugin called: Sticky Menu (or Anything!) on Scroll by Mark Senff.

We could have written our own custom JS, but this plugin is lightweight and if you only have 1 element to stick to, it works like a charm.

If you set it up correctly, it also pushes the map when the footer appears.

As options for this plugin, I set the following:

Sticky Element = .geodir-archive-map-wrap
Push-up element = .fusion-footer

The Push-up Element option can be found in Advanced Settings.

That’s it for now.

The page now will look like this:

3 Editing the Archive Item Page Template

Now I need to customize the design of each listing, and that can be done by editing the Archive Item Page template.

I created a new Archive Item Page template, and I called it: GD Archive Item-avada

I opened it with the Fusion Builder back-end editor, and I added the following GD Elements:

GD > archive item section set as open left
GD > post images set as a slideshow
GD > archive item section set as close left
GD > archive item section set as open right
GD > post meta with key=”post_category” and show=”value”
GD > post favorite with show=”icon” and alignment=”right”
GD > post title
GD > post meta with key=”how_many_guests” and show=”value” and alignment=”left”
GD > post meta with key=”how_many_rooms” and show=”value” and alignment=”left”
GD > post meta with key=”how_many_beds” and show=”value” and alignment=”left”
GD > post meta with key=”how_many_bathrooms” and show=”value”
GD > post meta with key=”amenities” show=”value”
GD > post badge key=”post_date” condition=”is_less_than” search=”+30″ badge=”NEW” bg_color=”#008489″ txt_color=”#ffffff” size=”small”
GD > post rating show=”stars” alignment=”left”
GD archive item section set as “close right”

4 Adding some more custom CSS

Last thing I needed some CSS to make things look pretty and organized, like on the Airbnb page:

.geodir-post-title, .geodir-post-rating {clear: left;}
.geodir-field-amenities li::after,.geodir-field-how_many_guests::after,.geodir-field-how_many_rooms::after,.geodir-field-how_many_beds::after {content:" - ";}
.geodir-field-amenities ul {margin:0;padding:0}
.geodir-field-amenities li:last-child::after {content:"";}
.geodir-field-amenities li {list-style: none;float: left;}
.gd-badge-meta {display: block;margin-left: 0;clear: both;}

The above CSS will only work if you have the exact same custom fields and does the following:

adjust the position of the title and rating stars
adds the ” – ” separator between the custom fields
adjust the amenity multi-select, that by default is presented as a list
adjust the positioning of the “NEW” badge

That’s it. The result is what you see here:

I know it is not 100% identical to Airbnb, but hey, it took me 2 hours, I barely knew how to use Avada.

I just wanted to show you the level of customization that is possible with GeoDirectory and Fusion Builder.

For us, this is pretty impressive, but if it’s not for you, would you please tell us what would make it impressive in your opinion?

If you leave a comment, we’d love to hear your feedback.

I’m sure someone will ask, so I will answer directly here.

How I created the markers with prices? That’s simple. I used categories like:

-Apartment (Parent)
–100 – 200 (sub)
–200 – 300 (sub)

I designed the markers with each price fork with Photopea.com, and uploaded the marker for each sub-category.

When adding listings, I assigned the sub-category as the default category so that the marker with prices would be used in all maps.

I hope you enjoyed this tutorial.

Let me know if you have any questions regarding this in the comments down below!

today we released V2.0.0.65 with several fixes and 1 exciting new feature:

Rank Math Compatibility

untill today, the only SEO plugin fully compatible with GeoDirectory was Yoast SEO plugin.

Rank Math is the new WordPress plugin for on-site SEO.

Given that it is creating a lot of buzz in the WordPress community and we rarely or ever heard anything negative about it, we worked with its developers and made it fully compatible with GeoDirectory.

Most of those who tried it fell in love with it and swear they’ll never go back.

One of the main perks is that currently, it is 100% free.

The features are outstanding and put all other SEO plugin to shame, in some cases even their premium versions.

This is what you’ll get:

SEO Analysis
Advanced SEO Optimization
5 Keyword Optimization
Rich Snippets
XML Sitemaps
AMP SEO
Breadcrumb Navigation
404 Monitor
Redirection Manager
Google Search Console Integration
External/Internal Link Counter
OpenGraph Mark-Up
Local SEO
Role Manager
Advanced WooCommerce SEO
and much more…

Have you tried Rank Math already?

Do you intend to install it on your GeoDirectory powered website?

We would be thrilled to hear your experience with it and know what their PROS and CONS are in your opinion.

Another news is about the GeoDirectory Google Analitycs add-on.

We repurpose it and changed its name to:

Google Analytics Block plugin

It is now a standalone plugin and no longer a GeoDirectory dedicated plugin.

This means it can be used on any WordPress website and of course, it remains 100% free.

Probably we’ll release it through the WordPress.org plugin repository next.

The plugin now allows you to add the Google Analytics block on any page or blog post.

You can show the statistics for any page to all visitors, or restrict who can see the widget.

For example, if you have guest posts, you could show it to the author of the post only.

We hope you enjoy this new release! Let us know your feedback in the comment down below!

the possibility to compare listings is a feature that many of you requested in the past.

A way to compare listings displaying them side by side, showing the most important information and custom fields.

Introducing the :

Compare Listings Add-on

this new add-on allows adding up to 5 listings to the “compare” page.

Where they appear side by side horizontally, with all relevant information and custom fields needed, in bullet point lists, below the main image.

You can use it for things like comparing:

Prices and details of Classified Listings.

For example, users could compare the features and prices of used TV sets for sale on your classified portal.

Learn how to Create Classified Website with this tutorial.

Characteristics of Real Estate Listings.

Ratings of Directory Listings.

Adding the compare button to listings is as easy as adding a shortcode in a page.

Colors, Icons, and text of the compare button can be edited as needed via shortcode, block, or widget options.

Existing members can download the Compare Add-ons now.

We are generating the licenses and adding them to existing members, they should be visible to everyone by Monday, July 8th.

Hoping you like the Compare Listings Add-on, we are looking forward to hearing your feedback and making it even better!

We always tried to attract theme developers. We wanted them to build Directory themes for WordPress, using GeoDirectory as their engine.

Since we decided to stop developing GeoTheme and we built GeoDirectory as a WordPress Directory plugin. That was one of our original goals.

We have a fairly large user-base that have been waiting for an elegant and professional looking theme for a long time. It is very hard to build something as feature-rich as GeoDirectory from scratch. So building themes for GeoDirectory could be a good business for everyone.

In addition, we are delighted to promote whoever contributes to improving GeoDirectory and making it a better, bigger project.

We were not able to succeed with V1 For a number of reasons, mainly because of a templating system that was hard to customize.

Very few themes adopted it. It took a long time before we saw the 1st theme using GeoDirectory V1 to serve its directory section.

GeoDIrectory V2 appears to start with the right foot.

Introducing Listimia

Listimia is a sleek and pixel perfect WordPress Directory theme by Addicted2web. Originally built for the script phpmydirectory. It is now introduced in its WordPress version, powered by GeoDirectory.

By the way, soon we’ll release the phpmydirectory to GeoDirectory converting tool too.

Listimia uses the Bootstrap framework as its foundation.

It is fully responsive and looks gorgeous on Mobile and Tablets too.

Customizable in terms of colors and headings, Listimia is also fully translatable.

Just like GeoDirectory v2, it is compatible with the most popular s.

Listimia comes with excellent documentation and support by the Addicted2web staff.

You can use it to build any kind of Directory / Listings site.

Real Estate portals, a Classified website or your local Yelp, Listimia has got you covered!

Plus, at $39 it is very reasonably priced.

Check the demo | Buy Listimia Now!

The release today of GDv2.0.0.61 brings a few little new features that we will go over here 🙂

Classifieds Dummy Data

We did a poll on Facebook asking users to vote for the next dummy data type: directory developers facebook group
Classifieds won and we have now added it. You can see it here: https://wpgeo.directory/supreme-directory/classifieds/
To get the real benefit of the dummy content we had to add a new feature that will allow you to update the template pages per dummy data type. This feature can set the template pages content while installing the dummy data.

The dummy data can be installed from the GD General settings or via the Setup Wizard.

Post Badge Updates

The GD > Post Badge widget got a little update now allowing it to be positioned in all 4 corners of the image (rather then just the top two before) via CSS classes, see our updated docs here: https://wpgeodirectory.com/docs-v2/faq/common-examples/#gd_post_badge
You can see them in action in the new classifieds dummy data above.

Another little (and great) feature added to the widget is the ability to open links in a lightbox, you can do this by adding the class “gd-lity” as a css_class to the post badge, again you can see this in action on the classifieds dummy data on the guitars, the camera icon at the top right will open the listings youtube url in a lightbox 🙂

Grid view 1

A new listing display option has been added called (unsurprisingly) “Grid view 1”, this new view type simply displays the listings in a single stacked grid view. With more and more users developing solely for mobile use and requesting the single grid view type we have now added it.

The grid view types can now all be filtered, for example if you did not want to show this new type this little code snippet would remove that option for users:

add_filter('geodir_layout_options','_my_remove_layout_options',10,2);
function _my_remove_layout_options($layouts,$frontend){
if($frontend){
unset($layouts["1"]);
}
return $layouts;
}

Font Awesome Pro + Kits

A few users have been asking for the ability to use font awesome pro, this is now an option under the WP Font Awesome settings.

Font Awesome is changing the way settings are controlled, moving to a JS only line of code that pulls the settings in from a free account you setup on their website, this is called “Font Awesome Kits” We have also added support for this (even before their own WP Plugin has 😉 ).

Thanks,

Team GeoDirectory

These are the 1st two add-ons that we release since GeoDirectory V2 was officially launched.

Both add-ons are designed to maximize the potential of your directory.

The first, by acquiring organic backlinks from the websites of your listing owners. Those are gold for SEO purposes.

The second to help you manage imports, exports, and edits in a more flexible way.

Embeddable Ratings Badge

One of the best ways to get Google to rank you on top of your competitions is to create a widget that other webmasters want to embed on their sites.

Some examples of very famous widgets that website owners embeded on their sites are:

YouTube videos
SoundCloud tracks
Weather Forecast Widgets
Trip Advisor Rating Widget

The Embeddable Ratings Badge, mimics the functionality of the Trip Advisor rating widget for your directory.

The directory admin can style the entire widget.

Or allow its users to manipulate some of its styles to adapt to their websites.

WP All Import

Many of you requested integration with Wp All Import, but we never had time to work on it.

We found the time and we also worked with the developers of WP All Import to make sure they approved what we did.

That said, the add-on has not been tested with massive numbers such as a real directory could require, so there still might be few bugs to iron out.

Thus the BETA status. If you find any bug, don’t hesitate to report it in our forums.

These 2 new add-ons are included in all of our memberships and active members should be able to download them from their account area now.

We hope you enjoy them!