Spa and Salon Pro Documentation

Important Note:

Before beginning the installation process, please make sure you are using the latest version of WordPress and the Theme.

Theme Documentation:

Thank you for choosing Spa and Salon Pro ! This documentation covers the installation and the usage of the theme. We encourage you to read through this document and keep it handy for reference. If you have any questions about the theme, or need assistance with anything related to the theme, please feel free to contact us with our  support ticket and our dedicated support staff will be happy to assist you.

Getting Started

Let’s get started!  First, make sure that you have all the necessary things required to install Spa and Salon Pro.

Theme Requirements

Make sure you have the latest version of WordPress installed, by checking the updates tab from your current WordPress dashboard.

Theme Requirements

If you haven’t downloaded WordPress already, you can download it from the WordPress repository.

If you haven’t downloaded WordPress already, you can download it from the WordPress repository.

Although Spa and Salon Pro will work with 4.5 and above versions of WordPress, it is recommended to have the latest version of WordPress.

After you have the latest version of WordPress, download the theme ZIP file, and save it somewhere handy on your computer, as you will be using the included files for the rest of the installation process.

Theme Files

Spa and Salon Pro includes :

WordPress Theme Files— This is a compressed WordPress theme file containing all of the required templates, images and icons required for the theme to function properly.

Theme Installation

Step 1: Upload and Activation

There are two methods to install Spa and Salon Pro theme.  You may either upload the zipped theme file using the WordPress theme installer (Recommended), or you can upload the unzipped theme folder via FTP (Advanced).

Method 1 ( Recommended) : Install Using the WordPress Theme Installer

  1. Log into your WordPress site and opens the Administration Panel.
  2. Go to Appearance > Themes in the WordPress Dashboard.Themes
  3. Click on the Add New button. Add-New-Theme
  4. Click on the Upload Theme link.
  5. Click on Choose File, select the spa-and-salon-pro.zip file from your computer and click upload.
    Upload-theme2
  6. Click Install Now

Method 2: Install Using File Transfer Protocol (FTP)

  1. Unzip “spa-and-salon-pro.zip” file on your computer.
  2. Login using FTP client to access your host web server.
  3. Locate the wp-content folder in your WordPress install files.
  4. Upload the un-zipped Spa and Salon Pro folder into the: wp-content/themes folder.

For More Information about installing theme using FTP visit :http://codex.wordpress.org/Using_Themes#Adding_New_Themes

Activate the theme

  1. Log in to the WordPress Administration Panel.
  2. Go to Appearance > Themes in the WordPress menu
  3. Hover over the theme thumbnail and click the Activate button.

Installing Plugins

Installing Plugin:

To install a plugin in your WordPress admin panel and follow the following steps.

  1. Navigate to Plugins > Add New.
    Install Pluglin
  1. Search for the name of the plugin you wish to install which will return a list of potential plugins.
  2. Click Details to read more about a plugin.
  3. Click “Install Now” if you wish to install the plugin.Plugin-Install-Web
  4. It may ask if you are sure, and you may proceed. The installation will commence once you confirm to proceed.
  5. After the plugin is downloaded. Go to Plugins>Installed Plugins. Click “Activate Plugin” to make it available for use.
    Plugin-Activate

Recommended Plugins:

We recommend you to download the following plugins when necessary:

  1. Jetpack by WordPress.com, by: Automattic

The plugin provides a variety of complementary features for your Theme.

  1. Regenerate Thumbnails by Alex Mills (Viper007Bond)

If you have existing content, this will help you update your image thumbnails sizes.

Configuring Homepage Display

To set up the homepage you must first create a new page.

To create a new Page

  1. Go to Pages > Add New.
    Add Page
  1. Enter the Page Title for the Page. You do not require to enter anything in the content section for creating a home page.
  2. Select the Homepage Template from the Page Attributes section.
  3. Click Publish.
    New-page

Configuring the front Page display setting

  1. Go to Appearance>Customize > Static Front Page.
  2. Select A static page under Front Page displays
  3. Choose the page you just created as Front page.
  4. Click Save & Publish.
    static-front-pag-e

Slider Settings

Note: Please make sure that you have set up the homepage for the slider to appear on your homepage.
slider-settings

