eCar

GENERAL

EXTENSIONS

THEMES

Thank you for using eCar theme for your website. We hope you like it! In this documentation, we will show you how to install and setup the basic demo for your website. This takes you only 5 minutes to have the website ready!

Installation

eCar is the child theme of eStar, so you might need to install both of the two themes.
Installing these themes is straight-forward and is the same as all normal WordPress themes. We have written a very detailed guide on how to download and install a WordPress theme, please follow the instruction in that article.

Recommended Plugins

After installing the theme, you'll see a notification box in your admin asking to install some plugins. These plugins are optional and are recommended by the theme to add more features.

eCar recommends the following plugins:

Auto Listings: a custom plugin written by us to help you list, manage & sell cars easily.
eRocket: a custom plugin written by us to add custom widgets and social sharing buttons for posts.
Meta Box: a custom plugin written by us to add options for pages and posts such as layout or header.
One Click Import Demo: a plugin helps you import the demo content of the theme.

Auto Listings is obviously necessary for your listings functionality.
Regarding the other plugins, you can ignore these plugins if you want, but we highly recommend them to make the customization easier. These plugins are well-coded, work perfectly with the theme, and don't slow down your website.

Demo Content

In case you want to quickly start with the theme, you can import the demo content.

First, please install and activate One Click Import Demo. Then go to Appearance → Import Demo Data to start importing the content.

Auto Listings

This theme is fully integrated with the Auto Listings plugin and all of its extensions. Please refer to Auto Listings Docs for more details

Setup

Header

Custom Logo:

You can add a custom logo by going to Customize → Header and uploading your own logo image. There is an option for you to hide the site title and tagline if you want.

Navigation:

The main navigation appears at the top right of every page of your website. On tablet and mobile devices, it will be hidden behind a toggle button. To set it up, simply create a new menu via Customize → Menus and assign it to the Header location.

Search Button:

In Customizer → Header, there's an option to show the search button in the header. You can use this option to toggle the search button if needed.

Cart Icon:

The cart icon is automatically added to the header if you install WooCommerce on the website. It's a must-have element so there is no options to hide it.

Sticky Header:

By default, the header is sticky, which means it stays on the top of the screen when you scroll down. If you don't want that, you can disable it in Customize → Header.

Homepage

Creating a Static Homepage

When you first activate eCar, your homepage will display posts in a traditional blog format. To set up your homepage, follow these steps:

Create a page. Make sure to set the page template to Wide.
Go to Customize → Homepage Settings and set Your homepage displays to A static page.
Select the page you created in step one as the Homepage, and, if you plan to have a blog as well, choose another page as the Posts page to display your blog posts.

Hero Section:
There is always a default background image for this section. It can be replaced with the post thumbnail of your front page. Edit your front page and set the featured image for it to change the background image.

In this section, there is a search form. This search form is created by a shortcode.

To create or edit a search form, go to Dashboard -> Listings -> Search Form. If you import the demo content, there are already 2 available search forms for you.

Makes Section:

This section collects the makes from all of your listings, then list them in the Customizer -> Makes. Then you can select the image for these makes.

Car Reviews Section:
This is just a normal blog section that displays posts from a category. You can choose the category in the Customizer -> Homepage Settings -> Post Category

Latest Article:
As its name suggests, this section shows 3 latest posts from all categories.

Call To Action:
You can find the settings for this section in Customizer -> Homepage Settings

Footer

Footer Widgets

The theme has a widget area in the footer. Go to Customize → Widgets and add your widgets to the Footer sidebar.

In the demo, we use the following widgets:

Contact info: from eRocket plugin
Custom menu
Recent posts: from eRocket plugin
Contact info: from eRocket plugin

Footer Copyright Text

To change the footer copyright text, please go to Customize → Footer and enter your custom text.

Go To Top Button

eCar has a Go to top button. If you don't want it, you can disable it in Customize → Footer.

Layout

eCar comes with several options for you to customize the layout for archive pages, single posts, and single pages.

Posts and Pages

Please go to Customize → Post (or Page) and you'll see the following options:

Layout: the sidebar position. You can display the sidebar on the left, right, or don't show it at all.
Thumbnail Position: how and where to show post thumbnail. These are the options:
- As Post Header Background: display post thumbnail full-width as a background and show post title, post details on the top of it.
- Before Post Header: display post thumbnail before the post header (like the demo).
- After Post Header: display post thumbnail after the post header
- Do Not Display: don't show post thumbnail on single posts
Header Alignment: the alignment for the post title and post details text
Header Height: if you want to customize the height of the post header when the post thumbnail is displayed as a background, you can enter a number (px) here.

