Thank you for your interest in Realia! This documentation will provide you through basic settings and options in Realia. Use left navigation sidebar to quickly navigate between sections. For deeper customisation and editing the theme is better to hire a developer, if you are not familiar with WordPress developing.

If you're planning to build a website using WordPress, you must first ensure your hosting provider meets WP's requirements.

Database

  • MySQL 5.0.15 or higher with PDO
  • PostgreSQL 8.3 or higher with PDO
  • SQLite 3.3.7 or higher

PHP

  • PHP 5.2.5 or higher (5.3 recommended)
  • PHP5 GD library installed
  • Disabled error_reporting flag on production server
  • Enabled mod_rewrite in Apache for clean URLs
  • Memory limit set up at least 64MB

Before proceeding with theme installation read following notes.

Note:

There are 3 types of files which can be downloaded from Themeforest

  • License & Certification
  • Wordpress installable files only
  • All files

If you are uploading theme via user interface of Wordpress, make sure you are uploading Wordpress installable files only zip package. Otherwise you installation wont be go trough.

Note:

Don't use hosting interface like cPanel to upload your theme! This solution often dont work, or result in failure! Directly uploading the theme is often the best solution - either via ftp or via user interface of Wordpress

Note:

If your upload fails, make sure your hosting provider configuration allows you to upload files big enough. Realia is complex theme and might be bigger than your upload limit. If so, please upload your theme via FTP

Note:

Before posting question, make sure you have tried to disable all 3rd party plugins you have enabled. This plugins sometimes define wrong permission and theme install fails.

Note:

If you see some warnings or noticies, disable error reporting for Wordpress, as due to wordpress rending, this may not be important message, but the message can cause that request will be stoped from executing

Disable error reporting

One Click Installation

Manual Installation

If the video guide is not sufficient you can still follow guide bellow the video.

1. Theme Installation

Before you can use Realia on your website, you have to setup the theme

  1. Extract downloaded ZIP file from ThemeForest to your disc (on the desktop for example)
  2. Copy Realia folder to your wp-content/themes directory
  3. Sign-in to WordPress admin
  4. Navigate to Appearance > Themes
  5. Click Activate under Realia image
Note:

After enabling the theme, you can see that widgets are displayed incorrectly. Go to Appearance > Widgets and delete all widgets frop Top widget area in left sidebar.

2. Setting a Menu

Even if you have deleted widgets from Top area, the site can look a little bit messy. This is cause by fact, that the menu is not assigned so it is displayed on incorrect places.

  1. Navigate to Appearance > Menus
  2. In upper tab click on Manage Locations
  3. For Main select Main from drop-down
  4. For Anonymous user select Anonymous from drop-down
  5. For Authenticated user select Authenticated from drop-down
  6. Click Save Changes

3. Import Demo Content

This step isn't necessary, but it can be helpful in exploring Realia structure and options

  1. Go to Tools > Import
  2. Select Wordpress
  3. Install WordPress Importer
  4. Activate Installed plugin
  5. Choose XML Export located in export folder which is in the theme folder
  6. Choose Upload file and import

4. Install Required Plugins

In order to use Realia with all features, please install these plugins:

  1. NavXT - For breadcrumbs setup
  2. Contact Form 7 - For forms setup in the footer
  3. KK Star ratings - For Property Ratings
  4. Widget Logic - For controlling on which page should widget appear. More about Widget Logic Setup

6. Set Static Home Page

As you can see, default homepage now displays latest blog posts. To change it to normal homepage with properties you have to:

  1. Navigate to Settings > Reading
  2. Change Front page displays to A static page (select below)
  3. Choose Home
  4. Click Save Changes

7. Change Colors

You can select from predefined set of colors, layout and patterns

  1. Navigate to Appearance > Customize
  2. Expand General tab
  3. Select Layout if you want to change it. You can select Wide (full width) or Boxed (centered) layout
  4. Select color Variant if you want to change it.
  5. Select background Pattern if you want to change it.
  6. Click Save

8. Set Right Link for Front-end Submission (List your property)

It should be set after import, but it's better to check it

  1. Navigate to Appearance > Customize
  2. Expand Header tab
  3. In Call to action URL field check if you have /my-properties/?action=add
  4. Click Save
  5. Click Close

Note For more information about Customisation panel check Customize Panel

7. Create Homepage

Now you have to create basic homepage, where properties grid (or properties matrix) will be displayed

  1. Navigate to Pages > Add new
  2. Enter title Homepage
  3. In Template section on right sidebar choose Properties Grid Template
  4. Click Publish

Adding Properties

