Introduction

This documentation is last updated on 10 Septemer 2018.

Thank you for purchasing AutoResQ WordPress Theme. If you have any question that is beyond the scope of this documentation, please feel free to create a support ticket using Our Support Site.

Disclaimer:
We offer premium support for our theme customers. Our support covers all AutoResQ Theme core features and included plugins. We followed WordPress industry standards when coding AutoResQ so adding extra plugins should be easy although we cannot guarantee our themes will work properly with all third party plugins and server environments. If you plan on adding numerous plugins to this theme then please note, we cannot facilitate support for any conflicts that might arise with this theme's default functionality. AutoResQ WordPress theme is presented as it is.


ThemeForest Item Purchase Code to Signup on Support Site

Please visit this knowledge base article to learn about how to get item purchase code from ThemeForest to signup on our support site.


If you like this theme, please support us by rating this theme with 5 stars (How to rate?)      

Install Theme

In start you must have a working version of WordPress already installed. Please make sure your folders have the the right access permission. For information in regard to installing the WordPress CMS, please see the WordPress Codex Installing WordPress

Once you have a working of version of WordPress, you need to download All Files and Documentation from ThemeForest and extract the downloaded zip to get various files including autoresq.zip and autoresq-child.zip.

Install Theme Via WordPress Dashboard

  1. Go to 'Appearance > Themes' section
  2. Click 'Add New' and select the 'Upload Theme' option
  3. Choose the autoresq.zip file and press 'Install Now'
  4. Do the same with the child theme autoresq-child.zip (upload and install)
  5. Once the child theme is uploaded you need to activate the child theme

It is better to use child theme as if you need to modify anything you modify in child theme only. This way you can easily update your parent theme whenever new update becomes available on ThemeForest. You can read more about child theme from here.

If you face any problem during upload through dashboard, please upload the theme using FTP as guided below.

Install Theme Via FTP

  1. Access your hosting server using an ftp client like FileZilla
  2. Go to the 'wp-content/themes' folder of your WordPress installation
  3. Extract the autoresq.zip file and put the autoresq folder in 'wp-content/themes/' folder
  4. Extract the autoresq-child.zip file and put the autoresq-child folder in 'wp-content/themes/' folder
  5. Go to 'WordPress Dashboard > Appearance > Themes' section to activate the child theme

Install Plugins

After you have installed and activated the theme, there'll be a list of recommended plugins at the top of the WordPress dashboard. Please install recommended plugins.



If you already hide it out, you can go to 'Appearance > Install Plugins' section instead.
So, you need to install first and then activate these all plugins as demonstrated below.

Install All at Once

Activate All at Once

This is what you should see when all done

Import Demo Contents

One click demo importer will add all its contents like pages, posts, custom post types, widgets and their contents. It will also set the Primary Menu and Homepage for you. You will still have to do 2 small imports to make your website complete (Revolution Slider and Essential Grid data ... we provide their data too) but let's take things step by step.

Go to the WordPress Admin > Appearance > Import Demo Data and choose the demo you want to import as displayed in image below.



Once the demo data has been imported you can deactivate this plugin as recommended in the picture too



Next we'll import Revolution Slider. Please note that we provide 2 sliders. Each slider is used in one of the demo homepages you can find in the demo data. Sliders files can be found in ThemeForest package under the Import-Data folder. Choose your slider and import it as below. (E.g: We'll import autoresq-slider-1.zip and autoresq-slider-2.zip)



Your homepage should contain the slider too after you imported the slider.



Next we'll import the Essential Grid Data (this contains Gallery Grids, Blog Grids and more). You will find the import file in the same folder you found the slider. The name of this import file is essential_grid.json. To import this do the following:



Import Everything



That's all! You have completed the import process. At this point you have all the content within your site.

Credits / Demo Content

A few words about resources included with this theme


Icons

Icons you can find in SVG Icons section are an integral part of the Theme, please do not use it separately for other purposes.

Images

Premium images you can use along with this Theme without asking permission are included in downloadable package

Premium images only for live preview purposes can be found on depositphotos.com. We do not provide them in the package on ThemeForest. They are meant to be used only in the demo preview on http://demo.zoutula.com/

Configure Sidebars

To set up the sidebars you have to drag and drop the wanted widgets in corresponding sidebar predefined areas.