Slider Options:

  1. Go to Appearance> Customize> Slider Settings> Slider Options
  2. Enable Home Page Slider using toggle to display it on the home page. (Blue is enabled) ( You must enable this for the slider to be visible)
  3. Enable Slider to Auto Transition using toggle for the slides to transition automatically (auto-scroll) without a click. (Blue is enabled)
  4. Enable Slider Loop using toggle to continue the slide transition in the loop. (Blue is enabled)
  5. Enable Slider Control using toggle to allow manual navigation control. (Blue is enabled)
  6. Enable Slider Pager using toggle to allow manual navigation for paging control of each slide. (Blue is enabled)
  7. Enable Slider Caption using toggle to show the post title to appear on the slider post image. (Blue is enabled)
  8. Enable Use Full Size Image, if you wish to display the full image on the slider rather than the cropped image. ( In this case, make sure that all the selected images have the same image size, so that the design is maintained)
  9. Select the Slider Transition type to “fade” or “slide”
  10. Choose Slider Speed and Slider Pause for Slide Content using slider.
  11. Click Save & Publish.
    slider-options

Slider using Posts 

  1. Go to Appearance> Customize> Slider Settings> Slider Contents
  2. Choose Slider Type to Post
  3. Choose Posts to be displayed as slider under Choose Post One, Choose Post Two, Choose Post Three, Choose Post Four, and Choose Post Five.
    • The featured Image of the selected posts will appear as Slider Image. ( Width: 1920px, Height: 1023px )
    • Post Title of the selected post will appear as Slider Title.
    • Post Excerpt will appear on the Slider as slider Content. The first few sentences of the post content will appear as slider content if the Post excerpt is not entered.
  4. Enter Readmore Text.
  5. Click Save & Publish.
    slider-contents

Slider using Category 

  1. Go to Appearance> Customize> Slider Settings > Slider Contents
  2. Choose Slider Type to Category
  3. Choose the Slider Category.
    • The featured Image of the posts under selected category will appear as Slide Images.
    • Post Title of the post under the selected category will appear as Slide Title.
    • Post Excerpt will appear on the Slider as slide Content. The first few sentences of the post content will appear as slide content if the Post excerpt is not entered.
  4. Enter Readmore Text.
  5. Click Save and Publish.
    slider-categpry

Slider using Custom

  1. Go to Appearance> Customize> Slider Settings > Slider Contents
  2. Choose Slider Type to Custom.
  3. Click on Slides #
  4. Click Add Image to upload an Image.
  5. Enter Title, Content and Link for the Slide.
  6. Click Add new Slide to add new Slide.
  7. Enter Readmore Text.
  8. Click Save and Publish.
    slider-contents-custom

Homepage Settings

Note: Remember that you need to first configure your Homepage for the settings in this section to be implemented.

Homepage Section Sorting

  1. Go to Appearance> Customize>Homepage Settings>Homepage Drag and Drop.
  2. Drag and Drop section to sort the section as you desire.
  3. Click on the eye icon to control the visibility of the particular section.
  4. Click Save & Publish.
    homepage-drag-and-drop

Featured Section

    1. Go to Appearance> Customize> Slider Settings >Homepage Settings> Featured Section.
    2. Click Add New Features
      featured-section
    3. Add Image, Enter Title, Description and Link and icon ( font awesome)

To find the Favicon icon name go to :  http://fontawesome.io/icons/Find the Icon that suits your website. For example You like the icon with the name wpbeginner , then enter wpbeginner as Favicon name
Font Awesome Icons

  1. Click Save & Publish.
    featured-section-3

About Section

  1. Go to Appearance> Customize> Slider Settings >Homepage Settings> About Section.
  2. Add About Section Image.
  3. Enter About Section title, Description, Button text and Button URL.
  4. Click Save and Publish.
    about-sefction

Services Section

Before you start with the section, you need to add services.

Add Services 

  1. Go to Services> Add New
    services-add
  2. Give a title and content.
  3. Add Feature Image for Service.
  4. Click Publish.

Service Section in Homepage

  1. Go to Appearance> Customize> Slider Settings >Homepage Settings> Service Section.
  2. Select The Services
  3. Enter the Title and Description.
  4. Enter Button Label and Link
  5. Click Save & Publish.
    service-sevction

