Getting Started

To get started with Estatement you'll have to install the theme first. You will need the Installable WordPress file only which you can grab from the Themeforest download page. The other option you can select is the All files & documentation. You can go to your download page now to follow along (you may need to log in).

If you download All files & documentation and extract the archive to your computer you will see that it includes the installable file and a bunch of other things. By itself it can not be installed as a WordPress theme.

Installing The Theme

Once you have the installable WordPress file (it will be a zip archive) you can install that directly. Go to the WordPress admin and navigate to the Appearance section. Once there, click the Add New button near the top of the page and click Upload on the following page. Browse for the theme, select the installable file and click Install Now

Allow some time for the theme to upload. Once instaled you will see the option to activate the theme, press the activate button to activate the theme on your site.

Installing Sample Content

Once everything is set up you can add the sample content. You can find the sample content in the all files & documentation package or you can download the sample content.

To install the sample content you'll need to use the WordPress import tool. This can be found in Tools ▸ Import. You'll need to click the WordPress option, the bottom most one in the table. If you haven't used the importer yet, you'll need to install it. Just follow the prompts and when installed click Activate Plugin & Run Importer.

In the importer, select the downloaded estatement-sample-content.xml file and click Upload file and import. On the next screen you should see a list of authors to import. You can leave this as is (it will create new users for you), or you can use the select box to assign all items from the indicated author to one of your existing ones.

The most important bit is to make sure the Download and import file attachments checkbox is checked. This will make sure that all images are imported into your site as well. Once checked, click the Submit button.

Setting Up The Sample Content

Once all the content has been imported you'll still need to do some work to make sure your menus and widgets are created and your home page is set. To set up your widgets head on over to Appearance ▸ Widgets and drag-and-drop widgets into the sidebars. To set up your menus go to Appearance ▸ Menus and select pages or custom URLs to place into a menu. Make sure the menu is set to be shown in a menu slot. To set your home page go to Settings ▸ Reading and click the A static page radio button, then select a page for your front page. If you would like your site to be exactly like ours, choose the page named Home.

Page Templates

Page tempaltes allow you to add functionality such as maps, searches, live filters and more. To creare a page using a page template simply go to pages->Add New and make sure to select a template using the template selector on the right hand side. The following pages are available. For more info about the pages go ahead and create one and take a look at the options under the post editor.

Property List

The property listing template allows you to create a list of properties. Using the page options you can narrow this list down to a subset of your properties which is great for creating separate lists for different property types.

Map Search

The map search page template allows you to create a beautiful full screen map search page or specify the height of the map to create a quarter page map.

Search Page

The search page template allows you to crearte a beautiful full screen search page to capture users. It is extremely customizable allowing you to specify how users can search and what parameters they can use.

Agent List

The agent list template allows you to create a list of agents with their contact info and apartments shown.

Booking Page

The booking page allows you to create a booking for for your bookable properties. Whenever a user initiates a booking they will use this page to complete the steps.

Property Filter

The property filter can be used to create a great looking live filter of your properties. Users can use the built-in controls to filter without needing to reload the page.

Custom Data

Shortcodes

Shortcodes allow you to add great functionality into your post content such as columns, social icons, forms and more. Here are the shortcodes you can use with Estatement by default but with additonal plugins you can add more!

Estatement has quite a few shortcodes, here's a quick list, click on the shortcode you need to jump to that section

Property List

The property list shortcode allows you to display a list of properties on any post or page. By using a number of parameters you can display properties in different formats, from different categories and so on.

layout

The layout of the property list, can be card or list. Set to card by default.

count

The number of properties to show. Default is 3.

include

Add a comma separated list of property ids to show.

columns

Set how many columns to sort the properties into, only applies if the card layout is used. Default is 3.

orderby

Set how the properties should be ordered. Can be set to date, title, ID. Set to date by default.

order

Set the order direction, the default is desc but asc is also available.

details

Set the information to display from the custom fields. Use the custom field keys, separated by the pipe | character. .

offset

Set an offset for displaying posts. An offset of 2 means that the first 2 properties will be skipped

offset

Set an offset for displaying posts. An offset of 2 means that the first 2 properties will be skipped

single_address

Set to true to collapse all address fields into one field. Default is false.

single_address_name

If the address is collapsed, set the title of the field

no_results_page

Set the ID of a page which will be displayed if there are no results. Default is empty

excerpt

Set to true to show the excerpt of the properties in the listing. Default is false

author

Set the ID of an author to only use properties created by the specified author

In addition, properties only from specific taxonomies can also be displayed. The taxonomy slug should be the parameter name and the ID of the term you need should be the value. If you have a taxonomy named 'Property Type' and the ID of the 'Apartment' term is '54' you would add property_type='54' as an argument.

Example