Go to Appearance > Widgets and just drag and drop the widgets you want in the sidebars you want. Set the widget title and you have your sidebars ready in minutes. Please note that some widgets are meant to be placed in corresponding sidebar areas. If you would like to follow our demo design please check the image below and see how we've placed the widgets.



Set Up General Theme Features

All customizations done in this theme are done via 'Customizer'. You will be able to test your changes before make them permanent.

To set up all this features go to WordPress Admin > Appearance > Customize and configure the related options. Hopefully all the options are easy to understand. Do not forget to save any changes you would like to go live with them.



General Settings

In this area you can set website layout (boxed/full width), main font, accent font and Google Maps API Key, Search button, Cart button, Back to Top button and more ...



Site Identity

Picture below is self descriptive about settings in this area



Header

In this area you can configure: logo, logo@2x for retina display, logo width, background color for the header area, menu color, menu hover color.



Footer

Picture below is self descriptive about settings in this area



Social Links

Picture below is self descriptive about settings in this area. If you empty any field the corresponding icon will be hidden.



Staff, Services, Blog, Shop

In this areas you will be able to set the sidebar for the respective area and also number of items displayed



Colors

In this area you can theme colors. You have 2 important colors (Theme First and Theme Second) used in different places. You can also set color for: details, links, pagination, lines



Header Image

In this area you can set header images for categories and pages. You can also set the header background color and titles color in the header area.



Additional CSS

In this area you can add your own quick CSS rules.



Set Up Woocommerce

Settings regarding the WooCommerce Store are located in the "Customizer Area". Note that Woocommerce shop links will work only if you are setting them before.

To set up all store sidebar go to WordPress Admin > Appearance > Customize and configure the related options. Hopefully all the options are easy to understand. Do not forget to save any changes you would like to go live with them.



WooCommrce Pages Setup

This will setup general things and also will create default WooCommerce pages. More information about things you need to take in cosideration when you setup your store can be found here: WooCommerce Onboarding Wizard




Set Up (WPBakery Builder) formerly Visual Composer


Go to WordPress Admin > WPBakery> Role Manager

By default WPBakery lets you edit pages only
To be able to modify any posts, custom posts like member, service you should make the following changes in Roles Manager tab.



Save the changes after.

Add Member

In case of imported XML the this type of content already exists. You only need to change it to fit your needs.

Go to WordPress Admin > Staff > Add New
  1. Provide member name
  2. Enter the member contents or just copy/past one of the predefined member post and change the existing content.
  3. Provide the featured image. The image should be a 600x840 if possible or a bigger image but with the same proportions.
  4. Provide excerpt for post, this will be used on staff listing page
  5. Add custom fields content see image below
  6. The custom post uses in listing the following custom fields: autoresq_staff_member_facebook, autoresq_staff_member_twitter, autoresq_staff_member_linkedin, autoresq_staff_position all these fields can be seen if you scroll down the page.
  7. Publish the post once it is ready.




Add Service

In case of imported XML the this type of content already exists. You only need to change it to fit your needs.

