Flatroom Documentation

######
Contents

More…

revision #1 dated 30.01.2014

Responsive Real Estate Theme

User Guide
Support
Do you need support? Just click!
Folow us on Behance
Folow us on Envato
Folow us on Twitter
Folow us on Facebook

## Introduction

Flatroom is a clean and simple theme just waiting for you to customize it. It is a Real Estate Agency theme, but at the same time it’s not stuck as a one trick pony.

This tutorial gives you a brief overview of the general WordPress setup.

Please do not forget to rate "Flatroom" on ThemeForest. This can be done in Downloads area. Just select "Flatroom" in the Download list and rate it. We really appreciate your feedback and will be grateful for your opinion.

Besides, we will be happy to meet you in social networks and on websites.

## Getting Started

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the Installing WordPress. Also, you can find useful WordPress Codex documentation.

### Installation

#### Upload via FTP

Extract theme file to a directory on your computer. It contains a file named flatroom.zip. Open this archive and upload the flatroom directory to your server via FTP to the WP_ROOT/wp-content/themes directory, where the WP_ROOT is the path to the root directory of your Wordpress installation.

#### Upload via WordPress admin

Go to your Wordpress admin, and in the Appearance panel, choose Add New Themes. Click Add new. Upload the flatroom.zip file. If you have got a “missing stylesheet” issue then you have uploaded the wrong file.

### Activation

Once you have uploaded the theme, activate your theme in Appearance → Themes. On how to use themes please see the Using Themes Article.

You may import provided “dump.xml” to set up your site like the demo.

### Plugins Installation

#### Itembridge Realtor

## Creating Pages

To create informational pages you should go to the tab Pages. Here we see two pages (Login and Register). They are created automatically when you activate the theme. The content of these pages can be edited. They replace the standard Wordpress login and register pages.

During the creation of a new informational page, you can use one of the templates:

- Default Template – a standart page without sidebars
- Page Left Sidebar – a page with a left sidebar
- Page Right Sidebar – a page with a right sidebar
- Page Contact Us – a contact information page
- Page FAQ – a page that displays the publication of FAQ
- Page Login – a login page
- Page Register – a registration page

You can insert shortcodes on any page, their list and instructions can be found in chapter Shortcodes.

On the pages "Left Sidebar" and "Right Sidebar" we derive right or left sidebars. In the sidebar you can insert widgets (see Chapter Widgets).

On the page "Contact Us" we can add contact information (phone, email, address), also we can add a feedback form and a map. Telephone, email and address can be changed here: Appearance > Customize > Footer Settings. To show or hide the form, add your email address, which will be receiving letters from customers, you need to go here: Appearance> Customize> Contact Us Settings.To insert the map, you have to add a Custom Field with a name "map" and insert the link code of the map into the value field.

## Demo Content

To add a Demo content you need to install WordPress importer plugin. Follow to Tools > Import

And choose WordPress.

Heads up! Important: you should have "777" access settings for the wp-content folder before this plugin intallation. Otherwise your demo content won't be installed.

