“Real Estate 7” Documentation by “Chris Robinson (contempoinc)” v2.4.0


“Real Estate 7”

Created: 8/28/2015
By: Chris Robinson (contempoinc)
Support: support.contempographicdesign.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please open a ticket on the support site here.

You can also view my ThemeForest profile here, visit my theme and stock art preview site here, or follow me on Twitter here.



Installation top

  1. Unzip the main zip file; you should now have a main download folder.
  2. Do NOT upload the main download folder. Open up the main download folder.
  3. Browse the contents and find realestate-7.zip.
  4. Login to your WordPress admin > Appearance > Themes
  5. Add New
  6. Upload realestate-7.zip
  7. Activate
  8. Once activated you'll see a required plugins install notice, click "Begin Installing Plugins" follow the steps and activate each.

Importing a Demo

Recommend doing this on a fresh WP install however it can be done on an existing database with content.

  1. Go to Real Estate 7 Options
  2. Click Demo Importer
  3. Select a demo
  4. Click Import Demo
  5. Let it do its thing, this will take a few minutes
  6. It'll show "Imported" when its finished
  7. That's it!

Manual Homepage Setup*

  1. Create a page > name it Home > apply the Home page template > Publish
  2. Settings > Reading > Front Page Displays > Set to the Home page you just created > Save
  3. Now go into Admin > Real Estate 7 Options > Homepage > Layout Manager > Enable/Disable and orgainize the blocks you want.
  4. Save Settings
  5. And you're good to go!

Choosing your Theme Mode

The theme comes with two modes, Multi & Single Listing. Which can be selected in Real Estate 7 Options > General Settings > Multi-Listing or Single Listing Mode. Multi is just as its states and Single is tailored toward a landing page type site to feature one specific listing (no navigation or other pages used).

*If you imported a demo skip this

Instructional Videos top


Homepage Setup top

Layout Manager

There's no wrong or right way to setup your homepage, a countless number of possible setups are available.

Advanced Search

Here you can choose your style, and add/remove/sort fields for the advanced search area.

Alternative Homepages

Each of the alternative homepages below require importing the Multi-Listing Demo content


Adding & Managing Listings top


Custom Taxonomies and Usage top

You'll notice the theme makes heavy use of Taxonomies for the Listings, each of these are detailed out below:


Uploading Listing & Blog Post Images top


Custom Category Header Background Images top

  1. Open your WordPress Admin
  2. Click Media (left hand navigation)
  3. Add New
  4. Select Files
  5. Choose your image and Open
  6. Click Edit
  7. Find Categories (right hand side)
  8. Enter the category or categories (comma seperated) you want the image applied to
  9. Click outside the field you'll see a loading icon top left
  10. Once that's done (dissappears) close the window.
  11. And you're good to go!

You'll use Appearance > Menus to build out your navigation. What you can do is use the Advanced search area and select one or mulitple taxonomies to search on and that URL that is generated you can use to build a Custom Link for your navigation.

For instance:

More on the Menus screen can be found here: http://codex.wordpress.org/Appearance_Menus_Screen


Using Mega Menus top

If you've got a large amount of navigation items mega menus are great for displaying them in a column like fashion. They're incrediably easy to use, just follow the simple steps below and make sure to review the screenshot as well.

Creating a Mega Menu

  1. Go into Appearance > Menus
  2. Select your Primary Menu
  3. Expand one your items that has children
  4. Check the "Multi-Column Menu" option
  5. It automatically enters 3, however you can set this to anything from 2-6
  6. Save Menu
  7. That's it!

Adding Optional Column Headings

As you can see in the example screenshot it uses column headings which are completely optional.

  1. Click the "Screen Options" tab in the top right (screenshot)
  2. Find "CSS Classes" under "Show advanced menu properties" check that box (screenshot)
  3. Now create a "Custom Link" with the URL of # and the label whatever you'd like > Add to Menu
  4. Then drag that to wherever your current menu item children are and orgainize the amount of child items you want under that heading
  5. You'll just repeat those steps for however many columns and items you have.
  6. IMPORTANT: For each Heading you'll want to add "col-title" under CSS Classes screenshot

