Contempo

Documentation

WP Pro Real Estate 7 - v2.4.3

Table of Contents


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.

  • Revolution Slider - Activated by default, either one can be toggled on/off independently. Slider alias can be added in the Revolution Slider sub panel.
  • FlexSlider - For basic static content, recommend using Revolution Slider instead. Slide content can be added via the FlexSlider sub panel.
  • Featured Listings - Activated by default, can be toggled on/off. Options can be configured in the Featured Listings sub panel.
  • Featured Map - Displays a large map of listings tagged as Featured, can be toggle on/off.
  • Call To Action - Activated by default, can be toggled on/off. Content can be added via the Call To Action sub panel.
  • Listings Search - Activated by default, can be toggled on/off. Fields can be toggled on/off via the Advanced Search sub panel.
  • IDX Search - If you're using an IDX plugin activate this in place of the default Listings Search, once enabled go into Appearance > Widgets > find the IDX Search widget > add to IDX Homepage > select the horizontal layout option > Save.
  • Testimonials - slider, add content in Testimoinals panel with drag & drop modules.
  • Partners - display partner company logos with optional links, add content in Partners panel with drag & drop modules.
  • Page Builder - Disabled by default, can be toggled on/off.
    1. Create a Page > add your content with Visual Composer > Publish
    2. Go into Real Estate 7 Options > Homepage > Layout Manager > Enable a Page Builder module
    3. Click Page Builder on the left
    4. Assign a the Page you just created in Step 1 under the Page Builder module you just enabled
    5. Save Settings, and you're all set!
  • Four Column - Widget area, add widgets via Appearance > Widgets > Four Column Homepage.

Advanced Search

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

  • Type
  • City
  • State
  • Zip/Postcode
  • Beds
  • Baths
  • Price From
  • Price To
  • Status
  • Additional Features
  • Country
  • Community
  • MLS

Alternative Homepages

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

  • Agent Home
    1. This can be selected by going into Settings > Reading > Front Page Displays > A Static Page > Front Page > Select Homepage - Agent Screenshot
    2. You can then edit the content via Pages > Homepage - Agent > Edit
  • Parallax Home
    1. This can be selected by going into Settings > Reading > Front Page Displays > A Static Page > Front Page > Select Homepage - Parallax Screenshot
    2. You can then edit the content via Pages > Homepage - Parallax > Edit

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:

  • Property Type: Can be anything you wish and as many as you like, in the demo I've only used two Condo/Townhome & Single Family Home.
    • Commercial, Land or Lot: Any listing given this type will remove the "bed, bath & on" sitewide.
  • Beds: Number of beds, can be any amount you like.
  • Baths: Number of baths, can be any amount you like.
  • Status: Can be anything you wish and have as many as you like, in the demo you'll notice I've used a few. Although there are some that are necessary to add for certain functions.
    • Ghost: Any listing given this status will be excluded from search results.
    • For Sale: Any listing given this status will add a For Sale flag over the image across the site.
    • Featured: Any listing given this status will appear in the homepage area and large map.
    • For Rent or Rental: Any listing given this status will add a For Rent or Rental flag over the image across the site.
    • Leased: Any listing given this status will add a Leased flag over the image across the site.
    • Reduced: Any listing given this status will add a Reduced flag over the image across the site.
    • Sold: Any listing given this status will add an Sold flag over the image across the site.
    • Open House: Any listing given this status will add a Open House flag over the image across the site.
    • Available: Any listing given this status will add a Available flag over the image across the site.
    • New Addition: Any listing given this status will add a New Addition flag over the image across the site.
    • Special Offer: Any listing given this status will add a Special Offer flag over the image across the site.
  • City: City the listing is located in, used for mapping.
  • State: State the listing is located in, used for mapping.
  • Zipcode: Zipcode the listing is located in, used for mapping.
  • Additional Features: Can be anything you like, and as many as you like. Some I've used in the demo: Concierge, Forced air heat, Family room is 20×12, Single story, etc…

