Documentation: Realty

Part I: Getting Started

Make sure you have the latest version of WordPress up and running. All information on how to install WordPress can be found here: http://codex.wordpress.org/Installing_WordPress

1.1 Installation

Download the theme using the links provided in the purchase confirmation email or go to your account page. Click “Purchases” and “View Details and Downloads”. You will find the following files:

• realty.zip (WordPress theme)
• realty-child.zip (Child theme)
• realty-demo-content.xml (Demo content)

Now you have to upload and activate the theme. There are two ways:

• via WordPress: Go to Appereance, click “Add New”. At the top of the page click “Upload”. Browse and select “realty.zip” than press “Install Now”. Once the theme has been uploaded you will see a “Theme installed successfully.” message. Now click “Activate”.
• via FTP: Open your FTP application and upload the unzipped “realty” folder to “wp-content/themes/”. Once uploaded, login to WordPress and go to Appearance > Themes and click the “Activate” button on the Realty screenshot.

1.2 Permalinks Settings

For a seamless experience go to Settings > Permalinks, select “post name” and click “Save Changes”.

1.3 Localization

Default language is english. Realty has already been translated into german. To change the theme language open the core file wp-config.php and update the following line from:

define('WPLANG', '');

to

define('WPLANG', 'de_DE');

This will set your language to german. To add another language instead of “de_DE” you insert the language code of your specific language. Format: language code + “_” + country code.

Depending on your server setup, and in case you get a “PHP Memory Limit” error message, you might want increase your PHP memory limit. Therefor simply add the following line to your wp-config.php file:

define('WP_MEMORY_LIMIT', '64M');

This will increase your PHP memory limit to 64MB.

1.4 Install & Activate Recommended / Required Plugins

After activating the theme you will see the following notfication in your WordPress admin panel:

Click “Begin installing plugins”. On the next page select all plugins, choose Bulk Action “Install” and click “Apply” to install the recommended plugins.

In case you already dismissed this notification, go to Appearance > Install Plugins. Hover over the plugins’ name and click “Install”.

Now click “Return to Required Plugins Installer”, select all plugins, choose Bulk Action “Activate” and click “Apply” to activate the recommended plugins.

Plugin: Bootstrap 3 Shortcodes

As this theme is built on the popular Bootstrap 3 framework you can easily add all its elements using this great free plugin. Above the text editor of every post or page you will see the following icon:

A click on it opens a modal that lets you insert all kinds of Bootstrap elements, such as grids, alert, toggles etc.

To learn more about Bootstrap 3 visit: http://getbootstrap.com/

Plugin: Contact Form 7

After you have installed and activated Contact Form 7 plugin you will see a new menu item named Contact on the left-hand side of your WordPress admin area. This plugin allows you to add contact forms anywhere on your site. Each form has its own shortcode, which you simply copy & paste wherever you need it.

This is the code for the theme demo contact form:

<div class="row">
<div class="form-group col-sm-6">
[text* your-name class:form-control id:name placeholder "Name"]
[email* your-email class:form-control id:email placeholder "Email"]
[text your-subject class:form-control id:subject placeholder "Subject"]
</div>
<div class="form-group col-sm-6">
[textarea your-message class:form-control id:message placeholder "Message"]
</div>
<div class="form-group col-sm-12">
[quiz captcha "7even + 5ive = |12"]
[submit class:btn class:btn-primary "Send the message"]
</div>
</div>

Plugin: Slim Jetpack

