## Installing WordPress

WordPress is well-known for its ease of installation. Under most circumstances installing WordPress is a very simple process and takes less than five minutes to complete. Many web hosts now offer tools (e.g. Bluehost, mediatemple) to automatically install WordPress for you. However, if you wish to install WordPress yourself, click below button to read about Famous 5 Minute Installation.

5 Minute Installation Guide

Alternatively you may be interested on below topics:

- Things to Know Before You Begin Installing WordPress
- The Famous 5-Minute Installation
- Detailed Installation Instructions
- Common Installation Problems
- WordPress in Your Language
- Installing WordPress in Your Language
- How to Install Multiple Blogs
- How to Install on Your Own Computer
- Easy 5 Minute WordPress Installation on Windows
- How to Install with Amazon's Web Services (AWS)
- Getting Started with WordPress (much more installation info)

Disclaimer
Please note that we do not give support or any questions related on how to install and maintain wordpress. For any faulty installation that may cause your website or our theme malfunction you should refer to wordpress support forum. Alternatively you can get help from your web hosting.

## Theme Installation

Once you download The helpme Theme, unzip the main item. you will see the following folders:

The helpme.zip
  theme files that you will need to upload them into your wordpress themes directory
Documentation.zip
  Documentation files
Plugins.zip
  Required Premium Plugins that you need to install them manually

#### The helpme can be installed in two different ways:

1. Installing through wordpress
2. Uploading through FTP (File transfer protocol)

#### Installation through Wordpress:

Installing a theme through wordpress is quite a simple process. After you have logged into wordpress account and are ready to go, in the admin panel's sidebar navigate to appearance and then select themes. After that, click on the install themes tab and select upload from the navigation bar right below it. Click "choose file" button and locate your theme zip file (helpme.zip) then hit install now. After The helpme has been installed locate and click activate.

Please be informed that you should not upload the whole item you have downloaded from Themeforest as you will get an error of brohelpme stylesheet file. Instead locate the helpme.zip file inside the main file you have downloaded.

Warning!
While installing your theme through wordpress admin, you may encounter an error message saying "are sure you want to do this?". This is mainly due to your hosting php settings. The helpme theme zip file is roughly around 12mb and in some hostings the default value for max_upload_limit left default which is 2mb. To solve this problem you should either increase your maximum upload size (to 20mb) on your hosting admin panel or ask your host to do it for you if you do not have the privilege to alter your server php settings. This is a very common request and they should be able to help you out. Once the limit is increased you can re-try the install and you'll be all good to go.

#### Installation Through FTP

1. Download the Theme archive and extract the main theme zip file it contains (helpme.zip).
2. You may need to preserve the directory structure in the archive when extracting these files. Some softwares like "winrar" create a sub directory with the same directory name they have unzipped. uploading theme to your server via FTP with this structure is WRONG and you will face with some errors.
3. Use an FTP client (for example filezilla) to access your host web server
4. Transfer your unzipped theme to your server in the wp-content/themes
5. Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate your uploaded theme.

## Helpme plugins Installation

With the introduction of The helpme vision 1.0.2, You need to install all required plugins separately. To do that follow the steps below:

1. Go to plugins -> add new -> upload plugin -> browse file -> in download package open main folder and unzip plugins.zip then select and install all plugins one by one

#### designsvilla CUSTOM POSTS Plugin Installation

With the introduction of The designsvilla vision 1.0, You need to install designsvilla CUSTOM POSTS plugin separately. To do that follow the steps below:

1. Go to Appearance -> Install Plugins
2. Hover your mouse over designsvilla-CUSTOM-POSTS plug-in, and click install.
3. From dashboard menu go to Plugins
4. Find designsvilla CUSTOM POSTS Plugin and activate it

#### Visual Composer Plugin Installation

With the introduction of The designsvilla vision 1.0, You need to install Visual Composer plugin separately. To do that follow the steps below:

1. Go to Appearance -> Install Plugins
2. Hover your mouse over Visual Composer plug-in, and click install.
3. From dashboard menu go to Plugins
4. Find Visual Composer Plugin and activate it

#### Woocmmerce Plugin Installation

With the introduction of The designsvilla vision 1.0, You need to install Woocmmerce Plugin separately. To do that follow the steps below:

1. Go to Appearance -> Install Plugins
2. Hover your mouse over Woocmmerce Plugin, and click install.
3. From dashboard menu go to Plugins
4. Find woocmmerce Plugin and activate it

#### The Event Calander Plugin Installation

With the introduction of The designsvilla vision 1.0, You need to install The Event Calander plugin separately. To do that follow the steps below:

1. Go to Appearance -> Install Plugins
2. Hover your mouse over The Event Calander Plugin, and click install.
3. From dashboard menu go to Plugins
4. Find The Event Calander Plugin and activate it

#### Total Donation Plugin Installation

With the introduction of The designsvilla vision 1.0, You need to install Totaldonation plugin separately. To do that follow the steps below:

1. Go to Appearance -> Install Plugins
2. Hover your mouse over totaldonation Plugin, and click install.
3. From dashboard menu go to Plugins
4. Find The Event Calander Plugin and activate it

#### Layer Slider Plugin Installation

With the introduction of The designsvilla vision 1.0, You need to install LayerSlider separately. To do that follow the steps below:

1. Go to Appearance -> Install Plugins
2. Hover your mouse over LayerSlider plugin, and click install.
3. From dashboard menu go to Plugins
4. Find The Event Calander Plugin and activate it

#### Envato Wordpress Toolkit Plugin Installation

With the introduction of The designsvilla vision 1.0, You need to install Envato Wordpress Toolkit plugin so that you can easily update your theme and get notifications about it. T do that follow the steps below:

1. Go to Appearance -> Install Plugins
2. Hover your mouse over Envato Wordpress Toolkit plug-in, and click install.
3. From dashboard menu go to Plugins
4. Find Envato Wordpress Toolkit Plugin and activate it
5. From dashboard menu go to Envato Toolkit menu
6. Enter your Envato Marketplace username and Secret API Key
7. Click on Save Settings button

After this you will be informed on each theme update and can easily use this feature to update your theme.

You can also install all plugins in bulk by following bellow steps

1. Go to Appearance -> Install Plugins
2. select all plugins by clicking on checkbox then from top dropdown menu select install and hit apply. please wait for completion of installation process.
3. after installation process completed select all plugins again and from bulk action dropdown select activate and wait for success message.
4. Find Envato Wordpress Toolkit Plugin and activate it
5. From dashboard menu go to Envato Toolkit menu
6. Enter your Envato Marketplace username and Secret API Key
7. Click on Save Settings button

## Importing Demo Content

With the introduction of The helpme version 1.1 you can easily import demo content . Here is te step by step guide:

1. WP main menu bar ->appearance -> install demo
2. open download package go to the main folder -> demos -> then open your selected version and find demo-content.zip file and drag it here or simply click on browse button and select demo-content-vx.zip (x belongs to version like demo-content-v3) file.
3. LayerSlider have it's own import/export function so please go to layerslider from admin menu then click on import and export link then grag our browse LayerSlider.zip file to import sliders, Note: each version have seperate LayerSlider.zip file in its demo-content folder.
4. to increase exicution time open your wp-config.php file and insert below lines at the bottom before this line ( require_once(ABSPATH . 'wp-settings.php'); )

    set_time_limit(300);

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

5. If still getting problem then open your .htaccess file in your wordpress root directory and add below lines at bottom

    php_value upload_max_filesize 64M

    php_value post_max_size 64M

    php_value max_execution_time 300

    php_value max_input_time 300

3. after uploading demo-content file template will be available for install
4. Select which portions of template you want to import. (Contents/Widgets/Settings)
5. Click on Install button.
6. now go to layerSlider menu and import slider data with import export feature. layerslider demo content is included in main folder seperately.

## Updating Wordpress Theme

There are 2 methods to update our wordpress themes to newer version. These new updates are essential if you want to have a bug free website as we give new features and improvements to the theme over time. Some of these updates might be needed in order to make the theme compatible with wordpress newer versions. There is no risk on losing your settings and pages. However if you had done modifictations on theme files, then they will be lost.

### Auto Update using Envato WordPress Toolkit

Using this plugin you can update The helpme automatically without extra steps. All you need is to follow steps below:

1. Go to themeforest.net > Settings > API Keys.
2. Generate an API key and store it in a text file as you will need it shortly.
3. Now login into your WordPress admin dashboard
4. From left sidebar click on Envato Toolkit (If you have not installed it yet read install theme section of this documentation)
5. As shown in below screenshot type your username and fill the API key that you just retrieved from themeforest.net
6. Save Settings.
7. Once the page refreshed you should see the list of themes you have purcahsed.
8. If there is a new version available you will get the "update Automatically link (see below screenshot)
9. Once clicked, theme will be updated to the most recent version.

### Update Through Wordpress Admin Panel

1. For this method you should first install Theme Upgrades Tool
2. Unzip the file you just downloaded from ThemeForest and locate the WordPress Theme. (eg. helpme.zip)
3. Log into your WordPress Dashboard.
4. Click on Appearance > Themes.
5. Still within the Themes section, on header tab, click on Install Themes, then on header second tab click Upload.
6. Click Browse... and locate the new theme file. (eg. helpme.zip)
7. In the Upgrade existing theme? option choose "Yes" from the dropdown list.
8. Click 'Install Now'.
9. Click 'Activate'.

### Update Using FTP

