HairPress WordPress Theme Documentation

HairPress is a premium Wordpress Theme for hair salons, beauty salons, wellness centers or any similar local business website. It is very easy to setup and use.

HairPress Cover

General & Installation

Few Words on Start

Hairpress is a premium Wordpress Theme for hair salons, beauty salons, wellness centers or any similar local business website. It is very easy to setup and use. Available only on ThemeForest!


I assume you already have a fresh copy of WordPress installed on your server.

Download the theme zip file
The first thing you will need to do is to download the theme installation zip file.

If you bought the theme on ThemeForest, then you have to download the installable WordPress files only zip file from the ThemeForest download section.

Install the theme
You can install the HairPress WP Theme in two different ways:

  1. Upload a zip file - preferred method
    When you are logged in your WordPress dashboard go to Appearance » Themes » Add New » Upload Theme and select the theme installation zip file you downloaded from our Shop or from the ThemeForest and click Install Now button.
  2. FTP upload
    Unzip the contents of the theme installation zip file and upload the extracted folder to your server to wp-uploads/themes/ folder using a FTP client.

Once your theme is on the server, activate it by clicking the Activate button below the preview image in Appearance » Themes

Activate HairPress WP

Congratulations! Now the HairPress WP Theme is installed.

You still need to install/activate the required and recommended plugins - you can do this by visiting Appearance » Install Plugins inside wp-admin.


Automatic updates
You can register the theme and receive automatic updates. Go to Appearance » Theme Registration and follow the instructions on that page. This will register your copy of the theme and you will get update notifications in the admin dashboard, whenever an update is available.

If you have any issues with the automatic updates, please go to you wp-admin to Dashboard » Updates and click on the Check Again button, to refresh the update data.

Manual update
You can also update the theme manually: here are the steps on how to do that.

Theme Options

The theme uses Option Three plugin with custom options which you can customize in Appearance » Theme Options:

Option Tree

When you change any of your settings, make sure you save the changes clicking on the Save Changes button on the top or at the bottom of the page.

Customize the Appearance

You can fully customize the appearance of the HairPress Theme. Go to the Appearance » Themes and click on the Customize button:

Customize HairPress

The new window appears and you can now customize the appearance of your theme - upload your custom logo, change the base color theme and color for theme buttons etc.

Customize HairPress

Custom Post Types

Post Types

The theme comes with 3 different custom post types installed:

Create a new service to display it in the Services Widget on the front page and in the list of all services which is available (by default) at

List up your team members here. Like Services, the list of all services will be available at

The post type created to display the galleries, create a new gallery with a build-in WP gallery builder. Like Services and Team, the list of all galleries will be available at

Create custom slides for Page template Front Page with Theme Slider

NOTE! - the theme slider is a deprecated feature and will be removed in the next updates of the theme.

List of the testimonials for the front page.

Special Notice

Google Maps API key needed!

Google recently changed the way that Google Maps works. Since June 22 2016 they do not allow map requests without an API key, so you will have to add a key to the theme.

Please follow the instructions from this article.

Demo Content

You may want to import the demo content, just like on our preview site.

Download the content XML file:

In your WP administration navigate to Tools » Import and select Wordpress. You will be asked to install the plugin. Install it and after that you will be able to import the demo file with all the demo pages, posts, settings, sliders ...


Demo Widgets
After you import the demo content, you can also import the widgets, with the Widget Importer & Exporter plugin. Download the file for widget import: Change the file extension from JSON to WIE (So rename hairpress.json to hairpress.wie). Got to Tools » Widget Import/Export and import the WIE file.

After import setup

  • go to Settings » Reading, set the the Front page displays to a static page and select the front page and the blog page in the appropriate dropdowns,
  • go to Appearance » Menus, select the main menu from the dropdown at the top and click on Select. Scroll to the bottom and set the Theme location to Main Menu,
  • optionally set other things (like logo, colors, ...). These settings can be found in Appearance » Customize and in Appearance » Theme Options.

If the import files are not available on the URLs above, then you can find them in the All files & documentation zip file on ThemeForest.

Download the All files & documentation zip file from ThemeForest: Download all files from ThemeForest

The demo content XML file and the widgets JSON file are located in the extras folder.

Post Types

Every post type has its own features. Let's take a look at them:


The WP build-in page post types benefit two features:

Page Templates

One can select from several different page templates layouts available for the regular theme. The default template has the sidebar on the left:


HairPress Options Meta Box

To every page it is possible to add the Subtitle. The subtitle is displayed right below the main title of the page:

Subtitle Page


HairPress Options Meta Box

There are two options in the HairPress Options Meta Box for the Services. You can define the subtitle for the service (like for the page) and in addition you can select if you wish that this service is displayed on the front page in the Services Widget.



The order of the services is controlled by the Order under Attributes:


The text displayed on the front page can be altered using the Excerpt textarea:

Note that you need to display some meta boxed using the button Screen Options at the top of the admin panel.


Hairpress Options Meta Box
It is possible to add the various data about each team meber (Age, Zodiac Sign, Education, ...).

Featured image
Featured image is used for the display in the list of all members and in the slider on the front page.

The order of the team members in the list and slider is controlled via Order attribute. Lower numbers at the top.

In version 3 we made adding the galleries much easier for the end user. Now everything is done using the WP build-in gallery builder, when adding a new media.

Hairpress Options Meta Box
You can add subtitle for the gallery.


Theme slider is deprecated and will be removed in the future versions of the theme. Please use the bundled Revolution Slider instead.
IMPORTANT: This slider is used just on the page template Front Page with Theme Slider. Make sure you have Slider Revolution WP Plugin installed and activated before you add the slider!

Featured image
The featured image of the slider will be used as the main image in the slider. Make sure you upload large version of these images - the slider best works with 1500 (width) x 530 (height) px resolution. The original image must be larger than this.

The Order attribute will be used to order the images in the slider. Lower numbers will display faster.


Testimonial Options Meta Box
The title of the author of the testimonials can be added in the Testimonial Options.

The Order attribute will be used to order the testimonials. Lower numbers will display faster.



For displaying the columns you will need to use two shortcodes.

To start the columns area one can use the [colcontainer] shortcode, followed by [span] shortcode. The [span] accepts one parameter, for example n="5". The HairPress is build on top of the Twitter Bootstrap framework, using the 12 columns grid, which means the theme is vertically divided into 12 columns - the full width of the website. If there is the sidebar present in the page, it already takes 3 spans, so to create the 3 columns on the page with sidebar (no matter left or right) you may use shortcodes like this:

[colcontainer][span n=3]Lorem Ipsum[/span][span n=3]Sit Dolor[/span][span n=3]Amet.[/span][/colcontainer]

This ends up at the 3 (sidebar) + 3*3 (for 3 columns with span 3) = 12 cols = full width of the website.

However, if this page has no sidebar, you should use [span n=4] three times to create three columns.

Maybe this approach seems little too difficult compared to the standard "One Half", "One Third" etc. way, but it is extremely more powerful - it allows you to create just any number of columns you would like and any width you would like, for example something like this:


Social Icons

You can add links to Twitter, Facebook or YouTube socials profile using the [social_icon] shortcode, example: [social_icon service="twitter" url=""].

The options for the social icons:

Possible values:

  • facebook
  • favorites
  • flickr
  • google
  • instagram
  • linkedin
  • mail
  • pinterest
  • rss
  • skype
  • stumble
  • tumblr
  • twitter
  • vimeo
  • yelp
  • youtube

The URL to the website where you'd like to link to.


The shortcode [button]Your content[/button] is available for the buttons to insert the buttons into your content.

The options for the buttons:


How many pixels you would like to have your button rounded?

Possible values:

  • empty - the default state, rounded 3 pixels
  • rounded="2" - rounded 2 pixels
  • rounded="6" - rounded 6 pixels
  • rounded="10" - rounded 10 pixels
  • rounded="rounded" - fully rounded


[button rounded="10"]Button title[/button]

Where would you like your button points to?

Possible values:

  • empty - no link
  • link="" - link to the website


[button link=""]Link to ThemeForest[/button]

Open a link in a new window/tab?

Possible values:

  • empty - opens up a link in the same window
  • target="blank" - opens up a link in a new window/tab


[button link="" target="blank"]Link to ThemeForest[/button]

There are different types of the buttons available, including the ones from Twitter Bootstrap.

