Easy Living – real estate wordpress theme
Documentation

Getting Started

1.1 Installing the Theme

WordPress themes can be installed using two different methods.

Install by FTP

To install Easy Living by FTP, you will have to access your server using any FTP software. In your FTP program, upload the un-zipped theme folder into the /wp-content/themes/ directory of your server. Now log into your wordpress admin and navigate to Appearance > Themes. You will see the Easy Living Theme. Click Activate and your done!

Install by WordPress Admin

To install Easy Living through the WordPress Admin, first log into your WordPress admin. Now navigate to Appearance > Themes > Add New Theme > Upload. Click “Browse” and select the zipped Easy Living Theme folder from your computer. Lastly, click “install now”. Navigate to Appearance > Themes. You will see the Easy Living Theme. Click Activate and your done!

1.2 Installing the Child Theme

If you are planning on doing any modifications to a theme, it is highly recommended to use a child theme. Child themes allow you to easily make modifications to a theme that will not be overwritten if you update the parent theme. When future releases of Easy Living become available, you can update without a worry.

To install the child theme, refer to the same process described above for uploading the parent theme. Once the child theme is installed, you should see both the Easy Living parent and child themes. Hover over the child theme and click Activate.

1.3 Setup the Main Menu

To configure the main menu, navigate to Appearance > Menus. First, give your menu a name, then build your menu by dragging pages from the left column into the menu structure. When you have built your menu structure, click create menu. After the menu is creating, towards the bottom of the page, check the field labeled as “Primary Menu”. Then click “Save Menu”.

As you build more pages, you will come back to this screen to add new pages to your menu.

1.4 Configure Permalinks

Easy Living requires a permalink structure based on post name. To configure the permalink structure, navigate to Settings > Permalinks. Select the “post name” option, then click save changes.

1.5 Import Demo Content

To import the demo content, locate the XML file under “Demo Content” in the unzipped theme download. Then, in the WordPress Admin, navigate to Tools > Import. Click on “WordPress”, then browse for the XML file. Click “Upload file and import” and your done. Note – even after the import, you will still have to configure some basic theme options and assign page templates.

Home Page

2.1 Create Home Page

First you will need to create a new page. Navigate to Pages > Add New. Give your page a title of “Home” (this can be anything you want). Then, on the right side of the page, find the box that says “Page Attributes”. Click the template drop down list and select “Home Template”. Then click “Publish”.

2.2 Configure Home Page Reading Settings

Next you have to tell WordPress that you want a static home page. To do this, navigate to Settings > Reading. For the “front page displays” field, select “A static page” option. Then expand the Front Page drop down and select “Home” (or which ever page you assigned your home template to). Click “Save Changes”, and your done!

2.3 Configure Home Subheader Section

The home sub-header section is capable of displaying three different views: slider, google maps, or a static banner. By default, the static banner is displayed.

Home Slider

To configure the home slider, navigate to Appearance > Theme Options. Then click on the Home tab and open the Subheader Section drop down. Select the “Display Slider” option. The slider has 3 configurable options which are as follows: slider source, number of slides, and slider speed. Configure these options as desired.

*Note: In order to create slides, you must use either the slides custom post type or the properties custom post type depending on which option you chose for the slider source.

Home Google Maps

The second view option for the sub-header is the google maps view. If selected, this option will display a map and automically place properties from the properties custom post type. You can set the default map zoom, latitude, and longitude.

Home Static Banner

The third view option for the sub-header is a static banner. This is the default option. You can set the banner text and background image.

Sidebars / Widget Areas

3.1 Sidebars / Widget Areas

There are a total of 5 widget areas available in the Easy Living Theme: Page Sidebar, Blog Sidebar, Home Widget Section, About Widget Section, and Footer Widget Section.

Page Sidebar

The page sidebar is available on all pages, excluding blog pages. When you create a new page, if you select a left or right sidebar layout, the page sidebar will be included in your layout. To add or remove widgets from the page sidebar, navigate to Appearance > Widgets. Then drag widgets from the left column into the “Page Sidebar” box.