1. Login into your Themeforest account and go to downloads (Dashboad > downloads)
2. Download the theme into your computer
3. Install an FTP program (Filezilla is free)
4. Retrieve your FTP login information from your hosting admin panel and login into your hosting via FTP
5. Unzip the item main file
6. Locate theme.zip (eg : helpme.zip) and unzip it. make sure your unzipping software do not create extra directory with the same name nested into each other.
7. drag and drop theme main folder into your FTP program with the destination : "YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/"
8. FTP program will give a warning that there is an existing with the same directory name, choose replace all.
9. It will take varying from 15 to 30 minutes to replace all files. once you done login into your wordpress dashboard and go to masterkey settings. on the header (beside masterkey logo) the theme version will be changed to the latest version. this is the indication that your theme is updated. We recommend method one which only takes less than one minute.

## Translating WordPress Theme

helpme is localised and you can easily translate it to any language you like. Please note that the font family you are using in 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 is missing. Complete lists of codes can be found at (country codes) and (language codes).

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

    define ('WPLANG', 'pt_BR');

#### Translating via a plugin

Now you are ready to translate your theme. The easiest way to do this is by installing the Codestyling Localization plugin. Install and activate the plugin and go to Tools => Localization (shown in your language). Read Plugin documentation on how to use it to translate the theme. helpme's Textdomain is "dv_framework". But there are other textdomains such as woocmmerce and you may need to search and translate for all of them.

#### Handling Theme Updates

If you update your theme to a new version which has an updated language file, you'll need to rescan your theme using the plugin and then translate the new strings. Find your theme in Codestyling Localization plugin and click the Rescan link to have the plugin update the pot file.

After you have rescanned your theme, click Edit to translate any new strings the plugin found when rescanning. Remember to generate a new MO file after you have translated your new strings.

## Theme Navigations

This Theme uses wordpress built-in menus feature which can be found in your wordpress dashboard > appearance > menus. In this section we will go by explaining every detail regarding usage of below tools as well as some other cool features we added such as making a mega menu and using 400+ icons for your Menu items. We pointed sections with numbers and while explaining we may ask your attention to the screenshot for clear undrestanding.

From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor and start implementing below steps.

### Creating your menu

1. Click on "Create a New Menu" to add new menu (Refer to No 1).
2. You should define a name to your menu (eg: main menu)
3. Click the Create Menu button.
4. Your new custom menu has now been defined and you are ready to drag and drop menu items.

Warning!
by installing demo template or adding too many menu items you main got some warning or some of menus may removed automatically due to `max_input_vars` limits exceeded which is set by your server default to 1000, in that case login to your cpanel and find your php.ini file and edit or put this line in php.ini `max_input_vars 5000`, if you have not control over php.ini then contact with your host to do this for you.

### Adding Items to a Menu

1. The Screen Options allow you to choose which items you can use to add to a menu. Certain items, like Posts are hidden by default. If you haven't spot it yet, its on wordpress bachelpmed header right-side. if you click on "Screen Options" it will slide down. so you can easily check items to hide or show.
2. Refer to No 3. These panes will allow you to drop any sort of item to your menu. You can build from custom links to post, pages or categories.
3. The general technique of these panes are pretty simple, select the item and click on "Add to Menu" button. after a moment you will see the item appeared on your menu visual editing canvas.
4. Please remember you should always save your changes by clicking on "Save Menu" which can be found on header and footer right section.

### Deleting a Menu Item

1. Locate the menu item that you want to remove in the menu editor window
2. Click on the arrow icon in the top right-hand corner of the menu item/box to expand it.
3. Click on the Remove link. The menu item/box will be immediately removed.
4. Click the Save Menu button to save your changes.

### Customising Menu Items

1. Locate the menu item that you want to customise in the menu editor window
2. click on arrow icon in the top right-hand and expand.
3. The Navigation Label: This field specifies the title of the item on your custom menu. This is what your site visitors will see when they visit your site/blog.
4. The Title Attribute This field specifies the Alternative ('Alt') text for the menu item.
5. Refer to No 4 : helpme gives you this ability to add icon to each menu item. to add just click on "Add Icon", a Pop up Light-box will appear. choose your icon and click on "Use Icon". To remove the icon simply click on "Remove Icon" button.

### Creating Mega Menus (refer to No 4)

If you have decided to make any of your Main Navigation items a Mega Menu like the same you can see in demo site for gallery and blog Pages items, you should follow below steps :

1. Add a an item to the menu editor.
2. Click on arrow icon in the top right-hand and expand.
3. Check the "Make this Item Mega Menu?" checkbox to convert this item to a mega menu
4. You can add up to 6 child to this parent item.
5. Each of these direct child will define a column in mega menu and they will appear as a heading in each column. if you don't want a heading title, then replace text with a dash (-) in "Navigation Label" field. don't leave this field blank as wordpress will completely remove them from menu editor.
6. Any grand child you add for each of direct child will play row roles.
7. Once you are done, save settings.
8. Remember you can always convert mega menus back to a traditional multi-level menu by just visiting the parent item's options and remove the check from "Make this Item Mega Menu?" field.

### Creating Multi-level Menus (refer to No 5)

When planning the structure of your menu, it helps to think of each menu item as a heading in a formal report document. In a formal report, main section headings (Level 1 headings) are the nearest to the left of the page; sub-section headings (Level 2 headings) are indented slightly further to the right; any other subordinate headings (Level 3, 4, etc) within the same section are indented even further to the right.

The WordPress menu editor allows you to create multi-level menus using a simple 'drag and drop' interface. Drag menu items up or down to change their order of appearance in the menu. Drag menu items left or right in order to create sub-levels within your menu.

To make one menu item a subordinate of another, you need to position the 'child' underneath its 'parent' and then drag it slightly to the right.

1. Position the mouse over the 'child' menu item.
2. Whilst holding the left mouse button, drag it to the right.
3. Release the mouse button.
4. Repeat these steps for each sub-menu item.
5. Click the Save Menu button in the Menu Editor to save your changes.

### Adding Your Menu to Your Site (Refer to No 6)

If you have created your navigations, in order to display them in front-end you should assign your menus to specified locations accordingly. If you have made this navigation as your main navigation in header then you just need to check the Primary Navigation option. If you have made a menu for secondary header (refer to shortcodes => secondary navigation) then you just need to choose one of the other locations.

## Set up Homepage

In helpme setting up your homepage is pretty simple thing. all you need to do below steps :

1. Add New Page
2. Build your homepage content same like building other pages.
3. Save the page.
4. From Wordpress Left Hand sidebar navigate to Settings > Reading.
5. You will see a page like below.
6. Change your Front page displays to "A static page (select below)" (refer to No 1)
7. From "Front page:" selectbox choose the page you just created (refer to No 2)
8. Save Settings and you should see that page in your homepage.

Please note that you should not use Posts Page option at any time and it has nothing to do with blog page. helpme has its own way of building blog loops(read blog section of this documentaion).

## How to make a homepage same as demo website?

In this section we will show you how to build a homepage like our demo website.

1. First grab the dummy content from here
2. Add new page
3. write down your page title as Homepage
4. Set your page layout as "full layout"
5. Copy/Paste the dummy content into editor (in text mode)
6. From "Page Elements" choose "Remove page title"
7. Enable "Stick Template"
8. From "Header Style" choose "Transparent Layer"
9. Save settings
10. In order to set your this page as your homepage follow above steps.
11. Please note that the content you see in the dummy content will not fully be applied as you should add your edge slider items, client items, portfolio posts and so on.

## Theme Settings : General Settings

Please refer below screenshot to follow the numbers as we explain in order:

1. Upload Logo

   Using this option you will need to upload your logo. Once uploaded it will be appeared in header section. Please note that the logo image height will also set header height as well. Therefore its recommended to use an image smaller than 120px. If left blank theme defualt logo will be showed.

2. Main Navigation Responsive Width

   As navigation items length may vary from site to site its best recommended to consider this option once you have finished setting your main navigation. In order to find the best width you should constantly resize window width up to a level that menu items breaks into the second line. calculate the threshold width and set the value.

3. Main Grid Width

   The site content including header and footer is within a section with a defined width. Since this theme is built with fluid layouts, you can set any value between 960px-1380px and your content incuding images will be cropped and resized according to grid width. In screens smaller than your grid width the content will fit without overlaping. So its also resposnive relative to window size. Default value is 1140px as its best value in current web trends.

4. Content Width

   Content width will define your page content width (when sidebar is enabled). Its value is in percent relative to sidebar. So if your content width is set to 76% your sidebar width will be 24%. The best fit is 72-28 ratio. If you wonder how much will it be in pixels, do this calulation : (main grid width * content width)/100

5. Breadcrumb

   Breadcrumb is a tree base navigation menu that located in page title section. This feature is useful for users to know where exacly they are regarding to the structure of your site and its recommended in SEO best practices. You can disable it breadcrumbs using this option.

6. Smooth Scroll

   Smooth scroll is a jQuery plugin that gives your site a good experience while scrolling up and down. using its enahnced easing movement it makes your pages with parallax sections look just awsome. Please note that this script modifies the browser built-in scroll bar. Disable this smooth scroll from this option.

7. Page Comments

   You can make page comments on or off from this option.

8. Custom Sidebars

   In some cases you need an specific widget area for an specific blog post or page. Good news is we have such feature that gives you the ability to create unlimited widget areas beside your predefined widget areas (eg. single widget area). To start follow the below steps :

   1. Go to Theme settings > General Settings > Custom sidebars
   2. Write down your sidebar alias as you will remember for what page you are going to create it, such as FAQ, contact us.
   3. If you want more just click "Add More" and input new alias names.
   4. Save settings
   5. Now go to Appearance > Widgets.
   6. You will see the list of custom sidebar areas you just created in the right section (they should be appended to predefined widget areas).
   7. Same like predefined widget areas you can drag and drop widgets into custom sidebars.
   8. Now its time to assign the custom sidebar to a post (blog or portfolio) or page. add new page > in right section > helpme Page Layout > Choose a sidebar
   9. Choose your custom sidebar from the selectbox.
   10. Done! if your page is left or right sidebar layout then you should see your custom sidebar widgets on your page.