Possible values:

  • empty - default button Button
  • type="theme" - the current theme color
  • type="primary" - dark blue color Button
  • type="info" - light blue color Button
  • type="success" - green color Button
  • type="warning" - yellow color Button
  • type="danger" - red color Button
  • type="inverse" - black color Button


[button type="success"]Success Button[/button]

All the options combined:

[button type="theme" link="" rounded="rounded"]My Power Button[/button]

Content Dividers

Content Divider

Ted different color dividers come with the theme. The default one you select in the Theme Options, but you can always use any of them in the content.

The [divider] accepts one parameter, the type:

  • type="theme" - the default theme divider, from Theme Options
  • type="mechanic"
  • type="divider-1"
  • type="divider-2"
  • type="divider-3"
  • type="divider-4"
  • type="divider-5"
  • type="divider-6"
  • type="divider-7"
  • type="divider-8"
  • type="divider-9"


[divider type="divider-1"]


The [accordion] shortcode is available as well for the accordions. It accepts two parameters, title, which is the title of the tab and opened, which determines if the the accordion is opened by default. Example:

[accordion title="Accordion title" opened="true"]
  Here comes the content of the accordion

Pricing Tables

Pricing tables in fact aren't shortcode, but you can edit them directly in Text editing mode:

Text Mode

Just go to the text editing mode and copy/paste the following code there:

<table class="table">
      <th class="align-center">For Him</th>
      <th class="align-center">For Her</th>
      <td>Donec suscipit vehicula turpis sed lutpat</td>
      <td class="align-center">35€</td>
      <td class="align-center">55€</td>
      <td>Quisque vitae quam neque.</td>
      <td class="align-center">32€</td>
      <td class="align-center">42€</td>
      <td>Morbi cilisis placerat dapibus.</td>
      <td class="align-center">44€</td>
      <td class="align-center">31€</td>
    <tr class="active">
      <td>Etiam ultrices nulla ed leo malesuada</td>
      <td class="align-center">48€</td>
      <td class="align-center">34€</td>
      <td>Commodo bibendum orci vi verra ;</td>
      <td class="align-center">22€</td>
      <td class="align-center">33€</td>
      <td>alesua commodo malesuada commodo</td>
      <td class="align-center">16€</td>
      <td class="align-center">7€</td>

Each <tr> indicates its own line. One has a class="active", this one will be highlighted.

Once you inserted the table in Text editing mode you can also switch back to the Visual mode and edit the text and prices there.


There are several widgets you can use with the HairPress WP Theme:

  • Hairpress: Divider - for divider on the front page
  • Hairpress: Facebook - for FB like box in the footer
  • Hairpress: Latest Galleries - to display latest galleries
  • Hairpress: Latest News - to display latest news / blogposts
  • Hairpress: Opening time - to display timetable / opening time of the business - can be used above the slider
  • Hairpress: Our Services - to display the services on the front page
  • Hairpress: Testimonials - to display testimonials on the front page
  • Hairpress: Three columns - to display three columns of text on the front page
  • Hairpress: Twitter - to display latest Tweets from Twitter
  • New in v3.0.0: Hairpress: Custom Width Text For Home - you decide how much space the text widget will take, from 1/12 of the page to the full width of the page

There are 9 different sidebars associated with the theme (look at the image above), so you can easily decide how the different layout types will look like.

All the widgets can have the subtitle too. In the "Title" field just add the double forward slash // and the text after the double slash will be used as the subtitle. Example: Widget main title // This is a subtitle.


We also use and support some of the best plugins for WordPress.

You can install and activate these plugins by going to wp-admin » Appearance » Install Plugins.

The list of required and recommended plugins used in this theme:

Slider Revolution

The theme comes with the Slider Revolution WP Plugin which needs to be installed for the both versions of the Front Template.

If you decide to use the original plugin, just read the original docs for more information. Make sure to use Full Width slider for best results with width 1500px and height 530px.

Once you prepare the slider, just grab the alias of the slider and copy / paste it to the page meta box which uses the slider revolution (front page with slider revolution or front page with content).


This theme supports basic WooCommerce integration.

Once WooCommerce is activated you will see this notice:

WooCommerce Begin Setup

Click on Run the Setup Wizard button to begin the WooCommerce install. That will start the setup wizard, where you can set things like shop pages, store locale, shipping & tax and payments.

WooCommerce Setup Wizard

If you want to change some settings, you can change them in WooCommerce » Settings. There are many tabs at the top, you can configure to fit your needs.

