Property Plugin Themer Documentation

Here, we'll look at how to take advantage of features of the VicTheme Property Plugin within the WordPress Loop. This document is intended for theme designers who have at least some knowledge of PHP and experience modifying the loop.

If you're not yet comfortable with the WordPress Loop, please review the appropriate section of the WordPress Codex. We won't be working with multiple or nested loops, however, so feel free to skip those sections.

Theme Integration - Property Archive Template

To get the most out of the Property Plugin, we recommend creating an archive template for displaying the list of property posts. Otherwise, the plugin will fall back on one of the default theme templates, which are not adapted to take advantage of the features of the Property Plugin.

We'll copy one of your theme's included templates to a new file, so that the original templates are still available for displaying blog posts or other content.

  • Locate the file

    Look in the root folder of your theme for the following files:

    • archive.php
    • index.php
    • archive-{post_type}.php

    If your theme has more than one of these files, use the last one in the list that's present.

  • Copy the file

    Next, copy it to a new file called archive-property.php.

  • Change the loop

    In your new archive-property.php file, locate the WordPress Loop, which is usually wrapped inside a PHP while statement.

    Example loop code from archive.php in the WordPress Twenty Sixteen theme:

    
        // Start the loop.
        while ( have_posts() ) : the_post();
    
            /*
             * Include the Post-Format-specific template
             * for the content. If you want to override this
             * in a child theme, then include a file called content-___.php
             * (where ___ is the Post Format name) and that will be
             * used instead.
             */
            get_template_part('template-parts/content', get_post_format());
    
        // End the loop.
        endwhile;
    
    

    Everything between the lines beginning with while and endwhile is part of The WordPress Loop. In this case, we'll actually be removing the while statement entirely. Replace it with a call to the Property Plugin loop as shown below:

    
        // Loop starts code....
    
            // Replacing the get_template_part()....
            if (class_exists('VTCore_Wordpress_Utility')) {
                include VTCore_Wordpress_Utility::locateTemplate('property-loop.php');
            }
    
        // Loop end code....
    
    

Theme Integration - Property Single Template

As before, we recommend creating a separate template for displaying single property posts by copying an existing template.

  • Locate the file

    Look in the root folder of your theme for the following files:

    • index.php
    • single.php
    • single-{post_type}.php
    • page.php

    If your theme has more than one of these files, use the last one in the list that's present.

  • Copy the file

    Next, copy it to a new file called single-property.php.

  • Change the loop

    In your new archive-property.php file, locate the WordPress Loop, which is usually wrapped inside a PHP while statement.

    Example loop code from page.php in the WordPress Twenty Sixteen theme:

    
    
        // Start the loop.
        while ( have_posts() ) : the_post();
    
            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );
    
            // If comments are open or we have at least one comment,
            // load up the comment template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }
    
        // End of the loop.
        endwhile;
    
    

    Everything between the lines beginning with while and endwhile is part of The WordPress Loop. Replace it with the Property Plugin loop code as shown below:

    
    
        // Start the loop.
        while ( have_posts() ) : the_post();
    
            if (class_exists('VTCore_Wordpress_Utility')) {
                include VTCore_Wordpress_Utility::locateTemplate('property-content.php');
            }
    
        // End of the loop.
        endwhile;
    
    

Theme Integration - Agent Listing Template

Since agents are a feature specific to the Property Plugin, you must create an agent listing template for the agents page to display properly. Otherwise, the page will display all authors, not just those who are specified as agents.

So again, we recommend making a new template by copying an existing template from your theme.

  • Locate the file

    Look in the root folder of your theme for the index.php file.

  • Copy the file

    Next, copy it to a new file called archive-agents.php.

  • Change the loop

    In your new archive-property.php file, locate the WordPress Loop, which is usually wrapped inside a PHP while statement.

    Example loop code from index.php in the WordPress Twenty Sixteen theme:

    
    
        // Start the loop.
        while ( have_posts() ) : the_post();
    
            /*
             * Include the Post-Format-specific template for
             * the content. If you want to override this in
             * a child theme, then include a file called
             * content-___.php (where ___ is the Post Format name)
             * and that will be used instead.
             */
    
            get_template_part('template-parts/content', get_post_format());
    
        // End the loop.
        endwhile;
    
    

    Everything between the lines beginning with while and endwhile is part of The WordPress Loop. Replace it with the Property Plugin loop code as shown below:

    
    
        // Start the loop.
        while ( have_posts() ) : the_post();
            if (class_exists('VTCore_Wordpress_Utility')) {
                include VTCore_Wordpress_Utility::locateTemplate('agents-loop.php');
            }
        // End of the loop.
        endwhile;
    
    