9. Typekit ID

   If your are willing to use typekit simply insurt your typekit id here.

## Theme Settings : Header

Please refer below screenshot to follow the numbers as we explain in order:

1. Header Structure

   helpme currently support stander header structure but more options or coming up.

2. Header Location

   Helpme currently support top header location more locations coming up

3. Header Padding

   Please set your header top padding using this option. Header height is consist of logo actual height + header padding(e.g : logo height + (30 * 2)). the value you set will create a space from top and bottom of logo.

4. Header Align

   align header menus left right or center for left option logo will be on left side, for right option logo will be on right side and for center logo will be in center of nav menu

5. Boxed Header

   select wheather header shoud be full width or boxed

6. Sticky Header

   Sticky header will place your header in top of window when you scroll down. This feature is currently trending due to its Usability and UX practices. but if you don't want to use this feature disable this option.

7. Squeeze Sticky Header

   this option will squeeze header on scroll of enabled

8. Header top border

   enable or disable header top border

9. Header Searchform

   you can enable or disable header search form from here

10. Header WPML Language Selector

    If you are using WPML plugin then you can enable wpml language selector from here. language selector will be avaialable in main navbar

11. Page Title For Pages

    on or off page title for pages

12. Main Nav for logedin user

    Select which navigation will be shown to logedin users

13. Header Social Network

    select header social network area toobar or header section or disable header social network from here

14. Header Toolbar

    You can enable or disable header toolbar from this option

15. Header toolbar phone number

    insert header toolbar phone number here. leave blank if need to disable

16. Header toolbar phone icon

    insert header toolbar phone number icon here. leave blank if need to disable

17. Header toolbar email id

    insert header toolbar email id here. leave blank if need to disable

18. Header toolbar email icon

    insert header toolbar email icon here. leave blank if need to disable

19. Header toolbar custom menu

    select header toolbar custom menu if required

20. Header Toolbar social icons

    insert social url in relevent fields to show social icons in header toolbar

## Theme Settings : Typography

1. Body Font Family

   Choose your content typography. You can use Google fonts besides safe fonts. The list of google fonts will be weekly checked and new fonts will be added to the selectbox.

2. Character Set.

   If your site is other than english then you should consider updating this field (if google font family chosen) with your language character set. if yours is not in the list then it means the font you have chosen does not support your language character set.

3. Backup Font Family

   If in case the google font did not work due to server issue or any other technical reason this font will be relaced with your google font (main font family). This option will only shown if you have chosen a google font.

4. Heading Font

   This option will allow you to set your heading fonts different than your main body font family. This option will affect h1,h2,h3,h4,h5,h6 tags.

5. Page Title text Size

   Using this option you can change your main page title text size.

## Theme Settings : Skin

1. Accent Color

   The main theme color that will define your site general skin. This color should be a bright and vivid color to give your site a balanced look.

2. Body Text Color

   This option will affect p tags as well as tags that do not have direct styling on them. For instance if your text is inside a div, span tag then they will inherit body text color.

3. Headings Text Color

   This option will affect color of h1,h2,h3,h4,h5,h6 tags.

4. Links Color

   This option will affect all links in site unless there is a direct styling on the specific link. for eample sidebar, footer and side dashboard links is being set separately in this section.

5. Page Title Color

   You can set page title text color from this section. aparat from this option you can also set its size from typography section. It background settings can be handled from background section.

6. Sidebar widget title and text

   In this section you will set sidebar widget titles and text colors.

7. Sidebar links

   In this section you will set sidebar widget links colorings.

8. Footer

   In this section you will set footer widget titles, text and links colorings.

9. Main Navigation

   This set of options will allow you to change the skin of main navigation that locates in header section. top level menus, sub level menus and header toolbar color scheme.

10. Custom CSS

    If you need to apply some small CSS tweaks to your theme, then you are in right place. Please note that you should always have a copy of your custom codes as sometimes you may mistakenly reset theme options to defaults and lose all your custom css. Alternatively you may consider making a child theme if your customisation is beyund just few lines of css code. below are some links on how to create your own child theme :

    - Child Themes « WordPress Codex
    - Child Themes Basics and Creating Child Themes in WordPress
    - Child Themes Basics and Creating Child Themes in WordPress
    - WordPress child theme made easy… and easier
11. Custom JS

    You can use this field to add Java scripts which will be appended to HTML file footer. Please be informed that your scripts may create errors for theme scripts as well and cause many theme elements fail to work correctly.

## Theme Settings : Backgrounds

In this section you can set Body, Header, Page Title, Footer, Sub Footer and Side Dashboard background properties. We have only explained the options you will see in each set of options.

1. Site Layout :

   This option will make your site boxed.

2. Background Image

   you can use this option to upload image, pattern, texture.

3. Background Color

   Set the background color for this section

4. Bakcground Position

   If you have used a background image then you can set the position of image using this option. Please note that this option will only work relative to the section only if the background attachment is set to scroll. If no background-position is specified, the image is always placed at the element's top left corner.

5. Bakcground Attachment

   The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page. The background is fixed with regard to the viewport. The background scrolls along with the element.

6. Background Repeat

   The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.

7. Bakcground Cover

   Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area. Do not use this option with a repeated pattern or texture.

## Theme Settings : Blog

1. Single Post Featured Image Height

   Using this option you can set Blog single featured image, gallery post format slideshow heights.

2. Archive Layout

   Define blog archive layout

3. Archive Loop Style

   Blog archive loop style.

## Theme Settings : Portfolio

1. Featured Image Height

   Single portfolio featured image or gallery post format slideshow heights.

2. Related Projects

   The related posts for portfolio single post. you can disable it using this option.

3. Comments

   Comments for portfolio posts is disabled by default. However you can enable them from here.

## Theme Settings : Woocommerce

In this section you will have general settings for woocommerce plugin. please note that this pane will be displayed only when the Woocommerce plugin is activated.

1. Shop Layout

   This option will define shop loop layout.

2. Product Loop Image Height

   This option will affect all shop loop product images in the theme including related products loops as well.

3. Single Layout

   Will define single product page layout.

4. Header Checkout/Shopping Box

   Using this option you can disable shopping cart box from header section.

## Theme Settings : Thrid Party APIs

1. Twitter API keys

   If you want to show your twitter feeds in your site using twitter shotcode or widget then you should first fill out these found fields. Follow below steps :

   1. Go to "https://dev.twitter.com/apps," login with your twitter account and click "Create a new application".
   2. Fill out the required fields, accept the rules of the road, and then click on the "Create your Twitter application" button. You will not need a callback URL for this app, so feel free to leave it blank.
   3. Once the app has been created, click the "Create my access tohelpme" button.
   4. You are done! You will need the following data later on:
2. Flickr API key

   If you want to use flickr image feeds in your site, you should first get an API key first. You can obtain your API key from Flickr The App Garden

## Theme Settings : Export & Import Options

Nothing can be predicted and you may even make a terrible mistake and reset all sections, so redoing your settings may take time. Therefore consider making backup after you have finished setting up our site.

1. Import Options

   Import the exported file using a URL or just click import file to upload it into server.

2. Export Options

   You can either copy the raw code and paste it in a safe text file or simply download the whole file.

## Widgets & Custom Sidebars

WordPress Widgets add content to your Sidebars and Footer. Examples are the default widgets that come with WordPress; for example post categories, tag clouds, navigation, search, etc. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.

#### Guide to use widgets feature :

1. Go to Appearance > Widgets.
2. Choose a Widget and drag it to the sidebar where you wish it to appear. The widget areas designated as No 1
3. Once you dropped the widget to widget areas, WordPress automatically updates the Theme and it will appear in its area.
4. Preview the site. and look for the specified area you dropped your sidebar. for example if you used "archive widget area" you should look for it in archive loop.
5. Return to the Widgets Panel to continue adding Widgets. helpme has 16 custom widgets as designated below with No 2. as you can see all have "TK" perfixes.
6. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
7. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget's interface.
8. To save the Widget's customization, click Save.
9. To remove the Widget, click Remove or Delete.

#### Custom Sidebars

In some cases you need an specific widget area for an specific blog post or page. Good news is we have such feature that gives you the ability to create unlimited widget areas beside your predefined widget areas (eg. single widget area). To start follow the below steps :

1. Go to Theme settings > General Settings > Custom sidebars
2. Write down your sidebar alias as you will remember for what page you are going to create it, such as FAQ, contact us.
3. If you want more just click "Add More" and input new alias names.
4. Save settings
5. Now go to Appearance > Widgets.
6. You will see the list of custom sidebar areas you just created in the right section (they should be appended to predefined widget areas).
7. Same like predefined widget areas you can drag and drop widgets into custom sidebars.
8. Now its time to assign the custom sidebar to a post (blog or portfolio) or page. add new page > in right section > helpme Page Layout > Choose a sidebar
9. Choose your custom sidebar from the selectbox.
10. Done! if your page is left or right sidebar layout then you should see your custom sidebar widgets on your page.

## Creating Pages

