How to customize Overview Page in WP-Property?

The core version of WP-Property does not include a user interface for customizing which attributes are displayed when the [property_overview] shortcode is used. However, a fairly simple templating system is available to let you customize the templates with some basic knowledge of PHP, CSS & WordPress.

This tutorial explains how to correctly use a custom template and manipulate the displayed attributes.

WP-Property’s uses a number of templates to determine how things are displayed on the front-end of your website. The templates are located in plugins/wp-property/static/views directory. All the templates available in this directory can be copied into your theme folder, and then modified.

Be aware, WP-Property always checks your theme directory when looking for a template, so to customize any template, simply create a file with the same name in your theme, and it will be loaded instead.

In this tutorial we will focus on property-overview.php, but making a mental note of the other available templates may be useful later.

How are templates used?

When using the [property_overview] shortcode, the format used to display the property listing on the front-end, is defined in the property-overview.php file.

WP-Property always checks your theme directory when looking for a template, so to customise any template, simply create a file with the same filename in your theme directory, and it will be loaded instead.

For example, if you are using TwentyFifteen, your copy of the property-overview.php file would end up at wp-content/themes/twentyfifteen/property-overview.php.

And remember, it is not advisable to modify templates in the plugin directory since any modifications you make will be overwritten when the plugin is updated.

Modifying the Property Overview

By default, the template displays several attributes, such as Title, Tagline, Phone Number and Price. Additional attributes can be added, or the default ones removed, by modifying the property-overview.php file. If you are working directly on your website, you, probably, will need to use some sort of FTP client.

The Property Loop

The Property Overview template includes a loop, which cycles through all the found properties.

In most cases you should not have to make any changes to the loop, but only work within the loop.

The screenshot demonstrates what the loop produces.

Single Property Attributes

A number of default attributes are hard-coded into the template. Take a look at how these are inserted.

Adding Custom Attribute

To add your custom attributes, be sure to take note of the attribute slug, which you can find in the Developer tab on the WP-Property Settings page.

WP-Property

  1. WP-Property - Issues With Polylang plug in
  2. How to add, delete or attach images in WP-Property?
  3. How to add auto populated field to WP-Property search
  4. Customizing Templates in WP-Property
  5. WP-Property Shortcode Cheatsheet
  6. WP-Property - Parse error syntax error unexpected T_STRING
  7. Will WP-Property work with any theme?
  8. No Search Results in WP-Property Search
  9. Installing and Activating WP-Property Add ons
  10. How to customize Overview Page in WP-Property?
  11. Styling Oembed field on a Single Property Page in WP-Property
  12. The content moves to the side in WP-Property while using a third party theme
  13. Why is the Google Map not displayed in WP-Property?
  14. Slow Backend or Frontend performance when WP-Property is activated
  15. A List of Filters and Actions in WP-Property
  16. How to investigate any issue in WP-Property?
  17. How to Translate Add Ons for WP-Property?
  18. WP-Property: Setting Keys.
  19. WP-Property Types (examples)
  20. Translating WP-Property
  21. The Help Tab In WP-Property Settings
  22. WP-Property - Home
  23. Display Tab In WP-Property Settings
  24. Developer Tab In WP-Property Settings
  25. Composer Module Development For WP-Property
  26. Accessing WP-Property With A Non Admin User Role
  27. No Pagination On WP-Property Search Results
  28. Main Tab In WP-Property Settings
  29. Installing WP-Property
  30. How To Override Specific Functionality In WP-Property?
  31. How To Investigate Any Issue In WP-Property?
  32. How To Customize Overview Page In WP-Property?
  33. How To Add, Delete Or Attach Images In WP-Property?
  34. Issues With Polylang plug-in
  35. WPML Compatibility
  36. WP-Property Terminology - Store Types, Field Variety and API Endpoints
  37. Translating "Property Type" Attribute

Feedback and Knowledge Base