A how-to guide and general information to help you get the most out of your new theme.


Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document answers to common problems and issues - I encourage you to read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support forum .


Informations about Updates and New Themes are always announced on Twitter.


USER GUIDE



Folder Structure


The Theme is built with WordPress best practices in mind, therefore it makes heavy use of the WordPress template engine. What exactly does that mean?

Whenever you see a php function call like this within your php files (get_template_part(), get_header(), get_footer() or get_sidebar() ) the theme retrieves a reusable code snippet, most of the time a chunk of code that is used in many different files.

  • This approach has the benefit that you can edit a single code snippet and the changes will effect many page templates
  • Its still easy to only change a single page template since you can simply include a modified copy of the snippet instead of the original one
  • Last but not least it makes the folder structure clear and tidy.

Apart from the php structure the theme uses a lot of modern CSS3 features, most notably the power of media queries to serve different layouts for different viewport sizes. If you use a modern browser (IE9 +, Chrome, Safari, Firefox) and resize your browser window you will realize that the theme adapts its size to the viewport.

Folder structure:

  • Beauty Hair → all PHP template files needed to run the WordPress theme as well as the main stylesheet (style.css)
  • Admin → mostly configuration files for the admin panel. Also holds some registration functions for custom post types and dynamic styles.
  • Lang → PO. and MO. files for translation this theme.
  • JS → Custom Javascript files, the prettyPhoto Lightbox files and the jQuery library
  • CSS → Multiple stylesheets:
    • css/app.css - loads the default grid with all widths for the different screens.
    • css/normalize.css- loads the css normalize & default styling for html elements like <a>, <ul>, <li>.
    • css/style.css - main css file.
    • css/custom-style.php - a php file that holds all color informations entered within the backend. It is recommended to not edit this file and instead use the custom.css file.
    • css/custom.css - stylesheet dedicated for user customizations.
  • Img
    • Layout Images, Icons folder etc.
  • Lib → lots of small code snippets and functions that were mentioned before that make the theme flexible and easy to edit.

Installation and Setup


First of all if you are new to WordPress, I would recommend to learn a little bit about it before you get started. Here are some nice Resources on how to get started with WordPress.

To install this theme you must have a working version of WordPress v3.0 or newer already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

IMPORTANT : Make sure that you unzip the downloaded file first ( do not try to install or upload this file to your server). In the contents of this file you will find the actual theme zip file called " Beauty_Hair.zip ". This is the file you're going to be using to install the theme in your WordPress.

When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:

  1. FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server.
  2. So that the structure looks like: /wp-content/themes/newshop/ .

    Once the upload is complete go to the WordPress administrator backend and activate the theme (the theme should appear now under Appearance > Themes )

  3. WordPress Upload: Navigate to Appearance > Add New Themes > Upload . Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.

Upload the Beauty Hair.zip file through the WordPress admin backend (This will ONLY work if the server that hosts your website allows upload limits greater than 6 MB. Please note, most hosting providers have only up to 2MB file upload limit ):

Once you have installed the theme, you can go back to the “Themes” page in the WordPress Admin Panel Appearance > Themes and select “Activate” on Beauty Hair.

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

If that doesn't make any difference, contact technical support at your hosting provider and they should be able to assist you with increasing the file upload memory limit.

The theme's options page should appear now near the bottom of the sidebar under the name: Theme Options:

Import Demo Content (Optional)



Attention: The demo content can only be installed on a fresh Wordpress installation running the Beauty Hair Theme. If you're having any posts, pages or other data please do not install the demo content as it may cause damage to your previous content!

If you are new to WordPress and have problems with setting up the theme you might want to import the dummy content file that comes with the theme.

The Demo Data .xml file allows you to upload some dummy content to your site to help you get started with the Theme and get to know the functionality. Please note, that the .xml file doesn't include images or the slider data. See the slider section & screencast of this documentation on how to set them up.

  • Log into your WordPress backend
  • Navigate to Tools > Import
  • Click on "WordPress". If you haven't imported anything yet, you will need to install "Importer" plugin.
  • Select the .xml file in the SampleData folder.
  • Now make sure to Select the Menu in Appearance > Menus and set up "Home" as front page and "Blog" as posts page under Settings > Reading .

The theme will then import some dummy posts and pages from the live preview. However you will still need to set some options on your own, like which page should serve as front page or how menus should be displayed. A quick demonstration video can be found here .

Please note: If the demo content was not imported ( the standard export/import .xml option is used in the theme ), it means that there is a server side issue or our demo page is not accessible via http ( you can check the demo on our site ). Sometimes, the content can't be downloaded from external site to your wordpress content folder because of the folder permissions, server configuration, temporary site URL etc. In this case, we recommend you to contact your hosting provider regarding this issue.