Plan Section

Before you start with the Plan section, you need to add Plan.

Add Plan 

  1. Go to Plans> Add New
    plans
  2. Give a title and content.
  3. Add Feature Image for Plan.
  4. Click Publish.

Plan Section in Homepage

  1. Go to Appearance> Customize> Slider Settings >Homepage Settings> Plan Section.
  2. Select The Plans
  3. Enter the Title and Description.
  4. Enter Button Label and Link
  5. Click Save & Publish.
    plan-section

Testimonial Section:

Before you start with the Testimonial section, you need to add Testimonials.

Add Testimonial

  1. Go to Testimonials> Add New
  2. Give a title ( name of the client)  and content.
  3. Add Feature Image for Testimonial.
  4. Click Publish.

Testimonial  Section in Homepage

  1. Go to Appearance> Customize> Slider Settings >Homepage Settings> Testimonial Section.
  2. Choose number of testimonials to display.
  3. Enter Section Title and Description
  4. Click Save & Publish.
    testimonial-section

Call to Action Section

  1. Go to Appearance> Customize> Slider Settings >Homepage Settings> Call to Action Section.
  2. Call to Action Background Image, Title, Description, Button Text, and Button URL
  3. Click Save & Publish. 

call-to-action

Instagram Gallery Section

  1. Go to Appearance> Customize> Slider Settings >Homepage Settings> Instagram Gallery Section.
  2. Enter Instagram Username
  3. Enter Instagram Section Title and Description
  4. Click Save & Publish.
    instagram-gallery-section

Services Page:

To add services:

  1. Go to Services> Add New
    services-add
  2. Give a title and content.
  3. Add Feature Image for Service.
  4. Click Publish

To create a Page

  1. Go to Pages > Add New.
    Add Page
  1. Enter the Page Title for the Page. You do not require to enter anything in the content section for creating a home page.
  2. Select the Services Template from the Page Attributes section.
  3. Click Publish.
    New-page

 Testimonial Page

 Add Testimonial

  1. Go to Testimonials> Add New
  2. Give a title ( name of the client)  and content.
  3. Add Feature Image for Testimonial.
  4. Click Publish.

To create a Page

  1. Go to Pages > Add New.
    Add Page
  1. Enter the Page Title for the Page. You do not require to enter anything in the content section for creating a home page.
  2. Select the Testimonial Page Template from the Page Attributes section.
  3. Click Publish.
    New-page

Plan Page

Add Plan 

  1. Go to Plans> Add New
    plans
  2. Give a title and content.
  3. Add Feature Image for plan.
  4. Click Publish.

To create a Page

  1. Go to Pages > Add New.
    Add Page
  1. Enter the Page Title for the Page. You do not require to enter anything in the content section for creating a home page.
  2. Select the Plan Page Template from the Page Attributes section.
  3. Click Publish.
    New-page

Team Page

Add Team member

  1. Go to Members> Add New
  2. Give a title (name) and content.
  3. Add Feature Image for Team member.
  4. Click Publish.

To create a Page

  1. Go to Pages > Add New.
    Add Page
  1. Enter the Page Title for the Page. You do not require to enter anything in the content section for creating a home page.
  2. Select the Team Page Template from the Page Attributes section.
  3. Click Publish.
    New-page

General Settings:

  1. Go to Appearance > Customize > General Settings
  2. Choose a layout.
  3. Enable or Disable Light Box.  ( Blue is enabled)
  4. Enable or Disable Sticky Menu
  5. Click Save and Publish.
    genral-settings

Post Page Settings

  1. Go to Appearance> Customize> Post Page Settings.
  2. Enable or Disable Show Featured Image
  3. Enable or Disable Show Related Image
  4. Enable or Disable Show Author Bio
  5. Enable or Disable Show Comments
  6. Enable or Disable Highlight Author Comment
  7. Choose Before Post Widget and After Post Widget
  8. Click Save and Publish.
    post-page-settings

Post Meta Settings

  1. Go to Appearance> Customize> Post Meta Settings.
  2. Choose meta for Post meta Single Page and Post Meta Other pages. You can also change the order of Meta by using drag and drop. Available Meta are Date, author, and comment
  3. Select No of character of Post excerpt
  4. Enter Post Read More Text
  5. Click Save & Publish.
    post-meta-settings