Front End Listing System top

Once you've imported a demo everything is setup and ready to go out of the box, if not you'll need to create pages and apply its corresponding template.

Page Templates

Admin Options

You can set the page IDs in Real Estate 7 Options > Front End Submission, along with some other options.

Front End Registration

NOTE: Make sure you have Settings > General > Membership > Anyone can register > checked


Agents top

Adding User/Agent Information

Setting Up Agents Page

If you've imported one of the demos you can skip this, if not read on!

  1. Create a Page
  2. Title it Agents or whatever you'd like
  3. Apply the Agents page template
  4. Publish!

Brokerages top

The relationship works as follows Brokerage (Firm) > Broker (Owner/User) > Agents (Users) > Listings. Be sure to follow this section step by step, not following this in order of procedure could result in inoperable results.

1. Adding a Brokerage

  1. Go to Brokerages
  2. Add New
  3. Fill in the Title/Brokerage Name
  4. Fill in the Content, typically a short About Us (one to two sentences)
  5. Fill in the Address Information
  6. Fill in the Social Information
  7. Add a Logo (upper right)
  8. Publish!

If you've have multiple Brokerages I recommend adding them all then continuing on to Step 2.

2. Setting Up Brokerages Page

If you've imported one of the demos you can skip this, if not read on!

  1. Create a Page
  2. Title it Brokerages or whatever you'd like
  3. Apply the Brokerages page template
  4. Publish!

NOTE: If you haven't completed step one in this section please do so before this step.

3. Applying a Brokerage to an Agent/User

If you've already created a Brokerage(s), then follow the below steps to apply a Brokerage to an Agent/User

  1. Go to Users
  2. Select a User
  3. Scroll down to "Brokerage"
  4. Select the Brokerage of your choice
  5. Update Profile!

4. Adding Agents/Users to a Brokerage

  1. Go to Brokerages
  2. Select a Brokerage
  3. Scroll down to Agents
  4. Select all the Agents you'd like
  5. Scroll back up & Update!

5. Adding a Brokerage to a Listing

  1. Go to Listings
  2. Select a Listing
  3. Scroll down to Brokerage
  4. Select a Brokerage
  5. Scroll up Update!

Co-listing top

If you've enabled the Co-Authors plugin, you'll notice a new "Authors" block added to the Edit Listing panel under the "Video" block. This is where you add your co-listing agents, just start typing the agents name and it'll do a ajax search once it comes up click to apply, then update your listing. You can apply as many as you'd like.


IDX Plugins top

I've built in custom CSS for the following IDX plugins:

Once you've installed the plugin of your choice you can enable the IDX search for the homepage.

1. Add the IDX search widget

  1. Go into Appearance
  2. Widgets
  3. Find the IDX Search widget
  4. Add to IDX Homepage
  5. Select the horizontal layout option (if available)
  6. Save

2. Enable the IDX search homepage block

  1. Go into Real Estate 7 Options
  2. Homepage
  3. Layout Manager
  4. IDX Search
  5. Save Settings

You're all set!

NOTE: You don't have to use the ones listed above, you can use any IDX plugin you'd like I've just built in custom CSS and functions for ones listed above.


Advanced Theme Customizer top

Taking it a step further

If you want to go buck wild and make modifications beyond what can be handled in the Advanced Theme Customizer than you'll want to checkout the section on Child Themes.

Visual Composer top

Please see Visual Composer Pagebuilder for WordPress for all the information you need to start using the plugin on your site.

Real Estate 7 includes a custom Listings module under the CT Listings tab, with options for number, type, beds, baths, status, city, state, zip/postcode, country, community & additional features.


Revolution Slider top

Please see Revolution Slider documentation for all the information you need to start using the plugin on your site.

