Before reading this documentation, you should have a basic knowledge about WordPress Shortcodes. If you're not sure about them, please read a quick tutorial here
Following Shortcode displays 10 properties order by date in Ascending order and bottom pagination. It uses Style 1 and 1 property per row.
[rem_list_properties]
You can enable top bar for property listings to sort properties or change layout right from frontend. Just set top_bar to enable
[rem_list_properties top_bar="enable"]
Following Shortcode displays 9 recent properties in Grid view with Style 2.
[rem_list_properties order="DESC" posts="9" orderby="date" style="2" pagination="disable" class="col-sm-3"]
You can use following values for order attribute
You can use following values for orderby attribute
You can use style attribute to modify styles and class attribute defines the number of columns in a row. Following shortcode will display 3 properties in a row in style 3
[rem_list_properties style="3" class="col-sm-4"]
If you're using style 1 (which is list view), you have to set class attribute to col-sm-12. Otherwise it may break the layout. You can use styles from 1 to 7. If you want to add additional property listing styles, we have an extension with 20+ more styles.
class attribute can have following values
By using masonry attribute and setting its value to enable will render listings in masonry grid.
[rem_list_properties style="3" class="col-sm-4" masonry="enable"]
By default, listing shortcode displays pagination in the bottom if there are more properties than the value specified in posts attribute. You can disable the pagination by setting pagination attribute to disable. Suppose you want to display only 3 latest properties with no pagination:
[rem_list_properties posts="3" order="DESC" orderby="date" pagination="disable"]
You can use tags attribute to display properties that are tagged with specific tag. Following shortcode will dispaly all properties that are tagged with wood.
[rem_list_properties style="3" class="col-sm-4" tags="wood"]
You can also use multiple tag names separated by commas. Example: tags="wood,carpet"
If you want to display properties of a specific agent use attribute author and set its value to agent's ID.
[rem_list_properties style="3" class="col-sm-4" author="1"]
If you want to display properties of current logged in agent, set attribute author to current.
[rem_list_properties style="3" class="col-sm-4" author="current"]
You can prefer those properties to display first which are near to the visitor's current location. Use attribute nearest_porperties and set its value to enable.
[rem_list_properties style="3" class="col-sm-4" nearest_porperties="enable"]
It enables geo location tracking and thus asks visitor to allow his location tracking. Your site must be ssl enabled for better results.
You can use meta attribute to filter properties based on any default field or custom field created by custom fields menu. Suppose you want to display only those properties which have Purpose set to Sell.
[rem_list_properties style="3" class="col-sm-4" meta="property_purpose|Sell"]
Please note that meta attribute accepts field name and value separated by pipe "|" sign. Value and field name both are case sensitive.
As mentioned above, you can simply use meta attribute, setting its value to property_purpose|Rent.
[rem_list_properties style="3" class="col-sm-4" meta="property_purpose|Rent"]
You can display a list of properties based on property type using property_type field name in meta attribute. Following shortcode will display all Houses
[rem_list_properties style="3" class="col-sm-4" meta="property_type|House"]
Similarly, following shortcode will display all Offices.
[rem_list_properties style="3" class="col-sm-4" meta="property_type|Office"]
and following will display all Retails.
[rem_list_properties style="3" class="col-sm-4" meta="property_type|Retail"]
You can also use multiple fields in meta attribute. Each field-value group separated by commas. In the following example, it will display all those properties having country set to Australia and city set to Sydney.
[rem_list_properties style="3" class="col-sm-4" meta="property_city|sydney,property_country|australia"]
Again, all field names and values in meta attribute are case sensitive.
You can also list properties matching multiple values in same field. For Example lets say you want to list duplex and houses at the same time, you can provide multiple values separated by star (*) symbol.
[rem_list_properties style="3" class="col-sm-4" meta="property_type|house*duplex"]
Following is default shortcode to render property search form.
[rem_search_property]
It will display following fields in 2 columns layout.
You can manage fields in search form using fields_to_show attribute. It accepts field names separated by commas. Following shortcode will display only Property Type and Purpose dropdowns in search form.
[rem_search_property fields_to_show="property_type,property_purpose"]
Default field names that you can use are.
You can also use custom fields, by specifying their data names.
You can customize the columns in each row by using columns attribute. Following shortcode will display 3 fields in a row. Search Box, Property Type and Price Range Slider.
[rem_search_property fields_to_show="search,property_type,property_price" columns="4"]
You can provide following values for columns attribute.
Customize the label used for search button using search_btn_text attribute.
[rem_search_property fields_to_show="search,property_type,property_price" columns="4" search_btn_text="Find Your Home"]
Customize the label used for More Filters button using filters_btn_text attribute.
[rem_search_property fields_to_show="property_type,property_price" filters_btn_text="Advanced Options"]
You can also disable the More Filters option by setting filters_btn_text value to empty. Example: filters_btn_text=""
Create reset search fields button using reset_btn_text attribute and setting its value to button's label.
[rem_search_property fields_to_show="property_type,property_price" reset_btn_text="Reset"]
If you want to display some listings with search form before searching and when user performs search, replace with the search results. You can do it by inserting list shortcode inside search shortcode. See following example
[rem_search_property][rem_list_properties][/rem_search_property]
Suppose you need a search form that searches only rented properties without giving visitor the option to change property purpose. For this, you can use fixed_fields attribute. Provide field name and value separated by pipe | sign. Following search form will display Property Type and Price Range to search, but will only search for those properties which are for rent.
[rem_search_property fields_to_show="property_type,property_price" fixed_fields="property_purpose|Rent"]
You can use multiple values in fields_to_show attribute separated by commas. Same as meta attribute in List Properties shortcode.
If you're using search form on homepage and don't want to display results under the form, you can open a separate page for results. Use results_page attribute and set its value to results page url. Consider we have a page for displaying results and its url is http://site.com/results
[rem_search_property results_page="http://site.com/results"]
Please note that the results page must have shortcode [rem_search_results]
where you want to display results.
If you're using search form in widget then you may don't want to display results under the form via AJAX. You may want to display them inside content area but still want to display them using AJAX without page reload. You can do that by creating a div and giving it a unique id. Then you can use results_selector attribute to display results in that div. Consider we have a div and id="custom-results"
[rem_search_property results_selector="#custom-results"]
You should have a little knowledge about HTML Selectors to use this option.
You can sort search results by custom order using order and orderby attributes.
[rem_search_property order="DESC" orderby="price"]
You can use following values for order attribute
You can use following values for orderby attribute
From version 10.4.1 you can use simple search feature to easily embed search from anywhere, using shortcode [rem_simple_search] make sure to provide url also for search results page using attribute results_page.
[rem_simple_search results_page="http//site.com/results-page/"]
The results page must have shortcode [rem_search_results] to display results.
You can use following attributes in [rem_simple_search] shortcode.
Attributes | Description | Default Value |
---|---|---|
placeholder | Placeholder text to display in search field | Type to Search... |
width | Maximum width for search bar | 450px |
border_color | Text input border color | #E4E4E4 |
results_page | URL of results page | # |
search_icon | Search Icon | Raw html for search icon |
Following Shortcode displays 10 properties order by date in Ascending order. It uses Style 1 and displays 1 property at a time.
[rem_carousel]
You can use slidestoshow attribute to manage slider columns. Use style attribute to change property styles.
[rem_carousel slidestoshow="3" style="3"]
Following Shortcode displays 9 recent properties with Style 2, and 3 slides at a time.
[rem_carousel total_properties="9" order="DESC" orderby="date" style="2" slidestoshow="3"]
You can use following values for order attribute
You can use following values for orderby attribute
You can use custom sliding speed using attribute speed and setting its value to a number (milli seconds). Following shortcode will take 1 second to slide
[rem_carousel total_properties="9" slidestoshow="3" style="3" speed="1000"]
You can also configure how many properties to scroll at a time using slidestoscroll. Following shortcode will slide 3 properties when sliding.
[rem_carousel total_properties="9" slidestoshow="3" style="3" slidestoscroll="3"]
Set attribute autoplay to enable and slider will play automatically. Configure auto play gap time using autoplayspeed attribute. Using following shortcode, slider will auto slide property after every 3 seconds
[rem_carousel autoplay="enable" autoplayspeed="3000"]
speed and autoplayspeed must have a number value and it will be used as Milli Seconds. (1 Second = 1000 Milli Seconds)
Arows and bottom dots can be enabled setting arrows and dots attributes to enable respectively.
[rem_carousel arrows="enable" dots="enable"]
If you want to display some specific properties using their IDs, you can use attribute ids and set its value to comma separated property ids.
[rem_carousel slidestoshow="2" style="3" ids="124,456,789"]
If you want to display properties of a specific agent use attribute author and set its value to agent's ID.
[rem_carousel slidestoshow="2" style="3" author="1"]
You can use tags attribute to display properties that are tagged with specific tag. Following shortcode will dispaly all properties that are tagged with wood.
[rem_carousel slidestoshow="2" style="3" tags="wood"]
You can also use multiple tag names separated by commas. Example: tags="wood,carpet"
Use attribute total_properties to control total number of properties.
[rem_carousel slidestoshow="2" style="3" total_properties="6"]
You can prefer those properties to display first which are near to the visitor's current location. Use attribute nearest_porperties and set its value to enable.
[rem_carousel slidestoshow="2" style="3" nearest_porperties="enable"]
It enables geo location tracking and thus asks visitor to allow his location tracking. Your site must be ssl enabled for better results.
You can use meta attribute to filter properties based on any default field or custom field created by custom fields menu. Suppose you want to display only those properties which have Purpose set to Sell.
[rem_carousel slidestoshow="2" style="3" meta="property_purpose|Sell"]
Please note that meta attribute accepts field name and value separated by pipe "|" sign. Value and field name both are case sensitive.
As mentioned above, you can simply use meta attribute, setting its value to property_purpose|Rent.
[rem_carousel slidestoshow="2" style="3" meta="property_purpose|Rent"]
You can display a list of properties based on property type using property_type field name in meta attribute. Following shortcode will display all Houses
[rem_carousel slidestoshow="2" style="3" meta="property_type|House"]
Similarly, following shortcode will display all Offices.
[rem_carousel slidestoshow="2" style="3" meta="property_type|Office"]
and following will display all Retails.
[rem_carousel slidestoshow="2" style="3" meta="property_type|Retail"]
You can also use multiple fields in meta attribute. Each field-value group separated by commas. In the following example, it will display all those properties having country set to Australia and city set to Sydney.
[rem_carousel slidestoshow="2" style="3" meta="property_city|sydney,property_country|australia"]
Again, all field names and values in meta attribute are case sensitive.
Following Shortcode displays 10 properties order by date in Ascending order on a Map.
[rem_maps]
Following Shortcode displays 9 recent properties on map.
[rem_maps order="DESC" total_properties="9" orderby="date"]
You can use following values for order attribute
You can use following values for orderby attribute
You can use tags attribute to display properties that are tagged with specific tag. Following shortcode will dispaly all properties that are tagged with wood.
[rem_maps total_properties="-1" tags="wood"]
You can also use multiple tag names separated by commas. Example: tags="wood,carpet"
You can prefer those properties to display first which are near to the visitor's current location. Use attribute nearest_porperties and set its value to enable.
[rem_maps total_properties="10" nearest_porperties="enable"]
It enables geo location tracking and thus asks visitor to allow his location tracking. Your site must be ssl enabled for better results.
You can use meta attribute to filter properties based on any default field or custom field created by custom fields menu. Suppose you want to display only those properties which have Purpose set to Sell.
[rem_maps meta="property_purpose|Sell"]
Please note that meta attribute accepts field name and value separated by pipe "|" sign. Value and field name both are case sensitive.
As mentioned above, you can simply use meta attribute, setting its value to property_purpose|Rent.
[rem_maps meta="property_purpose|Rent"]
You can display a list of properties based on property type using property_type field name in meta attribute. Following shortcode will display all Houses
[rem_maps meta="property_type|House"]
Similarly, following shortcode will display all Offices.
[rem_maps meta="property_type|Office"]
and following will display all Retails.
[rem_maps meta="property_type|Retail"]
You can also use multiple fields in meta attribute. Each field-value group separated by commas. In the following example, it will display all those properties having country set to Australia and city set to Sydney.
[rem_maps meta="property_city|sydney,property_country|australia"]
Again, all field names and values in meta attribute are case sensitive.
If you want to display some specific properties using their IDs, you can use attribute ids and set its value to comma separated property ids.
[rem_maps ids="124,456,789"]
Customize the default loading messages by using load_heading and load_desc attributes.
[rem_maps load_heading="Just a Second!" load_desc="Loading Properties..."]
By default map's height is 600px, but you can change it. Use attribute map_height to change it, don't forget to provide unit also.
[rem_maps map_height="450px"]
My location marker appears on map when users click on location icon. You can customize it using my_location_icon attribute and providing url to the icon.
[rem_maps my_location_icon="http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-pin.png"]
Recommended size is 100x100 and format PNG.
You can customize the green circle that appears for multiple properties using attribute circle_icon and providing url to the icon.
[rem_maps circle_icon="http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-pin.png"]
Recommended size is 55x55 and format PNG.
You can use different markers for sell and rented properties on map, using attribute icons_data. It contains icon urls based on the value separated by commas. It follows following structure.
VALUE|STATIC_ICON_URL|HOVER_ICON_URL
So, our shortcode will become
[rem_maps icons_data="Sell|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housessales.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housessales_2x-1.png,Rent|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housesrent.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/housesrentals_2x.png"]
Recommended size is 72x60 and format PNG.
Markers can also be differenciate by other meta like you may want to use diffferent icon for house, different for Villa and so on. Because these are property types, our key will be property_type and we have to use it in shortcode as a value of icons_by_meta attribute. Then we will follow above procedure to provide custom icons in icons_data attribute. Following is shortcode that we're using on the homepage of our demo, where markers are different based on Property Type.
[rem_maps icons_by_meta="property_type" icons_data="House|http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/single-home-hover-pin.png,Duplex|http://rem.webcodingplace.com/wp-content/uploads/2018/01/condominium-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/condominium-hover-pin.png,Office|http://rem.webcodingplace.com/wp-content/uploads/2018/01/apartement-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/apartement-hover-pin.png,Retail|http://rem.webcodingplace.com/wp-content/uploads/2018/01/family-house-pin.png|http://rem.webcodingplace.com/wp-content/uploads/2018/01/family-house-hover-pin.png"]
Recommended size is 72x60 and format PNG.
You can use following attributes in rem_maps shortcode to customize the colors. Details are given with each attribute.
Attributes | Description |
---|---|
btn_bg_color | Set buttons background color for all buttons on map. |
btn_text_color | Set buttons text color for all buttons on map. |
btn_bg_color_hover | Set buttons background color on hover for all buttons on map. |
btn_text_color_hover | Set buttons text color on hover for all buttons on map. |
loader_color | Set color of loading box. |
water_color | Set map water color. |
fill_color | Set map natural fill color. |
poi_color | Set map point of interests color. |
poi_color_hue | Set map point of interests hue color. |
Example Usage:
[rem_maps btn_bg_color="#16a393" btn_text_color="white" btn_bg_color_hover="#01a38a" btn_text_color_hover="#ffffff"]
You can either use color name as value or color code with # sign.
Following Shortcode displays a form to register new agent.
[rem_register_agent]
Please note that this shortcode will display nothing when you're already logged in.
You can use redirect attribute to redirect user after successfull registration.
[rem_register_agent redirect="http://site.com/success"]
You can provide inner contents in shortcode that will be displayed when user is already logged in. Following shortcode will display registration form for non logged in users and edit profile page, for logged in users at the same time.
[rem_register_agent redirect="http://site.com/success"][rem_agent_edit][/rem_register_agent]
Following Shortcode displays a form to login users via AJAX.
[rem_agent_login]
Please note that this shortcode will display nothing when you're already logged in.
Customize "Login Here" message using attribute heading.
[rem_agent_login heading="Please Provide Email and Password"]
You can provide url to redirect after successfull login using attribute redirect.
[rem_agent_login redirect="http://site.com/success"]
You can provide inner contents in shortcode that will be displayed when user is already logged in. Following shortcode will display login form for non logged in users and edit profile page, for logged in users at the same time.
[rem_agent_login redirect="http://site.com/success"][rem_agent_edit][/rem_agent_login]
Following Shortcode displays a form to create new property.
[rem_create_property]
Please note that this shortcode will display nothing when you're not logged in.
You can provide inner contents in shortcode that will be displayed when user is not logged in. Following shortcode will display login form for non logged in users and create property form, for logged in users at the same time.
[rem_create_property][rem_agent_login][/rem_create_property]
Following Shortcode displays a form to edit property.
[rem_edit_property]
Please note that this shortcode will display nothing when you're not logged in.
You can provide inner contents in shortcode that will be displayed when user is not logged in. Following shortcode will display login form for non logged in users and edit property form, for logged in users at the same time.
[rem_edit_property][rem_agent_login][/rem_edit_property]
Following Shortcode displays properties of current logged in agent with buttons to edit or delete them.
[rem_my_properties]
Please note that this shortcode will display nothing when you're not logged in.
You can provide inner contents in shortcode that will be displayed when user is not logged in. Following shortcode will display login form for non logged in users and list of properties, for current logged in agent at the same time.
[rem_my_properties][rem_agent_login][/rem_my_properties]
Following Shortcode displays all approved agents one after another on the same page.
[rem_list_agents]
You can display agents in 3 columns grid using attribute columns.
[rem_list_agents columns="col-sm-4"]
You can display specific agents by providing their IDs.
[rem_list_agents ids="18,56"]
Following Shortcode displays agents in ascending order of their display name.
[rem_list_agents order="ASC" orderby="display_name"]
You can use following values for order attribute
You can use following values for orderby attribute
Following Shortcode displays profile of specific agent. Provide agent id in author_id attribute.
[rem_agent_profile author_id="1"]
You can display profile of current logged in user using shortcode.
[rem_my_profile]
Following Shortcode displays single property according to id provided.
[rem_property id="1"]
Following Shortcode displays a form to edit agent's profile.
[rem_agent_edit]
Please note that this shortcode will display nothing when you're not logged in.
You can provide inner contents in shortcode that will be displayed when user is not logged in. Following shortcode will display login form for non logged in users and edit profile form, for logged in users at the same time.
[rem_agent_edit][rem_agent_login][/rem_agent_edit]