Typography Settings:

You can find theme font options by navigating to Go to Appearance> Customize> Typography Settings
typography-settings

This will allow you to configure the typography used on your site. You are able to configure fonts, variant, size, color ( Using Color pallet)  and line height to apply the settings to.
body-setting

Click Save & Publish, once you are satisfied with your configurations.

Styling Options

  1. Go to Appearance> Customize> Styling Options
  2. Select Layout Style for Single Posts and Archive pages
  3. Select Color Scheme using color pallet.
  4. Configure Background Color, Body background or upload Background image as desired.
  5. Click Save & Publish.
    styling-option

Contact Settings

  1. Go to Appearance> Customize>Contact Settings
  2. Enter Phone Number, Email address,  Address, Working Hours Label, Working Hours , Contact Form title and Contact Form 7 Form ID
  3. Click Save & Publish.
    contact-settings

Note: For the Contact form to appear as in the demo, you must first install and activate the Contact Form 7. To learn about how to install plugin read the Installing Plugin. For configuring the Plugin read the plugin documentation .

Generating Shortcode for the Contact Form as in Demo :

  1. For the Contact form to appear as in the demo, you must first install and activate the Contact Form Seven.  To learn about how to install plugin read the Installing Pluglin.
  2. Go to Dashboard> Contact> Add NewContact Form Seven
  3. Enter your Contact form styling
  4. Click Save.Contact Form seven1Copy the shortcode that appear below the Contact Form Name and paste it in the Contact Section Contact Form from Appearance>Customize>Homepage Settings>Contact Section.Configure other setting according to Contact Form 7 Documentation  Contact Form 2Click Save & Publish.Note: The above instructions just deals with appearance of the contact form on the theme. You still need to configure your settings following Contact Form 7 Documentation    

Breadcrumb Settings:

  1. Go To Appearance> Customize> Breadcrumb Settings.
  2. Choose to enable or disable Breadcrumb
  3. Choose to show or hide Current.
  4. Enter Breadcrumb Home Text.
  5. Enter Breadcrumb Separator.
  6. Click Save & publish.
    breadcrumb-settings

Add a Sidebar

  1. Go to Appearance> Customize> Sidebar Settings
  2. Click Add New sidebar.
  3. Give the sidebar name and unique id.
  4. Click Save & Publish.

Sidebar Settings

  1. Go to Appearance> Customize> Sidebar Settings
  2. Choose the Sidebar for various Pages like, Single Page Post Page etc.

The sidebar selected under the particular pages will be displayed on the page.

For example:  Blog  Sidebar: Appears only in Blog .

  1. You can Add widgets to sidebar from Appearance> widgets.
  2. Click Save & Publish.

Social Media Links

  1. Go to Appearance> Customize> Social Settings
  2. Enable Social Links in Header to show it in header
  3. Enable Social Links in Footer  to show it in footer
  4. Choose the social media icons to display in Contact Section.
  5. Add Social Links by clicking Add new Link . 
  6. Click Save & Publish.
    social-settings

    Configuring Custom Menus

    Option One:

    1. Go to Appearance > Customize>Menus  in the WordPress Dashboard
    2. Click on Add new menu button.
    3. Give a name to your menu in Menu Name and click Create Menu button
    4. Choose the pages, categories, custom links from the left-side of your screen by selecting the checkbox and click on Add to Menu for desired Menu items.
    5. Order the menu items by using drag and drop function in Menu structure Panel.
    6. Check the Menu locations to Primary to make it appear on Homepage.
    7. Click Save and Publish after adding required pages, categories in the menu.

Option Two

  1. Go to Appearance > Menus in the WordPress Dashboard
  2. Click on Create a new menu link. menu4
  3. Give a name to your menu in Menu Name and click Create Menu button.menu3
  4. Choose the pages, categories, custom links from the left-side of your screen by selecting the checkbox and click on Add to Menu for desired Menu items.
  5. Order the menu items by using drag and drop function in Menu structure Panel.
  6. Check the box for “Primary Menu” under “Theme locations” if you want the menu to appear below the header bar.
  7. Click Save Menu after adding required pages, categories in the menu. menu5