Pages are less time-dependent than Posts, none-blog content and basically are there to build your website content. Creating a page in helpme is pretty simple process. You will just need to build your content using shortcodes with the help of shortcode generator (refer to shortcodes section) or Page Composer (refer to Page Composer section). There are couple of metaboxes (page meta options to be used to modify its visual options) that we will explain in this section. Please refer below screenshot:

1. Title

   A page can have title. you can disable title section from below section (Page Elements => remove title).

2. Page Composer

   Visual tool to build your page layouts using shortcodes. Please refer to page composer section of this docs for more information. you can also disable this option to activate wordpress default editor.

3. Page Template

   From this option you can save current template and use for new pages

4. Page Section

   You can add page section with this option for more detail read composer section

6. composer element

   from here you can add elements to page for more detail read composer section

7. Page Elements

   using this option you can remove page elements. This option will only be applied to this page. for example in in single page sites you may need to disable header section and using secondary header shortcode bring header below your slideshow.

8. Breadcrumb

   Optionally you can disable/enable breadcrumb in this page.

9. Page Preloader

   This option will simply remove the space after header and before footer. If you want to add slideshow after header you just need to disable page title from above option and enable this option.

10. Main Navigation

    In helpme you can have 7 different main navigations. So it makes it possible to have single pages with anchor links in menu. If you leave blank primary menu will be used. dont forget to create menu and assign them to menu locations.

Page Layout

If you dont want to show sidebar or simply want to move sidebar to left side then this option is in your service :) default is right sidebar.

11. Choose a sidebar

    All pages widget area for sidebar is predefined "page widget area" but if you have crearted a custom sidebar in theme settings, then those custom widget areas will be in this option to choose from.

12. Page Attributes

    In this section you can have relative pages in sense of parent, child, siblings. In other words if you have set of pages that their parent is same page then they are that page's childern. Using this feature you can create sub navigation using subnav widget.

## Blog

Please follow bellow steps to create blog posts

1. Screen Options

   From here you can disable/enable metaboxes. for instance if you can not find excerpt metabox make sure its checked from screen options.

2. Post title

   Fill out the field with your blog post title.

3. Page Composer switch button

   Using this button you can switch between page composer module and classic editor.

4. Category Metabox

   You should first need to create blog post cateogries from Wordpress bachelpmed left sidebar => Posts => Categories. Then you can assign that category to this post.

5. Tags Metabox

   Useful for SEO as well as search feature within the site to have post tags.

6. Format Metabox

   Wordpress built-in format feature allows you to give different post formats.

7. helpme Posts Options

   If you choose video, audio and gallery format you should also consider helpme Posts Options as shown below to fill up the necessary options.

8. Excerpt

   The brief content of this post to be showed in blog loop. if left blank content will be pulled from post content.

9. Featured Image

   The featured image for this post to be showed in loop and single post heading. please note that this image will not be shown in gallery, link and quote post format.

10. helpme Page Layout

    Defines post layout to have sidebar as well as having custom sidebar (refer to widgets section of this docs for more info)

11. Publish

    Save as draft, preview before saving, schedule to be published in a defined date and of course publish immediately. All these actions can be done in this section.

### How to make Blog page?

1. Add New page
2. Click on Page Composer Button to switch to visual mode.
3. Click Elements button, search for blog and click.
4. You will see a set of options before you proceed to save (you can modify these settings at anytime later).
5. You can find options to change blog loop style and many more optionalities, review and save
6. Publish the page and view the page.

#### Sample Shortcode:

    [dv_blog style="classic" column="3" image_height="350" count="10" offset="0" pagination="true" disable_meta="true" grid_avatar="true" read_more="false" classic_excerpt="excerpt" pagination_style="1" order="DESC" orderby="date"]

## Portfolio

Please follow bellow steps to create portfolio posts.

1. Portfolio Title

   Fill up the title field

2. Page Composer

   Click page composer button to switch to visual editing mode for building your portfolio post content 5 times faster than old classic method.

3. Portfolio Post Format

   Currently Image, Gallery, Video is supported to choose a post format for portfolio posts.

4. Portfolio Categories

   Please see second screenshot(within this section) and follow steps shown in numbers to create portfolio posts. once done with it you will see categories here in box number 5.

5. helpme Page Layout

   Same as page and blog posts you can change your post layout as well as assigning a custom sidebar (refer to widgets section of this docs) for this post.

6. helpme Page sidebar

   choose sidebar for porfolio

7. Featured Image

   You should upload featured images for portfolio post using this metabox. This image will be viewed in loop and single post top section.

### Portfolio Categories

Please navigate to Wordpress dashboard => left sidebar => portfolio => portfolio categories. you will see below options page. You will just need to fill up name and slug fields and hit the button.

### How to make Portfolio page?

1. Add New page
2. Click on Page Composer Button to switch to visual mode.
3. Click Elements button, search for Portfolio and click.
4. You will see a set of options before you proceed to save (you can modify these settings at anytime later).
5. You can find options to change Portfolio loop style and many more optionalities, review and save
6. Publish the page and view the page.

#### Sample Shortcode:

    [dv_portfolio style="standard" ajax="true" item_row="1" column="3" width="400" height="400" count="20" sortable="true" offset="0" pagination="true" pagination_style="1" order="DESC" orderby="date" target="_self"]

## Employees

using this custom post type you can create column and scroller based employees module. To create employee posts navigate to Wordpress dashboard => Left Sidebar => Employees => Add New Memeber and follow below steps :

1. Title

   Consider employee name as post title.

2. helpme Employee options

   In this section you will need to consider fill up employee details

3. Featured Image

   In this section you should upload employee portrait image.

4. Publish

   save post and repeat this actions for other employees and then proceed to the next section.

### Adding Employees into a page

1. Add new page
2. Click on page composer button to switch visual editing more.
3. Click on elements button and search for employees and click
4. You will be shown a list of options, review and save
5. publish and view the page.

#### Sample Shortcode:

    [dv_employees style="column" column="3" dimension="250" scroll="true" count="10" offset="0" description="true" order="DESC" orderby="date"]

## Clients

Please follow bellow steps to create client posts.

1. Title

   Title will not be viewed in front-end but you should fill them up as they will help you identify which post is which.

2. Company Name

   Company name will be viewed on hover. dont fill this form and nothing will be showed.

3. Website URL

   If you want to link the logo to client's website fill up this field. please include http://

4. Featued Image

   Upload client's logo

5. Publish

   Publish and proceed to the next step

### Adding Clients loop into a page

1. Add new page
2. Click on page composer button to switch visual editing more.
3. Click on elements button and search for clients and click
4. You will be shown a list of options, review and save
5. publish and view the page.

#### Sample Shortcode:

    [dv_clients count="10" scroll="true" order="DESC" orderby="date" bg_color="#ffffff" border_color="#efefef" dimension="180" cover="true" target="_self"]

## Causes

Please follow below steps to create Cuses posts to be used in pages.

1. Title

   Will be used as post title .

2. Cause Bar Code

   insert cause bar code here, bar code is a campaign name created in total donation plugin, just copy campaign name and past here

3. Cause Description

   add discription to a cause post you can use shortcods in this description

4. Cause summery

   this summery will be shown in causes loops

5. helpme Page Layout

   Same as page and blog posts you can change your post layout as well as assigning a custom sidebar (refer to widgets section of this docs) for this post.

6. helpme Page sidebar

   choose sidebar

7. Causes Categories

   select category you can create new categories from link below category field

8. Featured Image

   The testimonial author portrait or image that represents him/her.

9. Publish

   Publish and proceed to the next step

### Adding causes into a page

1. Add new page
2. Click on page composer button to switch visual editing more.
3. Click on elements button and search for causes and click
4. You will be shown a list of options, review and save
5. publish and view the page.

## Layer Slider

helpme integrated with LayerSlider WP and it meets all its compatibilities to use it anywhere in your content. Due to the Themeforest new guidlines we can not ship third party plugins within themes. However we can include it in the main item folder for you to install it manually. It will just take you few seconds to get it from the main item you downloaded > Plugins > Layersldier.zip and manually upload and install it. If you wish to build awesome slides using this plugin follow below steps to install :

1. Open Main Item zip file and unzip Plugins.zip file.
2. You will find LayerSlider.zip file.
3. Go to Wordpress Dashboard > Left sidebar > Plugins > Add New
4. Click on upload from top Navigation.
5. Browse LayerSlider.zip file you just found in plugins folder.
6. Install now.
7. By now you should see its name in wordpress dashboard > left sidebar.

We will ship Included plugin's new versions with our every theme update. Since this plugin is premium, therefore you must have a single lisence to enable your auto updates and seek for support from plugin author. Unfortunately we can not give support to third party plugins.

### Getting Started With Layerslider

demo content for layer slider is also included in plugin-demo folder after installation from left sidebar go to layerslider -> in import section select layerslider demo-content file and hit import then you can use pre made sliders in any of your page or create new one as per your requirement, for further information please check layerslider documentation online.

### Adding causes into a page

1. Add new page
2. Click on page composer button to switch visual editing more.
3. Click on elements button and search for Layerslider and click
4. You will be shown a list of options, review and save
5. publish and view the page.

## Total Donation Plugin

we have used total donation plugin for donation and plugin is included in plugins folder you have to install this plugin manually by following below steps

1. Open Main Item zip file and unzip Plugins.zip file.
2. You will find totaldonation.zip file.
3. Go to Wordpress Dashboard > Left sidebar > Plugins > Add New
4. Click on upload from top Navigation.
5. Browse totaldonation.zip file you just found in plugins folder.
6. Install now.
7. By now you should see its name in wordpress dashboard > left sidebar.

