Hairsalon WordPress Theme Documentation

Step 1. Theme installation

1. Go to the menu Appearance > Themes and click the Add New Theme button.
2. Click the Upload link.
3. Click the Browse button and navigate to the unzipped template package on your computer.
4. Look for a file called hairsalon-pro.zip Click on it to select, then click OK.
5. Click the Install Now button and wait until the installation is complete.
6. Click the Activate link to change the current layout of the site to the theme your purchased.
7. Go to Appearance >> Theme Options >> Restore Default.

Congratulations, your theme have been successfully installed!

Step 2. Sample Data Installation

To make your WordPress website look like our live demo, please follow the instructions below.

1. Go to the tools Select import option and select wordpress and install then browse xml file and you'r done. See below screenshot.

   

Setup Header

Follow these instructions to setup header.

• For Site Name/Logo: For changing site name go to Settings >> General >> Site Title OR if you want to uplaod logo for your site go to Appearance >> Theme Options >> Basic settings >> Logo. Please see the theme option tab in this documentation for more details.
• For Navigation: See the Setup Navigation tab of this documentation.
• For Top Header: Go to Appearance >> Theme Options >> Basic Setting >> Add Contact Details / Social Icons and Book Now button text / link
• For Slider: Go to Appearance >> Theme Options >> Homepage Slider >> Upload image, Add Title/Sub Title/Description

Shortcode for Social Icon.

[social_area][social icon="facebook-f" link="https://www.facebook.com/alexathemeswp/"][social icon="twitter" link="https://twitter.com/alexa_themes"][social icon="youtube" link="#"][social icon="instagram" link="https://www.instagram.com/alexathemes5116/"][social icon="linkedin-in" link="#"][social icon="google-plus-g" link="#"][/social_area]

Setup Section First About Barber & SPA

For setting up About Barber & SPA section Go to >> Appearance >> Theme Options >> Sections >> Select Section 1.

Shortcode/Content for About Barber & SPA Section.