Blog Sidebar

The blog sidebar is available on all blog pages (main posts page, single posts, category pages, etc.). When you create a blog page, if you select a left or right sidebar layout, the blog sidebar will be included in your layout. To add or remove widgets from the blog sidebar, navigate to Appearance > Widgets. Then drag widgets from the left column into the “Blog Sidebar” box.

Home Widget Section

The home widget section is only available on a page that uses the “Home Template”. It is located at the bottom of the home template. To add or remove widgets from the home widget section, navigate to Appearance > Widgets. Then drag widgets from the left column into the “Home Widget Section” box.

About Widget Section

The about widget section is only available on a page that uses the “About Template”. To add or remove widgets from the about widget section, navigate to Appearance > Widgets. Then drag widgets from the left column into the “About Widget Section” box.

Footer Widget Section

The footer widget section is available in the footer of every page. It utilizes a four column layout to place your widgets. To add or remove widgets from the footer widget section, navigate to Appearance > Widgets. Then drag widgets from the left column into the “Footer Widget Section” box.

3.2 Custom Widgets

Easy Living comes pre-packaged with 5 custom buildt widgets: Contact Info, Quick Search, Recent Blog Posts, Services, and Testimonials. Place these widgets in any of the widget areas mentioned above to enhance the functionality of your site.

Properties

4.1 Create Properties Listing Page

First you will need to create a new page. Navigate to Pages > Add New. Give your page a title of “Property Listing” (this can be anything you want). Then, on the right side of the page, find the box that says “Page Attributes”. Click the template drop down list and choose one of three templates: Listing Grid, Listing Masonry, or Listing Row. Next, you can assign your page to be a full width, left sidebar, or right sidebar layout. See the page section for details on setting up pages. Lastly, click “Publish”.

Important! After you create your property listing page. You must copy the url and paste it in the theme options under the “Properties” tab, as seen in the image below.

4.2 Adding Properties

To add a new property, navigate to Properties > Add New. Enter the property address (or whatever title you want) in the post title field. Add your property description in the content editor. On the right side of the page, you may assign your property three different taxonomy types: Property Type, Property Status, and Property City. Below the taxonomies, you can set the featured image for you property. Lastly, you may fill out further meta information regarding your property in the “Property Details” box.

*Note – don’t forget, you can set the banner text and background image for each page/post individually!

Important: You should only choose one option for each property taxonomy (property type, property city, and property status).

4.3 Create Submit Property Page

First you will need to create a new page. Navigate to Pages > Add New. Give your page a title of “Submit Property” (this can be anything you want). Then, on the right side of the page, find the box that says “Page Attributes”. Click the template drop down list and choose “Submit Property” Next, you can assign your page to be a full width, left sidebar, or right sidebar layout. See the page section for details on setting up pages. Lastly, click “Publish”.

Important: After you create your submit property page, navigate to Appearance > Theme Options > Members and paste the url in the field labeled “Url to Submit Property Page”

4.4 Create My Properties Page

First you will need to create a new page. Navigate to Pages > Add New. Give your page a title of “My Properties” (this can be anything you want). Then, on the right side of the page, find the box that says “Page Attributes”. Click the template drop down list and choose “My Properties” Next, you can assign your page to be a full width, left sidebar, or right sidebar layout. See the page section for details on setting up pages. Lastly, click “Publish”.

Important: After you create your My Properties page, navigate to Appearance > Theme Options > Members and paste the url in the field labeled “Url to My Properties Page”

Agents


5.1 Create Agents Listing Page

First you will need to create a new page. Navigate to Pages > Add New. Give your page a title of “Agent Listing” (this can be anything you want). Then, on the right side of the page, find the box that says “Page Attributes”. Click the template drop down list and choose one of two templates: Agent Listing Grid or Agent Listing Row. Next, you can assign your page to be a full width, left sidebar, or right sidebar layout. See the page section for details on setting up pages. Lastly, click “Publish”.

5.2 Adding Agents