[propertylist columns='2' count='4' building_material='4']

Gallery

This shortcode can be used in all themes because it is a default WordPress shortcode. It allows you to create galleries easily. Nowadays it is much easier to create a gallery using the Add Media section in posts, but using the shortcode is still possible.

Example

[gallery include='12,44,41,34,552,23']

This shortcode comes with a number of parameters that you can customize to get the exact gallery you'd like:

orderby

Specify how to sort the display thumbnails. The default is "menu_order". Options:

• menu_order
• title
• post_date
• rand
• ID

order

Specify the sort order used to display thumbnails. ASC or DESC.

columns

Specify the number of columns to use.

id

Specify the post ID. The gallery will display images which are attached to that post. The default behavior, if no ID is specified, is to display images attached to the current post.

size

Specify the image size to use for the thumbnail display. Valid values include "thumbnail", "medium", "large", "full" and any other additional image size that was registered.

link

You can set it to "file" so each image will link to the image file. The default value links to the attachment's permalink.

include

Comma separated attachment IDs to show only the images from these attachments.

exclude

Comma separated attachment IDs excludes the images from these attachments. Please note that include and exclude cannot be used together.

Embed

WordPress uses oEmbed which allows you to embed lots of media easily. You can do this without a shortcode by adding links to items on a separate line. You can embed videos from Vimeo, Youtube, music from Soundcloud, tweets, and more. Check out the Embeds Documentation for more info.

In some cases you might need to use the dedicated embed shortcode if you want to specify the width and height of the embedded object explicitly. The parameters of this shortcode are:

height

The height of the embedded object in pixels, without the px suffix

width

The width of the embedded object in pixels, without the px suffix

The content of this shortcode should be the URL to the embedded object.

Example

[embed width='804' height='620']https://vimeo.com/92930373[/embed]

Line

The line shortcode allows you to output a simple separator line, perfect for placing between two paragraphs, sections, separating items, and more. Optionally you can add a link to the right or left of the line.

color

Set a CSS color for the line.

url

The URL of the link to be added inline with the line

text

The link anchortext to be shown if a url is given

position

The placement of the link, may be 'left' or 'right'

Example

[line url='#' text='top']

Custom Data

The customdata shortcode allows you to output the value of a custom field for the given property. You can grab the raw data, or optionally add the label as well.

key

The key of the custom field you want to retrieve.

label

Set to 'true' or 'false' to enable of disable the label display. Set to false by default

raw

Set to 'true' to grab the raw data, without any formatting. Set to false by default

Example

The price of this house is: [customdata key='price']

Columns

The column (and row) shortcode allows you to specify columns in which to place your content. We use Foundation which is a 12 column grid system so your column widths always need to add up to 12.

To create columns you must wrap all columns within a table in the [row] shortcode. The column shortcode itself only takes the width as its parameter which must be a number: 1,2,3,4,6 or 12.

Due to the way WordPress handles nested shortcodes we advise writing the row and column shortcodes on the same line as the content they contain.

Example

[row][column width='6']content here...[/column][column width='6']content here...[/column][/row]

Map

The map shortcode gives you great controls to output a google maps map anywhere in the post content. By controling the map dimensions, the location, streetview options and zoom and more, you can display the map your need anywhere.

location

The text address of the location, as you would enter it into Google Maps

coord

If your location is a bit remote you can add the coordinates as latitude and longitude. Please add the latitude first and separate the two with a comma.

type

The type of map to show. Four are available: 'ROADMAP' (default), 'SATELLITE', 'TERRAIN', 'HYBRID'

zoom

The initial zoom level of the map. The higher the more zoomed in, default is 14

marker

Set to yes/no to display or hide a marker at the center ofthe map. Default is yes.

height

Set the map height using a CSS value. Default is '400px'

streetview

Set to true to add show street view. If set to 'separate' the display will show both.

streetview_heading

The direction in which the streetview will be pointing. Default is 165

streetview_pitch

The default pitch of street view, set to 0 by default.

streetview_zoom

The initial zoom of the street view view.

Example

[map location='New York, Fifth Avenue' streetview='separate']

Tabs & Accordion

The tabs and accordion shortcodes allows you to create a tabbed interface element, perfect for craming even more content into a smaller space. Both shorcodes should be used in conjunction with the section shortcode, which is used to add the sections.

The section shortcode must use the title attribute to designate the title

title

The title to be displayed in the tab

Example

[tabs][section title='First Tab']Content For First Tab[/section][section title='Second Tab']Content For Second Tab[/section][/tab]

[accordion][section title='First Section']Content For First Section[/section][section title='Second Section']Content For Second Section[/section][/accordion]

Buttons

The button shortcode allows you to create great looking buttons with flexible options. You can control the color and size easily, here are all the parameters:

url