Next step is to upload the dumy_data.xml file with the demo content (you'll find it in the main archive).

Heads up! Don't close this browser tab until the installation is finished. Be patient - it may take few minutes.

Once you have selected the file and clicked the button "Import", in a new window choose the user from whom the content will be posted and click on the checkbox "Download and import file attachments"

## Theme Post Types

The theme allows to create additional types of content such as:

- FAQ
- Features
- Team
- Pricing

## Team Posts

Example of creating a team page Team Page

First of all, you have to add your team members under the Team → Add New admin page. There you should set Title to the team member name, Content field with the person info, as in the following example :

    						Has great technical background, design sensibility, strong user experiences.

You should also set Featured Image to persons photo and add some Social Links. For best responsiveness it’s recommended maximum count of 5.

## Pricing Posts

Example of creating a pricing table Pricing Tables

To add a new package you should go to Pricing -> Add New Pricing Item, add a new offer, type its name. Go to the General options panel and enter the link to the offer. If necessary, put a check mark on Best Offer. Type the price and currency in the Price panel. You can add the options that are included or excluded in the offer in the Options panel. You can also create several types of offers, e.g. offers with a discount for buying or renting a house.

## Features Posts

Example of creating features Features Page

To add a new note, you must enter a title, short description and select the icon from the list (Single Icon).

## Faq Posts

Example of FAQ FAQ Page

To add a new element of FAQ you should go to FAQ -> Add New FAQ Item, fill in the title (the question) and the content field (answer on it).

Also you can order them using the option "Order" in Attributes settings.

## Theme Pages

## Home

Home page is created, when you activate the theme.

To make this page your "Home Page", you need to go Settings -> Reading and set these options: Front page displays option into Static Page, Front page: Home.

The settings of the Home page you'll find in Customize settings and IBR plugin settings.

## About Us

To create about page, you have to create a new page under the Pages → Add New admin menu item and assign the title of the page to “About Us”. Then add it to Menu.

Content for example:

    Flat Room Real Estate Agency provides home sellers and buyers with an innovative real estate solution. All our agents have years of experience in the areas they serve, allowing you to save thousands, without compromising on service. By using the efficiencies of the Internet, we have streamlined the real estate process and are able to pass significant savings on to our clients.

    We are  building a wealth of experience and knowledge in the high-value, luxury property market and have become the solid property resource you can rely on selling fine homes. Our agents will always provide you with honest, carefully considered advice. We will ensure you are in the best possible position to make clear decisions. Your success is our principal driver. Luxury real estate is our passion and it demands our focus. We strive to provide a high level of personalised service, whether you are a vendor or a potential purchaser.

    [link_offers][one_link align="left" title="For sale:" count="9 250" link="Go to the list" link_url="#"][separator][one_link size="big" title="For sale:" count="15 250" link="Go to the list" link_url="#"][separator type="right"][one_link title="For sale:" count="6 120" link="Go to the list" link_url="#"][/link_offers]
    We are a dedicated team of truly passionate, property professionals who understand our clients' needs and wants. When making property decisions that impact your family now and in the future, you need a Premium property partner. We understand that your home is an important part of your life, it houses your family, it's where memories are made and it provides for your future.

    [content_box class="col-1"][information title="More then" count="1 500" link="Go to the  list ›" link_url="#" more_text="qualified agents" img=''][information title="More then" count="3 700" link="Subscribe to our newsletter ›" link_url="#" more_text="active subscribers" img=''][/content_box][chart data="23-May-08: 251; 20-Jun-08: 255; 25-Jul-08: 265; 22-Aug-08: 250; 26-Sep-08: 300; 24-Oct-08: 340; 21-Nov-08: 380; 26-Dec-08: 400; 23-Jan-09: 410; 20-Feb-09: 390; 20-Mar-09: 450; 24-Apr-09: 500" title="The quantity of transactions on our site" class="col-2" height="279px" xtitle="Month" ytitle="Sales / Rents" linecolor="#41a3e1"]

    [team title="Our Team"][features id="faq-short" title="Why choose us?"]

## Pricing

To add a Pricing page you need to add a new item under the Pages -> Add New, and insert into content field shortcode.

    [pricing size="big" count="3" type="big" title="Big"]
    [pricing size="small" count="4" type="small" title="Small"]

Create Pricing Item

This theme supports two types of pricing output:

## Contact Us

To add a Contacts Us page you need to add a new item under the Pages → Add New.

Than you have to choose the Template of the page "Page Contact Us" and in Custom Fields add a new field "map" with the value iframe on the Google Maps, for example:

The settings of this page are located here Appearance>Customize

## FAQ

To add a FAQ page you need to add a new item under the Pages -> Add New.

Than, you have to choose the Template of the page "Page FAQ"

Create FAQ Item

## Widgets

The control of the widgets is performed here: Appearance > Widgets

There are four fields of the widgets output:

1. Pages Widget Area – widgets that appear on the pages. If there are no widgets in this area, the widgets from Main Widget Area will be displayed on the page.
2. Categories / Post Widget Area – widgets that are displayed in categories and entries. If there are no widgets in this area, the widgets from Main Widget Area will be displayed on the page.
3. Footer Widget Area Widgets – widgets that are displayed in the footer of the site.
4. Main Widget Area

All the standard widgets are displayed correctly in all areas. Also, there is an additional theme widget "Faq" which allows to withdraw publication FAQ (parameter "Number of posts to show" allows you to adjust the amount of publications)

## Shortcodes

- [row][col1] ... [/col1][/row]
- [social_box][social][/social_box]
- [banner]
- [content_box][information][/content_box]
- [link_offers][one_link][separator][/link_offers]
- [posts]
- [chart]
- [faq]
- [features]
- [pricing]
- [team]

One or more of the proposed shortcodes can be inserted in the content of any page or post.

### Creating a column

`[row][col1] ... [/col1][/row]` – 1 column

`[row][col2] ... [/col2][col2] ... [/col2][/row]` – 2 columns

`[row][col3] ... [/col3][col3] ... [/col3][col3] ... [/col3][/row]` – 3 columns

`[row][col4] ... [/col4][col4] ... [/col4][col4] ... [/col4][col4] ... [/col4][/row]` – 4 columns

### Social Icons

`[social_box][social][/social_box]`

This shortcode has the following parameters:

type_icon – specifies the type of the icon. You can see all possible types of icons here: Social icons

`[social_box][social type_icon="twitter"][/social_box]`

href – a reference to the icon

`[social_box][social type_icon="icon-twitter" href="https://www.google.com.ua/"][/social_box]`

target – takes the following values:

- _blank – loads the page in a new browser window;
- _self – loads the page in a current window;
- _parent – loads the page in a frame-parent;
- _top – cancels all frames and loads the page in a full browser window.

`[social_box][social type_icon="icon-twitter" href="https://www.google.com.ua/" target="_blank"][/social_box]`

### Banner

`[banner]`

This shortcode has the following parameters:

title – The title

`[banner title="Banner Example"]`

content – the content of the banner

`[banner title="Title" content="Here you can write some text"]`

link – the button title

`[banner title="Title" content="Content" link="Learn More"]`

link_url – the reference to which the button will lead

`[banner title="Title" content="Content" link="Button Title" link_url="http://twitter.com/ItemBridge"]`

### Informational block

`[content_box][information][/content_box]`

"content_box" has the following parameters:

class – can acquire values "​​col-1" (the block will have the width 50% and will align on the left side) and "col-2" ( the block will have the width 50% and will align on the right side)

`[content_box class="col-1"][information][/content_box]`

title – the title of the block

`[content_box class="col-1" title="Title"][information][/content_box]`

link – the title of the reference (is to the right of the main header)

`[content_box class="col-1" title="Title" link="Title Link"][information][/content_box]`

link_url – the reference to which the link will lead

`[content_box class="col-1" title="Title" link="Title Link" link_url="link"][information][/content_box]`

"information" has the following parameters:

img – the image. You can add an image manually typing - =img src="the_link_to_the_image">, or you can use the Wordpress editor (click "Add Media")

Note: The content of the "img" must be in single quotes

right – img='...'

wrong – img="..."

`[information img='<img src="Your Image" alt="">']`

title – the title of the block

`[information img='<img src="Your Image" alt="" title="Title"]`

count – the numeric value

`[information img='<img src="Your Image" alt="" title="Title" count="102"]`

link – the title of the reference

`[information link="Link Title" title="Title" count="102"]`

link_url – the reference to which the link will lead

`[information link_url="link" title="Title" count="102"]`

more_text – short description

`[information more_text="See more" count="102"]`

### Statistics

`[link_offers][one_link][separator][/link_offers]`

"link_offers" has the following parameters:

title – The title

`[link_offers title="Title"][one_link][separator][/link_offers]`

link – the title of the reference

`[link_offers link="Link Title"][one_link][separator][/link_offers]`

link_url – the reference to which the link will lead

`[link_offers link_url="link"][one_link][separator][/link_offers]`

"one_link" has the following parameters:

size – determines the size of the block, that can take the value – big

`[one_link size="big"]`

align – determines the alignment of the content, it can take the value ​​– left

`[one_link size="big" align="left"]`

title – The title

`[one_link size="big" title="Title"]`

count – the numeric value

`[one_link size="big" count="10"]`

link – determines the alignment of the content, it can take the value ​​– left

`[one_link size="big" link="Link Title"]`

link_url – the reference to which the link will lead

`[one_link size="big" link_url="link"]`

"separator" has the following parameters:

type – determines the direction of the arrow, it can take the value ​– ​right

`[separator type="right"]`

General view:

`[link_offers title="Title" link="Link Title" link_url="link"][one_link align="left" title="Title" count="9250" link="Link Title" link_url="link"][separator][one_link size="big" title="Title" count="15250" link="Link Title" link_url="link"][separator type="right"][one_link title="Title" count="6120" link="Link Title" link_url= "link"][/link_offers]`

### Latest posts

`[posts]`

This shortcode has the following parameters:

title – The title

`[posts title="Title"]`

link – the title of the reference (located to the right of the main header)

`[posts title="Title" link="Link Title"]`

link_url – the reference to which the link will lead

`[posts title="Title" link="Button Title" link_url="link"]`

class – can acquire values "​​col-1" (the block will have the width 50% and will align on the left side) and "col-2" ( the block will have the width 50% and will align on the right side)

`[posts title="Title" class="col-1"]`

count – determines the amount of posts

`[posts title="Title" count="11"]`

orderby – sorting in certain fields, it can have values:

1. 'author' – sorting by the ID of the authors.
2. 'category' – sorting by the ID of the category.
3. 'content' – sorting by the content.
4. 'date' – sorting by the date of the creation.
5. 'ID' – sorting by the ID of the post.
6. 'modified' – sorting by the date of the editing.
7. 'name' – sorting by the alternative name (slug).
8. 'rand' – random sorting.
9. 'status' – sorting by the status (Draft, Published and etc.)
10. 'title' – sorting by the title.
11. 'password' – sorting by the password.

`[posts title="Title" count="11"]`

order – indicates in what direction the parameter orderby will sort the posts; it has 2 values: ASC – in the order (from smaller to larger, in an alphabetical order); DESC – in the reverse order (from larger to smaller).

`[posts title="Title" link="Link Title" link_url="link" class="col-1" count="5" orderby="'title'" order="DESC"]`

### Graph (diagram)

`[chart]`

This shortcode has the following parameters:

data – the points on the graph. Is inserted by ";" in this format - 23-May-08: 251 (23-May-08 – the value on the X axis , 251 – the value on the Y axis)

`[chart data="23-May-08: 251, 20-Jun-08: 255"]`

title – the title

`[chart data="23-May-08: 251, 20-Jun-08 255" title="Title"]`

height – the height of the graph

`[chart data="23-May-08: 251, 20-Jun-08 255" title="Title" height="350"]`

xtitle – X axis label

`[chart data="23-May-08: 251, 20-Jun-08 255" title="Title" height="350" xtitle="Title X"]`

ytitle – Y axis label

`[chart data="23-May-08: 251, 20-Jun-08 255" title="Title" height="350" xtitle="Title X"]`

linecolor – the color of the line

`[chart data="23-May-08: 251, 20-Jun-08 255" title="Title" height="350" xtitle="Title X" ytitle="Title Y" linecolor="# 41a3e1"]`

### FAQ

`[faq]`

This shortcode has the following parameters:

title – the title

`[faq title="Title"]`

count – the amount of posts

`[faq title="Title" count="6"]`

id – if the page has more than 1 FAQ block, you should specify a unique "id" for each block

`[faq title="Title" id="faq_id"]`

### Features

`[features]`

Displays posts from Appearance > Features section.

This shortcode has the following parameters:

title – the title

`[features title="Title"]`

type – the type of the output; can take a value '​​second'

`[features title="Title" type="second"]`

### Pricing

`[pricing]`

Displays posts from Appearance > Pricing section.

This shortcode has the following parameters:

title – the title

`[pricing title="Title"]`

size – the size of the posts; can accept parameters 'big' or 'small' (default is 'small')

`[pricing title="Title" size="small"]`

count – the amount of posts

`[pricing title="Title" count="10"]`

type – allows you to display certain types of posts

`[pricing title="Title" type="Your Type"]`

### Team

`[team]`

Displays employees: Appearance > Team

This shortcode has the following parameters:

title – the title

`[team title="Title"]`

## Menu

To create or edit the menu, you should go here: Appearance > Menus

Having created the menu, you can choose one of two areas of output – Main Menu or Footer Menu

Main Menu – the menu is in the header of the site

Footer Menu – the menu is in the footer of the site

## Settings (Appearance > Customize)

### General Settings

Show Main menu – shows or hides the menu in the header

Site Styles – one of the design options: Light and Dark

Dark Background Image – background image, in "Dark" variant

Overlay Opacity – transparency of the "Dark" background

Category / Single Post Sidebar – display the sidebar in categories and posts

Login Page – login page (selected automatically)

Register Page – registration page (selected automatically)

### Header Settings

Phone – phone number in the header

Email – email address in the header

Logo – logo uploading

### Contact Us Settings

Show the form > Contact Us – shows or hides the form Contact Us

Contact form submition e-mail – email on which letters will come from the form

### Site Title & Tagline

Site Title – the title of the site

Tagline – the tagline of the site

### Color

Here you can choose the color of the theme

### Static Front Page

## Social icons in the footer (Appearance > Flat Room)

From the drop-down list we select required icon, in a text field we enter the link and click the button 'Add'. Having added all required icons we can delete or swap them.

## Theme update

Note that if you want to run update then you have to update both Flatroom theme and the Itembridge Realtor plugin.

### BackUp

To be sure, that your content will be in safe, we recommend you to backup all your content from the site.

To do this you should follow these steps:

1. Open the Dashboard (Admin panel) of your site.

2. Go to Tools > Export

3. Than choose what to export (in our case, it is ‘All content”) and press “Download Export File” button.

4. Save the .xml file.

Your backup file is ready. After that you can upgrade your theme.

### Upgrading the theme

You can upgrade the theme with FTP if you prefer to replace the files manually. FTP method is also great when you can't login to your dashboard. For example, if the active theme breaks your WordPress site, you can resolve the issue by connecting to your FTP server and deleting/renaming the active theme folder to something else. WordPress will then reset the active theme to the default theme.

To upgrade the plugin with FTP:

1. Login to Members Board on the Themeforest to download the latest theme .zip version.

2. Extract the latest theme .zip on your local computer

3. Connect to your server via FTP

4. Go to "wp-content > themes" folder

5. Before you replace any files or folder on your server, we recommend to download a copy of the current theme folder to your local drive for backup

You can use Filezilla FTP manager to upgrade the theme.

### Restoring the BackUp content

In that case if your content have partially or fully disappeared, we have backuped our content (see Chapter BackUp).

To restore your content you have to import your saved .xml file. To do this you should go these steps:

1. Open the Dashboard (Admin panel) of your site.

2. Go to Tools > Import

3. And choose WordPress Importer

Important: you should have "777" access settings for the wp-content/uploads folder before this plugin installation. Otherwise your backup content won't be installed.

If you do this the first time, firstly you should install it.

After installing the plugin, you have to choose the file you have saved before (in our case the BackUp .xml file) and push the button “Upload file and import.

Than choose the author of that BackUp content (you can create a new user, or assign all post to an existing user, e.g. admin, agent_1, agent_2).

## WPML

WPML (WordPress MultiLanguage) is a plugin for WordPress that lets authors write content in different languages and translate content.

This theme provides translations into German, Spanish and French. Translations files are located in the archive of the theme in the folder lang.

To install and manage the WPML plugin on our theme you should follow these steps:

1. Download the WPML plugin from the official site wpml.org (if you are using it for the first time)
2. Install the plugin. You may use two variants of installing:
   1. via FTP (unzip the files of the plugin on your computer, and add the plugin to the folder WP-ROOT/wp-content/plugins.
   2. via WordPress Dashboard (go to Plugins > Install New, choose the .zip file and press upload button)

After you have installed the plugin, you will be able to see a new menu category in your WordPress Dashboard.

#### Adding/removing languages

Before importing the translations to our theme and plugin, firstly you should choose, what languages you need. In our case, we may add german, french and spanish languages.

To do this you go to WPML > Languages > Site Languages and press the button Add/Remove Languages. There you choose the languages you needed.

Also, you can change the default language of your site, simply pressing on the button Change default language and choosing the needed one.

#### Importing the translations

Before importing the translations, you should go to WPML > Theme and Plugins Localization in “Select how to localize the theme” choose the option ‘Translate by WPML’ and click ‘Save’.

To import the language translations you should go to WPML > String Translation and find the menu Import/Export .po.

In our case we have 3 different .po files in the folder flatroom/langs.

To import the translation files, follow these steps:

1. Press “Choose the file” Button” and find the .po file in the folder flatroom/langs.

2. Put the tick for the option “Also create translations according to the .po file and choose the language of the translation.

3. Than Select what the string are for, in our case, it is for ‘theme flatroom’.

Also, do the same steps for another two languages.

Note: If in the field “Select what the strings are for’ you can’t find the option ‘theme flatroom’ or ‘ibr plugin’, you have to click on ‘new’ and type theme flatroom or plugin ibr.

Than, in a new window, click on the checkbox ‘String’ to select all stings and press the button “Add selected strings”.

#### Enable the language switcher

To enable our own language switcher you have to go to WPML > Languages > Language Switcher Option.

In ‘Choose where to display the language switcher widget’, you have to choose “--none--” option.

Roll a little bit down, and in ‘Language Switcher Style’ choose the option “List of Languages: Horizontal”

After that press the “Save” Button.

More info about the WPML plugin you can find on their official site.

Than, in a new window, click on the checkbox ‘String’ to select all stings and press the button “Add selected strings”.

## Plugins

In this chapter we recommend you and describe some of WordPress plugins, that you can find useful for your website. To be familiar with installing WordPress plugins you should read Managing Plugins article.

### Regenerate Thumbnails

Regenerate Thumbnails allows you to regenerate the thumbnails for your image attachments. This is very handy if you've changed any of your thumbnail dimensions (via Settings → Media) after previously uploading images or have changed to a theme with different featured post image dimensions. You can either regenerate the thumbnails for all image uploads, individual image uploads, or specific multiple image uploads.
http://wordpress.org/extend/plugins/regenerate-thumbnails/