1. Adding basic information about property:

  1. Go to Properties > Add new
  2. Enter Title for your property. Note: If you use long title, its better to use Optional Title for short description and regular WP title for adress
  3. Add description about property
  4. Enter Price without currency sign or decimal points. Note: Format can be edited in Setting > Money > Format.
  5. Enter number of Bedrooms
  6. Enter number of Bathrooms
  7. Enter Area without country unit. Note: Units can be edited in Setting > Properties > Units.
  8. Enter GPS Position of your property
  9. Enter Contract type
  10. You can set property to be Featured. Note: Featured properties are displayed on promotional place.
  11. You can also set property as Reduced. The property will be displayed with special "Reduced" badge

2. Adding images from computer:

  1. Click Add media next to Images label
  2. Pop-up windows should appear.
  3. Choose From Computer
  4. Drag & Drop your images
  5. If done, click Save All changes on the bottom of window

3. Adding images to the gallery:

  1. Click Media Library
  2. Click Show next to your desired property image
  3. Click Insert button.
  4. Close pop-up window
  5. Do this for the rest of the images

4. Set property type:

If you don't have created any property types, do this now.

  1. In Property types on right sidebar, click Add New Property Type
  2. Enter Title for property type
  3. Click Add New Property Type again, to create checkbox

5. Set Location:

If you don't have created any locations, do this now.

  1. In Locations on right sidebar, click Add New Location
  2. Enter Title for Location
  3. Click Add New Location again, to create checkbox

6. Set Amenities:

If you don't have created any amenities, do this now.

  1. In Amenities on right sidebar, click Add New Amenity
  2. Enter Title for Amenity
  3. Click Add New Amenity again, to create checkbox

7. Set Featured Image:

Featured Image is used as main image in whole site

  1. Click Set Featured Image
  2. Click Media Library and choose desired image
  3. Click Set Featured Image
Note: It's good if you set Featured Image same as the first image in the gallery

8. Publishing the Property

Click Publish or Update if you made changes earlier.

Set Google Map

You can display Google map on your homepage with markers representing properties

  1. Navigate to Appearance > Widgets
  2. Expand Top widget area
  3. Drag & Drop Aviators: Map Properties to this Top widget area
  4. Set Zoom. (Default is 14)
  5. Set Height of the map. Note: This height is only for big resolutions. Responsive resolutions has their own heights set in CSS
  6. Choose if you want to show Search filter by checking Search Filter.
  7. If you want to use geolocation, check Enable geolocation
  8. In Widget Logic set tag is_front_page() if you want to display map only on homepage.
    More about Widget Logic Setup
  9. Click Save

Creating Menu Navigation

Create Homepage Navigation

  1. Go to Appearance > Menus
  2. Menu Name set to Main as it will be main menu navigation
  3. Click Create Menu
  4. Now new setting will show up
  5. Check Main checkbox in Menu Settings
  6. Expand Pages window on the left
  7. Check the Homepage checkbox. Note: If you don't see Homepage in Pages windows, go back to First Steps and follow 4th and 5th step.
  8. Click Add to menu button
  9. Expand newly created menu by clicking on small arrow
  10. In Navigation Label you cat change "Homepage" to "Home" if you want.

Adding Other Menu Items

Now it's time to add some post types to menu navigation. We have prepared three post types for you:

  • Properties
  • Agents
  • Agencies

Lets start with Properties

  1. If you are not in Menus settings, navigate to Appearance > Menus
  2. Expand Links in the left window
  3. In URL delete everything and type /properties. Note: We are using this URL as default. This will create address like www.example.com/properties. You are maybe using other URL link system in your website.
  4. In Link Text enter Properties
  5. Click Save Menu
  6. Do the same for Agents and Agencies using /agents and /agencies

Adding Agency

  1. Navigate to Agencies > Add new
  2. Enter Name of the agency it the Title
  3. Enter Description
  4. Enter Address.
    Note: It's better to divide adress into rows. For example:
    1900 Pico Blvd
    Santa Monica, CA 90405
    United States
  5. Enter Phone
  6. To set logo for agency click Set Featured Image and upload image or choose from Media Library
  7. Click Publish or Update if you made changes earlier.

Adding Agents

  1. Navigate to Agents > Add new
  2. As title type agent's name
  3. You can enter some information about agent to the description
  4. You can assign Agency to the Agent form dropdown.
    Note: You need to create Agency if you don't have one. See in Adding Agency
  5. Enter Mobile Number
  6. Enter Phone Number
  7. Enter E-mail
  8. Click Set Featured Image if you want to set a photo of agent. Otherwise, default image will be used.
  9. Click Publish or Update if you made changes earlier.

Customize Panel

In Customize panel you can set some style parameters in real time without any coding.

Navigate to Appearance > Customize

General

Top Bar

Header

Site Title & Tagline

Navigation

Static Front Page

Adding Widget to the Sidebar

