Automotive WordPress Documentation  

Automotive WordPress Documentation Documentation Version Theme Installation Installing Demo Content Manually Importing the Demo Content General Settings Header Settings Footer Settings Social Settings Contact Settings Custom Styling Page Settings Update Settings Page Options Shortcodes Widgets Translating Theme & Plugin with WPML Making the Listing Categories Multilingual with WPML Translating Theme & Plugin with Poedit Dedicated Support Terms & Conditions Thank You 

        

Last Revised: August 22, 2016 

  Documentation Version  To ensure you always have the latest version of this document we have made it a live document that is always available through Google Docs: https://docs.google.com/document/d/1SltR_rZvgNtHJoSP82hvx6SDsDeDe2ZNq1zHkfPKPwo  We will update this document as necessary when things change or if we see a need to explain something. If you have any suggestions to improve the Documentation, please let us know, we always appreciate comments and feedback!   

Theme Installation  You can either install the theme through the backend of WordPress or upload it from FTP if you have access.  To upload it from the backend simply navigate to the “Appearance” menu item and then go to the “Themes” submenu item. At the top of the page there should be a button with the text “Add new”, click that and in the same spot there should be a button that now has the text “Upload Theme”. Once you click that upload the automotive.zip file that is inside the ThemeForest download, not the entire downloaded file from ThemeForest.  Alternatively you can upload the theme into the themes folder found inside the wp­content folder. Simply unzip the automotive.zip folder and upload the automotive­wp directory to the wp­content directory.  

  Once the theme is installed you can activate it by hovering over the Automotive screenshot and clicking the 

 button.  

There will be a notice at the top of the screen alerting you to install and activate 3 plugins. These plugins are “Revolution Slider”, “Visual Composer” and “Automotive Listings”. Once you click “Begin Installing These Plugins” you can simple bulk select the plugins and use the dropdown menu to select “Install Plugins”, once this is done do the same thing but select “Activate Plugins”. Congratulations, you have finished installing the theme!   If you plan on editing the Automotive theme we recommend using the child theme that is included, this will ensure that the changes you make aren’t overwritten when updating the theme. You must have the Automotive parent theme installed before you upload the child theme if you plan on using the child theme. More information on child themes over at WordPress.org.   