We will ship Included plugin's new versions with our every theme update. Since this plugin is premium, therefore you must have a single lisence to enable your auto updates and seek for support from plugin author. Unfortunately we can not give support to third party plugins.

### Getting Started With Total Donation

please follow complete plugin documentation here

## The Event Calendar

download and install plugin from here and follow plugin documentation here

### Adding causes into a page

1. Add new page
2. Click on page composer button to switch visual editing more.
3. Click on elements button and search for Events and click
4. Then insert shortcode in text editor
5. publish and view the page.

#### Sample Shortcode:

    [dv-tribe-events column=3 responsive_column=1  number_count=3  error="n"]

in above shortcode attribute column is to define how many column to show in a row maximum support is 4 column and responsive_column is for small devices, number_count attribute defines how many post to show on a page so you can easily set your required loop

## Page Composer

Page Composer is a visual shortcode generator that you can build your layout painlessly without wasting your time with coding shortcodes. We built Page Composer based on Famous plugin called Visual Composer (Thanks for their awesome plugin). There's one concept/design pattern you should know. In the Page Composer editor mode you'll have "Add element" button, which you should click or drag to the working canvas, to add content block or row to your page. Clicking the "Add element" button will show the content element selection menu. Content blocks are divided into categories so you can filter. Alternatively you can type the shortcode name to filter down the items instead of search them visually.

### Main buttons :

1. The button to switch between classic and visual mode. So you can modify generated shortcodes manually if you know what you are doing.
2. Adds Elements, using this button you can drop all shortcodes avalaible in helpme. You can drag this button and drop to a page section, row or a column.
3. Adds Row. This is a column container. This shortcode does nothing other than holding controlling columns and elements.
4. Page section is the same as Row, but it has huge amount of options such as backgrounds, parallax effects, background videos and many more. you can click edit to explore its options.
5. Templates : You can save a page using this section and use it in other page. Its handy when you built blocks and columns that you might need them later in other pages.
6. Page Composer Visual editing canvas where all the magic of drag and drop happens.

### Elements Blocks

Below image shows the list of all shortcodes that you can use in helpme. You can use category filter and search element name field to find your shortcode much quickly.

#### Rows

Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis). Please note that you can edit a row property to enable full width option. This row will no longer follow main grid width that you define it in Masterkey Settings. Now you can add shortcodes such as full width slideshow, Portfolio carousel(modern style) or divide a page with Page divider (fullwidth style).

#### Introducing Row based on below screenshot :

- Delete button to delete the row and the all elements inside it.
- Clone Button to dublicate the row and all its columns and elements
- Edit button to give it custom class name and enable fullwidth mode.
- Dragger button to move vertical wise.
- Layout section to divide the row into differnt column width combinations.
- Column Edit button inside this row
- Plus button will bring up all elements pop up in order for you to choose which element to drop into this column.

#### Columns

Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

#### Page Section

Page sections are standalone shortcode that plays a fullwidth container role. What you can do with this shortcode is just limitless. You can have parallax backgrounds, videos, an many more using this huge shortcode. page section same as Rows are column holders, so you can have first level and second level columns to build complex layouts which has been never possible in old times without HTML and CSS knowledge.

#### Page Composer Settings

You can control page composer global settings such as disable/enable in a post type and user roles that can use a shortcode. You can find these settings from WordPress dashboard => left sidebar => settings => Page Composer. Once you arrived to this page, you will face with 2 options :

Content types:

  This option allows you to choose which post type should have the page composer feature. Please note that only post types will have this feature that they have WP editor feature. so for example clients will not have page composer even if you check mark its post type.

Rules for users groups:

  This option will give you the ability to select which shortcode should be appeared in the specific user role. this is useful when you give subscribers the ability to post, so you can control on what they can use.

## Introducing helpme Shortcodes

In this section we will go through each shortcode that comes with theme. Even though we strongly recommend you to stick with page composer on building your layouts, which the reason is quite obvious also you will take advantage of the updated list of options each shortcode may come in new versions. We may or may not update this list (shortcode WIKI) along new updates so page composer will contain the updated list of shortcodes.

Some users just can't absorb visual mode page builders and they want to play with shortcode themselves. We have thought about them and added classic shortcode generator:

### What is shortcode?

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

- `[vc_column width="1/2"]Place Content Here[/vc_column]` Puts contents into column blocks givin the column width

  #### Parameters :

  1. width : 1/1, 1/2, 1/3, 1/4, 1/5, 1/6, 2/3, 3/4, 5/6
- `[vc_row fullwidth="false"][/vc_row]` Container for columns that gives them possibility to stay beside each other and gain gutter padding. It can make its contents screen wide full width.

  #### Parameters :

  - id The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). Mostly used in single page scroll feature to link to the specific section of page.
  - fullwidth (true/false) Converts its contents to screenwide full width.
  - visibility (hidden-sm, hidden-tl, visible-dt, visible-tl, visible-tl, visible-dt) sm=smartphone, tl=tablet, dt=desktop. Makes screen width sensetive to conditionally hide or show in different devices.
  - el_class Adds custom class name for overrding element via custom css.
- `[dv_page_section bg_image="" border_color="#e2e2e2" attachment="scroll" bg_position="left top" bg_repeat="repeat" bg_stretch="true" parallax="false" parallax_direction="vertical" speed_factor="0.3" bg_video="yes" mp4="MP4 Format" webm="WebM Format" ogv="OGV Format" poster_image="Background Video Preview image (and fallback image)" mask="true" color_mask="#dd9933" mask_opacity="0.6" padding="20" full_height="false" full_width="false" section_id="Section-ID"][/dv_page_section]` Video, Background, Paralllax enabled section. You can make it full height for all screens.

  #### Parameters :

  - bg_image(URL) Bakcground Image URL
  - border_color(HEX color)
  - bg_position(left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom)
  - bg_repeat(repeat, repeat-x, , repeat-y, no-repeat)
  - bg_stretch(true/false) Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
  - parallax(true/false)
  - parallax_direction(vertical, vertical_mouse, horizontal, horizontal_mouse)
  - speed_factor(-2.0 to 2.0 eg : 0.3) This speed will define how fast the background will move when page scrolls.
  - bg_video(yes/no)
  - mp4(URL)
  - webm(URL)
  - ogv(URL)
  - poster_image(URL) video fallback image
  - mask(true/false) a pattern overlay on page section
  - color_mask(HEX color) a color overlay on page section
  - mask_opacity(0 to 1.0 eg : 0.6) opacity of the color overlay
  - padding(20-200) padding from top and bottom in pixels
  - full_height(true/false) makes the page section full height in all devices and screens.
  - full_width(true/false) makes the content screen wide full width.
  - section_idThe id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). Mostly used in single page scroll feature to link to the specific section of page.
- `[dv_divider style="single" divider_color="#dddddd" divider_width="full_width" margin_top="20" margin_bottom="20"]`

  #### Parameters :

  - style(single, dotted, dashed, thick)
  - divider_color(HEX color)
  - divider_width(full_width, one_half, one_third, one_fourth)
  - margin_top(integer) margin top in pixels
  - margin_bottom(integer) margin bottom in pixels
- `[dv_padding_divider size="40"]` creates space between elements.

  #### Parameters :

  - size(integer) the size of space in pixels
- `[dv_image src="IMAGE_URL" image_width="500" image_height="400" crop="true" hover="true" align="left" margin_bottom="10"]`

  #### Parameters :

  - src(URL) image url
  - image_width(integer) in pixels
  - image_height(integer) in pixels
  - crop(true/false) options to disable/enable image hard cropping
  - hover(true/false) Option to disable/enable hover and lightbox overlay
  - align(left, center, right)
  - margin_bottom(integer) margin from bottom
- `[dv_moving_image src="IMAGE_URL" style="spin" align="left"]` Creates a inifnite moving image.

  #### Parameters :

  - src(URL) image URL
  - style(float-vertical, float-horizontal, pulse, tossing, spin) The infinite animation style
  - align(left, right, center)
- `[dv_gallery images="" style="grid" structure="column" column="3" scroller_dimension="400" thumb_style_width="700" thumb_style_height="380" enable_title="true" height="500" margin_bottom="20"]`

  #### Parameters :

  - images(Image Attachment IDs separated with comma)
  - style(grid, thumb) The style of gallery as grid based columns or slideshow with thumbnails.
  - structure(column, scroller) as column or horizontal carousel based scroller. this option is only for "grid" style
  - column(1 to 6) this option for only grid style
  - scroller_dimension(integer) both height and width size in pixels. this option for "scroller" structure
  - thumb_style_width(integer) in pixels. this option is only for "thumb" style.
  - thumb_style_height(integer) in pixels. this option is only for "thumb" style.
  - enable_title(true/false) to disable/enable hover captions.
  - height(integer) this option is only for "grid" column structure.
  - margin_bottom(integer) margin from bottom in pixels.
- `[dv_fancy_title style="avantgarde" tag_name="h3" size="14" line_height="24" color="#393836" font_weight="inherit" letter_spacing="0" font_family="none" margin_bottom="10" align="left"]Here is a text[/dv_fancy_title]`

  #### Parameters :

  - style(simple, standard, avantgarde, alt) Fancy title styles.
  - tag_name(h1 to h6) tag name of the fancy title heading.
  - size(integer) font size in pixels.
  - line_height(integer) line height in pixels. normally should be double the size of font size.
  - color(HEX value) text color
  - font_weight(inherit, bolder, bold, 600, normal, 300) font weight
  - letter_spacing(integer 1-10 pixels) space between each character.
  - font_family(font family name, optional)
  - margin_bottom(integer) margin from bottom in pixels.
  - align(left, center, right)