We use the “Tiled Galleries” and “Carousel” of this plugin to enhance images and galleries (see: http://demo.themetrail.com/realty/featured-image/), but it has plenty of additional features, that you can play with.

Go to Settings > Slim Jetpack to access the plugins’ settings. Activate “Tiled Galleries” and “Carousel”.

Under Settings > Media, “Image Gallery Carousel” you can customize the gallery settings, like we did:

Optional Plugin: Latest Tweets Widget

If you want to show your latest tweets we recommend using the following plugin: http://wordpress.org/extend/plugins/latest-tweets-widget/. Go to Plugins > Add New and type in “Latest Tweets Widget”. Its the first plugin in the list by Tim Whitlock.

Make sure to enter your Twitter API keys under Settings > Twitter API. There are plenty of tutorials online that show you how to get those keys.

1.5 Import Demo Content (optional)

This step is optional, but highly recommended, as it will help you understand how all the parts of the theme play together. You can build upon the demo content or simply copy-and-paste what what you need, and delete the demo files.

Important: The demo content is using shortcodes. Make sure you have installed and activated all recommended plugins as described above.

Go to Tools > Import. Click on “WordPress”. If you haven’t already installed the importer you will see a popup. Click on “Install Now”. After a few seconds the installation is done. Click on “Activate Plugin & Run Importer”.

To upload the demo content browse and select the demo XML file called “realty-demo-content.xml”. Click on “Upload File and Import”.

You can now either 1. import the author from the demo content, 2. create a new user or 3. assign posts to an existing user. To keep it simple use option 3 and assign the imported posts to an existing user.

To import the demo images check “Download and Import File attachments”. In this case the download will take some time.

1.6 Setup Front Page & Blog

If you have done the import of the demo content you can skip the “Creating Front Page” and “Creating Blog Page” part and go straight to Assigning Front Page (and Blog Page).

Creating the Front Page

Go to Pages > Add New. Give it a title of “Frontpage” or whatever you find appropriate.

On the right hand side under Page Attributes > Template you can choose between different page templates. For the frontpage we recommend to use either:

• Default Template
• Home – Slideshow
• Home – Property Map
• Intro

When selecting the “Intro” template (Demo Intro Page Example) you’ll see a new option named “Intro Fullscreen Background Slideshow Images” under “Page Settings”. Click “Select or Upload Images” to add images to your fullscreen background slideshow of your intro page.

You can add any content to your frontpage. Make sure to have a look at the Real Estate Shortcodes that allow you to add predefined complex content to your site with a single click.

Than hit “Publish”.

Creating the Blog Page

Go to Pages > Add New. Give this new page a title of “Blog” or whatever you find appropriate.

Use the “Default Template” under “Page Attributes”.

On the right-hand side you can set a “Featured Image” for your blog, that shows as a background image of the top banner, together with the blog title.

Than hit “Publish”. You can, but don’t have to add any content here.

Assigning Front Page (and Blog Page)

Go to Settings > Reading and select “A static page (select below)”, then assign the pages you have created in the previous step. For “Front page” select “Frontpage”, and for “Posts page” select “Blog”. Than hit “Save Changes”.

Note: Your “Blog” has its own widgetized sidebar.

1.7 Contact Page

Go to Page > Add New and select page template “Contact” under Page Attributes > Template. Insert your Contact Form 7 shortcode, and hit “Publish”.

Go to Appearance > Theme Options > Contact to customize the Contact Page Map.

Note: Page Template “Contact” has its own widgetized sidebar.

1.8 Property Search Page

Go to Page > Add New and select page template “Property Search” under Page Attributes > Template. Adding content is optional. Hit “Publish”. This page will be used to show your property search results.

1.9 Create Menu

Go to Appearance > Menus.

Give your menu a name, such as “Primary” and click “Create Menu”. If you have imported the demo content you’ll see an existing menu.

Scroll down to “Menu Settings”, check theme location “Main Menu”, and click “Save Menu”.

Footer Menu

The process of creating the footer menu is exactly the same as for the main menu. First we create a new menu, name it “Footer”, add your links to it, and assign the theme location “Footer Menu”.

That’s all there is about the installation and initial setup process. Part II covers how to use and customize the theme in more detail.

Part II: Usage & Customization

Pro Tip: Realty comes with a Child Theme. Use it, if you want to make any changes to the core theme files, as changes on the theme itself will be overridden by future updates.

2.1 Real Estate Shortcodes

This theme comes with a couple of essential real estate shortcodes. Overview: http://demo.themetrail.com/realty/shortcodes/

You will find a dropdown menu named “Real Estate Shortcodes” in the menu bar of your text editor:

2.2 Contact Form Setup

As our contact form of choice we are using the popular Contact Form 7 WordPress plugin. Before reading on make sure that you have installed and activated it, as described under 1.3 Install & Activate Recommended / Required Plugins

Once activated go to Contact. You will see a default contact form named Contact form 1.

If you have imported the demo content there will be two contact forms named “Contact – 1 Column” (used for the text widget “contact”) and “Contact – 2 Columns” (used for the contact page).

IMPORTANT: Under Mail you have to replace the recipient’s email address with your own. You can also customize the message the recipient gets and a couple of other options. Under Messages you can customize the notifications, such as errors and success, that the person submitting the contact form will see.

Contact Form Captcha

Contact Form 7 supports two types of captchas, to protect you from spam mails being submitted through your contact form.

1. Quiz Captcha

This is what we use by default. The code for it is:

[quiz captcha "7even + 5ive =|12"]

You can create your very own quiz by creating a question + answer. The default quiz is asking for the result of 7 + 5, which is 12. To learn more about Quiz Captchas go to: http://contactform7.com/quiz/

2. Really Simple CAPTCHA

You are probably familiar with image captchas from many websites you are visiting every day. But not everyone likes to answer them plus they require graphic libraries installed on your server. That’s why by default we include the Quiz Captcha. To learn more about the Really Simple CAPTCHA go to: http://contactform7.com/captcha/

Than you want to use it instead of the Quiz Captcha replace the quiz shortcode with this:

[captchac captcha] [captchar captcha]

Also install & activate the Really Simple CAPTCHA plugin for it to work.

How to add a contact form to a post or page

To actually use the contact on your site form we have to copy the custom shortcode, which you will see at the very top of your contact form page. In our case the contact form shortcode is:

[contact-form-7 id="113" title="Contact - 2 Columns"]

As the ID is a random number you will probably see a different one. Copy this shortcode and paste it into the text editor of your contact page.

That’s it. You can create as many contact forms as you need and paste them wherever you want.

2.3 Page Settings

Underneath the text editor you can turn the sidebar on/off on a per-page-basis.

Setting a featured image as we did on the blog index page, will add a top banner to this page, that shows the page title.

Part III: Properties

This is the core of your real estate theme, make sure to study it from beginning to end to really understand how the theme handles property creation and customization.

Property Theme Options

Go to Appearance > Theme Options > Properties to customize the overall property settings.

How To Add A New Property

Go to Properties > Add New to add a new property.

A property has the following attributes in common:

• Property Location (e.g. London, Paris etc.)
• Property Status (e.g. For Rent, For Sale etc.)
• Property Type (e.g. House, Apartment etc.)
• Property Features (e.g. Balcony, Pool etc.)

These are being used for the property search and to list all properties that have a certain attribute assigned, e.g. all properties with the location London, or the status Rent.

Property Content

Use the text editor to add all necessary property content.

Featured Image

Make sure to set a Featured Image for every property, otherwise a placeholder image will be shown.

Property Settings

Underneath the text editor you will find the property settings.

Property Layout	Choose between Full Width and Boxed layout. Default is the Theme Option Setting under Appearance > Theme Options > Properties
Sold	If checked property status will be set to “Sold”.
Featured Property	If checked a star icon will be shown in the property listing. Under Appearance > Theme Options > Home Slideshow you can also select the slideshow type “Featured Properties”, that displays all featured properties.
Property Images	If you have more than one image of a single property, select, insert and order them via Drag & Drop.
Property ID	Optional. Can be used for the property search to find a certain property.
Address	Insert the property address.
Google Maps	Once you have entered the property address, click “Find Address”. If necessary adjust the map marker via Drag & Drop.
Available From	Select the date when the property will be available.
Property Price	Enter the property price.
Property Price Text	Text that appears after property price (e.g. “per month”)
Size	Enter the property size.
Size Unit	Text that appears after property size (e.g. “sq ft”)
Rooms	Enter the number of rooms.
Bedrooms	Enter the number of bedrooms.
Bathrooms	Enter the number of bathrooms.
Garages	Enter the number of gerages.
Agent	Optional. Assign an agent to the property. Agent details & contact form will be shown underneath property content. Can be turned on/off via Appearance > Theme Options > Property.

Note: Post Type “Property” has its own widgetized sidebar.

Part IV: Agents

Go to Agents > Add New to create a new agent. Set a Featured Image and use the text editor to add agent content.

Underneath the text editor are the “Agent Contact Details”. They are being used in various places throughout the theme. Please provide as many details as you can, to make it as easy as possible for your potential client to get in touch with you.

Note: Post Type “Agent” has its own widgetized sidebar.

Part V: Testimonials

Go to Testimonials > Add New to create a new testimonial. Set a Featured Image, if you have a photo of the person, that you are going to quote, and use the testimonial textarea to add testimonial content.

Part VI: Widgets

This theme provides the following widgetized areas:

• Blog Sidebar
• Property Sidebar
• Agent Sidebar
• Page Sidebar
• Contact Sidebar
• Footer Column 1 Sidebar
• Footer Column 2 Sidebar
• Footer Column 3 Sidebar

Besides the default WordPress widgets Realty offers the following real estate specific widgets:

• Realty – Featured Agent
• Realty – Featured Properties
• Realty – Property Search
• Realty – Testimonials
• Realty – Latest Posts

Go to Appearance > Widgets, than Drag & Drop the widget(s) from the left-hand side into the appropriate widget area on the right-hand side. Once a widget has been placed into a widget area you can expand its options by clicking the little arrow next to the widget title.

Sidebars can be toggled on/off on a per-page-basis. To do so simply scroll down when editing a page, and set the checkbox “Hide Sidebar” under “Page Settings” at the very bottom of the page.

Part VII: Theme Options

Realty comes with its own Theme Options Panel, that allows you to customize it to your very own needs without touching a single line of code. All Theme Options are located under Appearance > Theme Options. To change an option simply browse the Theme Options Tabs on the left-hand side, make your changes and click “Save Changes”.

Import / Export Options

Always backup your options, before you apply big changes.

How to Update

The “How do I update my theme?” section on our Frequently Asked Questions page explains how to enable 1-Click theme updates straight from your WordPress dashboard.

1-Click updates are ONLY available to themetrail.com customers.

If you have not purchased this theme from themetrail.com, download the purchased files and upload the ZIP file named “realty.zip” via your WordPress Dashboard, or unzip it and upload the folder “realty” via FTP.

Changelog

Credits

Images

• http://unsplash.com
• http://picjumbo.com