The demo slider zips are included in the main download you got from Themeforest, or if you imported a demo each comes with its corresponding slider automatically!

I've also included the demo sliders PSD, you'll find it in the main download > rev-slider > rev-slider.psd.


WP Favorite Posts top

Once you've enabled WP Favorites, you'll need to make the following modifications to the settings page. Otherwise it won't display properly.

  1. Go into Settings > WP Favorite Posts
  2. Before Link Image set to No Image
  3. Text for add link change to <i class="fa fa-heart-o"></i>
  4. Text for added change to <i class="fa fa-heart"></i>
  5. Text for remove change to <i class="fa fa-heart"></i>
  6. Text for removed change to <i class="fa fa-heart-o"></i>
  7. Scroll to Advanced Settings > check "Don't load js file" (I've built in custom JS)
  8. Update Options

Booking Calendar top

If you're using the booking calendar, you'll notice once its been enabled that a "Rentals" block gets added to the Edit Listings area with all the associated fields. You can find more on the ins and outs of the plugin in the documentation.


Listing Reviews top

If you'd like to include reviews for your listings please follow the steps below to get them setup.

Step 1: Go into Appearance > Install Plugins > Install & Activate "Comments Ratings"

Step 2: Once you've done that go into Settings > Comments Ratings > check "Select which post types should have ratings?" > then check "listings"

Step 3: Go into Real Estate 7 Options > Listings > "Enable Listing Reviews" > select Yes

Step 4: Now go Listings > Edit Listing > Screen Options > check "Comments"

Step 5: Scroll down to Comments > check "Allow Comments", note this has to be done on a listing by listing basis so you'll need to check this for each listing you want to allow reviews on. If you want to enable for all listings at once, click Listings > Screen Options > Number of items per page screenshot set to however many you have > Apply > now click the check all box > Bulk Actions > Edit > Apply > Comments > Allow screenshot > Update, and you'll be good to go.


Walk Score top

Walk Score is the only international measure of walkability and the leading provider of neighborhood maps to the real estate industry. More than 30,000 websites use the Walk Score Neighborhood Map and we serve over 20 million scores each day.

In order to use Walk Score on your site you'll first need to get an API Key here


Setting Up "What's Nearby?" for Listings top

Set this up if you'd like to display "What's Nearby?" information on your listings such as restaurants, grocery stores, schools, coffee shops, etc…powered by the Yelp API.

In order to use "What's Nearby?" on your site you'll first need to get an API Key from Yelp! here if you don't already have a Yelp account you'll need to sign up for one.

  1. Go into Your WordPress Admin
  2. Real Estate 7 Options
  3. Click the Yelp tab
  4. Enter in your API keys
  5. Select Yes from Enable Yelp "What's Nearby?" for Listings
  6. Save Settings
  7. You're all set!

You have the option of enabling/disabling any of the following amenities via drag & drop:


WP All Import top

WP All Import allows you to import posts and custom post types (like listings) using CSV, XML, and XLS files. The WP Pro Real Estate 7 Add-On will customize WP All Import to seamlessly import all of your listings in to the WP Pro Real Estate 7 theme.

Install the Main Plugin and Add On Plugin

  1. Plugins > Add New > Search > WP All Import > Install & Activate
  2. Then grab the Add On via Plugins > Add New > Search > WP All Import Real Estate 7 > Install & Activate
  3. Once you've done that proceed with the steps below

Preparing Your CSV File

WP All Import can handle any valid CSV file and it doesn't care what order your columns or in or how they're labeled. With WP All Import Pro you can even pass your data through custom PHP functions during the import process.

Columns you may want to include in your file:

Importing your CSV File

First go to the WP All Import section of your WordPress admin panel and click ‘New Import’.

You’ll be prompted to upload your CSV file. Then, select 'Listings' from the items dropdown and Continue to Step 2.

In Step 2, verify that your import file was correctly uploaded and understood by WP All Import. If everything looks good, Continue to Step 3.

Configuring your Import Template

In Step 3 you will need to tell WP All Import how to import each of the columns in your CSV file. Simply drag the data from right to left:

When you're done configuring your import template, Continue to Step 4 where you’ll choose a Unique ID (you should pretty much always use 'Auto Detect'). Then you can review your import and click 'Confirm & Run Import'.

Documentation for WP All Import

If you run in to any issues you can read more about WP All Import here


Set your permalink structure in Settings > Permalinks, any structure can be used.

I've also included the ability to change the Category, Tag and Author base slugs. For instance you can change the default http://example.com/author/username to http://example.com/agents/username when using the Author Base field under Settings > Permalinks > Optional.


Custom Page Templates top

You can apply a custom template to any page with a couple clicks.

  1. Open a page or create one
  2. Title it, add your content, configure header image, sub title, etc&hellips;
  3. Find Page Attributes > Template
  4. Select one
  5. Publish or Update!

Advanced Search

This will display all available search fields within a specified page regardless of whats set in the Homepage > Advanced Search layout manager. Example Screenshot.

  1. Create a page name it Advanced Search
  2. Apply the Advanced Search page template
  3. Publish
  4. Go into Real Estate 7 Options > Homepage > Advanced Search
  5. Scroll down to "Enable Separate Advanced Search Page"?
  6. Select "Yes" Screenshot
  7. Then you'll see "Advanced Search Page" appear select the page you just created Screenshot
  8. Save Settings
  9. Refresh the homepage of your site and you'll now see a "More Search Options" button Screenshot, this also applies to the Listings Search widget.

Big Map (template-big-map.php)

Exactly as it sounds this is used to display a full screen map with all your listings, demo.

Contact (template-contact.php)

This includes a large map, contact form and widget area.

  1. Go into Real Estate 7 Options > Contact > Fill in your details
  2. Go into Appearance > Widgets > find the CT Contact Info widget
  3. Add it to the Right Sidebar Contact Page area
  4. Create a Page
  5. Title it Contact or whatever you'd like
  6. Apply the Contact template
  7. Publish

Contact No Form (template-contact-no-form.php)

Same as the normal Contact page template with the exception that this one doesn't include a hardcoded form, this is great for use with plugins like Contact Form 7 or Gravity Forms where you can create your own custom form and insert it into the content area of the page all while retaining the mapping and sidebar functionality.

Full Width (template-full-width.php)

Use this for full width content pages.

IDX (template-idx.php)

Use this to apply to your IDX plugin pages, can be used for any platform.

Left Sidebar (template-left-sidebar.php)

Use this to swap the sidebar over to the left (right is default).

Sitemap (template-sitemap.php)

Displays all the content of your site in a orgainized fashion, great for SEO.

Testimonials (template-testimonials.php)

Use this to display testimonials. NOTE: testimonials aren't meant to be queried like normal category archives, you must use this template in order for them to display correctly.


Custom Widgets top


WPML top

This theme is WPML compatible, the plugin makes it easy to translate your website into multiple languages. The “String Translation module” is included with the "Multilingual CMS package" and will allow you to translate any strings not included inside posts, pages or taxonomies. It’s very easy to use and is located at WPML > String Translation.

NOTE: You'll be translating both the theme language files and my Contempo Real Estate Custom Posts plugin language files.

Below is the link to the guide on the WPML website which goes into greater detail. I would strongly recommend you check it out.

Get WPML Here View Documentation

Once installed and configured the lang switcher in the header will automatically appear, based on the languages you've set.

Please also see this KB article on translating taxonomies the proper way "Using WPML to Translate the "Featured" Status and Have Those Listings Appear Properly in the Homepage when Viewing Other Languages".


Translation top

Need to translate the theme into another language? No problem, it's fully localized and translation ready. Follow the simple steps below:

NOTE: You'll be translating both the theme language files and my Contempo Real Estate Custom Posts plugin language files.

With a Plugin (Recommended)

Easiest way is to use a plugin like WPML above, everything is done through your WordPress admin and its simple as 1, 2, 3!

Manually with POEdit - Theme

This is the more labor intensive way, it requires downloading third-party software, making file edits offline and uploading via FTP using a program like FileZilla. I'd recommend using the plugin method above.

1. Download and install PoEdit.

We need PoEdit to translate a theme. Its a free software and its available for Mac, Windows and Linux. Download PoEdit from this page.

2. Create a new catalog (the local language file)

Now PoEdit will ask you to name the file. Its very important to name the file correctly. The naming convention for these files is languageCode_countryCode. The language code must be in lower case while the country code should be in upper case. So, if you are translating the theme for UK English, the file name will be en_UK. Similarly, for translation to french, it will be fr_FR and so on. You can find a list of language codes at this page and country codes here.

3. Translate the Theme

This is the step where we will actually translate the theme. After Step 2 above, you'll see the standard interface of PoEdit where the left panel contain the strings in the original language and the right panel containing the translations. The right panel will be empty as we haven't started the translation yet.

Start translating each string one by one. Click on the first string and press Tab button. This will take you to the translation box in the bottom. Type the translation here. Your change will reflect immediately in the right panel. Once you are done with this string, press Enter and move on to the second string. Repeat this procedure until all the strings are translated. After the translation is done, save the file.

4. Upload The Files To Your Server

When you save the catalog file in Step 3 above, PoEdit will create two files, a .po file and a .mo file. Upload both these files to the languages directory of your theme.

5. Last Step

Then go into your WordPress Admin > Settings > General > Site Language (bottom) > Choose that language > Save Changes.

Manually with POEdit - Plugin

2. Create a new catalog (the local language file)

Now PoEdit will ask you to name the file. Its very important to name the file correctly. The naming convention for these files is contempo-languageCode_countryCode. The language code must be in lower case while the country code should be in upper case. So, if you are translating the theme for UK English, the file name will be en_UK. Similarly, for translation to french, it will be contempo-fr_FR.po and so on. You can find a list of language codes at this page and country codes here.

3. Translate the Plugin

This is the step where we will actually translate the plugin. After Step 2 above, you'll see the standard interface of PoEdit where the left panel contain the strings in the original language and the right panel containing the translations. The right panel will be empty as we haven't started the translation yet.

Start translating each string one by one. Click on the first string and press Tab button. This will take you to the translation box in the bottom. Type the translation here. Your change will reflect immediately in the right panel. Once you are done with this string, press Enter and move on to the second string. Repeat this procedure until all the strings are translated. After the translation is done, save the file.

4. Upload The Files To Your Server

When you save the catalog file in Step 3 above, PoEdit will create two files, a .po file and a .mo file. Upload both these files to the languages directory of your plugin in wp-content > plugins > contempo-real-estate-custom-posts > languages.

5. Last Step

Then go into your WordPress Admin > Settings > General > Site Language (bottom) > Choose that language > Save Changes.


CSS top

Main Stylesheet - style.css

This file contains the styling table of contents, outlining the different files included and where each styles are coming from.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Other Stylesheets Included


JavaScript top


PSD Files top

This is a responsive design so no layout PSDs are included, but if you'd like to say mock up a new template I'd recommend screenshoting the live site then opening that in your favorite editor say Photoshop then making your edits by cutting and slicing.

The single PSD that is included is for the listing map pin, located in the PSD folder from the main download.


Child Theme Generator top

With WP Pro Real Estate 7 you can create child theme in a couple clicks! No fussing about with creating files, folders, FTP, etc…

Why Use a Child Theme?

There are a few reasons why you would want to use a child theme:

How to Create a Child Theme

  1. Go into your WordPress Admin
  2. Appearance > Create Child Theme
  3. Fill in the Name & Description
  4. Click Create Child
  5. Happy Editing!

Find any CSS property, Quickly & Easily

A theme can contains thousands of CSS properties, a super quick and easy way to find what controls what is using your browsers built-in developer tools. Once you learn how to leverage this you'll be saying "How did I ever get along without this in the past!".

  1. Open your site in your favorite browser, like Google Chrome ;)
  2. Find the element you'd like to modify
  3. Right click > Inspect Element
  4. You'll notice a new pane open in the bottom of your browser window
  5. One with Source Code and the other CSS
  6. That's it!