Uploading Listing & Blog Post Images top

  • Listings: No messing around with copy/pasting URL's for images, this theme makes it so easy to add unlimited photos to your listings:
    1. Open up a listing
    2. Click "Set Featured Image" upper right
    3. Click Upload or select from Media Library
    4. Click Set Featured Image
    5. That's it!
    6. If you would like to add more images, follow the steps below and a slider/carousel will be automatically generated:
      1. Open up a listing
      2. Find the Slider Images block
      3. Click Add or Upload File
      4. Upload all the images you like (NOTE: images MUST be uploaded/attached to that listing otherwise they won't be displayed)
      5. Once uploaded, click use this file
      6. Click Publish or Update and view your listing.
      7. Reordering Slider Images
        1. Open up a listing
        2. Click Add Media button
        3. Click the Media Library tab
        4. Select Attached to post
        5. Now you can click and drag your images around to sort them.
        6. Once done, just close the window click Update and you're good to go.
  • Blog: Blog postings work the same way as above.

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:

  • All Listings or "Find A Home":
    http://yourdomain.com/?search-listings=true
  • For Sale & San Diego:
    http://yourdomain.com/?ct_city=san-diego&ct_status=for-sale&search-listings=true
  • For Rent
    http://yourdomain.com/?ct_ct_status=for-rent&search-listings=true
  • 1 Car Garage
    http://yourdomain.com/?ct_additional_features=1-car-garage&search-listings=true
  • 3 Beds
    http://yourdomain.com/?ct_beds=3&search-listings=true

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

  • Edit Listing (template-edit-listing.php)
  • Edit Profile (template-edit-profile.php)
  • Favorite Listings (template-favorite-listings.php)
  • Submit Listing (template-submit-listing.php)
  • View Listings (template-view-listings.php)

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.


Sub Listings top

These are super simple to setup, and are great for Communities, Neighborhoods, Suburbs, Districts or Buildings.

  1. When creating or editing a listing find the "Community" taxonomy on the bottom right hand side (pictured below).
  2. Enter the "Community" name
  3. Publish or Update your Listing

Once you have multiple listings all with the same "Community" name those will now be grouped and appear as Sub Listings on each individual single listing view.

You also have the option of choosing the name of said taxonomy, via Real Estate 7 Options > Listings > Community, Neighborhood, Suburb, District or Building?


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:

  • Banks
  • Bars/Nightlife
  • Coffee Shops
  • Gas/Petrol Stations
  • Gropcery Stores
  • Hospitals
  • Restaurants
  • Schools/Education

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:

  • Property Title
  • Property Description
  • Street Address
  • City
  • State
  • Zip or Postcode
  • Slider Images
  • Files & Documents
  • Video URL
  • Listing Price
  • Listing Details (price, property ID, fees, etc)

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

  • Adspace - Use this widget to add any type of Ad as a widget.
  • Agent Info - Use this widget to display your listing agent information, can only be used in the Listing Single sidebar as it relies on listing information for content.
  • Agents Other Listings - Display your agents other listings, can only be used in the Listing Single sidebar as it relies on listing information to function properly.
  • Blog Author Info - Use this widget to tell your audience a little bit about your company and all the awesome things you do! Optional Gravatar, and Read More link.
  • Broker Info - Use this widget to display your brokers information.
  • Contact Info - Use this widget to display your contact information.
  • Flickr - Use this widget to populate photos from a Flickr ID.
  • Follow Us - Use this widget to show your social profiles.
  • Latest Posts - Use this widget to display your latest posts.
  • Listings - Use this widget to display your listings from any taxonomy and tag combo.
  • Listings Agent Contact - Display an agent contact form. Can only be used in the Listing Single sidebar as it relies on listing information for content.
  • Listings Search - Use this widget to display the advanced listings search form.
  • Search - Use this widget to display the blog search form.
  • Tabs - Use this widget to display Latest Posts, Recent comments and a Tag cloud.

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)
  • Start PoEdit and click on the File menu and select the option New catalog from PO file.
  • This will open the file dialog box. Go to the languages folder of the theme. Select All Files from the file dialog box, and open the en_US.po file in the languages folder.
  • Now PoEdit will ask you for various configuration options. The most important thing here is to choose the correct country and language you are translating to.
  • In the remaining fields of the configuration window, fill the required information or just leave them empty.
  • Now click on the Paths tab and change the path variable to the place where your theme files are located.
  • Then press OK.

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)
  • Start PoEdit and click on the File menu and select the option New catalog from PO file.
  • This will open the file dialog box. Go to the languages folder of the plugin. Select All Files from the file dialog box, and open the en_US.po file in the languages folder.
  • Now PoEdit will ask you for various configuration options. The most important thing here is to choose the correct country and language you are translating to.
  • In the remaining fields of the configuration window, fill the required information or just leave them empty.
  • Now click on the Paths tab and change the path variable to the place where your theme files are located.
  • Then press OK.

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.

  • 1. Base (css/base.css)
    • 1.1 Reset
    • 1.2 General
    • 1.3 Typography
    • 1.4 Margins & Padding
    • 1.5 Links
    • 1.6 Lists
    • 1.7 Images & Video
    • 1.8 Buttons
    • 1.9 Tabs
    • 1.10 Forms
    • 1.11 Tables
    • 1.12 Notifications
    • 1.13 Widgets
    • 1.14 Misc
  • 2. Framework (css/responsive-gs-12col.css)
  • 3. Layout (css/layout.css)
    • 3.1 Site Styles
    • 3.2 Page Styles
    • 3.3 Media Queries

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

  • css/comments.css - styles for comments.
  • css/ct-dropdowns.css - styles for the main navigation.
  • css/flexslider-direction-nav.css - styles for FlexSlider navigation, recommend leaving this file alone.
  • css/flexslider.css - styles for FlexSlider, recommend leaving this file alone.
  • css/fontawesome.css - styles for FontAwesome, recommend leaving this file alone.
  • css/ie.css - styles for IE.
  • css/page-builder-blocks.css - styles for page builder blocks, recommend leaving this file alone.
  • css/prettyPhoto.css - styles for PrettyPhoto, recommend leaving this file alone.
  • css/ie.css - styles for Safari.
  • css/validationEngine.jquery.css - form validation styles, recommend leaving this file alone.

