“WP Pro Real Estate 6” Documentation by “Chris Robinson (contempoinc)” v1.6.4
“WP Pro Real Estate 6”
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.
Table of Contents
- Installation & Screencasts
- Homepage Setup
- Custom Taxonomies and Usage
- Uploading Listing & Blog Post Images
- Building Out Your Navigation
- Using Permalinks
- Custom Widgets
- Custom Shortcodes
A) Installation - top
Please follow the installation initial instructions below.
- Unzip the final zip file; you should now have a final download folder.
- Do NOT upload the final download folder. Open up the final download folder.
- Browse the contents and find the realestate-6.zip file.
- Unzip and upload ONLY the theme folder to your "wp-content/themes" folder.
- Optional: If you do not wish to manually upload the theme only folder to your "themes" folder, there is an option. You can upload the Lofty.zip via the WordPress themes admin panel by selecting "add new" and clicking "upload".
- Login to your Wordpress admin and navigate to Appearance > Themes > locate "WP Pro Real Estate 6" and activate it.
- Once activated you will be redirected to the Options panel, where you can configure the theme. Make sure to throughly go through each panel and famalirize yourself with everything, there are a bunch of options to configure.
Importing the Dummy Data
If this is a new installation and you would like some dummy content I've included an XML file with all the content from the theme demo.
- Go to Tools
- Click Import > Select Wordpress
- Click Browse > Find the supplied "wpprorealestate6.wordpress.2014-01-21.xml" located within the main folder > Multi Demo XML
- Click Upload file and import
- That's it!
- Create a page > name it Home > apply the Home page template > Publish
- Settings > Reading > Front Page Displays > Set to the Home page you just created > Save
- Now go into Admin > WP Pro Real Estate 6 Options > Enable/Disable and orgainize the blocks you want
- Save Settings
- And you're good to go!
Choosing your Theme Mode
- Go into Admin > WP Pro Real Estate 6 Options > General > Multi-Listing or Single Listing Mode? > choose your mode
- If you've chosen Multi move on to the Homepage tab, see step 3 above
- If you've chosen Single > go into Tools > Import > Upload > navigate to the main folder you unzipped from Themeforest > Single Demo XML > wpprorealestate6.wordpress.2015-05-26.xml > Import the demo data
- The single mode will display the latest listing added with the status of Featured
- That's all there is to it!
B) Homepage Setup: - top
Listings Search Field Manager
Here you can add/remove/sort fields for the advanced search area.
There's no wrong or right way to setup your homepage, a countless number of possible setups are available.
- Slider - Activated by default, either one can be toggle on/off independently. Slide content can be added via the Slides Manager on the homepage panel.
- Featured Listings - Activated by default, can be toggle on/off.
- Call To Action - Activated by default, can be toggle on/off.
- Listings Search - Activated by default, can be toggle on/off.
- Page Builder - Disabled by default, can be toggle on/off. You can enable this block then go into Appearance > Page Builder > Construct your template > Save > Grab the ID > go back to WP Pro Real Estate 6 Options > Homepage > Paste the ID into the Page Builder Template ID field > Save Settings
If you've enabled the slider you can add slides/content by scrolling further down and finding the Slides manager section on the Homepage panel
C) 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.
- 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 "Rental" text in front of the price.
- Leased: Any listing given this status will add a red "Leased" flag over the image across the site.
- Reduced: Any listing given this status will add a red "Reduced" flag over the image across the site.
- Sold: Any listing given this status will add an orange "Sold" flag over the image across the site.
- Open House: Any listing given this status will add a green "Open House" flag over the image across the site.
- Available: Any listing given this status will add a green "Available" 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…
D) 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:
- Open up a listing
- Click "Set Featured Image" upper right
- Click Upload or select from Media Library
- Click Set Featured Image
- That's it!
- If you would like to add more images, follow the steps below and a slider/carousel will be automatically generated:
- Open up a listing
- Click Add Media button
- Click the Upload tab
- Upload all the images you like
- Once uploaded, click the X (top right)
- That's it! You can close the window, click Publish or Update and view your listing.
- Reordering Slider Images
- Open up a listing
- Click Add Media button
- Click the Media Library tab
- Select Attached to post
- Now you can click and drag your images around to sort them.
- Once done, just close the window click Update and you're good to go.
- Blog: Blog postings work the same way as above however they only support one main image.
E) Building Out Your Navigation - top
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 Sale & San Diego:
- For Rent
- 1 Car Garage
- 3 Beds
More on the Menus screen can be found here: http://codex.wordpress.org/Appearance_Menus_Screen
F) dsIDXpress - top
Please see dsIDXpress Getting Started Guide for all the information you need to start using the plugin on your site.
G) Using Permalinks - top
If you want to enable pretty permalinks, I highly suggest you use this custom structure /%year%/%monthnum%/%postname%/
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.
This theme comes chock full of custom widgets, FIFTEEN to be exact!
- 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.
I) Translation - top
Need to translate the theme into another language? No problem, it's fully localized and translation ready. Follow the simple steps below:
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.
Then open wp-config.php located in the root of your WordPress installation and change line 72 to reflect your new language 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. Also upload wp-config.php to the root of your WordPress installation and you'll be good to go.
J) Custom Shortcodes - top
This theme comes loaded with a bunch of custom shortcodes, all to make your life oh so much easier. What are shortcodes? They're are simple macro codes to be used in WordPress post content. There's no need for any HTML knowledge!
Using shortcodes has never been easier, launch the visual shortcode generator by clicking the red button with the S on it within the post editor bar.
K) 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.
- base.js - This is the main JS file it controls a few different things, its well commented for easy customization.
- ct.mobile.menu.js - Used for mobile menu select, this one doesn't require any editing.
- foresight.min.js - Used for retina displays, this one doesn't require any editing.
- infobubble.js - Used for map infobubbles, this one doesn't require any editing.
- jquery.fitvids.js - Used for fluid width video embeds, this one doesn't require any editing.
- jquery.flexslider.min.js - This is the main FlexSlider file, this one doesn't require any editing.
- jquery.prettyPhoto.js - This is the main PrettyPhoto file, this one doesn't require any editing.
- jquery.validationEngine.js - The form validation is handled by this file, this one doesn't require any editing.
- markerwithlabel.js - This is a Google Maps plugin allowing custom marker labels, this one doesn't require any editing.
- respond-min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more), doesn't require any editing.
- retina.js - Used for retina displays, this one doesn't require any editing.
M) 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.
N) Support - top
Please see the Support Site.
O) 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. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Go To Table of Contents