Widgets

Adding a widget:

Option 1:

  1. Navigate to Appearance> Widgets
  2. Drag the desired widget to  the desired widget space. There is a description of each included widget that you can choose from.
    Widget1-EP

Option 2:

  1. Go to Appearance > Customize > Widget
  2. Click the desired Widget Area (Right Sidebar, Footer One, Footer Two etc)
  3. Click Add a Widget. There is a description of each included widget that you can choose from.
  4. Click on the desired widget.
  5. Drag and reorder the widget as desired
  6. Click Save & Publish.

Remove  Widget

  1. Go to Appearance> Customize>Widget
  2. Click the desired Widget Area (Right Sidebar, Footer One, Footer Two etc)
  3. Click the widget you want to delete and click delete.
  4. Click Save Changes.

Custom Codes:

  1. Go to Appearance> Customize> Custom Codes
  2. Click Open Editor to open editor, enter your codes.
  3. Click Save and Publish.
    custom-code

Footer Copyright Editor: 

  1. Go to Appearance> Customize> Footer settings
  2. Enter Footer Copy Right text
  3. Hide or Show Author Link and WordPress Link. (Blue is Hide)
  4. Click Save and Publish.
    footer

Setting up a Blog

To create a blog page, You first need to  create a page for it. To create a page.

  1. Go to Pages> add New
    Add Page
  2. Enter the Page Title for the Page
  3. You do not require to enter anything in the content section for creating a home page.
  4. Select the Default Template from the Page Attributes section
  5. Click Publish.Add New Page ‹ Business — WordPress

Configuring the Page display setting

Go to Appearance>Customize >  Static Front Page.

Choose the page you just created for the Blog as Posts Page.

Click Save & Publish.
Blog

Add a Post

  1. Go to Posts>Add new.
    Posts-add-new
  2. Select the post format on the right sidebar.
  3. Give a title and fill it with content
  4. Upload a featured image by clicking on Set Feature Image on the right sidebar of the screen.
    set feature image
  5. Click Publish

Adding Excerpt in the Post

  1. For adding excerpt to the existing post. Go to Post>All Posts from WordPress dashboard.
  2. Click Edit below the post name.
    adding excerpt one
  3. Click on the Screen Option on the top left side of the screen.
    adding-excerpt-2
  4. Check Excerpt.
    adding-excerpt-4
  5. A content box for excerpt will appear below the content section. Enter the required details.
    adding-exert-5
  6. Click Publish or Update

Gallery Post Format

Post Formats

This theme has built-in functionality for the post formats including text, aside, image, video, quote, and link post formats. Select the Post format as desired.Post Format-Travel Diaries

Inserting Gallery

For Inserting Gallery in the post, you must first install the Jetpack Plugin. To learn how to install a plugin, read– Installing Plugins. You must have a WordPress Account to use JetPack. Use Your WordPress Account to activate Jetpack in your website.

  1. Navigate to Jetpack>Settings on the dashboard
  2. Activate the Carousel and Tiled Galleries option by clicking Activate link.Jetpack-gallery
  3. Navigate to the Post where you want to insert the gallery and come its Edit window
  4. Click Add Mediajet-pack-1
  5. Click Create Gallery
  6. Upload and select the desired images for the gallery and click create a new Gallery.jetpack3
  7. Choose the desired Size and Type of your gallery display.
  8. Use drag and drop to order the picture.
  9. Click Insert Gallery.
    jetpack 4
  10. Click Preview to preview the post and click Publish when you are satisfied.

Helpful Tips

  1. We highly recommend using Child Theme if you need to change the code of the theme. Do not change the codes in the files of the parent theme as all such changes will be lost when the theme is updated. For information about How to create a child theme visit: https://codex.wordpress.org/Child_Themes
  2. Always keep BackUp of your theme before making any changes to the theme.
  3. If you get any problem in using the theme, you can do the following things:
    • Deactivate the plugins, sometimes plugin conflict may cause issues with the theme. Please deactivate the unused plugins.
    • Replace the latest modified code with the original code.
    • If the issue still pertains, feel free to contact us using our Support Ticket
Get all our 16 premium themes worth $1104 at just $149! Limited time offer.Get it Now!
+

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match