Theme Integration - Agent Profile Template

As with the Agent Listing page, agent profiles are specific to the Property Plugin and will not display properly without a special template.

To create this template, we'll copy an existing template from the theme like we've done before.

  • Locate the file

    Look in the root folder of your theme for the index.php file.

  • Copy the file

    Next, copy it to a new file called archive-agents.php.

  • Change the loop

    In your new archive-property.php file, locate the WordPress Loop, which is usually wrapped inside a PHP while statement.

    Example loop code from index.php in the WordPress Twenty Sixteen theme:

    
    
        // Start the loop.
        while ( have_posts() ) : the_post();
    
            /*
             * Include the Post-Format-specific template
             * for the content. If you want to override this
             * in a child theme, then include a file called
             * content-___.php (where ___ is the Post Format name)
             * and that will be used instead.
             */
            get_template_part( 'template-parts/content', get_post_format() );
    
        // End the loop.
        endwhile;
    
    

    Everything between the lines beginning with while and endwhile is part of The WordPress Loop. Replace it with the Property Plugin loop code as shown below:

    
    
        // Start the loop.
        while ( have_posts() ) : the_post();
    
            if (class_exists('VTCore_Wordpress_Utility')) {
                include VTCore_Wordpress_Utility::locateTemplate('agents-profile.php');
            }
    
        // End of the loop.
        endwhile;
    
    

Advanced Theming - Overriding Plugin Templates

You can override any template found in the victheme_property/templates folder of the plugin. To do so, start by creating a new folder, templates/property, in the root folder of your theme.

Then copy the templates files that you want to override from victheme_property/templates into the new folder, templates/property.

Likewise, to override agent templates found in the victheme_agents/templates, copy the templates into a new folder, templates/agents under the root directory of your theme.

After making changes to these new template files, visit the VicTheme Core configuration page in the admin section of you WordPress site and press the red Clear Cache button.

clearcache.png

This will cause the new files to be loaded so that the updates appear on your site.

Advanced Theming - Overriding Plugin Assets

You can also override any of the CSS or Javascript assets included in the VicTheme Core, Property, and Agents plugins. To do so, we'll register new assets to replace the defaults.

Here's an example of how to override property-front.css which is part of the property-front assets.

  • Create the assets folder

    Create a new folder called assets in the root directory of your theme.

    Then add these lines to the file functions.php in your theme:

    
    
        // Make sure we got Init Class
        if (class_exists('VTCore_Wordpress_Init')) {
    
            // Loads up them paths
            $themePath = get_stylesheet_directory();
            $themeUrl = get_stylesheet_directory_uri();
    
            // Registering to the core library and detect if the file exists
            VTCore_Wordpress_Init::getFactory('assets')
    
                // Retrieve the assets library object
                ->get('library')
    
                // Detect & register all the assets files specified in the directory
                ->detect(
    
                    // Asset Directory
                    $themePath . DIRECTORY_SEPARATOR . 'assets',
    
                    // Assets URL
                    $themeUrl . '/assets'
                );
        }
    
    
  • Copy the assets folder

    Copy the default assets folder, which in this case is victheme_property/assets/property-front, into the newly created assets folder. Be sure to preserve the name of the folder, so the plugin can locate it.

  • Make changes

    Once you've copied the folder, edit the files within to make whatever customizations you'd like to see on your site.

    The plugin will now use your modified assets in place of the defaults.

Wrapping Up

We've now covered all of the features of the VicTheme Property Plugin for WordPress theme designers.

If you still have questions, please contact us by submitting a ticket at our support page.