Adding widgets to the sidebar is really easy. In this example you will add Featured Properties to the sidebar
  1. Navigate to Appearance > Widgets
    Note: As default, WordPress uses some of own widgets in sidebar. You can delete theme all, if you don't want to use them
  2. Drag & Drop Aviators: Featured Properties widget to the Primary widget area
  3. Change the title and count of properties to display
  4. If you will leave Widget Logic empty, widget will be displayed on every page
    More about Widget Logic Setup
  5. Click Save

Creating Custom Menu Widget

You can create custom navigation, that will be displayed as widget. First of all, you need to create menu. In this example you will create menu and then use it in the footer.

  1. Navigate to Appearance > Menus
  2. Click Create a New Menu
  3. Enter Menu Name. (For this example "Useful Links")
  4. Click Create Menu
  5. Now you have created menu
  6. Expand Links in the left window
  7. Type URL of page where is your page located.
    More about How to find Page URL
  8. Enter Title of menu in the Link text
  9. Click Add to menu
  10. Leave checkboxes unchecked
  11. Click Save Menu

How to Setup Property slider

If you don't want to use a map on your homepage, but you still want to have a filter, you can use Property Slider.

  1. Navigate to Appearance > Widgets
  2. Drop Aviators: Property Sliderinto Top widget area
  3. Type the IDs of the properties which you want to display.
    Note:If you don't know what is your property ID, check the How to find your property ID
  4. Click on Publish or Update if you modified it before.

Revolution Slider

Note: Before you start using Revolution Slider, pleas check this Video documentation

Note: Do not add Revolution Slider as a shortcode into page/post. Use Revolution Slider widget.

  1. Navigate to Appearance > Widgets
  2. Add Revolution Slider widget into Top widget area
  3. In Choose Slider select one, that you have created earlier
  4. Check Home Page Only if you want to display Revolution Slider only on homepage
  5. Or you can specify on what page will the Revolution Slide be displayed typing the IDs of a page in Pages
    How to find your property ID

How to Add Partners

Add partner's image (banner)

  1. Navigate to Partners > Add New
  2. Enter the Name of a partner
  3. Enter the URL link where you want to redirect a user
  4. Click on Set Featured Image and select image (banner) which will represent a partner
  5. Click on Publish or Update if you modified it before.

Create widget for partners

  1. Navigate to Appearance > Widgets
  2. Drag & drop Aviators: Partners widget to, for example, Content Bottom widget area
  3. Type a Title
  4. Set a number of partners to show in Count
  5. Click on Publish or Update if you modified it before.

Pages in WordPress mean sub-pages on your website such as www.example.com/sub-page. Sometimes you need to use Shortcodes such as Use [row], [span], [faq], [pricing], [content_box] and so on. So before you start to create your pages, it is good to learn more about Shortcodes used in Realia.

How to Create a Page

  1. Navigate to Pages > Add new
  2. Enter Title for page
  3. Use Shortcodes like [row], [span], [faq], [pricing], [h1] and so on, to create content for page.
    Read More about Shortcodes
  4. In Template select which template you want to use.
  5. Click Publish or Update if you made changes earlier.

How to Create FAQ Page

1. Create FAQ - Question and Answer

  1. Navigate to FAQs > Add new
  2. Type Question title
  3. Type Answer
  4. Choose Category if you want from the Category windows on right sidebar.
    Note: If you don't have any category, create on by clicking on Navigate to Create new category
  5. Click Publish or Update if you made changes earlier.


    Now you have created one question with answer. The next step is to create new page, where this FAQ can by displayed.

2. Create New FAQ Page

Follow the steps in How to Create a Page and use Shortcodes

How to Create Pricing Boxes

1. Create Content for Pricing box

  1. Navigate to Pricing > Add new
  2. Enter title for pricing box. Example: Professional
  3. Create Unsorted List <ul> with items using <li> tags
    For example:
    1. <ul>
    2. <li>10 Agents</li>
    3. <li>5 agencies</li>
    4. <li>Unlimited properties</li>
    5. </ul>

    Note: You need to use <ul> and <li> because they are used in Pricing Box.

  4. Click Publish or Update if you made changes earlier.

2. Create Pricing Page

Now you need to create Pricing page, where you can create Pricing boxes using Shortcodes

  1. Navigate to Pages > Add new
  2. Enter title Pricing for example
  3. Use Shortcodes like [row], [span] and [pricing] to create FAQ boxes.
  4. In Template select which template you want to use.
  5. Click Publish or Update if you made changes earlier.

How to Use Content Box