Installing Demo Content  We now offer a 1 click installer to simplify the process below! Once you have activated the plugin and theme you should receive a notice at the top of the page informing you of our one click installer, it should look similar to this:  

  If your site has one of these recommendations not met then please refer to this knowledgebase link, it will help in increasing these values. If the suggestions in the knowledgebase link do not work for you then please contact your web host as they will know exactly how to alter these values based on your server configuration.  Once you click “Install Demo Content” the installer process will start, the first step is installing all the content and images, so this step takes the longest. (Do not leave the page while this process is happening or you may have to reset your WP installation for the demo content to properly install)  

  If you are alerted with an error record which step it the error was on and open a support ticket on our support site (http://support.themesuite.com/) with the step it failed on and we will take a closer look. If you try to run the importer again you will need to re­upload the files “1.xml” to “5.xml” in the demo_content folder found in wp­content/plugins/automotive/demo_content/.  If it imports successfully you should see a notice like this: 

   

Manually Importing the Demo Content  We do offer a manual way of importing the demo content in case your server cannot handle the 1­click installer process, this was the original way of producing the demo content on your website. This section assumes you have already activated the plugin and theme following the steps above.  1. Open the demo content folder (/Demo Content) that is included in the ThemeForest download. Find 

the 5 Part XML Import folder and import the files inside (1.xml ­ 5.xml) using the WordPress importer, which is on the left sidebar of the admin under the “Tools” menu, then click “Import”. Then choose “WordPress”, you may have to install the WordPress importer plugin if you have not already. 

 2. You can then import the Revolution Slider homepage slideshow by going to the Revolution Slider 

menu item and clicking it, then find the green “Import Slider” button and upload the homepage_slideshow.zip file located in the Demo Content folder. 

 3. To import the listing categories go to the Import / Export tab of the “Listing Options” menu item. 

There will be an option labelled “Import Demo Listing Categories”, clicking this will import the 

options and hide the option from future uses. If you wish show this button again it can be re­enable this option you will need to open your installations “_options” table and delete the option “show_listing_categories”. 

 4. You can now import the listing_panel_options.json in the same tab as before, simply select the 

“Import from file” button and paste the contents of the listing_panel_options.json. Be sure that you are under the “Listing Options” panel. 

 5. This step is similar to the one above however you will be pasting the contents of the 

theme_panel_options.json file into the Import / Export tab of the “Theme Options” menu item.  6. You will now have to set the locations of the imported menus by going to “Appearance” then 

“Menus”. At the top of the page there will be a tab labelled “Manage Locations”, click this and set up the menus like so:  

Theme Location  Assigned Menu 

Header Menu  Main Menu 

Mobile Menu  Main Menu 

Footer Menu  Footer Menu 

 7. Under Settings > Reading you will need to set up the Front Page displays with static pages, set the 

Front page to be the page called “Home” and the Posts page to be “Blog”. 8. The last thing to setup is the widget and footer areas. Here is how we have the Footer, Blog Sidebar 

and Listings Sidebar setup:  Default Footer [LISTINGS] Mailchimp [LISTINGS] Twitter Feed [LISTINGS] Contact Us  Blog Sidebar [LISTINGS] Recent Posts Search [LISTINGS] Categories Meta [LISTINGS] List Items [LISTINGS] Testimonial Slider  Listings Sidebar [LISTINGS] Filter Listings 

[LISTINGS] Single Filter [LISTINGS] Single Filter [LISTINGS] Loan Calculator  

9. Congratulations, you have successfully installed the Automotive theme and plugin demo content! Please read the disclaimer pertaining to the demo content. 

  

General Settings  Favicon The favicon is the little image displayed beside the URL bar or tab at the top. Generally the favicon is 32x32 and in icon format.  

  Body Layout This setting provides 3 options for the body layout, Fullwidth, Boxed and Boxed Margin. If you choose Boxed or Boxed Margin then it will reveal another option labelled “Boxed Background” which allows you to set a background color or image, along with options for the background image.  

  Note: If you are using the demo content and change the body layout you will need to adjust the revolution slider width as it is set to fullwidth of the browser.  Default Sidebar Option This will set the sidebar for newly created pages.  Social Share Buttons This setting turns on or off the social buttons displayed at the end of each blog post. 

  

 Featured Image When enabled this setting will show a the featured image above a blog post.  Image Border This toggle allows you to remove the image border added to images in the main content.  Tracking Code This allows you to add a google (or other) tracking code. Once it has been pasted in the textbox you can then choose to insert it before the ending </body> or </head> tag. Please do not paste the <script> tags along with your tracking code as this will cause Javascript errors on the page.  Custom Sidebars Create as many sidebars as you need, they will appear under the “Appearance” >> “Widgets” where you can customize each sidebar with widgets and choose which sidebar is shown on each page in the “Page Options”: 

  Theme Update Check Disabling the theme update check may help speed up sites in some instances however users will not be notified in their dashboard when an update is released.  Responsiveness This feature allows you to disable the responsive CSS of the site, please note you may also need to disable Visual Composers responsiveness in their settings as well.  Retina This setting allows you to toggle the retina functionality for your sites images.  Listing Features Deactivation If you are using the theme and it’s shortcodes without using any sort of the listing features included in the plugin you can toggle this option to remove the listings functionality to speed up your site.  

Header Settings 

 Logo  You have the option of using a text logo or image. If you prefer to use the text logo there is a top text section and bottom, they control those parts of the logo respectively. 

  You can also choose to use an image for the logo, if you have an image uploaded it will automatically use the image over text.  Logo Image Control If enabled this setting will allow you to control the width and height of the logo as well as the spacing around it.  Link logo to home Enable or disable the link on the logo.  Default Header Image This setting allows you to set the default header image for all pages if there is not one specified for that page.  No Header Area Default If enabled this will have the “No Header Area” page setting enabled by default for new pages you create.  Toolbar Shadow Enable or disable the shadow under the toolbar.  Header Shadow Enable or disable the shadow under the header area.  Toolbar Text These settings allow you to control the labels for all the top toolbar including login, languages, search, phone number and address. You can also set the links for the login label and the address link.  Top header display 

Show or hide the top toolbar in the header.  Header Resize Toggles the automatic resizing of the header.  Header Mobile Resize This option will disable the header resizing for only mobile devices.  Push Homepage Slider Under Header on Mobile If enabled this option will push the homepage below the header area on mobile devices.   Breadcrumbs  Enable or disable the breadcrumbs.  Breadcrumb Style Control how the breadcrumbs are displayed, either by links to get to the page or by the categories the page/post is tagged in.  WooCommerce Cart Option will only function if WooCommerce is an active plugin. If enabled it will display a cart menu item in the top toolbar which when hovered shows the amount of items in the cart and total price.  WooCommerce Car Link Control which page the cart link in the top toolbar links to.  Languages This feature is only available if WPML is an active plugin on your WordPress site. It allows you to display a dropdown of the languages set in WPML so the user can easily switch between languages.   

Footer Settings  Multiple Footer Areas  You are able to create as many footer areas as you want and use then are able to use them on different pages. You can choose which footer is used on each page under the page options.  Footer Logo Display a different logo in the footer area rather than using the header logo.  Footer Text 

This setting allows you to edit the text displayed in each footer, you can also use variables such as {wp­link}, {theme­link}, {loginout­link}, {blog­title}, {blog­link} and {the­year}.  Footer Icons Show or hide the social icons in the footer: 

  Footer Menu Show or hide the footer menu: 

  Footer Widgets Show or hide the widget section in the footer: 

  Footer Logo Show or hide the footer logo: 

  Footer Copyright Show or hide the footer copyright: 

  

Social Settings  Footer Social Icons 

Here you are able to enable and disable which social icons are displayed in the footer, simply drag and drop them to their categories. 

  Social Links  Add the URL to the respective social network for it to link properly.   

Contact Settings  Contact Email The contact form shortcode will send all emails to this email, it defaults the administrator email.   

Custom Styling  Primary Color This color picker allows you to adjust the main color used across the website.  Link Color You can control the 3 states of a link here with 3 different options. Regular refers to when a link is simply on the screen, hover is when the user is hovering over the link and active is when the user is clicking the link but hasn’t yet released the mouse.  Footer Link Color Basically the same as above, except this allows you to control the footer links.  Color Scheme Add/Remove color schemes for your theme, customize most parts of the theme including the header, secondary header area, body, footer and bottom footer.  Body Font These settings allow you to control the font family, font weight, font size and the line height for the body font. The fonts are loaded from Google Fonts.  Top Logo Font These font settings control the top part of the logo if you are using a text logo. 

 

 Bottom Logo Font The same as the above but for the bottom text of the logo. 

  Main Menu Font Control the font used in the main header menu  Main Menu Dropdown Font This setting controls the font used in the dropdown menus in the header.  Mobile Menu Breakpoint Control the breakpoint for your mobile menu if you wish to increase or decrease it.  Custom CSS Here you can add custom CSS styles if needed. You can also use the child theme for custom CSS as well.  External JS Scripts This lets you add custom external javascript files if needed.  Custom JS This can be used for custom JavaScript if needed, the child theme can also handle custom JS.  Heading Font Styles This setting lets you control the fonts used for all the heading tags.   

Page Settings  Blog Post There are 2 fields here which control the header title and secondary title on blog posts since the blog post title and secondary title are displayed lower on the page. 

  The fields control the “Blog” and “Latest Industry News” titles respectively.  404 Page Here you can control the header image used, main & secondary title in the header and the breadcrumb displayed (since you cannot normally control this functionality).  Search Page, Category Page & Tag Page These settings allow you to adjust the same settings as above however you can use the variable {query} to use the search query/tag variable/category variable depending on the page you are viewing. The {query} variable can be used in the title, secondary title and breadcrumb.  

  WooCommerce Category Page, Shop Page & Tag Page These settings allow you to set page variables for WooCommerce Pages since they are dynamically generated pages in WordPress thus you cannot control the Page Options for them.  

Update Settings  ThemeForest Automatic Updates Enter your ThemeForest username you used to purchase our theme and enter an API you received from ThemeForest. Please note your an API key is not the same thing as a the purchase code you receive when buying our theme. 

 To generate an API key simply go to ThemeForest and at the top of the page hover over your username, then select “Settings”. Scroll down and choose “API Keys” from the left menu and generate a new key or use a previous key and paste the value in the “Themeforest API key” field.  

Page Options  On every edit page you will notice a new sidebar container with options. These options include sidebar placement, header image, footer area, call to action and slideshow. It looks similar to the image to the right ­­­­­­­­­­­­­­­­­­­­­­­­­>  Sidebar Position Here you can choose which side the sidebar will be displayed on, either left, right or none at all.  Header Image This option allows you to change the header image displayed the current page, it utilizes the default media manager in WordPress.  No header area Disable the header image area and start the page with content.  Sidebar Choose a sidebar you created from the Theme Options and customized in the “Appearance” >> “Widgets”  Footer Area You can control which footer is displayed on each page, you can create your own footers from within the options panel under “Footer Settings”. In addition there is a “Default Footer” option and a “No Footer” option.  Call to action The call to action refers to the bar underneath the slideshow or header area, you can set the text, button text and where the button links to. 

  

Slideshow You can set the slide that will be displayed on this page, it will override the header image if you have a slideshow set. The list will automatically populate with slideshows you have created in the Slider Revolution plugin.   

Shortcodes  Included in the Automotive plugin are 31 shortcodes that extend the functionality of the theme. It is highly recommended that you use Visual Composer when creating pages/posts and shortcodes. Visual Composer provides an easy to use drag­and­drop interface that makes designing pages/posts easier than ever.  Quote Text to quote, then change the border color of the quote.  Inventory Display your inventory as a shortcode, options include changing the layout and adding preselected filter.  List Create a list container and add list items inside of the container and change the icon as well (icons found here: FontAwesome).  Parallax Create parallax content with a title, content, image offset, image, overlay color, text color and the velocity at which the image slides at.  Animated Numbers Display values that are count upwards from 0, adjust the icon, number, text before number, after number and how to align the value.  Featured Icon Box Show a big featured icon with a title and content.  Progress Bar Show a progress bar with text inside the progress bar, customize the color, text and percentage it fills on page load.  Testimonials Display user testimonials by adding a testimonial container then adding child testimonial quotes, add the name and quote of the person  Recent Posts Scroller 

Show a list of your recent posts, control the amount of posts to show, total posts and speed of scroller.  FAQ Creates a FAQ container where you can add FAQ items and adjust the title, content, item state and which categories the item is in.  Staff Person Add a staff person and display their name, position, phone, cellphone, email, image, description and links to their social media.  Featured Panel Display a featured panel with a title, content, image that changes color and image on hover.  Detailed Panel Show a panel with a title, content and icon. Get the icon code from here: FontAwesome  Featured Brands Creates a slider container which holds brand items, used to display a brand item image which changes image on hover and can be linked.  Portfolio Display a portfolio you created in the “Portfolio” admin menu. Select categories, the type, which portfolio, sort by text and the amount of columns.  Alert Display an alert, choose the type, display a close button and content.  Pricing Table Create a pricing table with a title, price, how often, button text, link and create child items inside to list pricing options.  Search Inventory Box Display a search box that shows your listing categories and terms in 2 columns to search your inventory. You can adjust the categories shown, the form action and search text.  Vehicle Scroller Show a scrolling element with your listings, you are able to set the title, description, sorting method, vehicle ID’s to show, vehicles limit and automatic scrolling.  Button Display a button, adjust its text and size.  Tabs 

Create a parent tab container which holds single tabs, from there you can adjust the tab title and tab content.  YouTube/Vimeo Video Display a video from either YouTube or Vimeo, control the width or height.  Clearfix If floated elements aren’t display correctly use this clearfix to fix them.  Line Break Create a generic line break.  Heading Display a heading with 6 different styles and adjustable text.  Car Comparison Show car comparisons, you can either set car ID’s to compare or leave it blank to use with your inventory.  Contact Form Display a generic contact form and adjust the name placeholder, email placeholder, message placeholder and submit button.  Hours Table Show a hours table with a title and your business hours on each day of the week.  Contact Information Display your contact information including company name, address, phone and website.  Google Map Show a google map by setting the latitude, longitude, zoom, height, scroll to zoom, style and parallax functionality.  Flipping Card Create a flipping card by setting an image, larger image, title, link and card link. If you don’t set a link and larger image the icons won’t display on the back side.  Icon & Title Show a simple icon and title, icons can be found here: FontAwesome  

Widgets [LISTINGS] Categories Display the all blog categories in list form. 

 [LISTINGS] Contact Form Displays a contact form.  [LISTINGS] Contact Us Display your address, phone and email for users to contact you.  [LISTINGS] Filter Listings Only use this widget on pages that display your inventory listings, it will sort the listings in real time.  [LISTINGS] Google Map Displays a square sized map of a location using Google Maps.  [LISTINGS] List Items Displays a list of custom items.  [LISTINGS] Loan Calculator Display a loan calculator that users can use to calculate loans.  [LISTINGS] Mail Chimp Displays a field for users to enter their email to sign up for a mailing list on MailChimp. Requires MailChimp API credentials to be entered under “Listing Options” >> “API Keys”.  [LISTINGS] Recent Listings Displays a list of your most recent listings.  [LISTINGS] Recent Posts Display your most recent posts with a featured thumbnail.  [LISTINGS] Single Filter Displays a list of links for filtering your inventory listings. Only use on pages that display your inventory listings.  [LISTINGS] Testimonial Slider Display a slider of testimonials from your customers.  

Translating Theme & Plugin with WPML  Once you have finished installing WPML on your site you can start scanning the automotive theme and plugin for translatable strings to make your site multilingual.  Follow these steps to translate the theme: 

 1. To start scanning the theme go to “WPML” then select “Theme and plugins localization”.  2. Scrol  labelled “Scan the theme for strings” and click it.  3. Scroll up a bit and click the button labelled “View strings that need translation” with the domain 

“automotive”. 4. You can now go through the strings and translate them for each language you have chosen. 

 To translate the automotive plugin you follow a similar procedure as above:  1. Start by going to “WPML” then select “Theme and plugins localization”.  2. Scroll down to “Strings in the plugins” and check the box next to “Automotive Listings”.  3. Scroll down and click the button labelled “Scan the selected plugins for strings” 4. Once it’s done scroll back up and click “View strings that need translation”. 5. You can start going through the plugin strings and translating them into each language. 

  

Making the Listing Categories Multilingual with WPML  To make your listing categories multilingual you must first have WPML installed on your website. Once that is done you then need to navigate in the backend to Listings >> Listing Categories and in the top admin bar you can select the language you wish to translate your categories into.  

  Once you have selected the new language you can begin to add your listing categories in the new language!  Note: This is only available to users using the plugin version 6.4 +  

Translating Theme & Plugin with Poedit 

 To translate the theme using Poedit you must first have Poedit downloaded, here is a link for the download.   To start translating the theme follow these steps:  

1. Make sure to unzip the automotive.zip inside the “Theme & Plugin” folder. 2. Open up Poedit and select “Create new translation”. 3. In the file selector window browse the folder you unzipped in step 1 and select the “en.po” in the 

languages folder. 4. Choose which language you are translating to. 5. Highlight a source text and translate it in the “Translation” box. 

 6. Once you finish translating the theme save the .po file. 7. You will now see 2 new files in the languages folder, a .mo and a .po, upload those into the 

languages directory inside the automotive theme folder through your FTP client (wp­content/themes/automotive/languages/). 

  To translate the plugin the steps are almost the same as above:  

1. Make sure to unzip the automotive­listings­plugin.zip inside the “Theme & Plugin” folder. 2. Open up Poedit and select “Create new translation”. 3. In the file selector window browse the folder you unzipped in step 1 and select the “listings­en.po” in 

the languages folder. 4. Choose which language you are translating to. 

5. Highlight a source text and translate it in the “Translation” box. 6. Once you finish translating the plugin save the .po file. 7. You will now see 2 new files in the languages folder, a .mo and a .po, upload those into the 

languages directory inside the automotive plugin folder through your FTP client (wp­content/plugins/automotive/languages/). 

 Make sure to follow the correct naming convention when uploading your translated files, here is a great resource for find the correct file name. When uploading the plugin translation files be sure to add the prefix “listings­” it will not translate properly.   

Dedicated Support  We have a dedicated support center to serve all of your support needs. If you run into an issue or a problem with your theme or template that is not related to any customization of the product, please open a Support Ticket and we will be happy to assist you.  To take advantage of the free support we provide, please signup for an account at our Dedicated Support website.   

Terms & Conditions  ALLOWED: This theme includes a license and/or authorization to use any images that are included in the package and theme installation files that you download via your ThemeForest purchase.  NOT ALLOWED: This theme does not include a license that allows you to use any of the demo content images that get imported if you choose to install the demo content.  The demo content is just that ­ for demonstration purposes only. While downloading and installing the demo content does insert pictures into your WordPress installation, it is very important for you to understand that this is strictly to assist you in understanding how the theme works and to help you speed up the process of building your new website.  It is assumed that you will not be using any of these images in the live version of your website and that you will replace any demo content with your own images.   

Thank You  Thank you very much for the purchase!  We sincerely appreciate each and every one of our customers, and we wish you all the best with your new website!