Pages


Setting up Front Page

Before setting up the Frontpage, let me tell you that Front page and Home Section are different. Home section is the the first section in the Frontpage where as Frontpage is where all your sections will be displayed. This is different from the Home Section.

To set up the Frontpage, you must first create a new page with no content inside it, you can do so by navigating to Pages > Add New . You can give this page a title of Frontpage . Under the page attributes section, Select Page template as Front Page Template " and Click Publish .

Once you have created your new page, Goto Settings > Reading . Select A static page and assign the Frontpage for Front Page:

If you haven’t applied these settings above, your frontpage sections will not be displayed.

Setting up Blog

To set up the blog, you must create a new page, you can do so by navigating to Pages > Add New. You can give this page a title of “blog” yet you do not have to include any content. Click “Publish”.

Once you have created your new page, Goto Settings > Reading. Select “A static page” and assign the “blog” for “Posts Page:”

Your blog index is now created and can be viewed by visiting the page you just published.

Setup WooCommerce

After you’ve installed and activated the plugin, be sure to select ‘Install WooCommerce Pages‘ to get started.

Inside this panel you’ll find all the core WooCommerce settings such as catalog settings, pages, payment gateways, shipping methods and tax rates accessible via the tabs at the top of the screen.

To configure your shop go to WooCommerce > Settings . Then browse through the tabs below to get more information on the WooCommerce Options.

For more details, please follow the official docs

Adding a product

Adding a simple product is a straight forward process and not too dissimilar from authoring a standard WordPress post. In the Products menu click Add Product; you will be presented with a familiar interface, and should immediately see where to type the product title and full description. Read official docs.

Change image sizes.

This theme uses image sizes other than WooCommerce normal sizes. Go to WooCommerce > Settings > Products and change sizes to these:

Your blog index is now created and can be viewed by visiting the page you just published.


Shop with Big Slider.

You can use big slider on your shop page. To do this create New page > select type of page Slider Page and add woocommerce shortcode like this:

Attention:  : While copy/pasting a code from another website or help documentation, paste it into the text mode instead of the visual mode because while copying code from another website, it will also copy irrelevant HTML on top of it causing styling issues.
So, at first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). And then paste your code.

[product_category category="men" per_page="6" columns="3"]

WooCommerce comes with several shortcodes which can be used to insert content inside posts and pages. The following shortcodes are inserted into pages upon installation and therefore shouldn’t need to be used anywhere else.

Shortcodes included with WooCommerce

How to use Shortcodes


Recommended Plugins


IMPORTANT : Once you've installed the theme successfully you will need to install some plugins necessary to get the most functionality for the theme.

The Beauty Hair theme has been prepared to work with a few additional plugins to enhance its functionality. Once you install the theme you should see a info box on top letting you know of the plugins "required" and "recommended" to be installed for the theme. Click on the "Begin installing plugins" link:

Required Plugins Info:

SLIDER REVOLUTION

Beauty Hair includes the “Slider Revolution” plugin for creating rich, dynamic, sliders on top of the standard responsive slider used in your gallery posts and shortcodes. Thanks to the auto activation feature of Beauty Hair this plugin will be activated when you install Recomended plugins .

How to create a Post Based Slider

If you have any problems with the auto activation you also can do it manually by going to the "lib" folder and then "plugins" . In this folder you will find the revslider.zip file. Simply copy this to your desktop then go to Plugins > Add New . Select Upload on the Add New page and then Choose File to select the .zip you just copied to your desktop. Upload it, activate it, and you’re ready to begin using the Slider Revolution.

Once activated, Slider Revolution will create it’s own menu item at the bottom of the WordPress Admin Panel. This is where you will create your slides and get your shortcodes to place throughout your theme as needed. Make sure to read through the Slider Revolution documentation to get a better understanding for how the plugin works, but we think one of the best ways to get used to it is to just play around with it and be creative. You’ll be amazed at what you can create with this increadible product!

How to add Slider Revolution to your page?

Multiple options

Video tutorial

WooCommerce

WooCommerce is the most popular WordPress eCommerce plugin.

CONTACT FORM 7

If you would like to have a contact form on one of your pages we recommend using Contact Form 7 . Due the fact that we fully integrated the styling of the contact form in our theme, you simply can activate the plugin and will have good looking forms.

Setting up the Homepage


To set up the homepage you must create a new page, you can do so by navigating to Pages > Add New . You can give this page a title yet you do not have to include any content. Select the “Home” template from the Page Attributes section and click “Publish”.

Once you have created your new page which uses the “home” page template, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your front page.

Your homepage is now created and can be viewed by visiting your root URL. You can configure the display of the homepage by visiting the theme options panel.

Setting up the Blog