You can create your own content box like one on Realia demo homepage. Content box is text widget which uses [content-box][/content-box] shortcode. To create content box on homepage, you need to:

  1. Navigate to Appearance > Widgets
  2. Choose Text Widget and drag & drop it to Content Bottom widget area.
    Note: You can add text widget with content-box to other widget areas. Check Widget Areas
  3. Use Shortcodes like [row], [span] and [content-box] to create Content boxes.
  4. Click Save

How to Connect Created Page with Navigation Menu

After you have created your page, you maybe want to put the link in the menu navigation for this page.

  1. Navigate to Appearance > Menus
  2. Expand Pages window
  3. Check the checkbox with desired page (it can be Pricing created abow, for example)
  4. Click Add to menu
  5. Newly created menu will be created on the bottom
  6. Drag & drop it to desired position
  7. Click Save menu

How to Find Post Number, Category Number and property ID

If you are creating content with shortcodes, you need to need to find out post or category numbers, to display correct content. To find post or category number you need to:

  1. Navigate to desired item, where you want to find out post or category number. It can be Agents, Agencies, FAQs, Properties and so on.
  2. Example: You want to find out Pricing box post number
  3. Navigate to Pricings > All Pricings
  4. Click on desired Pricing box
  5. Navigate to URL
  6. Check the link like this: post.php?post=359&action=edit
  7. 359 is your post number

Money

Currency

  • Sign

    Type curency symbol fo your country

  • Show sign before price

    Displays currency sign before price

Format

  • Decimals

    How many numbers will be displayed after decimal point

  • Decimal point

    Enter character for decimal point

  • Thousands Separator

    Enter character for thousands separation

Properties

General

  • Disable Contract Type Label

    If checked all properties in grid version will have disabled label with information about the contract type.

  • Approving frontend submission

    If checked, all fronted submissions need to be approved/published by administrator ( If paypal publishing is enabled, it will overwrite this setting )

  • Enable ratings for properties

    If checked ratings will be enabled for properties.

  • Enable ratings for properties

    Show only checked amenities.

Properties Grid Template (or properties matrix)

  • Title

    Set title which will be displayed in properties grid template (or properties matrix)

  • Of Rows

    Number of rows displayed in properties grid template (or properties matrix)

  • Of Columns

    Number of columns displayed in properties grid template (or properties matrix)
    Note: You can set only 3 or 4 columns

  • Hide Sidebar

    Disable widget sidebar

  • Shuffle results

    Properties will be displayed in random order

  • Display Type

    Select which type of properties will be displayed in properties grid template. Recent, Random or Featured.

Archive Page

  • Properties per page

    How many properties you want to display on archive page. Archive page means page, where the properties are listed as posts with pager

  • Display Sortbar

    Sorting option such as Sort by price will be displayed

  • Display Type

    Select if you want to display grid (matrix) or Rows

Filter

Specify price From and To in Filter Widget
For example:

Units

Set units for your country. For example m<sup>2<sup/> will display m2

Enquire Form

Enquire Form should be displayed in property detail. It can helps the user ask question about property.

  • From Name

    Set Title which will be displayed in "From" or "Sender" label in e-mail client

  • From E-mail

    Set outgoing e-mail address (drom which address you want to send e-mails)

  • Subject

    Type subject title which will be displayed in e-mail client in Subject label

  • Hide Form Fields

    You can hide some or all fields in Enquiry Form if you don't want to use them.

Agents

  • Agents per Page

    How many agents will be displayed in Agents subpage.
    Note: Agents subpage can be created as post type page. See more at Create menu Navigation

Google Analytics

  • Tracking code

    Paste obtained Google Analytics tracking code if you want to track your website.

Socalize

  • Set links to your social network profiles. You can hide networks which you don't want to be displayed by checking the checkbox

Submission System

Admin

You can customize WordPress login form with these settings

  • Use default image

    Check if you want to use default WordPress image above the login form

  • Login Image

    This image will be used on the login screen above the login form.

Templates

  • Enable Twig Debug

    If checked theme will stop using cached version of templates. In production please disable debug mode for Twig to improve site performance.

  • Clear Twig Templates

    Enabled option after save will cause that all files under templates/cache will be flushed. Be aware that this option will be unchecked after successful flush.

Versions below 2.0

This theme has basic front-end submission system. How it is working? User sign up and sing in on your site. After that he/she can access WP administration with just property adding funcionality. Before user can register and login you need to enable user registration in settings and set default user role "Realia Contributor". User adds new property and admin must publish this property.

Version 2.0

Main feature of version 2.0 is real front end experience. Users are able to post their own properties into your directory. Still the users can access an admin area but they can only change their profile. "Realia Contributor" user role was removed so now you have to set "Subscriber" user role for newly registered users.