JavaScript top

  • base.js - This is the main JS file it controls a few different things, its well commented for easy customization.
  • classie.js - Used for class helper functions.
  • ct.account.js - Used for login/register ajax validation.
  • ct.address.autocomplete.js - Used for google maps address search autocomplete.
  • ct.advanced.search.js - Used for ajax search chaining.
  • ct.gallery.js - Used for cleaning up the standard WordPress gallery shortcode output.
  • ct.infobox.js - Used for custom map infoboxes.
  • ct.lightbox.js - Used for displaying images in a lightbox.
  • ct.mapping.js - Used for mapping.
  • ct.mobile.menu.js - Used for mobile menu select.
  • ct.select.js - Used for applying custom select styling to form element.
  • ct.tooltip.min.js - Used for the main navigation dropdowns.
  • ct.wpfp.js - Used for the WP Favorite Posts plugin.
  • jquery.customSelect.min.js - Used for applying custom select styling to form element.
  • jquery.cycle.lite.js - Used for testimonials widget.
  • jquery.easing.1.3.js - Used for animations.
  • jquery.fitvids.js - Used for fluid width video embeds.
  • jquery.flexslider.min.js - Used for Flexslider.
  • jquery.hammer.min.js - Used for hammer trigger jQuery events.
  • jquery.sortable.min.js - Used for sortable elements.
  • jquery.transit.min.js - Used for animations.
  • jquery.validationEngine.js - The form validation is handled by this file, this one doesn't require any editing.
  • markerclusterer.js - Used for clustering map markers.
  • markerwithlabel.js - Used for custom map maker labels.
  • modernizer.custom.js - Used for browser feature detection.
  • plupload.full.min.js - Used for file uploads.
  • respond.min.js - A lightweight polyfill for old version of IE.
  • toucheffects.js - Used for mobile device touch effects.
  • waypoints.min.js - Used for setting waypoints for scroll effects, e.g. sticky header.

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:

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
  • Using a child theme can speed up development time.
  • Using a child theme is a great way to to learn about WordPress theme development.

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