If you haven't yet purchased, installed, and/or setup the WordPress Plugin, please review these guides first.

0 - About the Wordpress Plugin

1 - Installing WordPress Plugin

2 - Setting up WordPress Plugin

IMPORTANT DISCLAIMER
The WordPress plugin is designed with customization in mind. In order to take advantage of this level of functionality, however, you must have working knowledge of and be adept in markup languages.

If you are not familiar with markup languages, you must seek professional assistance in order to achieve your desired results.

Our Support Team cannot assist you with WordPress which is why we recommend contracting a knowledgeable professional to design exactly what you seek.

As such, this guide is only intended to guide those who may be familiar with markup languages, but not WordPress, or those professionals seeking to know what our recommended best practices are for customizing the plugin.

Basic Customization Options

If you're new to WordPress, but not new to HTML/CSS this section is for you.

The CSS file that dictates the style of the various classes used by the plugin is baked into the installed plugin.

The most basic way to customize the plugin components are with colors. These are controlled on the 'Branding & Colors' tab in the plugin settings.

All of the different colored components are listed on this page and you can modify them at will.

At the top of this tab you may also change the "cards & filter design" which controls how a user interacts with a listing when they mouse over it. The rollover action reveals buttons such as 'save' or 'similar listings.' At this time there are two variants to choose from.

To change the CSS properties of the various plugin components, you will have to override those CSS classes with your own versions of them using the !important override.

Those classes are all pre-appended with "kv-."

This can be done in one of two ways.

First, you could create a custom wordpress theme which has those classes defined in it.

Or you can use the Global CSS editor which is accessible whenever you're viewing your WordPress site in editor mode:

WordPress Menus

(If you are new to WordPress)

You may recall from our setup guide that the various IDX Pages were all generated by the plugin and you had to change the layout of them in order for them to display properly. Once those pages are generated, you can add them to menus in WordPress. 

Start by navigating to Appearance on the left and then click Menus.

You will see the default menus in WordPress which do not contain any of the new pages that were added by the plugin.

When viewing the Menus control panel, you can see the pages that you can add to it on the left.

You can add or remove any items within WordPress to your menus.
 

Advanced Plugin Layout Customization

Assuming you have completely finished setting up your plugin as outlined in the previous article (WordPress Plugin 2 - Setup), we must now enable the customization functions for the IDX Pages within the plugin.

Advanced customization allows you to directly modify the HTML markup of the different plugin pages, like the properties page for example. This allows you to be infinitely flexible with your customizing.

Begin by navigating to the file manager at your domain host and browsing the file tree within your public HTML directory (WWW root directory).

Navigate to: {www root}/{wordpress install directory}/wp-content/plugins/kvcore-idx/includes/


Download/access the functions.php file and use the built in file editor at your host. You can also download the file and edit it with your favorite text editor. Once finished, you'll need to upload the modified version.

(in GoDaddy you can right-click the file in the file manager to edit the code directly)

In the functions.php file, add the following function:
 add_filter( 'kvcoreidx/admin/allow_custom_templates', function( $allow_custom_templates ) {
        return true;
} );

Save the file.

Now when you access your WordPress Admin account you'll see a new menu option under the kvCORE Plugin Menu.

For each component, you can copy and paste in the default HTML layout.

From there simply customize the layout as you'd like. As mentioned earlier, you will still need to manually override any CSS classes you need to.

As a general rule, please stick to overriding only the most specific class if possible, as many classes are shared. We have gone to great lengths to make sure each component has the ability to be customized, so if you encounter a control or component on the front end that is missing some kind of definition/class that you think would be useful, please let us know!

Did this answer your question?