All new settings coming from submission system are stored under the "Settings - Submission System - General". First step is to set post type which we want to have submission functionality. In this case we need to choose "Properties". In this select box are displayed only the custom post types which are implementing special function aviators_CUSTOM_POST_TYPE_NAME_form(). In this function is covered all add/edit/delete functionality of custom post type. Second step is to select "Payment Gateway". There are just two options "Free" and "PayPal". I think that "Free" is quite self explanatory but when you choose "PayPal" you need to select "Charching Type" and fill all options for "PayPal" and "Pay Per Post". Right now users could be charged per post. There are no packages yet. We plan to implement the package system in the next mayor (3.x)release.

PayPal integration

New submission system is providing the PayPal support so if you decided to use PayPal don't forget to fill all settings required by PayPal under the "Settings - Submission - PayPal". There are 3 fields: username, password and signature. All these values are provided by PayPal. If you are just testing susbmission system mark "Sandbox" checkbox ale fill the fields below this checkbox.

Submission System Template

Submission system includes special template for front end submission experience called "Submission Index". Create new page and assign it "Submission Index" template. On this page users are able to see all their properties and add new submissions.

Login/Register Templates

Firstly you need to create login and registration pages. Realia is proving the login and registration templates.

Anonymous/Authenticated User Navigations

In the right top corner you can see navigation. This navigation is consisting from two navigation which are changing depending on if the user is anonymous or authenticated. Assing the login and registration page for anonymous user.

If you don't want to use frontend submission disable this section int Theme Customization API.

Step 1:

Edit file: realia/aviators/plugins/properties/properties.php
In function: function aviators_properties_create_taxonomies()
add this code: http://pastebin.com/PPfr4bQZ

Step 2:

Edit file: realia/aviators/plugins/properties/utils.php
In function: function _aviators_properties_prepare( WP_Query $query )
add this code: $property->country = wp_get_post_terms( $property->ID, 'countries' );
In function: function _aviators_properties_prepare_single( $post )
add this code: $post->country = wp_get_post_terms( $post->ID, 'countries' );
In function: function aviators_properties_filter( $return_query = FALSE, $use_pager = TRUE )
add this code: http://pastebin.com/An1cm1tY

Step 3:

Edit file: realia/aviators/plugins/properties/settings.json
In options for "Fields Visibility", add this code: http://pastebin.com/tgUXWd9F

Step 4:

Edit file: realia/aviators/plugins/properties/templates/properties/filter.twig
At the beginning find this piece of code: http://pastebin.com/FZ3pUGb9
and under this piece of code add this code: http://pastebin.com/Adhp0bE6
After these changes, you maybe will need to remove all cache files in folder realia/templates/cache to take effect of your changes in twig file.

Theme contains basic set of shortcodes for grid system, FAQ and pricing. Using of these shortcodes is pretty straigthforward. The difference between the other themes is grid system. As you know we are using Bootstrap for HTML structure. In this system you don't need to mark last column instead we are wrapping all columns into rows.

Available Shortcodes

  • [row][/row]

    This shortcode is based on Bootstrap's Row tag. It arranges elements into one row (line).

  • [span][/span]

    Another tag from Bootstrap. [span] defines width of one item based on Bootstrap's grid system. Number of all spans are 12. So if you set for example [span12][/span12] for pricing box, it will be displayed on full width. Another example of [span]: [span3][/span3] will display content only on 1/4 from full width.

  • [faq][/faq]

    Defines FAQ box. You need to have created at least one FAQ (Question + Anwer) and Category.
    See more about How to Create FAQ Page
    Note: Check the FAQ Shortcodes Example

    Parameters
  • [pricing][/pricing]

    Defines parameters Pricing box. You need to have created at least one Pricing box
    See more about How to Create Pricing Boxes
    Note: Check the Pricing Shortcodes Example

    Parameters
    • button_text="<text>"
      Set title for button on pricing box. Example: button_text="Sign Up"
    • link="<URL>"
      URL for link, where has to be user redirected after click. Example http://www.example.com/premium-account.php
      Note: link shortcode is required. Otherwise, button will not display.
    • post="<number>"
      Post number of pricing box, which you have created in Pricings. Example: post="255"
      See more about How to Find Post Number and Category Number
    • price="<text>"
      Display desired price. Example: price="$29.99"
    • subtitle="<text>"
      Display subtitle text under price. You can use it, if you want inform the user about monthly fees for example.
      Example: subtitle="Per Month"
  • [content-box][/content-box]

    Defines parameters for Content Box.
    Note: Check the Content Box Shortcodes Example

    Parameters
    • title="<text>"
      Set title. Example: title="Real Estate Portal"

FAQ Shortcodes Example

  1. [row]
  2. [span4]
  3. [faq category="47"][/faq]
  4. [/span4]
  5. [span4]
  6. [faq category="48"][/faq]
  7. [/span4]
  8. [span4]
  9. [faq category="48"][/faq]
  10. [/span4]
  11. [/row]

