Building an Automotive Website with Motors for WordPress

I’m always surprised by the flexibility of WordPress and how developers and designers consistently take it to new levels, especially considering where I started off blogging on the platform seven years ago.

Today I’m looking at building a range of different motor vehicle websites with a clever theme that does exactly that, within the niche of the automotive industry.

Where to start with such a comprehensive theme? I guess it’s best to start with the three powerhouse demos, each with a particular purpose providing a unique value proposition.

Designers & developers ‘StyleMix Themes‘ told me, “we worked hard on finding a vertical, a niche market, and really targeting it. Not just skinning a theme and calling it so and so, but conducting the research and finding out what those clients need most.”

Good strategy! I work to niches myself as a freelancer, and find it’s a recipe for success in a given field. Be passionate, work to your niche, be consistent, and the work pays off. But I digress…

So it is with Motors for WordPress – a slick design for creating today’s automotive website, specifically sliced up into three verticals:

  • Car Dealership.
  • Directory & Listings.
  • Car Repair Service.

StyleMix Themes advised me that these were the top three categories in the automotive industry where clients needed professional web services the most.

Let’s take a look at each category in detail so you can see the differences between the templates.

Car Dealership

The Car Dealership Demo targets new car dealerships. The demo itself is stunning with a fast load time with parallax overlays that animate smoothly as you scroll down.

Full page sliders show your chosen highlights, and in the demo you can see how this is defined to showcase a range of particular brands by segment; small car, SUV, 4WD, Family Sedan or Family Wagon for example.

The headers collapse and dynamically adjust with your horizontal scroll which I think is a nice touch from a user’s perspective as you always know where you are in the scheme of things – if you dive too deep it is very simple to get back to the homepage, inventory or services pages easily.

The Car Dealership demo has all the necessary data fields covered including Location Tags, Sales numbers, eCommerce integration and Social Media sharing as well as Fuel Performance ratings and Transmission type.

Once you click on a car of your choice, you are taken to a beautifully designed full-width page with a complete set of options; SKU, Schedule Test Drive, Add to Compare (I love this, putting different models side by side so you can immediately see the features that set them apart) Car Brochure and Social Sharing buttons.

Scrolling further you go past neatly boxed graphics and then tabbed detail you’d expect from a Prestige car dealer: Overview, Technical, Features & Options, Local & Contact. Filters for Price, Year and Transmission are all customizable to suit your needs but have clearly been thought out.

With widgets to show the car’s MPG (miles per gallon) in City and Highway setting as well as a clever Finance Calculator for users to get a quick view of finance options available at your dealership.

In the backend across the demos Motors is fully compatible with the excellent automanager software so you can quickly and easily complete XML/CSV imports of your existing database with minimum fuss.

This is a huge benefit for companies with large inventories, keeping data input to a minimum. This function is also available across all demos.

There is also the bonus of coming with the powerful Drag & Drop Page Builder, Visual Composer, so creating custom pages for your store is very straightforward.

Everything is perfectly responsive while playing with each demo on a 13″ MacBook, an iPad mini and a Galaxy Note 5 I found all displays to scale perfectly.

Directory & Listings

The Classifieds Demo is a clean, modern design for building an automotive resellers website, think big secondhand dealers with masses of cars from every brand you can think of.

So while the first demo we discussed focussed on a new car dealership, the second one looks at building a second hand car yard. This site is setup in detail for Dealers and Sellers to get their information up and listed for sale, with loads of detail on the particular vehicle being sold.

It has dedicated sign-ons for dealers and users, making it perfectly suited for someone wanting to have a yard of their own while also being able to offer the public a place to list their car for sale.

You can browse by ‘Make’ or ‘Type’ and you can also setup advanced filters with multiples choices for Search including ‘Condition’, ‘Make’, ‘Model’, ‘Year’, ‘Transmission’ and more.

Widgets are used to create further filter parameters by ‘Body’ type in the right-hand navigation, and it is features like this that continue to blow my mind from a ‘what-WordPress-can-do’ perspective today, it’s almost unrecognizable to the untrained eye.