Overwriting Images in your Child Theme

You can also overwrite images via your child theme, for instance changing the colors of the map pins.

  1. Access your site via FTP using a program like FileZilla
  2. Navigate to your WordPress installation
  3. Find wp-content > themes > your-child-theme-name
  4. Right-click create a folder named images
  5. Go back on to your computer find where you saved the main download from Themeforest
  6. Find the "psd" folder > open map-pins.psd
  7. Make your modifications
  8. Select the slices
  9. File > Export > Quick Export as PNG or File > Save for Web > Select the slices
  10. Upload those images into your child themes > images folder via FTP
  11. Refresh your site and you should see your newly modified map pins

More resources on Using Child Themes


Advanced Development top

How To Use Action Hooks

Action Hooks are a very useful tool in WordPress and they are used to perform functions (actions) in specific places of a theme or plugin. Many themes and plugins, such as Real Estate 7, use action hooks as an easy way for users to modify the output of the project or to add their own custom code.

1. do_action, add_action & remove_action

There are 2 main functions you need to know to understand how hooks work:

  1. do_action() – where the “hooked” functions are run
  2. add_action() – attaches a function to a hook as defined by do_action
  3. remove_action() – removes a function attached to a specified action hook

So the do_action functions are already added to the Real Estate 7 theme and will run whenever something is hooked into them via add_action. So you, as the user, will be using the add_action and remove_action functions only to make your modifications.