Pricing Shortcodes Example

  1. [row]
  2. [span4]
  3. [pricing post="254" title="Basic" price="Free" subtitle="Forever"][/pricing]
  4. [/span4]
  5. [span4]
  6. [pricing post="255" title="Standard" price="$9.99" subtitle="Per month"][/pricing]
  7. [/span4]
  8. [span4]
  9. [pricing post="256" title="Gold" price="$19.99" subtitle="Per month"][/pricing]
  10. [/span4]
  11. [/row]

Content Box Shortcodes Example

Use this shortcode in Text Widget

  1. [row]
  2. [span4]
  3. [content_box title="Responsive" icon="/wp-content/themes/realia/assets/img/icons/features-responsive.png"]
  4. Realia is ready to put your website on higher ranks. Every line of code was developed with SEO principles in mind.]
  5. [/content_box]]
  6. [/span4]
  7. [span4]
  8. [content_box title="Retina Ready" icon="/wp-content/themes/realia/assets/img/icons/features-retina.png"]
  9. Realia looks great even on Retina and high-resoultion displays. Every graphic element is sharp and clean. No blurry images anymore!]
  10. [/content_box]]
  11. [/span4]
  12. [span4]
  13. [content_box title="SEO Ready" icon="/wp-content/themes/realia/assets/img/icons/features-seo.png"]
  14. Realia is ready to put your website on higher ranks. Every line of code was developed with SEO principles in mind.]
  15. [/content_box]]
  16. [/span4]
  17. [/row]
  18. [row]
  19. [span4]
  20. [content_box title="Custom Widgets" icon="/wp-content/themes/realia/assets/img/icons/features-custom-widgets.png"]
  21. Realia is ready to put your website on higher ranks. Every line of code was developed with SEO principles in mind.]
  22. [/content_box]]
  23. [/span4]
  24. [span4]
  25. [content_box title="Frontend Submission" icon="/wp-content/themes/realia/assets/img/icons/features-pencil.png"]
  26. Make the portal solution from your real estate by providing property submission on homepage.]
  27. [/content_box]]
  28. [/span4]
  29. [span4]
  30. [content_box title="Prepared for Bootstrap" icon="/wp-content/themes/realia/assets/img/icons/features-bootstrap.png"]
  31. Developer friendly code based on Bootstrap and SASS makes your own customizations really easy.]
  32. [/content_box]]
  33. [/span4]
  34. [/row]

Contact us Address in Footer Example

UseText Widget and add it to the Footer Area One/Two/Three or Four

  1. <table class="contact">
  2. <tbody>
  3. <tr>
  4. <th class="address">Address:</th>
  5. <td>1900 Pico Blvd
    Santa Monica, CA 90405<br>United States
    </td>
  6. </tr>
  7. <tr>
  8. <th class="phone">Phone:</th>
  9. <td>+48 123 456 789</td>
  10. </tr>
  11. <tr>
  12. <th class="email">E-mail:</th>
  13. <td><a href="mailto:info@yourcompany.com">info@test.com</a></td>
  14. </tr>
  15. <tr>
  16. <th class="skype">Skype:</th>
  17. <td>your.company</td>
  18. </tr>
  19. <tr>
  20. <th class="gps">GPS:</th>
  21. <td>34.016811<br>-118.469009</td>
  22. </tr>
  23. </tbody>
  24. </table>

Theme provides standard support for dsIDXpress plugin. It means that all widgets and pages coming from free version of dsIDXpress plugin are well styled. Theme does not provide support for non standard functionality like Google Maps integration which is not possible to accomplish because of missing webservices (APIs) on dsIDXpress side.

Plugin Setup

dsIDXpress plugin is not required to be installated to run the theme. Plugin is fully optional.

  1. Download the dsIDXpress IDX Plugin plugin via admin panel
    Plugins - Add New

  2. After installation plugin will automatically create new page with URL www.example.com/idx/. On this page you may see listing coming from their server.

  3. Be aware that you need to activate the plugin at IDX - Activation.

  4. If your plugin is not working as needed, please contact plugin's support staff. We are offering support only for styling cause we are not able change widget's code or functionality from outside of the plugin.

Widget Logic is plugin that can helps you to set on which page should desired widget appear. It creates extra input field under every widget where you can use WP's Conditional tags.