To add a new agent, navigate to Agents > Add New. Enter the agents name (or whatever title you want) in the post title field. Add the agents description in the content editor. On the right side of the page, towards the bottom, you can set the featured image for the agent. Lastly, you may fill out further meta information regarding the agent in the “Agent Details” box.

To further customize the layout of the agent details page, navigate to Appearance > Theme Options > Agents. Here you can toggle the display for several elements on the agent details page.

*Note – don’t forget, you can set the banner text and background image for each page/post individually!

Blog

6.1 Create Blog Page

First you will need to create a new page. Navigate to Pages > Add New. Give your page a title of “Blog” (this can be anything you want). Leave the page template as the default template. Next, you can assign your page to be a full width, left sidebar, or right sidebar layout. See the page section for details on setting up pages. Lastly, click “Publish”.

After you have created your blog page, navigate to Settings > Reading. Select the drop down for “Posts page”. Find your blog page in the drop down list and select it. Lastly, click save changes. Open the blog page you previously created and refresh. You should see the “hello world” post that WordPress puts in by default.

6.2 Adding Blog Posts

To add a new blog post, navigate to Posts > Add New. Enter the post title in the post title field. Add the post content in the content editor. On the right side of the page, you can create and set any categories for the post. Towards the bottom, you can set the featured image for the post. When you are done editing, click “Publish”.

*Note – don’t forget, you can set the banner text and background image for each page/post individually!

Pages

7.1 Create Default Page

To create a blank default page, navigate to Pages > Add New. Give your page a title and enter your content in the content editor. To assit in building your page, you can use Easy Living’s pre-packaged shortcodes Leave the page template as the default template.

Next, scroll down the page to the “Page Layout” box. Here you can assign your page to be a full width, left sidebar, or right sidebar layout. Below that is the “Banner” box. Here you can set the banner text and background image for the subheader banner. Below that is the “Call to Action” box. Here you display a call to action box at the end of the page with a title, text and button. Click publish when you are done editing your page.

7.2 Create About Page

To create an about page, navigate to Pages > Add New. Give your page a title and enter your content in the content editor (you may also leave content empty). To assit in building your page, you can use Easy Living’s pre-packaged shortcodes. Set the page template to “About”. Click Publish.

If you click on “View Page”, you will see an empty page. As mentioned in the Sidebars / Widget Areas Section, the about page template uses a widget area. Navigate to Appearance > Widgets. Then drag your desired widgets into the About Widget Section box. For example, on the Easy Living demo site, we used a simple text widget and the custom “Services” widget (The rest of the about page on the demo was built using shortcodes).

7.3 Create Contact Page

To create a contact page, navigate to Pages > Add New. Give your page a title and enter your content in the content editor (you may also leave content empty). To assit in building your page, you can use Easy Living’s pre-packaged shortcodes. Set the page template to “Contact” or “Contact Wide”. Click Publish.

If you click on “View Page”, you will see your content at the top, and below that, a contact form. To continue configuring your contact page, navigate to Appearance > Theme Options > Contact. Here you set various fields for your contact page, such as email, phone, address and other details.

7.4 Create Login Page

To create a login page, navigate to Pages > Add New. Give your page a title. Set the page template to “Login”. Click Publish.

Important: After creating your login page, copy the url to your login page. Then navigate to Appearance > Theme Options > Members. Paste the url to your login page in the field labeled “Url to Login Page”.

7.5 Create Register Page

To create a register page, navigate to Pages > Add New. Give your page a title. Set the page template to “Register”. Click Publish.

Important: After creating your register page, copy the url to your register page. Then navigate to Appearance > Theme Options > Members. Paste the url to your register page in the field labeled “Url to Register Page”.

7.6 Using Shortcodes

WordPress shortcodes allow you to easily add complicated features and elements to your pages without having knowledge of the code. To learn more about shortcodes and how they are used, visit the WordPress Shortcode API. Easy Living comes with 12 built in shortcodes which will be described in detail below:

ROWS & COLUMNS
Attributes: span

