Documentation

WP Beauty - v1.0.1

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 wp-beauty.zip.
  4. Login to your WordPress admin > Appearance > Themes
  5. Add New
  6. Upload wp-beauty.zip
  7. Activate
  8. Once activated you'll see a required plugins install notice, click "Begin Installing Plugins" follow the steps and activate each.

Manual Theme Installation

If for some reason your host has low upload limits on your server, use the steps below to manually install the theme.

  1. Unzip the main download > unzip the wp-beauty.zip file
  2. Connect to your server via FTP, I use filezilla-project.org for my client its a free download
  3. Upload the theme folder into wp-content > themes >
  4. That's all she wrote, enjoy!

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 WP Beauty 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 > WP Beauty Options > Homepage > Layout Manager > Enable/Disable and orgainize the blocks you want.
  4. Save Settings
  5. And you're good to go!
*If you imported a demo skip this

General Options

  • Centered or Full Width
  • Sticky - Choose this option if you'd like the header to stick to the top of the window when scrolling down the page.
  • Layout Manager

    This is a drag & drop to enable, disable and rearrange any of the header elements allowing you to create 256 different combinations.

    • Tagline Bar
    • Logo
    • Navigation
    • Page Builder

Logo

  • Custom Logo - Upload your custom logo here, a transparent PNG is preferable.
  • Custom Logo @2x - This is used for retina or high DPI displays, which would be double the size as the normal logo uploaded.
  • Use Text Logo? - If you don't have a logo, simply select Yes and the Site Title will be used from Settings > General > Site Title.

Tagline Bar

  • Left Content
  • Center Content
  • Right Content

Page Builder

This section can be used to add anything you'd like to display in the header, utilizing it in conjunction with Visual Composer

Create a page > add your content with Visual Composer > Publish > set the page in one of the options below. Make sure you've enabled either Page Builder block from the Header Layout Manager as well.

Homepages top

Every homepage is built utilizing Visual Composer so when you import the demo of your choice it comes along with it and will be named "Home" and you'll also see the "emdash; Front Page" desgination from the Admin > Pages section.

Feel free to use one of the pre-built and replace the content with your own or start completely from scratch its up to you!


Layout Manager

  • Layout Manager

    This is a drag & drop to enable, disable and rearrange any of the header elements allowing you to create 256 different combinations.

    • CTA Button
    • Navigation
    • Text /Copyright
    • Social Links

CTA Button

  • Button Text
  • Button URL
  • Open in New Tab?

Text & Copyright

  • Footer Text - Used to display whatever you'd like can also include the following HTML (h2, h3, h4, h5, h6, p, a, img, em &emp; strong).

Social Links

  • Open in New Tab
  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • YouTube
  • Dribbble
  • Pinterest
  • Instagram
  • Yelp
  • Contact

Uploading Blog Post Images top

  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 post
    2. Click Add Medid
    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 post
      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.

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.

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

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.


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


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.
  3. Find Page Attributes > Template
  4. Select one
  5. Publish or Update!

Contact One (template-contact-one.php)

  1. You'll want to create a form via Admin > Contact (make sure the Contact Form 7 plugin is installed & activated) or you can use Gravity Forms if you'd like.
  2. Create a Page
  3. Add your Content using Visual Composer
  4. Select the Contact One Template
  5. Publish and you're all set

Contact Two (template-contact-two.php)

  1. You'll want to create a form via Admin > Contact (make sure the Contact Form 7 plugin is installed & activated) or you can use Gravity Forms if you'd like.
  2. Create a Page
  3. Add your Content using Visual Composer
  4. Select the Contact One Template
  5. Publish and you're all set

Full Width (template-full-width.php)

Use this for full width content pages.

Home (template-home.php)

Use this building your homepage.

No Title (template-no-title.php)

Use this for pages you don't want the title area displayed.


Custom Widgets top

  • Adspace - Use this widget to add any type of Ad as a widget.
  • 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.
  • Hours of Operation - Use this widget to display your hours of operation.
  • Follow Us - Use this widget to show your social profiles.
  • Latest Posts - Use this widget to display your latest posts.
  • 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/sp-menu.css - styles for mobile navigation, recommend leaving this file alone.
  • css/ct-woocommerce.css - styles for FontAwesome, recommend leaving this file alone.
  • css/ie.css - styles for IE.

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.infobox.js - Used for custom map infoboxes.
  • 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.woocommerce.js - Used for the WooCommerce elements.
  • ct.woocommerce.quantity.increment.js - Used to replace WooCommerce quantity incrementer.
  • jquery.customSelect.min.js - Used for applying custom select styling to form element.
  • jquery.fitvids.js - Used for fluid width video embeds.
  • jquery.customizer.js - Used for theme customizer.
  • markerclusterer.js - Used for clustering map markers.
  • markerwithlabel.js - Used for custom map maker labels.
  • number-polyfill.js - Used for WooCommerce increment.
  • respond.min.js - A lightweight polyfill for old version of IE.
  • 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 Beauty 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


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