Examples of using conditional tags

  • is_front_page()

    Widget will be displayed only on homepage

  • !is_front_page()

    This ! mark negotiate conditional tag. So in this example, widget will be displayed on every page except homepage

  • is_archive()

    Widget will be show only on all archive pages such as property list.

  • is_post_type_archive()

    With this code you can better specify on which page should widget be displayed. You can use these post types in archive is_post_type_archive():

    • is_post_type_archive('property')
    • is_post_type_archive('agency')
    • is_post_type_archive('agent')

  • is_singular($post_types)

    Widget is displayed only on detail page of property, agent, or agency.

    • is_singular('property')
    • is_singular('agency')
    • is_singular('agent')

  • is_page()

    Specify on which page you want to display a widget. You need to specify page ID in order to use this code.

    Example: is_page(15) Number 15 is page ID.

    Note: Find more about How to find your page ID

You can combine more condition tags in Widgfet Logic input field using ||, &&.
You can also use post types properties tags in Widget Logic. For example:
Check out more about Widget Logic and Conditional tags on their websites.

With Contact Form 7 you can create contact forms and add them into widget areas

Creating a contact form

  1. Go to Plugins > Installed Plugins
  2. Select Contact Form 7 and click Settings
  3. Click Add New on the top of the page
  4. Give a Title to newly created form
  5. Use HTML tags to create input fields. Or you can create our Contact Form 7 HTML Structure
  6. Fill the next fields for Mail, Messages etc. We have these settings in our theme listed bellow
  7. Scroll to top of the page
  8. Copy generated shortcode. In our theme it looks like this: [contact-form-7 id="28" title="Say Hello!"]
  9. Click Save

Realia Contact Form 7 settings

Contact Form 7 HTML Structure

<div class="control-group name">
  <div>
    <label class="control-label">
      Name
      <span class="form-required" title="This field is required.">
        *
      </span>
    </label>
  </div>
  <div class="controls">
    [text* your-name]
  </div>
  <!-- /.controls -->
</div>
<!-- /.control-group -->
<div class="control-group email">
  <div>
    <label class="control-label">
      Email
      <span class="form-required" title="This field is required.">
        *
      </span>
    </label>
  </div>
  <div class="controls">
    [email* your-email]
  </div>
  <!-- /.controls -->
</div>
<!-- /.control-group -->
<div class="control-group">
  <div>
    <label class="control-label">
      Message
      <span class="form-required" title="This field is required.">
        *
      </span>
    </label>
  </div>
  <div class="controls">
    [textarea your-message]
  </div>
  <!-- /.controls -->
</div>
<!-- /.control-group -->
<div class="form-actions">
  <input type="submit" class="btn btn-primary arrow-right" value="Send">
</div>
<!-- /.form-actions -->

You can drag & drop widgets into several areas. But not all widgets are suitable to every area.

Don't Miss This!

Note: There is a special widget area called Property Detail Sidebar. This area serves as primary sidebar for Property Detail pages. It provides better solution for placing widgets that are supposed to be only on property detail as this is the key feature of realia - as real estate theme and it reduces complicated widget logic codes that need to be used.

Property Detail sidebar is equivalent of Primary sidebar, but just for property detail page !

Realia comes with extended licence for PictoPro - Proffesional Vector Icons which you can use in this theme. Icon sets can be found in:

  • assets/libraries/pictopro/pictopro-normal
  • assets/libraries/pictopro/pictopro-outline
If you need to use them in your content, you can use <i> tag. Example: <i class="icon-normal-globe">
This code will display globe icon from the Normal set:

Full list of available icons can be found in index.html in desired icon set:

  • assets/libraries/pictopro/pictopro-normal/index.html
  • assets/libraries/pictopro/pictopro-outline/index.html

Translate the Theme to your language

If you want to translate the theme to other language (to German for this example) you have to edit some things:

  1. Open wp-config.php and edit: define(‘WPLANG’, ‘zh_DE’);
  2. Go into wp-content/themes/Realia/languages and replace Realia.mo and Realia.po to zh_DE.mo and zh_DE.po
  3. Download Poedit and translate .po file

You can learn more about translating WordPress here Installing WordPress in Your Language

Remember!

After you translate your pages you need to go into Settings – Permalinks and click on Save.

Translate usin POedit

  1. Download POedit for translating .po files
  2. Open your .po file
  3. Then go to File > Preferences > Parsers
  4. Click New and enter these settings
  5. Click OK
  6. Then find your desired text and translate it in Translation window
  7. After you have done your translation, click Save

Translate Admin Back-end

You can also translate admin back-end to your language

  1. Download .mo and .po file of your language
  2. Create Languages folder in wordpress\wp-content
  3. Place downloaded files into languages folder

Translate Strings using WPML

Some of the text can't be translated using POedit. You need to translate them via WPML String Translation.

  1. Navigate to WPML > String Translation
  2. In Search for: enter text you want to translate
  3. Click on translations on the right side of the text
  4. Translate it in your desired language
  5. Check the checkbox Translation is complite
  6. Click on Save
Important!