When building your pages, you will probably find the need to structure your content into columns. You can do this using the rows and columns shortcodes. Although rows and columns are two seperate shortcodes, you must use them together for them to work properly. Easy Living is built off a 12 column grid. Say you wanted to break your content into three columns. To do this, you would put this in your page content editor:

[row]

[col span=”4″]
Your content goes here
[/col]

[col span=”4″]
Your content goes here
[/col]

[col span=”4″]
Your content goes here
[/col]

[/row]

Notice there are 3 columns that each span 4 units. 3 x 4 equals 12 total units. To break your content into 4 columns, you would do 4 columns that each span 3 units. You will use this structure to lay out your pages. Any of the following shortcodes can be placed inside rows & columns. You can also nest rows & columns to create more complex layouts.

HEADING
Attributes: none

The widget heading shortcode outputs a simple heading and divider that is convient for seperating content blocks and providing headers for sections.

[heading]This is a heading[/heading]

BUTTON
Attributes: url, type, position

  • url – a url path for the button’s target. Example: https://www.google.com/
  • type – small, large (default: large)
  • position – left, right, center (default: left)
[button url=”https://www.google.com/” type=”small” position=”center”]button text[/button]

BUTTON_COLOR
Attributes: url, type, position

  • url – a url path for the button’s target. Example: https://www.google.com/
  • type – small, large (default: large)
  • position – left, right, center (default: left)
[button_color url=”https://www.google.com/” type=”small” position=”center”]button text[/button_color]

QUOTE
Attributes: none

[quote]This is a quote[/quote]

BIG_MESSAGE
Attributes: title, text, padding_top, padding_bottom

  • title – the title
  • text – text displayed below title
  • padding_top – space above big message. Example – 120px (default: 70px)
  • padding_bottom – space below big message. Example – 120px (default: 70px)
[big_message title=”Big Message Title” text=”This is the text” padding_top=”70px” padding_bottom=”70px”][/big_message]

TABS
Attributes: id, title

  • id – unqiue integer. Example – 1
  • title – the title
[tabs]

[tab id=”1″ title=”TAB1″]This is the content for tab 1[/tab]

[tab id=”2″ title=”TAB2″]This is the content for tab 2[/tab]

[tab id=”3″ title=”TAB3″]This is the content for tab 3[/tab]

[/tabs]

ACCORDION
Attributes: title, content

  • title – the title
  • content – the content
[accordion title=”This is the title” content=”This is the content”][/accordion]

ALERT_BOX
Attributes: type

  • type – error, warning, info, success (default – success)
[alert_box type=”error”]This is the message![/alert_box]

PRICING_TABLE
Attributes: title, price, price_caption, list, button_text, button_url

  • title – the title
  • price – the price. Example – $20.00
  • price_caption – text displayed below the price. Exampe – per month
  • list – comma separated list. Example – item1, item2, item3, item4
  • button_text – the button text
  • button_url – the url path to the button target
[pricing_table title=”STANDARD” price=”$50.00″ price_caption=”per month” list=”5 GB Storage, 3 Databases” button_text=”PURCHASE” button_url=”http://yourwebsite.com”]

AGENT
Attributes: img, name, text, facebook, twitter, google_plus, linkedin, rss

  • img – a url to the agents image
  • name – agents name
  • text – text display belowed agents name
  • facebook – url to the agents facebook profile
  • twitter – url to the agents twitter profile
  • google_plus – url to the agents google plus profile
  • linkedin – url to the agents linkedin profile
  • rss – url to the agents rss feed
[agent img=”http://rypecreative.com/easy-living-wp/wp-content/uploads/2014/08/agent1.png” name=”JOHN DOE” text=”Lorem ipsum dolor amet, consectetur adipiscing elit. Sed purus eget nunc.” facebook=”#” twitter=”#” google_plus=”#” linkedin=”#” rss=”#”]

We make websites that allow room for growth and customization. Have a project in mind? Get in touch with us today.

CONTACT US
2017 Rype Creative.