Car Service - Mechanic Auto Shop Theme - Documentation - www.20script.ir

- About
- Getting Started
- How To?
- CSS & JS
- Structure
- Visual Composer
- Widgets
- Credits
- Changelog
- Support

# Car Service - Mechanic Auto Shop Theme

Car Service is a responsive and retina ready WordPress Theme best suitable for auto mechanics, car repair shops, mechanic workshops, car repair services, auto painting, auto detailing, tire and wheel shops or handyman business. The Theme comes with Appointment Form, Slider Revolution plugin, 90 premium car related font based icons, 12 page templates, sticky menu, touch friendly slider and carousels, ajax contact form and more.

Car Service includes Slider Revolution for WordPress Plugin, Visual Composer: Page Builder for WordPress Plugin, premium font icons, 12 page templates, sticky menu, touch friendly slider and carousels, ajax contact form and more.

PSD source files are available to all of our buyers. Please contact us to get the files. You will receive perfectly organized and layered Template plus all of the icons used within a project in full PSD vector.

Theme Features

- Responsive Layout
- Retina Ready
- jQuery Powered
- Appointment Form
- Slider Revolution Responsive WordPress Plugin (Value of $18) Included
- Visual Composer: Page Builder for WordPress (Value of $33) Included
- 50+ Page Builder Components Including 20+ Custom Made
- Streamline Premium Icon Font with 90 Icons (Value of $69) Included
- Premium Images (Value of $33) Included
- One Click Demo Content Importer
- Theme Options Panel
- WooCommerce Integration
- Smart Sticky Columns
- Theme Color Picker
- Sticky Menu
- Mobile Touch Friendly Sliders and Carousels
- Ajax Contact Form
- Isotope Gallery
- Parallax Backgrounds
- Google Location Map
- 800+ Google Fonts to Choose From
- WPML Compatible. Translation Ready With Mo/Po Files
- Unlimited Menus & Sidebars
- Page Templates
  - Home
  - Services
  - Single Service
  - Projects
  - Single Project
  - About Us
  - Blog With Sidebar
  - Blog 2 Columns
  - Appointment
  - Contact Style 1
  - Contact Style 2
  - Error 404
- Social Icons Font with 18 Icons to Choose From
- PSD Files Included (Please Contact Us to Receive Perfectly Organized PSD Files)
- Documentation Included
- Valid HTML5 Code
- Crossbrowser Compatible
- Clean Design

#### Instructional Videos

- Activate and Automatic Dummy-content Import,
- Woocommerce Integration,
- Set Theme Options

#### Need HTML (non - WordPress) version?

There is also HTML version of this theme available. You can find it here: Car Service - Mechanic Auto Shop Template

# Getting Started

#### 1. Downloading theme archive

To install Car Service on your WordPress website, you need to download the theme archive file from your Downloads section on ThemeForest. Downloaded archive will look like this 'themeforest-12777824-car-service-mechanic-auto-shop-theme.zip'. Please unzip this file and inside you will find 'carservice.zip' archive (screenshot) which contains all theme files necessary to install the theme.

#### 2. Theme installation

Please login to your WP dashboard and go to 'Appearance->Themes' panel, over there you can use the 'Add New Theme' option to install new themes. Click on 'Upload Theme' button located at the top left corner of the screen (near the 'Add Themes' page title, screenshot) and select the 'carservice.zip' file from your computer, now use the 'Install Now' button and if everything goes right, you should notice 'Theme installed successfully' message (screenshot), after that you can activate the theme.

#### 3. Plugins installation