To set up the blog, you must create a new page, you can do so by navigating to Pages > Add New . You can give this page a title of “blog” yet you do not have to include any content. Click “Publish”.

Once you have created your new page, navigate to Settings > Reading and configure the “Front Page Displays” setting. Select the static page option and choose the page you just created as your posts page.

Your blog index is now created and can be viewed by visiting the page you just published.


Theme Features


The theme comes packed with features that control the layout and extend the functionality of WordPress. This section will document those features and how to use them successfully.

Custom Menus


If you are using version 3.0 of WordPress or higher, you can setup custom menus to configure your site’s navigation. The theme comes with one custom menu location called “Primary Menu” and is located at the very top of the theme.

Should you be running earlier versions of WordPress, the menu degrades gracefully and automatically creates your navigation for you - custom menus are replaced with a list of pages. In this case, you will have options to alter the display of these menus from the theme options.

Setting up custom menus

To setup your custom menus, navigate to Appearance > Menus . Give your menu a name and build it up using the available widgets. You can add a variety of items including pages, categories, custom links. To extend the available widgets, click the screen options tab at the very top of the screen and configure your options.

Once you have built and saved your menu, simply select the theme location using the widget on the left. Under “Main Menu”, select your custom menu from the dropdown list to use it as the site’s main navigation.

Theme Options


The theme comes with a simple to use administration panel. You can access it by navigating to Appearance > Theme Options . The theme options are conveniently spread over a number of tabs and each tab contains the options that pertain to a particular area of the theme. Please take some time navigate through each tab and read options description.


Translation


Beauty Hair is localised and you can easily translate it to any language you like. Please note that font family you are using in the theme should support the language's special characters.

Configure WordPress

Before translating your theme, you’ll need to make sure WordPress is setup correctly with your locale. Open wp-config.php from your wordpress installation root folder and modify the line below, or add it if it missing. Complete lists of codes can be found at (country codes) and (language codes ).

For example you will need to modify as below for Spanish Language.

define ('WPLANG', 'es_ES');

The translation files .po/.mo (and newshop.pot file) are located in Beauty Hair > lang in the Themes folder.

To translate the theme, just follow these steps:

  • Duplicate the en_EN.po file and rename it to your language (for German it's de_DE.po)
  • Edit the new .po file using POEdit ( http://www.poedit.net/ )
  • Hit save, a new .mo file should be created.
  • Make sure that in the root of your WordPress Installation in the wp-config.php file your language is defined like this:
    define ('WPLANG', 'de_DE');

To rename different Words, like "Portfolio Description", "Project Details" etc, just follow these steps:

  • Open en_EN.po file using POEdit ( http://www.poedit.net/ )
  • Rename the Words you want to rename.
  • Hit save, the .mo file should be updated.
  • Make sure that in the root of your WordPress Installation in the wp-config.php file your language is defined like this:
    define ('WPLANG', 'en_EN');

We constantly develop new features, so after downloading a new Version we recommend to check that everything is translated correct.


HTML Structure


The Theme uses valid HTML 5 and comes with predefined classes for common elements needed in web design.

All templates share basic elements like header, footer, main, and entry so be carefull when editing those or adding/changing the CSS for those ids and classes :)


CSS Files and Structure


The CSS for the theme is split into various files: one that holds the basic markup for layout which are app.css. The style.css holds theme specific css rules.

We got an empty custom.css file which should be used by you to add your own modifications. Since we never touch the custom.css file when making updates you can easily update to later theme versions without beeing in danger of loosing stylesheet modifications.


JavaScript


The theme uses advanced jQuery functions. You do not need to know how to use jQuery to activate them, almost everything is controlled by WordPress.


PSD Files


Since the design for the theme was mainly done in google Chrome once the initial Mockup was done we could only include the mockup psd file and the logo files. Other than that the theme doesn't use any images.


Image Sizes


This is the image array used in functions.php to tell wordpress which image sizes to use.

  • add_theme_support('post-thumbnails');
  • add_image_size('fd-lrg', 1024, 99999);
  • add_image_size('fd-med', 768, 99999);
  • add_image_size('fd-sm', 320, 9999);

You can change these settings in functions.php. The theme will then create different thumbnail sizes according to your changes on upload. To reflect those changes you might need to do some minor changes within your CSS file, depending on what you have changed.


Sources and Credits


Open source projects

Licensed projects

jQuery & Plugins

Demo Graphics (didn't included in download)

The sample images viewed in the live preview are for demo purposes only and are not included with your purchase.


Again, thank you for purchasing this theme!

If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support forum .


Well Done! If you like this theme, please rate it. If you’re about to rate it with less than 5 stars, please let me know the reason first and I will do my best to improve the theme.

Have fun with your new theme! Best regards ;)