Go to WordPress Admin > Services > Add New
  1. Provide the service name
  2. Enter the text contents about service
  3. Provide the featured image.
  4. Provide the service related information. Some custom fields should be filled with data ( autoresq_service_cost as below.
  5. Publish/Update the service post once it is ready.




Title Element

This element will help you add titles/subtitles everywhere you want. You can set the following:

  1. Text to be used as title
  2. Tag that will wrap the element Eg. h1, h2 etc
  3. Line height of the element. If not set it will go on theme default.
  4. Style. This will let you choose the font to be used. (main or accent) This element has the advantage that in case you change the theme Main Font your titles that usees the Main Font will follow your new font without the need of any other changes.
  5. Align (left/center/right)
  6. Color

You will find this element used in our pages like below:



On frontend this element will look like this:



Divider Element

This element will help you divide items and set hierarchies. You can set the following:

  1. Style.
  2. Align (left/center/right)
  3. Color

You will find this element used in our pages like below:



On frontend this element will look like this:



Announcement Element

This element will help you add appealing announcements. You can set the following:

  1. Icon
  2. Icon Color
  3. Icon Background Color
  4. Title
  5. Subtitle
  6. Text Color (title and subtitle)
  7. Buton Link
  8. Buton Style

You will find this element used in our pages like below:



On frontend this element will look like this:



Counter Element

This element will help you add nice countdown boxes. It will help emphasize things your business achieved. You can set the following:

  1. Icon
  2. Icon Colors
  3. Number
  4. Description
  5. Text Color (description and number)
  6. Icon Color

You will find this element used in our pages like below:



On frontend this element will look like this:



Package Element

This element will help you add nice upgrades to your main pricing plan packages. In case your business has a lot of options this element will help you make your customers better understand what to choose. You can set the following:

  1. Title
  2. Subtitle
  3. Text Color
  4. Hexagon background color
  5. Hexagon text color
  6. Price (with currency) you can prepend/append your currency as your country specific

You will find this element used in our pages like below:



On frontend this element will look like this:



Countdown Element

This element will help you set a countdown. If you have future events you will be able to emphasize them easily. We use it on homepage for "First School Day" and also on Events pages. You must set the countdown date in the following format only Sep 23, 2018 12:14:20
You can set the following:

  1. Date
  2. Show days columns
  3. Show hours columns
  4. Show minutes columns
  5. Show seconds columns
  6. Color (for all the above)

You will find this element used in our pages like below:



On frontend this element will look like this:



Grid Element

This element will help you add an events grid everywhere you want. Keep in mind that will show only events you set in future. You can set:

  1. Post type (For now services. If you want to make a grid with any other post type use VC default grid or build yours with Essential Grid which is included)
  2. Number of items to display
  3. Order by
  4. Order (asc/desc)
  5. Order by Event Date

You will find this element used in our pages like below:



On frontend this element will look like this:



Subscriber Element

This element will let you add a form to subscribe to your MailChimp list. You only need to link your site with MailChimp via an API Key provided by MailChimp and the included plugin MailChimp for WP will know to fetch your MailChimp account for list and so on. Your subscribers will be kept in the MailChimp account so you can later on get in touch with theme through marketing campaigns or informative emails.

  1. Icon
  2. Icon Color
  3. Text
  4. Title Color
  5. Subscribe form ID(This should be created within MailChimp for WP tab)

You will find this element used in our pages like below:



On frontend this element will look like this:



Steps Element

This element will help you create the enrollment process or any other process that can be achieved in steps. On parent element you will be able to set slider loop, navigation display and autoplay.
On each step you can set:

  1. Step number
  2. Step color
  3. Step title
  4. Step description

You will find this element used in our pages like below:



On frontend this element will look like this:



Map Element

This element will help you create extremely wonderful maps. All maps can be customized using a free configuration from https://snazzymaps.com/ where you can choose from hundreds of predefined maps. To work properly please set your google key in Customizer > General Settings.
On this element you can set the following:

  1. Coordinates in the following format 53.491782, -2.265462
  2. Map width
  3. Map height
  4. Map zoom
  5. Map controls
  6. Map scroll function (enable/disable)
  7. Pin image
  8. Custom style of your map (https://snazzymaps.com/)

You will find this element used in our pages like below:



On frontend this element will look like this:



Pricing Plan Element

This element will help you create your base pricing plans. You have available 3 distinct styles and you can switch between anytime. Keep in mind that you can combine this with the Package Element to create advanced offres for your customers.
On this element you can set the following:

  1. Style
  2. Title
  3. Subtitle
  4. Description
  5. Price
  6. Currency
  7. Unit of time
  8. Color for Description
  9. Main Color
  10. Accent Color
  11. Header text color
  12. Plan background color
  13. Link for the button (maybe to a woocommerce product if you wnat your customers to pay online for services)

You will find this element used in our pages like below:



On frontend this element will look like this:



Testimonials Element

This element will help you create your testimonials area. Just add your testimonials and they will display nice in your site. On parent element you have the choice to enable disable navigation arrows, dots navigation, autoplay and loop
On this element you can set the following:

  1. Title Color
  2. Image before title (start quote)
  3. Image after title (ending quote)
  4. Description color
  5. Author Image border color
  6. Title
  7. Description (this supports HTML)

You will find this element used in our pages like below:



On frontend this element will look like this:



Coupon Element

This element will help you create your coupons that can be easily printed by your clients On this element you can set the following:

  1. Background image
  2. Logo
  3. Main color
  4. Accent color
  5. Text color
  6. Coupon expiration
  7. Service/branch address

You will find this element used in our pages like below:



On frontend this element will look like this:



Clients Element

This element will help you create a carousel with your clients On this element you can set the following:

  1. Client URL (not required)
  2. Client Image (preferably at least 600px x 600px )

You will find this element used in our pages like below:



On frontend this element will look like this:



Product Filter

This element will help you create a quick filter area for any kind of products. We wanted to showcase a "quick tires filter". On parent element you can set the following:

  1. Category ID (the parent category to search in products)
  2. Option to search only "in stock" products

On child element you can set the following:

  1. You can select the attribute to filter by
  2. You can set a label
  3. You can add an index (visually)

You will find this element used in our pages like below:



On frontend this element will look like this:



SVG Icons

You may use any of the icons below in any context of this theme. Icons below are used in different contexts as widgets components, VC elements etc.

AC Air Conditioning Fan
AC Air Conditioning Part
Airplane Service
Aliment Wheels
Analysis Graph Packing
Arrow Packing
Barcode Packing
Battery Automobile
Battery Clamper
Body Paint Repair
Box Packing Service
Box Packing Service 1
Broken Packing Service
Bus Vehicle
Calculator Service Shipment
Calendar Packing
Call Center Human
Caption
Car Door Mirror
Car Wash Clean
Card Credit Money
Cargo Packing Service
Car Service
Car Trunk
Certification Service
Clock Time
Cogwheel Gear
Compass Navigation
Computer Website Service
Container Shipment
Cool Air Circulation
Counter Packing Service
Diagnostic Monitoring
Disc Brake
Drone Packing
Ecommerce Packing
Ecommerce Packing 1
Ecommerce Packing 2
Ecommerce Packing 3
Ecommerce Service
Ecommerce Service 1
Ecommerce Shopping
Electrical Service
Engine Oil
Engine Turnup
Exhaust Automobile
Fan Exhuast Air
Fire Safety Extinguisher
Fire Smoke
Flag
Folk Life
Free Packing Service
Fuel Petrol Gas
Gear Manual Transmission
Gear Mechanism Automobile
GPS Location Smart Phone
GPS Packing Service
GPS Packing Service 1
GPS Service
Graph Packing Service
Greece Oil Bottle
Horn Blow Car Horn
Human Packing Service
Ignition Spark Plug
Inflate Tire Air
Key Remote Control
Like
Location
Mag Wheel Rim
Magnify Service Shipment
Maintenance Repair Service
Meter Power Energy
Money Shopping Service
Motorcycle
Painting Work Color
Parachute
Phone Mobile
Piston Automobile Part
Process Packing
Process Packing 1
Protect Packing Service
Protect Security
Radiator Automobile Part
Refuel Car Vehicle
Remote Keyless System
Report Service
Report Service
Rims Tire Accessories
Rims Tire Accessories
Rocket Packing Service
Safety Belt Seat Belt
Scale
Seat Driver Chair
Shop Service
Shopping Service
Sidemirror Mirror Glass
Silencer Exhaust Pollution
Sound Speaker Hoofer
Spanner Wrench Screwdriver
Speed Transport Vehicle
Speedometer Indicator Dashboard
State Inspection Check
Steering Wheel Automobile
Strut Suspension Automobile
Suspension Lift Carry
Technician Avatar Mechanic
Tire Wheel Automobile
Trailer Car Load
Transport Packing Service
Transport Packing Service 1
Transport Packing Service 2
Transport Packing Service 3
Transport Vehicle Service
Viper Front Glass Wash
Warehouse Packing Service
Warehouse Packing Service
Wind Pump Station
Wiper Wash Clean
Wrenching Wrench Screwdriver
Car Parts
Car Elevator
Car Parts
Car Parts
Car Parts
Car Parts
Car Chip Settings
Email
Email
Machine
Car Tools
Car
Car Mechanic
Car Oil
Car Cogwheels
Car Pistons
Car Mechanic
Car Repair
Car Engine
Machine
Car Robotic Arm
Car Mechanic
Car Plan
Car Pistons
Car Gauge
Car Mechanic
Car Settings
Car Mechanic
Car Mechanic
Car Settings
Clock

Translating The Theme

This theme is translation ready but the support of RTL languages is not available for now.
  1. For translation to only one language please provide the POT files to your translators. Once they are ready you should get back a PO/MO file. Use them in the child theme and replace the PO/MO files there with the new ones. This way you are safe when your theme is updated and your translation files remains untouched in child theme folder even if the theme is updated.
  2. For translation to multiple languages you can use WPML Plugin

Quick Modify CSS

You can make quick CSS changes in the Admin > Appearance > Customize > Additional CSS