- `[dv_fancy_text color="#ffffff" highlight_color="#4f4f4f" highlight_opacity="0.3" size="18" line_height="34" font_weight="inhert" margin_top="0" margin_bottom="18" font_family="none" align="left"]Here is a text[/dv_fancy_text]`

  #### Parameters :

  - color(HEX value) Text Color
  - highlight_color(HEX value) hightlight background color
  - highlight_opacity(alpha : 0 to 1.0) hightlight background color opacity
  - size(integer) font size in pixels.
  - line_height(integer) line height in pixels. normally should be double the size of font size.
  - font_weight(inherit, bolder, bold, 600, normal, 300) font weight
  - margin_top(integer) margin tp top in pixels
  - margin_bottom(integer) margin from bottom in pixels
  - font_family(font family name, optional)
  - align(left, center, right)
- `[vc_column_text]Here is the content of text block, it can accept any content including shortcodes[/vc_column_text]`

  #### Parameters :

  - el_classAdds custom class name for overrding element via custom css.
- `[dv_dropcaps char="H" fill_color="" style="square-default"]ere is content in dropcaps shortcode. continue your paragraph here...[/dv_dropcaps]`

  #### Parameters :

  - char
  - style(square-default, circle-default, square-custom, circle-custom)
  - fill_color(Hex Value) to fille the caps background color. This options is only for square-custom, circle-custom styles.
- `[vc_tabs orientation="horizontal" container_bg_color="#fafafa"] [vc_tab title="Tab 1" icon="icon-love" icon_color="#ccc" tab_id="1394462023-1-28"]Tab content here[/vc_tab] [vc_tab title="Tab 2" icon="icon-love" icon_color="#ccc" tab_id="1394462023-2-9"]Tab content here[/vc_tab] [/vc_tabs]`

  #### Parameters :

  - orientation(horizontal, vertical)
  - container_bg_color(HEX value) the tabs page container background color
- `[vc_accordions container_bg_color="#fafafa"] [vc_accordion_tab icon="icon-love" icon_color="#ccc" title="Section 1"][/vc_accordion_tab] [vc_accordion_tab icon="icon-love" icon_color="#ccc" title="Section 2"][/vc_accordion_tab] [/vc_accordions]`

  #### Parameters :

  - container_bg_color(HEX value) accordion pane background color
- `[dv_toggle title="Toggle Title" icon="theme-icon-woman-bag" icon_color="#3d3d3d" pane_bg="#fafafa"]Toggle Content.[/dv_toggle]`

  #### Parameters :

  - title(text) toggle title text
  - icon(font icon class name)
  - icon_color(HEX value) icon color
  - pane_bg(HEX value) toggle pane background color
- `[dv_blockquote align="left"]Blockquote Message[/dv_blockquote]`

  #### Parameters :

  - align(left, right center)
- `[dv_highlight text="Highlight Text" style="default"]`

  #### Parameters :

  - style(default, custom) highlight style. if chosen custom should fill the below option.
  - fill_color(HEX value) if chosen custom style should fill this field
- `[dv_custom_list style="e63b" icon_color="" margin_bottom="30"] <ul> <li>List Item</li> <li>list Item</li> <li>list Item</li> <li>list Item</li> </ul> [/dv_custom_list]`

  #### Parameters :

  - style(font icon character code, please refer to font icons section of this docs for more info)
  - icon_color(HEX value)
  - margin_bottom(integer) margin from bottom in pixels
- `[dv_font_icons icon="theme-icon-trashcan" style="filled" color="" bg_color="#fafafa" border_color="#d7d7d7" size="small" remove_frame="false" padding_horizental="4" padding_vertical="4" align="none"]`

  #### Parameters :

  - icon(font icon class name)
  - style(default, filled, custom) If chosen custom should fill "color", "bg_color" and "border color"
  - color(HEX value) icon color
  - bg_color(HEX value) icon background color
  - border_color(HEX value) icon border color
  - size(small, medium, large, x-large, xx-large, xxx-large) icon size
  - remove_frame(true/false) removes the frame around icon
  - padding_horizental(integer) horizontal padding
  - padding_vertical(integer) vertical padding
  - align(left, right, none)