Set the url the button should link to.

background

A CSS color to use as the background color for the button. Set to "primary" by default which is your theme's color scheme

color

A CSS color to use as the color for the button text. Set to "primary_text" by default which is your theme's color scheme

gradient

Set to yes to apply a smooth gradient. Set to no by default.

radius

Set a border radius for buttons in pixels. Set to 5px by default.

arrow

Set to yes to show an arrow inside the button. Set to no by default.

width

Set a CSS width for the button. By default it is set to auto.

hovercolor

Set the color the button should turn to on hover. This can be left out, the theme will calculate the color in most cases.

target

Set to an empty string ('') to open links in the same window. Set to '_blank' by default

Example

[button]Default Button[/button]
[button gradient='yes' radius='0px']With Gradient And No Radius[/button]
[button color='#fff' background='#333' ]Custom Color[/button]

Highlight

The highlight shortcode allows you to add some emphasis to a piece of text by highlighting it with a customizable color:

background

A CSS color to use as the background color for the highlight. Set to "primary" by default which is your theme's color scheme

color

A CSS color to use as the color for the highlight text. Set to "primary_text" by default which is your theme's color scheme

Example

This text is so important [highlight]it should be highlighted.[/highlight]

Message

The message shortcode allows you to create a block of text which stands out from the rest. It is perfect for success text, vacation notices, and more.

background

A CSS color to use as the background color for the message. Set to "primary" by default which is your theme's color scheme

color

A CSS color to use as the color for the message text. Set to "primary_text" by default which is your theme's color scheme

radius

Set a border radius for message in pixels. Set to 0px by default.

Example

[message background='#82b53f' color='#fff']Thanks for your message, we'll get back to you soon![/message]

Slideshow

The slideshow works just like the WordPress gallery shortcode but instead of displaying the images in a grid it pulles them into a nicely formatted slider with some parameters you can control.

ids

Comma separated attachment IDs to show. If left blank all images from the current post will be used.

controlnav

Set to true/false to show or hide the controls. Set to true by default.

directionnav

Set to true/false to show or hide the navigation arrows. Set to true by default.

slideshowspeed

Set how long a specific image shoulf be shown for, in milliseconds. Default is 7000.

animationspeed

Set the length of the transition between images in milliseconds. Default is 600.

animation

Set the type of animation to use: slide or fade. Set to slide by default.

Example

[slideshow]

URL Slideshow

The slideshow works just like the slideshow but uses a comma separated list of URLs instead of image ids. This is great if you need to pull in some external images or you're importing content from an existing system.

urls

Comma separated urls to show.

controlnav

Set to true/false to show or hide the controls. Set to true by default.

directionnav

Set to true/false to show or hide the navigation arrows. Set to true by default.

slideshowspeed

Set how long a specific image shoulf be shown for, in milliseconds. Default is 7000.

animationspeed

Set the length of the transition between images in milliseconds. Default is 600.

animation

Set the type of animation to use: slide or fade. Set to slide by default.

Example

[url_slideshow urls="http://estatement.bonsaished.com/wp-content/uploads/sites/3/2013/12/photodune-4372578-penthouse-balcony-xs-1.jpg,http://estatement.bonsaished.com/wp-content/uploads/sites/3/2013/12/photodune-4372593-modern-balcony-xs-1.jpg,http://estatement.bonsaished.com/wp-content/uploads/sites/3/2013/12/photodune-4372549-penthouse-balcony-xs.jpg"]

Postlist

The slideshow works just like the slideshow but uses a comma separated list of URLs instead of image ids. This is great if you need to pull in some external images or you're importing content from an existing system.

post_type

Set the post type to list, set to post by default.

post_status

Set which post status to retrieve. Set to publish by default, possible other values are trash, future, draft.

count

The number of posts to list. Set to 3 by default.

orderby

Set how to order the posts. Set to date by default, possible other values are: title, modified, rand, comment_count, ID.

order

Set the order direction, the default is desc but asc is also available.

category_name

Set specific categories to pull posts from. Use category slugs separated by commas.

tag

Set specific tags to pull posts from. Use tag slugs separated by commas.

Example

[postlist count='4' category='news,tips']

Sidebar

The sidebar shortcode allows you to add the content from any of your sidebars into the post content.

name

The name of the sidebar to use.

Example

[sidebar name='In Content']

Title

The title shortcode allows you to create a title with a fancy icon on the side. It's great for visually distinctive headings.

icon

Set the icon to use. There are a lot of icons in the theme, take a look at the images/icons/glyphicons/black/24x24 folder and use the file name (without the extension) here. The default is 'star'.

iconcolor

Set to black or white to control which variant is used.

linktext

Add an additional link displayed, this will be used as the text.

linkurl

Add an additional link displayed, this will be used as the URL.