If you want to translate whole page into different language, you need to create new menu for that language and translate every property, agents etc.

Property Detail Edit

Property detail page is located in templates/single-property.twig. You can see that in this file we are including another templates which are located in aviators/plugins/properties/templates/properties/

Number of Properties on Home page

If you want to change the number of properties displayed on Home page (from 6 to 4 for example), you have to edit file page-homepage.php on line 9, where you can see the number specifing amount of posts on homepage.

How to Find out Property ID

When you are on the property detail in administration you can see the ID in URL.
Example: ?post=87&action=edit - 87 is property ID.

You can add your own icons into Realia. You will need prepared icon set and some CSS skills.

Creating Custom Icons

  1. Download this Icon set ZIP file
  2. Extract files into separated folders located in themes\realia\assets\img\markers
  3. Open your favourite image editor and open files types.png and markers.png
  4. Do the same for Retina @2x images, if you want to be displayed correctly on Retina devices
    Note: Retina images are in double resolution, so your prepared icons needs to be also bigger
  5. Now place your prepared icon to the center of the circle background of types.png and markers.png image
  6. Do the same for Retina @2x images
  7. Save these images as PNG into themes\realia\assets\img\markers and name it you want
    Important: Name these files clearly. You will use these names later in WP Admin

WP Admin - Creating Property Types

  1. Navigate to Properties > Property type
  2. On the left side you have Add New Property Type
  3. To the field Name enter name of property type.
  4. Now check the Slug of newly created property type, which is created automatically from the name
  5. Copy this Slug
  6. Click Add New Property Type

CSS - Adding Markers

  1. Open style.css file located in themes\realia
  2. Add this lines of code:
    1. .marker.SLUG .marker-inner {
    2. background-image: url('assets/img/markers/YOUR-ICON-NAME.png');
    3. }
  3. Do the same for Retina @2x device:
    1. @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    2. .marker.SLUG .marker-inner {
    3. background-image: url('assets/img/markers/YOUR-ICON-NAME.png');
    4. }
    5. }

FAQs

How to Change Cluster Sensitivity

When the properties are near to each other, the cluster will group them together and show the number of grouped proeprties. You can change the distance of from which the cluster will start to group the properties.

  1. Open file wp-content/themes/realia/aviators/plugins/properties/assets/js/aviators-map.js

  2. Find this piece of code (it should be on line 304):
    markerCluster = new MarkerClusterer(map, markers, {
    gridSize: 40,
    styles: [
    {
    height : 42,
    url : settings.transparentClusterImage,
    width : 42,
    textColor: 'transparent'
    }
    ]
    });
  3. gridSize: 40 - this number specifies the distance between markers.
  4. Change this number
  5. Save the document

Display Enquiry Form Only on Property Page

  1. Navigate to Appearance > Widgets
  2. Expand Aviators: Enquiry Form
  3. Place this code into Widget Logic field: is_singular(property)
  4. Click on Save

List Your Property gives me 404!

First of all, check if you have set Permalinks to Post Name. Read more about How to setup permalinks

Create "My Proeprties" Page

  1. Navigate to Pages > Add new
  2. As a title type My Properties
  3. Navigate to Page Attributes
  4. As a Template choose Submission Index
  5. Click Publish

Set newly created page for List Your Property page

  1. Navigate to Appearance > Customize
  2. Expand Header
  3. Place this link /my-properties/?action=add into Call To Action URL
  4. Click on Save and Close

Display Property Types in the Menu

As default, WordPress doesn't show Property types in the menu settings, so you need to enable it in order to put the property types to the menu.

  1. Navigate to Appearance > Menu
  2. Click Screen Options
  3. Check Property Types
  4. Now you can add property types to the menu

Help! I have totally messed layout in customize mode

You have probably no color variant selected, so compiler doesn't know what to compile

  1. Navigate to Appearance > Customize
  2. Expand General tab
  3. Select color Variant if you want to change it.
  4. Click Save

No change after editing the .twig template

You need to enable debugging which is off by default.

  1. Navigate to Settings > Templates
  2. Check the Enable Twig Debug
  3. Click Save

Where is the Revolution Slider?

You can find it here: aviators\libraries\plugins\revslider.zip

How can I change Carusel Properties background?

  1. Open style.css
  2. Add this code .carousel > .content { background-color: YOUR HEX COLOR; }
  3. And this code .carousel .caroufredsel_wrapper { background-color: YOUR HEX COLOR; }
  4. Save the document

"There are no defined custom post types for submission system"

By default installation submission system should be set to property. Did you use our xml import ?

However you can navigate in admin into Settings- > Submission System -> General and set the property type there

What are the sizes of images I need to upload?

Property sldier: 870x420px or 1740x840 Retina

Property image: 270x200px or 540x400 Retina