- `[dv_icon_box style="style5" icon_align="left" title="Here is the title" read_more_txt="Read More text" read_more_url="Read More URL" icon="theme-icon-love" title_color="" txt_color="" icon_color="#dd3333"]Here is the content[/dv_icon_box]`

  #### Parameters :

  - style(style1, style2, style3, style4, style5)
  - icon_align(left, right) this option is only for style 2
  - title(text) title text
  - read_more_txt(text) more button text
  - read_more_url(URL) more button url(include http://)
  - icon(font icon class name)
  - icon_color(HEX value) icon color for style 5 and 6
  - title_color(HEX value) title color
  - txt_color(HEX value) description color
- `[dv_button style="three-dimension" size="large" bg_color="#444444" txt_color="#fff" outline_skin="#444444" outline_hover_skin="#fff" icon="theme-icon-video" url="Button URL" target="_self" align="left" id="Button ID" margin_bottom="15"]Button text[/dv_button]`

  #### Parameters :

  - style(flat, three-dimension, outline)
  - size(small, medium, large)
  - bg_color(HEX value) flat and three-dimension background color
  - txt_color(HEX value) flat and three-dimension text color
  - outline_skin(HEX value) outline style skin color
  - outline_hover_skin(HEX value) outline style hover state skin color
  - icon(font icon class name)
  - url(URL) button URL(including http://)
  - target(_blank, _self)
  - align(left, right, center)
  - idThe id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document). Mostly used in single page scroll feature to link to the specific section of page.
  - margin_bottom(integer) margin from bottom in pixels
- `[dv_message_box type="alert"]Message box text[/dv_message_box]`

  #### Parameters :

  - type(love, hint, solution, alert, confirm, warning, star, generic) if chosen generic you should fill below options
  - icon(font icon class name)
  - box_color(HEX value) message box background color
  - border_color(HEX value) Message box border color
  - content_color(HEX value) message box content text color
- `[dv_call_to_action style="default" text_size="18" font_weight="inhert" text="Here is the content" button_text="Button Text" button_url="Button URL" outline_skin="#444" outline_hover_skin="#fff"]`

  #### Parameters :

  - style(default, custom) if chosen custom style should fill bg_color, border_color, text_color, text_size, font_weight.
  - bg_color(HEX value) background color
  - border_color(HEX value) border color
  - text_color(HEX value) box text color
  - text_size(integer) text size in pixels
  - font_weight(bolder, bold, 600, normal, 300)
  - text(text) call to action message
  - button_text(text) button text
  - button_url(URL) button url
  - outline_skin(HEX value) button skin color
  - outline_hover_skin(HEX value) button hover skin color
- `[dv_image_slideshow images="" direction="horizontal" image_width="770" image_height="350" animation_speed="700" slideshow_speed="7000" direction_nav="true" pagination="true"]`

  #### Parameters :

  - images(Image Attachment IDs)
  - direction(vertical, horizontal) image sliding direction
  - image_width(integer) slideshow width
  - image_height(integer) slideshow height
  - animation_speed(integer in milliseconds, 100 to 2000) sliding speed
  - slideshow_speed(integer in milliseconds, 2000 to 100000) pause time between slides.
  - direction_nav(true/false) direction navigation arrows in left and right side of slideshow.
  - pagination(true/false) pagination bullets in bottom of slideshow.
- `[vc_row fullwidth="true"][vc_column width="1/1"][dv_edge_slider slides="" order="ASC" orderby="date" full_height="true" height="700" animation_speed="700" slideshow_speed="7000" direction_nav="true"][/vc_column][/vc_row]` Please note that this shortcode must be in a row shortcode with fullwidth option enabled otherwise it will not fit screen wide.

  #### Parameters :

  - slides(Image Attachments IDs)
  - order(DESC, ASC)
  - orderby(date, post__in, menu_order, id, title, rand)
  - full_height(true/false) enable/disable full height feature. if is disabled you should define the height in below option.
  - height(integer) slideshow height
  - animation_speed(integer in milliseconds, 100 to 2000) sliding speed
  - slideshow_speed(integer in milliseconds, 2000 to 100000) pause time between slides.
  - direction_nav(true/false) direction navigation arrows in left and right side of slideshow.
- `[dv_testimonials style="boxed" count="4" testimonials="" font_family="none" order="DESC" orderby="date"]`

  #### Parameters :

  - style(boxed, quote)
  - skin(dark, light) this option is only for quote style
  - count(integer) number of testimonials
  - testimonials(post IDs) specific post IDs separated with commas.
  - font_family(font family) content font family. this option is only for quote style.
  - order(DESC, ASC)
  - orderby(date, post__in, menu_order, id, title, rand)
- `[dv_chart percent="50" track_color="#fafafa" bar_color="" line_width="15" bar_size="170" content_type="percent"]`

  #### Parameters :

  - percent(percent 1-100)
  - track_color(HEX value) track color
  - bar_color(HEX value) bar color
  - line_width(integer, 1-20 pixels) the thicknes of bar line
  - bar_size(integer, 100-500 pixels) diameter of chart.
  - content_type(percent, icon, custom_text)
  - icon(font icon class name) if content_type is icon then you should use this option.
  - custom_text(text) if content_type is custom_text then you should use this option.
  - desc(text) the description that appears below chart
- `[dv_skill_meter title="Title" percent="50" color="#dd9933"]`

  #### Parameters :

  - title(text) skill meter title
  - percent(percent, 1-100)
  - color(HEX value) the bar color.
- `[dv_pricing_table skin="light" table_number="4" tables="" order="DESC" orderby="date"]`

  #### Parameters :

  - skin(dark, light)
  - table_number(integer, 1-4), number of tables in one row
  - tables(post IDs)
  - order(DESC, ASC)
  - orderby(date, post__in, menu_order, id, title, rand)
- `[dv_table] <table width="100%"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> </thead> <tbody> <tr> <td>Item #1</td> <td>Description</td> <td>Subtotal:</td> <td>$3.00</td> </tr> <tr> <td>Item #2</td> <td>Description</td> <td>Discount:</td> <td>$4.00</td> </tr> <tr> <td>Item #3</td> <td>Description</td> <td>Shipping:</td> <td>$7.00</td> </tr> <tr> <td>Item #4</td> <td>Description</td> <td>Tax:</td> <td>$6.00</td> </tr> <tr> <td><strong>All Items</strong></td> <td><strong>Description</strong></td> <td><strong>Your Total:</strong></td> <td><strong>$20.00</strong></td> </tr> </tbody> </table> [/dv_table]`

  #### Parameters :

  - el_class Adds custom class name for overrding element via custom css.
- `[dv_milestone start="0" stop="100" speed="2000" number_size="46" type="icon" icon="theme-icon-sitemap" text="" text_size="12" color="#919191"]`

  #### Parameters :

  - start(integer, 0-100000) milestone number start at which number?
  - stop(integer, 0-100000) milestone number stop at which number?
  - speed(integer, 0-10000) the speed milstone reach to the destination number.
  - number_size(integer, 10-60 pixels) the size of number
  - type(icon, text, none) type of content below number. accordingly you should fill below options.
  - icon(font icon class names) icon below
  - text(text) text below number
  - text_size(integer, 12-60 pixels) text below number size
  - color(HEX value) milestone skin color.
- `[dv_process_steps orientation="vertical"] [dv_step title="Step 1" tab_id="1394462023-1-7"][/dv_step] [dv_step title="Step 2" tab_id="1394462023-2-20"][/dv_step] [/dv_process_steps]`

  #### Parameters :

  - orientation(vertical, horizontal)
- `[dv_blog style="classic" column="3" image_height="350" count="10" offset="0" pagination="true" disable_meta="true" classic_excerpt="excerpt" pagination_style="1" order="DESC" orderby="date"]`

  #### Parameters :

  - style(classic, masonry) blog loop style
  - column(integer, 1-4) masonry columns
  - image_height(integer, 100-1000 pixels) blog loop image heights
  - count(integer, -1 t0 50) number of posts in one page. -1 will means whatever you have chosen in wordpress => reading => posts per page option.
  - offset(integer, 0 to 50) Number of post to displace or pass over, it means based on your order of the loop, this number will define how many posts to pass over and start from the nth number of the offset.
  - pagination(true/false)
  - disable_meta(true/false)
  - classic_excerpt(excerpt, content) You can show blog full content in classic style loop
  - pagination_style(1 = Classic Pagination Navigation, 2 = Load more button, 3 = Load more on page scroll)select which pagination style you would like to use on this loop
  - order(DESC, ASC)
  - orderby(date, post__in, menu_order, id, title, rand)
- `[dv_portfolio style="grid" ajax="true" item_row="1" column="3" width="400" height="400" count="10" sortable="true" offset="0" pagination="true" pagination_style="1" order="DESC" orderby="date" target="_self"]`

  #### Parameters :

  - style(grid, masonry, standard, scroller)
  - ajax(true/false) If you enable this option the portfolio posts items will be viewed in the same page above the loop. will not work in scroller style
  - item_row(1 = One row in one slide, 2 = Two row in one slide) How many row in one side? specific to 'scroller'
  - column(1-5 columns) specific to 'grid', 'standard'
  - width(integer, 100-1000) specific to 'scroller'
  - height(integer, 100-1000) specific to 'scroller', 'grid', 'standard'
  - count(integer, -1 t0 50) number of posts in one page. -1 will means whatever you have chosen in wordpress => reading => posts per page option.
  - sortable(true/false) If you dont want sortable filter navigation then set it true.
  - offset(integer, 0 to 50) Number of post to displace or pass over, it means based on your order of the loop, this number will define how many posts to pass over and start from the nth number of the offset.
  - pagination(true/false)
  - pagination_style(1 = Classic Pagination Navigation, 2 = Load more button, 3 = Load more on page scroll)select which pagination style you would like to use on this loop
  - order(DESC, ASC)
  - orderby(date, post__in, menu_order, id, title, rand)
- `[dv_employees style="column" column="3" employees="" dimension="250" scroll="true" count="10" offset="0" description="true" order="DESC" orderby="date"]`

  #### Parameters :

  - employees(Post IDs) specific employee post
  - style(column, grid)
  - column(1 to 5) Defines how many column to be in one row. will work in column style
  - dimension(100 to 1000 pixels) This value wil be applied to employee image width & height. Be infomed social network icons will not be displayed in image size less than 200px.
  - scroll(true/false) If you enable this option grids will be horizontally scrolled.
  - count(integer, -1 t0 50) number of posts in one page. -1 will means whatever you have chosen in wordpress => reading => posts per page option.
  - offset(integer, 0 to 50) Number of post to displace or pass over, it means based on your order of the loop, this number will define how many posts to pass over and start from the nth number of the offset.
  - description(true/false) this option will work for column style and you can remove description from employees loop.
  - order(DESC, ASC)
  - orderby(date, post__in, menu_order, id, title, rand)
- `[dv_clients clients="" count="10" scroll="true" order="DESC" orderby="date" dimension="180" cover="false" target="_self"]`

  #### Parameters :

  - clients(post IDs)
  - count(integer, -1 t0 50) number of posts in one page. -1 will means whatever you have chosen in wordpress => reading => posts per page option.
  - scroll(true/false) if you set it true the clients list will be horizontally carousel.
  - order(DESC, ASC)
  - orderby(date, post__in, menu_order, id, title, rand)
  - dimension(100 to 600 pixels) This value will be applied to logo box width & height.
  - cover(true/false) Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
  - target(_blank, _self)
- `[vc_twitter twitter_name="your twitter username" tweets_count="5"]`

  #### Parameters :

  - twitter_name(twitter username)
  - tweets_counttwitter posts number
- `[vc_flickr flickr_id="Flickr ID" count="6" column="three"]`

  #### Parameters :

  - flickr_id(flickr ID) To find your flickID visit idGettr. In order to use Flickr Shortcode you should first obtain an API key from Flickr The App Garden and update the field in Theme settings => Third Party API => Flickr API Key.
  - count(1-60) number flickr feed images
  - column(one,two,three,four,five) number of images in one row.
- `[dv_social_networks skin="dark" margin="4" align="left" facebook="#" twitter="#" rss="#" instagram="#" dribbble="#" pinterest="#" google_plus="#" linkedin="#" youtube="#" tumblr="#"]`

  #### Parameters :

  - skin(dark,light)
  - margin(integer, 0 to 50)
  - align(left, right, center)
  - facebook(URL) link to this social network, including http://
  - twitter(URL) link to this social network, including http://
  - rss(URL) link to this social network, including http://
  - instagram(URL) link to this social network, including http://
  - dribbble(URL) link to this social network, including http://
  - pinterest(URL) link to this social network, including http://
  - google_plus(URL) link to this social network, including http://
  - linkedin(URL) link to this social network, including http://
  - youtube(URL) link to this social network, including http://
  - tumblr(URL) link to this social network, including http://
- `[dv_contact_form email="your email address" skin="dark"]`

  #### Parameters :

  - email(email address) the email address the emails should be sent.
  - skin(light, dark)
- `[dv_contact_info name="Name" cellphone="Cellphone" phone="Phone" address="Address" website="Website" email="Email"]`

  #### Parameters :

  - name
  - cellphone
  - phone
  - address
  - website
  - email
- `[vc_video title="Widget Title" link="Video link"]`

  #### Parameters :

  - title(text)
  - link(URL) Link to the video. More about supported formats at WordPress codex page
- `[dv_audio file_title="Audio Title" mp3_file="Uplaod MP3 file format" ogg_file="Uplaod OGG file format" small_version="false"]`

  #### Parameters :

  - file_title(text)
  - mp3_file(URL) mp3 file
  - ogg_file(URL) ogg file
  - small_version(true/false) if you set it true the player will be optimised to fit in very small column or area.
- `[dv_gmaps height="300" latitude="Latitude" longitude="Longitude" zoom="14" pan_control="true" draggable="true" scroll_wheel="true" zoom_control="true" map_type_control="true" scale_control="true" marker="true" pin_icon="Upload Marker Icon" modify_coloring="false" hue="#ccc" saturation="1" lightness="1"]`

  #### Parameters :

  - height
  - latitude
  - longitude
  - zoom
  - pan_control
  - draggable
  - scroll_wheel
  - zoom_control
  - map_type_control
  - scale_control
  - marker
  - pin_icon
  - modify_coloring
  - hue
  - saturation
  - lightness
- `[dv_header menu_location="fourth-menu"]` This shortcode allows you to use header in any location of the page. This shortcode will use main header code to be called in a different block of the page. please note that this shortcode should be in a row with fullwidth option enabled. You can choose which menu location to use. so in helpme you can achieve up to 7 different menus. you can see samples in single page demos.

  #### Parameters :

  - menu_location(primary-menu, second-menu, third-menu, fourth-menu, fifth-menu, sixth-menu, seventh-menu)
- `[dv_instagram instagram_id="" access_tohelpme="" tag_name="" count="6" sort_by="most-recent" size="thumbnail" column="one"]`

  #### Parameters :

  - instagram_id
  - access_tohelpme
  - tag_name
  - count
  - sort_by
  - size
  - column

## How to Create One page website

With helpme you can create either standard multi page websites or One page scroll websites. This article will show you how to create one page scroll page by helpme.

You can also download helpme's demo content and get a template for one page scroll.

Craeting one page scroll is very easy. In fact you just create a normal page using any shortcodes and contents you like. However the difference is you need your navigation menu items to be linked up with in-page contents. That is a very easy process. Follow these instruction:

1. Add a new page and enter a title for your page
2. Switch to Page Composer by clicking on Page composer button
3. Start adding contents now. Feel free to insert anything you want. However note that you need to give each section a name.

For example let's say we want to add a Contact section to our page. We normally start off by adding a Row or Page section. To do this click on Add Elements or Add Row button on the top of page composer (Figure 1-1).

4. Once it is placed on page, click on Edit button (Figure 1-1).
Fig 1-1 - Create you contents with "Row" or "Page Sections".
5. Now inside the edit options windows you can give an ID name for your sections. Find a text field called Row ID in Rows (Figure 1-2) or Section ID in page sections (Figure 1-3) Give them any name you like. For example a good name for contact section could be "contact" or "contactUs". Just avoid spaces in your characters.
Fig 1-2 - Give a name to your Rows.
Fig 1-3 - Give a name to your page sections.
6. After you gave a name to your section continue adding contents to your section. Repeat the above steps for every new section you have. For example when you finish with "contact" section and want to start adding "portfolio" you need to add a Row or page section and give it a new ID name such as "portfolio".
7. When you finish creating contents Save your page by pressing "Publish" or "Update" button on the right side
8. Now it is time to create your menu. Go to Appearance > Menus (Figure 1-4)
9. Create a new menu and enter a name for your menu (Figure 1-4)
10. Open Links on the left side menu (Figure 1-4)
11. In URL field Enter the name you just added to your section back in step 5 preceding by a hash tag prefix. For example for portfolio section if you gave it a name like "Portfolio" then you have to enter #Portfolio (Figure 1-4)
12. In Link text field you can enter any names but remember that it is better to be related to you URL above. So if you have entered #Portfolio above in URL then you can enter Portfolio here in Link text field. Please note that this text will be showed up on your navigation bar. (Figure 1-4)
Fig 1-4 - Create a menu and add some links to it.
13. Click on "Add to Menu" button
14. Repeat steps 10, 11 and 12 for each section
15. Now Save your menu by clicking on the Save Menu button on the right side
16. You are almost there! You just need to make your menu appears in the right location. To do this Go to Manage Locations on top of the page (Figure 1-5)
17. Under the Theme Location, Assign your newly created menu to Main Navigation. Just select your menu name in the menu and Save Changes (Figure 1-5)
18. That's it! Now you have your one page scroll website up and running.
Fig 1-5 - Create a menu and add some links to it.

## My Contact Form not working!

If you have used contact form shortcode or widget, set up the correct email address (to be sent) and you do not recieve any emails after all your attempts then read on about some tips that may help.

### Try getting the Wordpress wp_mail function to work properly

WordPress sends email using wp_mail, a function that for all practical purposes operates like php's mail. It is a way for your site to send email via a PHP script rather than other ways like SMTP.

In order to determine what your problems might be, it is important to understand the potential email configuration requirements. Some issues could be server-based, others could be not understanding restrictions by your host.

In some cases even mail() function is disabled by default and you should set it to "ON" from php configuration file (php.ini) or ask hsoting provider to enable it for you.

### Valid email headers

Some hosts require that any server-side email script send with a "from" address that is an actual email address. WordPress by default sends email from a generic address "wordpress@yourdomain.com". If your host has a requirement that you send from a valid email address and you don't have a wordpress@yourdomain.com email configured, then your site can't send email. for example wordpress@designsvilla.com should be configured in your mail server in order to pass through this policy

### Are you on a shared server?

In general, on shared hosting, the email process is shared, too. If another user on your host has a script that is tying up the email server, that is going to effect your site (and therefore your email script).

For those running WordPress on shared hosts, the issue most often is that email is delayed in some case for a long period. But it is important to know if this is something you are likely to be effected by.

### What about spam filters?

Sometimes, the issue is that certain messages are simply blocked because of an addressing issue. Emails coming into one of the major email provider domains (hotmail, aol, gmail, yahoo) can get flagged for a number of reasons.

If email from wp_mail is not getting delivered, you may need to consider is it not getting through to everyone? Or is this limited to certain domains? Getting blocked or blacklisted by a specific host could be an issue.

### What is the best way to avoid script base mailing system?

The simplest way around all of this is to use a valid email account sent through an SMTP server. SMTP stands for Simple Mail Transfer Protocol and sending through an SMTP server simply means you have set up a real email address on your system and you are allowing the web based script (wp_mail) to connect to the server with appropriate account credentials. This will satisfy most hosting requirements and also help you avoid system bottlenecks on shared hosting.

There are many plugins that forces wp_mail function use an SMTP for delivering emails. We suggest below solutions :

- Easy WP SMTP
- WP Mail SMTP

Using one of these plugins is an easy way to change your WordPress email configuration to send email via SMTP. That is a more reliable and more stable way of sending email through WordPress.

The only thing you should do is to:

- Specify the from name and email address for outgoing email. (for example : info@company.com)
- Specify an SMTP host (eg. gmail : smtp.gmail.com)
- Specify port (eg. gmail : 465)
- Choose SSL / TLS encryption (eg. gmail : SSL)
- Choose to use SMTP authentication or not (eg. gmail : yes, Use SMTP authentication.)
- Specify an SMTP username and password (eg. info@company.com, your email password)

## What is Child theme?

A WordPress child theme is a WordPress theme that inherits its functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or tweak an existing WordPress theme without losing the ability to upgrade that theme. In the past, there was no easy way of updating WordPress themes without losing all the custom styling and changes that you had made. This becomes chaos when all the sudden you find out a widely used script in popular themes has a major exploit, and you need to update your themes ASAP. It becomes a tough choice because on one hand, you would lose all the custom styles if you update. On the other hand, you risk your site getting hacked if you don't update fast enough. So updating wordress theme is a must and you should never ever directly hack or modify theme files. But wait, what about the modifications?

The core team and the community decided to solve this problem by introducing the concept of parent theme and child theme. A child theme in WordPress would inherit all the functionality, features, and the code of the parent theme without making any changes to the parent theme itself. This allowed users to change the styling of the parent theme and add/modify features without losing the ability to update the parent theme.

It is important to know that even though you can always create a child theme of any WordPress theme, sometimes you may not need a child theme. Think about the number of changes you have planned for your child theme, if the changes you are planning are minor, then you can use custom css option located in theme settings or custom.css file in theme root(you should backup this file and relapce after each update). If the changes are too extreme where you find yourself overriding the core parent theme files, then you probably should be creating a custom theme.

Good new is that helpme is fully child theme compatible and you can override almost everything you can imagine. starting from shortcodes to widgets, hooks and filter, blog, portfolio. We have coded theme with this concept that users may need to use it as roubut framework for their ideal website.

### Advantage of using a child theme

- Safe Updates

  A child theme automatically inherits the parent theme's features, styles, and templates. This allows you to make changes to your site using child themes without ever modifying the parent theme. When a new version of the parent theme arrives, you can safely update it as all your modifications are saved in the child theme. So updates will not override or delete your midifications located in child theme.

- Easy to Extend

  A child theme built on a powerful theme framework allows a great deal of flexibility without writing a lot of code. You can selectively modify only the template files and functions that you need without going through other template files. You can add new functionality and much more. In some cases users ask for a feature which we can not include as a feature in theme directly due to some reasons. but occasionally we provide child themes with the extended features that some users need.

- Fallback Safe

  When you are creating a complete theme you need to think about all the possible scenarios and code for them. However, when you are working on a child theme and you forget to code for something, then there is always the parent theme's functionality available as the fallback option.

### Okay, Lets start. what should I do to create a child theme?

In order to create a baisc child theme you should follow below steps :

1. Create a folder inside wp-content and rename it as you width (avoid using space instead use dash or underscore)
2. Inside this folder create a file and rename it style.css
3. Add below lines: `/* Theme Name: helpme Child Theme Theme URI: http://designsvilla.com/themes/helpme/ Description: This is a child theme build by "your name" Author: designsvilla Author URI: http://themeforest.net/user/designsvilla/portfolio Template: helpme Version: 1.0.0 */ @import url("../helpme/stylesheet/css/theme-styles.css"); /* =Theme customization starts here ------------------------------------------------------- */`

   The most important parts of this file are the "Template:" and @import sections, which identifies the parent theme imports the CSS from the original. You must ensure that the path to your parent theme's css file is correct, and that the "Template: parameter correctly identifies the name of your parent theme. If you are using a different theme, then adjust the values accordingly. Everything must be case sensitive! The folder of our parent theme is "helpme" (all lower case), and the @import URL reflects this.

4. If you want to override theme WP hooks then you should create a php file as functions.php
5. Now if you go to appearance => themes you should see the child theme. go ahead and activate and visit site. both in bachelpmed and frontend of the website you should not see any difference comparing when the parent theme is active.
6. Go ahead and start overriding your CSS tweaks inside style.css

Please note that we have already created a sample child theme inside item main folder you download from themeforest.

We will update this section with massive wiki on overrding theme's special places (shortcodes, widgets,..). If you have any quations please open a thread in our support forum and we will try our best to assist you.