Most of our themes come with our own demo products for the WooCommerce store and will be imported automatically when you import the demo content using our industry-leading One Click Demo Import plugin. You need to make sure that WooCommerce is activated at the time that you import the demo data.

However, you can (optionally) install the additional demo products by WooCommerce. Go to Tools » Import » WordPress and import the demo XML file which can be found in the folder where WooCommerce was installed on your server. Usually this is in wp-content/plugins/woocommerce/dummy-data/dummy-data.xml. Also check the Download and import file attachments checkbox, so that all product images will be downloaded as well.

When you're done, you should see the products:

WooCommerce Products
If you want to feature certain products, you can do so by clicking a star symbol in the table seen above.

When you are done with the settings, go to Appearance » Widgets.

Drag & Drop the WooCommerce widgets that start with "WooCommerce" to the sidebar called Shop Sidebar.

WooCommercer Shop Sidebar

That's all, your WooCommerce shop is now ready!

All further information and documentation for WooCommerce can be found on the official WooCommerce website.

Contact Page

The Contact Us form and Make an Appointment form on the website are made live using the Contact Form 7 WP Plugin:

Here is the code for the Contact Form 7 WP plugin for a contact us page:


<div class="row">

<div class="span3">
<label>First and Last Name<span class="theme-clr">*</span></label>
[text* your-name class:span3]

<div class="span3">
<label>Phone Number</label>
[text your-phone class:span3]

<div class="span3">
<label>E-mail address<span class="theme-clr">*</span></label>
[text* your-email class:span3]

<div class="row">

<div class="span9">
<label>Your message<span class="theme-clr">*</span></label>
[textarea* your-message x5 class:span9]

<div class="row">
<div class="span9">
[submit class:btn class:btn-theme class:no-bevel class:pull-right "Send"]

Message body:

From: [your-name] <[your-email]>
Phone: [your-phone]

Message Body:

After that just place the plugin's shortcode to your contact us page.

Here is the code for the Contact Form 7 WP plugin for a Make an Appointment page:


<div class="row">

<div class="span3">
<label>First and Last Name<span class="theme-clr">*</span></label>
[text* your-name class:span3]

<div class="span3">
<label>Phone Number</label>
[text your-phone class:span3]

<div class="span3">
<label>E-mail address<span class="theme-clr">*</span></label>
[text* your-email class:span3]

<div class="span3">
<label>Date<span class="theme-clr">*</span></label>
[text* appointment-date class:add-datepicker] <a class="add-datepicker-icon" href="#"><span class="icon icons-calendar"></span></a>

<div class="row">

<div class="span9">
<label>Type here if you have some special requirements:</label>
[textarea* your-message x5 class:span9]

<div class="row">
<div class="span9">
[submit class:btn class:btn-theme class:no-bevel class:pull-right "Send"]

Message body:

From: [your-name] <[your-email]>
Phone: [your-phone]
Date: [appointment-date]

Message Body:

After that just place the plugin's shortcode to your make an appointment page.

Download and activate the FancyBox for WordPress: And that's all.

Twitter Widget

This widget can be included everywhere - in page builder and in a normal sidebar. For that widget we use a normal WordPress Text Widget.

First, go on and click Create new.

Twitter Settings

Now choose your Username, height of the widget, Theme and Link color. When you are happy with your widget click on Create widget button. You will get the code which you copy and paste in the Text Widget in your WordPress site.

Twitter Code


Manual translation

We have an article with the video on how to translate our themes published on this link.

WPML for Multilingual sites

This theme officially supports WPML. Head over to the WPML website, buy the subscription, then download and install the following plugins:

  • WPML Multilingual CMS
  • WPML String Translation
  • WPML Translation Management

After that the WPML wizard will guide you to properly configure the multilingual site.

For reference: the widgets and theme options can only be translated using the String Translation.


Demo Images

The images available for template preview aren't included in the HTML template because of the licences, but you can buy them at

All the images shown in the demo page of HairPress WP are copyrighted and come blurry with the theme (demo content).


If you need advanced customizations on the theme, we are available for that as well.

Let us know what'd you'd like to change via support ticket and we will get back to you with a quote.

For your general orientation: our pricelist.


View the HairPress WP changelog.


If you need more help after all, you can write to us.