title_class

Additional classes which the title element will recieve.

Example

[title icon='beach_umbrella']Beachside Properties[/title]

Fancybox

The fancybox shortcode displays an image which opens into a lightbox when clicked to allow the user to view the full size image. This is great for high resolution, high detail images to let the user see exactly what's going on, without taking away a lot of screen real estate.

id

The ID of the attachment to display

size

The size of the attachment to use in the thumbnail. Default is medium.

align

The alignment of the image: left, right or none. Set to left by default

Example

[fancybox id='43']

Push

The push shortcode is great if you need to add some extra spacing between your elements. Just specify a height and it will add the required space.

height

The height of the push element in a CSS valid value. Default is 44px

Example

This is some content [push height='66px'] This is some more content

Updating The Theme

Updating the theme is a simple affair. Before you update make sure that you haven't modified any theme files. If you have modified theme files you will loose those changes when you update. If you need to modify your theme you can do so with a child theme. That way you retain the ability to update. For more info take a look at the Modifying The Theme section.

The easiest way to update your theme is to delete the theme and then install and activate the update. Here are the steps required to do this in more detail.

In the admin, go to Appearance. Hover over one of the default WordPress themes (Twenty Fourteen, Twenty Thirteen or Twenty Twelve) and click the blue activate button. This will deactivate Estatement.

Once deactivated, hover over Estatement and click the image, this should bring up the theme details window. There should be a delete link on the bottom right of the window. Click it, then click ok to confirm deletion.

The next step is to install the update. You'll need to go to Appearance and click on the Add New button near the top. Then upload the update and activate it. If you need more info on this, take a look at the Getting Started section.

Using Layer Slider

Layer Slider is great but it does have a learning curve. To help you out we have our demo slider here which you can import. We also have a video tutorial. Please note that this video was created for an unreleased beta version of the theme. The how-to of making a slider is roughly the same, but inserting a slider into the theme is slightly different.

Frequently Asked Questions

This section provides answers for the most common questions based on emails, support requests, comments and other communication we've had with buyers. If you have a problem, please take a look here first, chances are you'll be able to figure out your issue.

Modifying Your Theme

While we made Estatement as flexible as possible, there are plenty of cases wehre you might want to modify the theme. However, note that there are no situations where you should modify theme files directly. Even if you're just adding a little CSS to the style.css file you are breaking your ability to update the theme. What's worse, if you do update, all your changes will be lost.

Simple Style Changes

We've added a facility to add style changes to the theme pretty easily. Go to Estatement ▸ Custom CSS and just type away there. Styles you add here will be loaded on every page.

Note that many styles (mostyle colors) are controled by dynamic styles which are output using PHP. These are the colors which can be changed from the theme options. If you need to change the colors for elements which use these styes you will need to add important rules to your styles or use a child theme to modify the theme.

If you are using a child theme (see below for details) you can modify includes/style.php. You can also include your own dynamic styles instead, make sure to hook it to the wp_head action and give it a priority higher than 99.

Child Themes

Themes should be modified using a method known as child themes. Child themes are essentially standalone themes which take all their data from a parent theme, unless otherwise specifiied.

The great advantage of using a child theme is that you can modify any aspect of the theme without loosing the ability to update, you will not loose your modificatiosn if you update your parent theme.

Creating a child theme is not difficult, you can find instructions in the WordPress Codex. However, we have gone ahead and created a child theme for you if you need it. Once Estatement is installed you can install the child theme as well, here's how.

Customizing The Child Theme

The first thing you'll probably want to do is give the child theme a name of your own, perhaps add a description. Extract the All files & documentation file downloaded from Themeforest (see our Getting Started section for more info) to your computer. Inside you should see a folder named Estatement_child.

You can rename this folder to whatever you'd like but use only lowercase characters and underscores if needed. It is a good idea to base it on the theme name so if you plan on calling your child theme My Estatement you could name the folder my_Estatement.

Next, go into this folder and open the style.css file you see there. There should be a block on the top which contains the details of the child theme. You can modify any info you see there except for one, the line which begins with Template. This should always be named according to the name of the parent theme's folder which is Estatement.

Once you're happy with what you have you should create an archive of your theme folder. Make sure to create an archive of the folder, not just the contents in it. Name it just like you named your folder - my_Estatement.zip. This file is a WordPress isntallable theme, if you have Estatement installed you can install it in the usual way.

If you want to modify some functionality in the parent theme you'll need to copy-paste the relevant file into your child theme and modify it there. This way all modified files are in your child theme, the parent theme remains untouched. For more info about all the useful things you can do with a child theme take a look at the WordPress Codex.

What's New

This is the initial release of the new Estatement so there's nothing new just yet. Whenever new versions are added we'll list the new stuff here with a changelog included underneath.