If you need a better explanation of these functions please click on the links above so you can learn about them on the WordPress CODEX.

2. WP Pro Real Estate Theme Hooks

The Real Estate 7 WordPress theme includes many useful action “hooks” which will allow you to easily add/remove elements from the base theme layout. You can see a list of all the different hooks inside the theme at realestate-7/admin/hooks.php (screenshot below). Notice how these are all using the “do_action” function? That’s because these are all functions that will run in specific places of the theme.

3. Using Hooks For Theme Modifications?

The theme hooks aren’t just there for the theme itself, they are also there for you! You can use any of the theme’s hooks to run your own functions or HTML.

Where Are My Custom Hook Functions Added?

When using the hooks to modify the theme you’ll want to add your code in the functions.php file of your child theme. You can generate a child theme easly via the admin in Appearance > Child Theme.

What Hook Should I Use?

When you look at the various hooks in the hooks.php file you will notice they have very obvious names for example the hook name "ct_before_header" is going to be a hook that is added before the theme’s header. If you have any doubts you can always look up the name of the hook (by searching the theme files) and see where it’s being added in the theme’s code.

4. Adding An Action (Example)

Hopefully by now you understand what action hooks are and how they work. However, if you are still a bit confused hopefully an example will help!

Add Extra Text Under Your Header

A good example of using an action hook may be adding extra text under your header. This could be useful for adding a banner to your site, advertisement in the header, maybe an alternative logo (to display on mobile devices – by using CSS to show/hide each one accordingly), adding a quote…etc.

Result: See our text added under the header? That’s how easy it is to add extra content to the Real Estate 7 theme! Now that you are a pro go out there and make something cool for your client!

4. Overriding Parent Theme Functions within Your Child Theme

Say you wanted to change the Property Type Icons you see displayed in the lower left corner of the listing images. You can easily overwrite a parent theme function within your child theme, by adding the example below into your child themes functions.php.


Support top

Please see the Support Site.


FAQ top

Please see the Knowledgebase on the support site.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.

Go To Table of Contents