[about_main][about_left image_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/abt-left-thumb.jpg" title="About Barber Services" icon="user-hair" icon_style="light" btn_text="Male Services" btn_link="#"]We are offering all hair salon services in your area with the best quality you can ever imagine from a salon.[/about_left][about_middle icon="alarm-clock" icon_style="light" title="Opening Hours" week_day_1="Monday" week_dayhrs_1="08:00 AM - 19:00 PM" week_day_2="Tuesday To Friday" week_dayhrs_2="08:00 AM - 17:30 PM" week_day_3="Saturday" week_dayhrs_3="08:00 AM - 15:30 PM" week_day_4="Sunday" week_dayhrs_4="Closed"][about_right image_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/abt-right-thumb.jpg" title="About SPA Services" icon="user-hair-long" icon_style="light" btn_text="Female Services" btn_link="#"]We are offering all hair salon services in your area with the best quality you can ever imagine from a salon.[/about_right][clear][/about_main]

Setup Section Second Welcome To Hairsalon

For setting up Welcome To Hairsalon section Go to >> Appearance >> Theme Options >> Sections >> Select Section 2.

Shortcode/Content for Welcome To Hairsalon Section.

[row][column col="6"][welcome_left sub_title="Welcome To The Hair Salon Shop" title="You will be sure to have" highlight_title="an old fashioned time"]Theres things people say in the barbershop they wont even say in their own living room, because its just one of those zones where Theres things people say in the barbershop they wont even say in their own living room, because its just one of those zones where nobodys going. Come to the corner for a great cut.[clear][skill title="Razor Trimming" percent="92"][skill title="Hair Stylist" percent="96"][skill title="Facial Face" percent="85"][skill title="Royal Bread" percent="95"][skill title="Beard Shaving" percent="80"][/welcome_left][/column][column col="6"][welcome_right image_path_1="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/wel-thumb-1.jpg" image_path_2="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/wel-thumb-2.jpg" number="25" title="Year Experience"][/column][/row]

Setup Our Services Section

For setting up Our Services section Go to >> Appearance >> Theme Options >> Sections >> Select Section 3.

Shortcode/Content for Our Services Section

[row][column col="4"][services image_icon_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/ser-1.png" title="Hair Cut" link="#"]Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.....[/services][/column][column col="4"][services image_icon_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/ser-2.png" title="Moustache Trim" link="#"]Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.....[/services][/column][column col="4"][services image_icon_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/ser-3.png" title="Face Shave" link="#"]Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.....[/services][/column][column col="4"][services image_icon_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/ser-4.png" title="Beard Trim" link="#"]Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.....[/services][/column][column col="4"][services image_icon_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/ser-5.png" title="Clipper Cut" link="#"]Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.....[/services][/column][column col="4"][services image_icon_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/ser-6.png" title="Facial Massage" link="#"]Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print.....[/services][/column][/row]

Setup Counter Section

For setting up Counter section Go to >> Appearance >> Theme Options >> Sections >> Select Section 4.

Shortcode/Content for Counter Section.

[counter_wrap][counter title="Healthy & Happy Customers" count="256" num_color="#ffffff" title_color="#91765a" text_color="#ffffff" plus="yes"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/counter][counter title="Professional barber specialist" count="8" num_color="#ffffff" title_color="#91765a" text_color="#ffffff" plus="yes"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/counter][counter title="Diplomas & awards of our barbershop" count="753" num_color="#ffffff" title_color="#91765a" text_color="#ffffff" plus="yes"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/counter][counter title="Years of impeccable & successful work" count="30" num_color="#ffffff" title_color="#91765a" text_color="#ffffff" plus="yes"]Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/counter][/counter_wrap]

Setup Package Price Menu Section

For setting up Package Price Menu section Go to >> Appearance >> Theme Options >> Sections >> Select Section 5.

Shortcode/Content for Package Price Menu Section.

[row][column col="4"][package_menu title="Classic Haircut" price="$25"]Classic Haircut for Men and Kids[/package_menu][package_menu title="Deluxe Haircut" price="$35"]Delux Haircut for Men and Kids[/package_menu][package_menu title="Buzz Haircut" price="$15"]Buzz Haircut for Men and Kids[/package_menu][package_menu title="Kids Haircut" price="$20"]Kids Haircut for 10 or Younger[/package_menu][package_menu title="Soon To Be man" price="$25"]Style cut, hairline tidy up & hot towel finish.[/package_menu][/column][column col="4"][package_menu title="Beard Trim" price="$15"]Keep your Beard in Shape[/package_menu][package_menu title="Hot Towel Shave" price="$35"]Hot Towel Shave with Theraphy[/package_menu][package_menu title="Beard Trim Razor" price="$15"]Old Fashoined Shave with Razor[/package_menu][package_menu title="Mustache Trim" price="$15"]Keep Mustache in Good Shape[/package_menu][package_menu title="Body Massage" price="$30"]Keep Your Body Massage Feels Good[/package_menu][/column][column col="4"][package_menu title="Hair Color" price="$25"]Classic Style Hair Color with Brush[/package_menu][package_menu title="Face Facial" price="$35"]Facial and Hote Towel Treatment[/package_menu][package_menu title="Neck Trim" price="$10"]Back Nick Hair Trim with Razor[/package_menu][package_menu title="Hair Wash" price="$10"]Wash and Hot Towel Treatment[/package_menu][package_menu title="brow wax" price="$17"]Eyebrow wax, trim and tidy up[/package_menu][/column][/row]

Setup Our Testimonials Section

For setting up Our Testimonials section first of all you need to add some testimonials by using testimonials post type please see the below screenshot.

After adding post to Our Testimonials go to Appearance >> Theme Options >> Sections >> Section 6.

Our Testimonials Section Shortcode/Content:

[testimonials show="no. of item to be shown( Note: -1 for displaying all items )"]

Setup Our Team Members Section

For setting up Our Team Members section first of all you need to add some team by using our team post type please see the below screenshot.

For setting up Our Team Members section Go to >> Appearance >> Theme Options >> Sections >> Select Section 7.

Shortcode/Content for Our Team Members Section.

[our-team type="slider" show="no. of item to be shown( Note: -1 for displaying all items )"]

[our-team type="grid" show="no. of item to be shown( Note: -1 for displaying all items )" column="2/3/4"]

Setup Book Appointment & Video Section

For setting up Book Appointment & Video section Go to >> Appearance >> Theme Options >> Sections >> Select Section 8.

Shortcode/Content for Book Appointment & Video Section.

[appointment_main][appointment title="Make An Appointment" sub_title="Book Your Service" form_name="Make An Appointment" form_id="119"][appoint_video image_path="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/apoint-video-bg.jpg" video_link="https://www.youtube.com/embed/5Bvgd0jZO_0"][/appointment_main]

Setup From The Blog Section

For setting up From The Blog section first of all you need to add some posts by using Posts. Follow below instruction to add posts.

Once you added posts in the From The Blog Posts type after that you just have to add post shortcode in the sections content area and you'r done. (Section 9.)

Shortcode/Content for From The Blog Section

[latest-news show="3" type="grid" column="3" date="show" comment="show" author="show" category="show"]

[latest-news show="-1" type="slider" comment="show/hide" date="show/hide" author="show/hide" category="show/hide"]

Setup Our Partners Section

For setting up Our Partners section Go to >> Appearance >> Theme Options >> Sections >> Select Section 10.

Shortcode/Content for Our Partners Section

[client_lists][client image="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/client-1.png" link="#"][client image="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/client-2.png" link="#"][client image="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/client-3.png" link="#"][client image="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/client-4.png" link="#"][client image="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/client-5.png" link="#"][client image="http://localhost/alexa/hairsalon/wp-content/themes/hairsalon-pro/images/client-6.png" link="#"][/client_lists]

Setup Footer

Go to Appearance >> Theme Options >> Footer.

Footer Widget

• Add footer column content: Go to Appearance >> Widget >> Footer 1/ Footer 2/ Footer 3/ Footer 4.
• For footer column 1: Go to Appearance >> Widgets >> Footer 1.
• For footer column 2: Go to Appearance >> Widgets >> Footer 2.
• For footer column 3: Go to Appearance >> Widgets >> Footer 3.
• For footer column 4: Go to Appearance >> Widgets >> Footer 4.
• For footer copyright & design by text: Go to Appearance >> Theme Options >> Footer >> Footer Copyright & Design by & Upload Logo

Adding category

Review the following article for more information on adding categories: http://codex.wordpress.org/Manage_Categories_SubPanel

1. Log into your WordPress Administration Panel (Dashboard).
2. Click the Posts tab.
3. With that done, click Categories for blog posts.
4. Type in the name of your new category.
5. After that, click the Add New Category button.

Click the Publish button.

Creating a Blog post

1. Log into your WordPress Administration Panel (Dashboard).
2. Click the Posts tab.
3. Click the Add New tab.
4. Type in your post content. For more information on adding posts, please check the following link http://codex.wordpress.org/Posts_Add_New_SubPanel.

Testimonial

[testimonials]

Elements

One half

[column_content type="one_half" subcls="Add extra class"]Column 1 Content goes here...[/column_content]
[column_content type="one_half_last" subcls="Add extra class"]Column 1 Content goes here...[/column_content]

Tabs

[tabs]
[tab title="TAB TITLE 1"]Tab Content goes here...[/tab]
[/tabs]

Accordion Content

[accordion]
[accordion_content title="ACCORDION TITLE 1"]Accordion Content goes here...[/accordion_content]
[/accordion]

Gradient Button

[gradient_button size="small" bg_color="#000000" color="#ffffff" text="text here"  title="title here" url="#" position="left"]

Simple Button

[simple_button size="small" bg_color="#000000" color="#ffffff" text="text here"  title="title here" url="#" position="left"]

Round Button

[round_button style="light" text="text here"  title="title here" url="#" position="left"]

Horizontal rule

[hr] 

Succes Message Box

[message type="success"]This is a sample of the 'success' style message box shortcode. To use this style use the following shortcode[/message]

Search

[searchform]

List Style

[unordered_list style="list-1"]<li>List style 1</li>[/unordered_list]

Basic Settings

Font Typography

Font Color

Sections

Slider Settings

Shortcode

Gallery Display Page

Gallery Grid Layout

Shortcode : 

[photo-gallery show="no. of item to be shown( Note: -1 for displaying all items )" type="grid"]

Gallery Slider Layout

Shortcode : 

[photo-gallery show="no. of item to be shown( Note: -1 for displaying all items )" type="slider"]

Photo Gallery Post Type

Portfolio Display Page

Portfolio Grid Layout

Shortcode : 

[portfolio type="grid" show="no. of item to be shown( Note: -1 for displaying all items )" column="2/3/4" filter="true/false"]

Portfolio Filter Layout

Shortcode : 

[portfolio type="grid" show="no. of item to be shown( Note: -1 for displaying all items )" column="2/3/4" filter="true/false"]

Portfolio Slider Layout

Shortcode : 

[portfolio type="slider" show="no. of item to be shown( Note: -1 for displaying all items )"]

Portfolio Post Type

Plugin Installation

Plugin Use

Plugin Installation

Plugin Use