From a user experience perspective this is elegant and a quick way to get to the cars you may be interested in, a convertible for instance. Check that filter box and be shown instantly what convertibles are listed for sale. Huzzah!

Each demo includes a blog layout as you would expect, and one of my personal favorites is the Compare feature, accessed via a cool dashboard/tacho in the menu. As you browse through the inventory you just click the Tacho image in the top right corner of the featured vehicle, and it is added to the Compare Menu. Click on the Tacho up in the main menu, and you are taken to a breakdown of each primary and additional features.

It’s all the little extras – the Compare button, the slick headers, Slider Revolution & Visual Composer included with your purchase and a list as long as your arm of additional features that really make this a stand-out theme for me.

The Live Preview has both ‘Seller’ and ‘Dealer’ demo logins so you can easily see exactly how the interface is built for the end user.

This NOT to be mistaken with the back-end of WordPress! This is a back-end access point for Dealers and Sellers. This shows you exactly what a Dealer who signs up on your new Car Directory has access too, and similar for the Seller.

This is a knock-out, feature packed demo with so much functionality, all thoroughly thought-out for the automotive industry.

Car Repair Service

The Car Repair or Service demo is also pretty unique.

Last but certainly not least, is the Car Repair Demo. With beautiful full-width sliders on open, and slick Font Awesome icons highlighting different categories at first glance, this is almost like what we have come to expect from a designers portfolio site with one minor difference – it’s a mechanics workshop! A one-stop shop for the mechanic wanting a straightforward website for their workshop.

With a simple scroll, the whole slider disappears fluidly up the page to reveal your main Service/Repair offerings. These are pre-built into two tabbed sections with the headings ‘Preventative Maintenance’ and ‘General Services’ as working examples of how to set up your garage, keeping it as simple to navigate through as possible.

Even more obvious and worth mentioning right now is the Booking System that is built into this theme. No extra plugins required, this is a really cleverly thought out layout with a parallax background. You select the Type of booking, the Time and Details, then a calendar of time-slots opens up for your clients to pick the time that suits them the most which then sends to an email form to confirm – all on page, without scrolling or jumping to another form, it’s really quite elegant.

Complete the form fields and an email is generated to the customer, meaning this is not just a web booking but a backend of your clients as well – perfect for email marketing, just add MailChimp details.

There is a section for a multimedia gallery and client testimonials alongside a straightforward Feedback/Contact Form before you get to the Footer with eight cleverly divided up sections.

The design is modern and clean with plenty of room for all of your shop services cleverly packed into a one-page template that will put your best foot forward with minimum fuss.

Conclusion

Overall Motors for WordPress is a feature loaded theme, clearly designed after substantial research on the industry needs and requirements of a modern vehicle website.

A little birdie also told me that they are not far away from releasing a new demo too. All updates are free and if purchased on ThemeForest can be easily downloaded via the Downloads section.

Comments

  • asans

    Great article. But when it comes to using wp rest api for the theme, their page builder plugin “visual composer” just throw out some strange shortcodes with the content in the json output. Can you tell a workaround for that?

  • Oleg Kim

    That’s how Visual Composer stores the content. If you disable Visual Composer you’ll see that all it leaves behind is a series of shortcodes in every post you’ve used it on. The WP REST API doesn’t execute shortcodes before returning the stored content. You may want to look at page builders that write pure HTML instead of relying on shortcodes if you don’t want to have to transform the content after retrieving it, or you could create a custom endpoint for the WP REST API that runs the shortcode before returning the HTML.

    It looks like they have an endpoint similar to what I’m recommending in the WP.com API, but nothing similar is in WP REST API yet, AFAIK: https://developer.wordpress.com/docs/api/1.1/get/sites/%24site/shortcodes/render/

    There’s a great rundown of page builder plugins here, if you want to go that route: http://chrislema.com/wordpress-page-builders/