Fonts

eCar allows you to customize fonts for almost necessary elements such as body text, headings, and site title. You can customize font family (the theme supports all Google Fonts), font size, line height, and so on.

Please go to Customize → Fonts to select the options for each option.

Colors

eCar allows you to customize colors in the theme. To make the changes are consistent everywhere, we offer options for some colors only. They'll be outputted on the front end using CSS variables and the changes will be applied site-wide.

Page Builders

eCar works pretty well with the most popular page builders: Elementor and Beaver Builder (both free and pro versions).

Using these page builders, you're able to customize the layout for pages, including header and footer. eCar makes it easy for you to do that without any extra actions from your side.

Page Templates

The theme provides 4 page templates for pages and posts:

Blank Canvas: which outputs only page/post content. It doesn't output the header and footer. This page template is useful if you want to build a special page for your website.
Full Width: which outputs header, footer, and the post content. The post content will have 100% width of the screen. This page template is useful if you want to build a landing page from scratch with Gutenberg or page builders.
Wide Content: similar to the full-width template. The only difference is that the content area will have 100% width of the container, instead of the screen. This page template is useful if you want to create a landing page with Gutenberg or page builders.
Narrow Content: similar to the wide content template, but the width of the content area is narrow as normal pages.

All page templates don't output page title and are useful for creating landing pages or special pages for your website.

Page/Post Settings

If you install the recommended Meta Box plugin, you'll see extra settings for every single post or page:

eCar - single post, page settings — Single post, page settings

The settings here will override the settings that you set for posts or pages in the Customizer → Post or Customizer → Page.

Layout: the sidebar position. You can display the sidebar on the left, right, or don't show it at all.
Content Width: you can set the content to has 100% screen width (full width), or 100% container width (wide) or as normal (narrow).
Sticky Header: whether to make the header sticky.
Thumbnail Position: how and where to show post thumbnail. These are the options:
- As Post Header Background: display post thumbnail full-width as a background and show post title, post details on the top of it.
- Before Post Header: display post thumbnail before the post header (like the demo).
- After Post Header: display post thumbnail after the post header
- Do Not Display: don't show post thumbnail on single posts
Header Alignment: the alignment for the post title and post details text
Header Height: if you want to customize the height of the post header when the post thumbnail is displayed as a background, you can enter a number (px) here.
Transparent Header: whether to make the header transparent. It's useful if you want to make the header as an overlay of the hero banner.

Theme Hooks

For developers, who want to customize the theme, we build a lot of hooks in eCar that you can use to output custom content.

Action	Description
General
`estar_header_before`	Fires before the header
`estar_header_after`	Fires after the header
`estar_footer_before`	Fires before the footer
`estar_footer_after`	Fires after the footer
`estar_sidebar_top`	Fires at the top of the sidebar
`estar_sidebar_bottom`	Fires at the bottom of the sidebar
Archive Pages
`estar_entry_before`	Fires before each post on the archive page
`estar_entry_after`	Fires after each post on the archive page
Singular Pages
`estar_entry_before`	Fires before the post
`estar_entry_header_before`	Fires before the post header
`estar_entry_header_after`	Fires after the post header
`estar_entry_content_before`	Fires before the post content
`estar_entry_content_after`	Fires after the post content
`estar_entry_footer_before`	Fires before the post footer
`estar_entry_footer_after`	Fires after the post footer
`estar_entry_after`	Fires after the post
`estar_comments_before`	Fires before the comments area
`estar_comments_after`	Fires after the comments area

This is a sample code that you can use to output ads before post content of all posts:

add_action( 'estar_entry_content_before', function() {
    echo 'YOUR ADS CODE HERE';
} );

You need to add custom code into a functionality plugin or use the Code Snippets plugin to add custom code into your site, or use a child theme and add the code into the functions.php file.

Plugin Compatibility

eCar works well with popular plugins for WordPress. Here is the list of plugins that we officially support in the theme:

WooCommerce
Meta Box
Slim SEO
The Events Calendar
Elementor
Beaver Builder
Oxygen Builder
Jetpack

Although other plugins are not listed, they should work well with the theme. If you notice any incompatibility problem, please let us know.