Once the theme is active, you need to install required plugins, you can do that in 'Appearance->Install Plugins' panel. After installation please activate plugin if necessary (screenshot) (some will be automatically activated and doesn't require manual activation).

#### 4. Dummy data import

The last thing is to import the dummy data, this will create sample content and configure your WordPress settings, making your website look exactly as in our preview version. This step is optional, you don't need to install dummy content if you don't need it but it will help you to see how content has been configured on demo site, you can also take it as a base for your customized website. To do this, please go to 'Appearance->Theme Options' panel and click on 'Import dummy content' button, please remember that this can take some time, so you should wait until the confirmation message is displayed (screenshot). After that, your website will be ready and now you can start adding your own content or customize the theme. All steps from the dummy content process can be viewed on this instructional video.

# How To?

#### 1. How to install Car Service theme?

Please read our Getting Started guide, it presents step-by-step instructions on how to install the theme. Alternatively you can install theme manually. In that case please connect with your FTP account using FTP client like FileZilla and now upload the unpacked theme directory to the 'wp-content/themes/' subdirectory, after that, you can activate it in Themes panel of WP dashboard.

#### 2. What is the correct way to update the theme?

To update the theme you need to download its latest version from ThemeForest downloads page. Now there are two ways to update the theme, if you don't have any custom modifications then you can simply remove the old theme version from admin panel and install new one on 'Appearance->Themes' page. Otherwise, if you want to keep some theme files, which were modified, then you need to update it manually. Please unpack the downloaded theme archive, login to your FTP account using FTP client (e.g. FileZilla) and replace the current theme files by uploading the newest ones. If your theme has custom modifications then you can upload only those files which were changed in theme update, you can check those files in the documentation that's included in theme directory(Changelog section). This way you can keep most(or even all) of your modifications after the update.

#### 3. How can I update the Visual Composer plugin?

Firstly you must update your theme to the latest version, which includes new version of Visual Composer plugin.
Now if you use WordPress MultiSite installation, then just go to 'Network->Plugins' panel and delete the 'WPBakery Visual Composer' plugin. Login once again to your website dashboard and you will be asked to install the VC plugin, follow the instructions and the update will be complete.
For standard WordPress installation, please login to your FTP account and go to 'wp-content/plugins/' subdirectory and delete entire 'js_composer/' folder, after that visit your WordPress dashboard. You should notice new message at the top of a screen, that asks you to install the required plugin, follow the instructions and the Visual Composer plugin will be installed.

#### 4. How can I setup a Child Theme?

To setup a child theme please first install the theme and import dummy data, instructions can be found here. Now you need to create a new folder in '/wp-contet/themes/' subdirectory, you can name it 'carservice-child' and then add two files: style.css and functions.php. In 'style.css' file please use below code:

    /*
    Theme Name:   Carservice Child
    Description:  Carservice Child Theme
    Template:     carservice
    Version:      1.0
    Text Domain:  carservice
    */

above code includes basic details about your child theme, you can edit above information as you like. For the second file 'functions.php' please use this code:

    <?php
    function child_theme_enqueue_styles() {
    	wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css", array("reset", "superfish", "prettyPhoto", "jquery-qtip", "odometer", "animations"));
    }
    add_action("wp_enqueue_scripts", "child_theme_enqueue_styles");

above code loads the styles of parent carservice theme. Now in your WP dashboard go to Themes panel and activate the 'Carservice Child' theme, you will also need to activate the Visual Composer plugin and it is possible that WordPress will deactivate widgets and main menu, so you will need to re-assign them in Widgets and Menus panel. After that your child theme should be working correctly. More details about Child Themes can be found here: http://codex.wordpress.org/Child_Themes

#### 5. How can I translate the theme?

Theme supports translations. To create your language translation, please download this usefull tool Poedit. Then find in languages directory default.po file and open it in Poedit. Translate appropriate texts and save the file giving it appropriate name (check here for more). For example French: fr_FR, German: de_DE, etc.
The last step is setting the language in wp-config.php file. Please open it and find (or add if it doesn't exists) below line:

    define ('WPLANG', '');

Then set your language, for example French:

    define ('WPLANG', 'fr_FR');

#### 6. How can I control the single post layout?

If you have imported dummy content you should see 'Single Post Template' page under 'Pages' admin menu. Please edit it using Visual Composer editor to control single post layout.
If you haven't imported dummy content you can create this template from scratch. To do that please add new page: 'Pages->Add New'. Name it 'Single Post Template' and select 'Single post' template for it under 'Page Attributes' box (screenshot). After that please switch content editor to Visual Composer by clicking 'Backend Editor' button and click on 'Templates' button (screenshot). The templates popup will be displayed, please select 'Default templates' tab from it (screenshot). Find 'Single Post Template' on the list and click on it (screenshot). Close the 'Templates' window. Template is ready, please publish it (screenshot) and from now you can edit it to control single post layout.

#### 7. How can I control the blog layout?

If you have imported dummy content you should see 'Blog Template' page under 'Pages' admin menu. Please edit it using Visual Composer editor to control blog layout.
If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Blog Template' and select 'Blog' template for it under 'Page Attributes' box (screenshot). Please also use the 'Blog Template' as base for it (screenshot).

#### 8. How can I control the search results page layout?

If you have imported dummy content you should see 'Search Page Template' page under 'Pages' admin menu. Please edit it using Visual Composer editor to control search results page layout.
If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Search Page Template' and select 'Search' template for it under 'Page Attributes' box (screenshot). Please also use the 'Search Page Template' as base for it (screenshot).

#### 9. How can I control the single gallery page layout?

If you have imported dummy content you should see 'Single Gallery Template' page under 'Pages' admin menu. Please edit it using Visual Composer editor to control single gallery page layout.
If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Single Gallery Template' and select 'Gallery' template for it under 'Page Attributes' box (screenshot). Please also use the 'Single Gallery Template' as base for it (screenshot).

#### 10. How can I control the single service page layout?

If you have imported dummy content you should see 'Single Service Template' page under 'Pages' admin menu. Please edit it using Visual Composer editor to control single service page layout.
If you haven't imported dummy content you can create this template from scratch. To do that please follow the instructions from point 6 (How can I control the single post layout?) but name the page 'Single Service Template' and select 'Service' template for it under 'Page Attributes' box (screenshot). Please also use the 'Single Service Template' as base for it (screenshot).

#### 11. How to integrate WooCommerce (shop) plugin?

Please check this instructional video to see how to setup Shop.

#### 12. How to control Theme Options?

Please check this instructional video to see how to control Theme Options.

# CSS Styles

The project uses the following cascade of template styles (in order):

- animations.css - styles for animated elements,
- jquery.qtip.css - default styles for tooltips (overwritten in style.css),
- superfish.css - default styles for superfish menu,
- odometer-theme-default.css - styles for Odometer smoothly transitioning numbers plugin,
- prettyPhoto.css - default styles for prettyPhoto lightbox,
- style.css - base styles for the entire project,
- responsive.css - styles for responsive design (remove it from header to disable responsive),
- reset.css - styles which resets default browsers styles.

All CSS files are located under /style directory.

# Javascript Files

#### Plugins and library

- jQuery v1.11.2 - jQuery JavaScript Library, http://jquery.com/,
- jQuery migrate v1.2.1 - APIs and features removed from jQuery core, https://github.com/jquery/jquery-migrate/,
- jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/,
- Isotope v2.2.0 - An exquisite jQuery plugin for magical layouts http://isotope.metafizzy.co,
- jQuery blockUI v2.66 - http://malsup.com/jquery/block/,
- qTip2 - Pretty powerful tooltips, http://craigsworks.com/projects/qtip2/,
- jQuery prettyPhoto v3.1.6 - Simple lightbox alternative, http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/,
- jQuery UI 1.11.4 - jQuery User Interface plugin used for tabs and accordions, http://jqueryui.com/,
- jQuery UI Touch Punch v0.2.3 Touch Event Support for jQuery User Interface plugin, http://touchpunch.furf.com/,
- jQuery BBQ v1.2.1, Plugin which provide support for browser histry, http://benalman.com/projects/jquery-bbq-plugin/,
- Odometer v0.4.6, Plugin for Smoothly transitioning numbers, http://github.hubspot.com/odometer/,
- jQuery carouFredSel v6.2.1 - Carousel plugin, http://dev7studios.com/plugins/caroufredsel/,
- jquery TouchSwipe - touch and swipe support for carousel plugin, http://labs.rampinteractive.co.uk/touchSwipe/demos/,
- jquery Transit - CSS transitions & transformations for jQuery, http://ricostacruz.com/jquery.transit/.

#### Other files:

- jquery.parallax.js - script which supports parallax animations,
- jquery.hint.js - script which supports hints/placeholders for form fields,
- main.js - script contains all executable instructions of jquery plugins, events handlers etc.

# Theme Structure

Project is divided by four main files: index.php, header.php, footer.php and functions.php

#### index.php

It's main project file which calls other. It contains get_header and get_footer calls.

#### header.php

The file contains head section of the html tree structure. You can find here also wp_head call.

#### footer.php

The file contains bottom part of the page, including copyright area and footer area. You can find here also wp_footer call.

#### functions.php

The file contains definition/includes of the functions for:

- widgets,
- shortcodes,
- sidebars,
- ajax calls,
- load javascript and css files,
- base configuration,
- menu generation,
- custom meta box and options pages.

# Visual Composer

Visual Composer documentation is available here.

# Widgets

There are 7 build in widgets:

- Cart Icon,
- Contact Details Box,
- Contact Details List,
- Contact Informations Box,
- Bulleted List,
- Carservice Recent Posts,
- Social Icons.

# Credits

#### Fonts used

- Open Sans By Steve Matteson, Apache License, version 2.0
  https://www.google.com/fonts/specimen/Open+Sans,
- Streamline Icon Font (90 Icons)
  http://www.webalys.com/,
- Template Icon Font By Multiple Designers, MIT License,
- Social Icon Font By Multiple Designers, MIT License.

#### Images

Premium images you can use along with this Template without asking permission (included in downloadable package):

- Mechanic Examining Under Hood Of Car At The Repair Garage By Wavebreakmedia
  http://photodune.net/item/mechanic-examining-under-hood-of-car-at-the-repair-garage/10182885,
- Inside A Garage By Lightpoet
  http://photodune.net/item/inside-a-garage-shallow-dof-color-toned-image/1652234,
- Front Disc Brake On Car In Process Of New Tire Replacement By Wanichs
  http://photodune.net/item/front-disc-brake-on-car-in-process-of-new-tire-replacement-the/10303480,
- Mechanic Adjusting The Tire Wheel At The Repair Garage By Wavebreakmedia
  http://photodune.net/item/mechanic-adjusting-the-tire-wheel-at-the-repair-garage/10213619,
- Engine By Gudella
  http://photodune.net/item/engine/4862315,
- Mechanic Pouring Oil Into Car At The Repair Garage By Wavebreakmedia
  http://photodune.net/item/mechanic-pouring-oil-into-car-at-the-repair-garage/10219308,
- Mechanic with Diagnostic Equipment By SimpleFoto
  http://photodune.net/item/mechanic-with-diagnostic-equipment/675598,
- Cars In Garage By Rido81
  http://photodune.net/item/cars-in-garage/9412718,
- Filling Air Conditioning Liquid By Kitzstocker
  http://photodune.net/item/filling-air-conditioning-liquid/9826376,
- Mechanic Testing Oil In Car At The Repair Garage By Wavebreakmedia
  http://photodune.net/item/mechanic-testing-oil-in-car-at-the-repair-garage/10212780.

All other images comes with this Theme are licensed under Creative Commons Zero CC0 1.0 Universal (CC0 1.0). You can use it along with this Theme without asking permission.

15 September 2015, ver. 1.0

- First release

# Support

Support for all our items is conducted through our Support Forum.
Please register an account and search the forum or create a new topic, we'll answer as soon as possible.
We're in GMT +1 and we aim to answer all questions within 24 hours (Monday – Friday). In some cases the waiting time can be extended to 48 hours.
Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.

#### Need HTML (non - WordPress) version?

There is also HTML version of this theme available. You can find it here: Car Service - Mechanic Auto Shop Template