Build a Car Dealer website with WordPress – Part One

Install WordPress

Run all updates – get the latest copy to start with.

Go to themes and search for cyberchimps. You can use just about any theme you want, but Cyber Chimps has some of the most stunning themes for Automotive so we’re going to use their Starter theme for this tutorial.

select-cyberchimps-starter-1024x343

CyberChimps make numerous free themes that work nicely with Car Demon and their professional versions are well worth the money. If you want to make an eye catching Car Dealership Website then CyberChimps is highly suggested.

pick cyberchimps

PRO TIP

Install the Wp-PageNavi PlugIn. We highly suggest you install this if you have multiple pages of inventory or intend to use the dynamic inventory load then you’ll need to have this installed. You should be fine using the default settings for it, but it does have a ton of options you might want to explore.

 

Now go to PlugIns and hit Add New. Search for Car Demon and install it.

search for and install car demon

Make sure you download Car Demon version 1.3.08 or higher. Always keep your site up to date.

 Car Demon Settings

Now that you have a theme installed and you have the latest version of Car Demon it’s time to tackle the settings.

The first thing we want to do is go to “Dashboard->Appearance->Car Display Options”.  We want to make sure “Content-replacement” is selected, this will make our display a little more compatible with a wider range of themes.

Now you’re ready for the main settings page.

Go to “Dashboard->Cars For Sale->Car Demon Settings”

Currency Options

Depending on where your site is you may need to adjust the currency settings so your prices show correctly.

VinQuery Options

If you’re entering your vehicles by hand you may want to consider purchasing a VinQuery account to decode your Vin numbers. They provide a wealth of information for each vehicle. Give your visitors the information they want on your vehicles and let them sell themselves.

Style Options, Tab Options, Editing the Vehicle Tabs, List Options, Form Options & Mobile Options

For the purpose of this tutorial we’re going to leave all of these items at their default settings. Take a moment to glance over the options and familiarize yourself with the options. Car Demon has a wide variety of setting to meet a lot of different needs. Due to the complexity we’ll have to go over each of these in their own posts.

Setting up Locations and Contact Information

Go to “Dashboard->Cars For Sale->Contact Settings” – If you have more than once location you’ll need to go to “Dashboard->Cars For Sale->Locations” and add each of your locations.

The Contact Settings page will contain settings for a default location and an area for each location you’ve setup.

Fill in as much information as possible. This information is used to populate contact forms, prices and other location specific information. It’s important to complete this area as much as possible, especially if you’re using any of the forms.

contact settings

Adding our Inventory

Go to “Dashboard->Cars For Sales->Add New”

Give your vehicle a title like “1984 S-10 Pickup Truck”

In the description area add your sales copy for the vehicle.

exp. “This 1984 S-10 Pickup is in top condition. The body has minor dents and dings but still looks good. New engine installed last year, only 18,000 miles. New tires and refreshed interior. This classic truck won’t last long.”

Now I’m going to go to the condition field and enter “preowned”.

condition

Under Body Style I’m going to enter pickup.

Now we’re ready to tackle the tabs. By default Car Demon only has one information tab available. After you’ve saved the vehicle more tabs will show up. You can adjust the tabs and fields that show up, including disabling them, from the Car Demon Settings area.

tabs

After you’ve filled out the Specs tab you’re ready to add a Featured Image. This is the main photo for the vehicle so make it good.

s-10-img1

After you’ve added your featured image you’re now ready to add your other photos into the vehicle gallery. Just click the “Manage Photos” button.

add_gallery

Upload the rest of your vehicle photos.

gallery

After you click the attach button it may take a moment to populate your photos. Please be patient and give it a few seconds, especially if you’re attaching a large number of photos.

attach

Once your photos are attached they should appear in your vehicle gallery.

attached_gallery

 

After the photos are added it’s time to publish our vehicle.

Once we’ve saved the vehicle we have several new tabs that have shown up and can be filled out to further describe the vehicle. If you aren’t going to use the tabs then you select to hide them, this will prevent empty tabs from showing on the vehicle page.

new_tabs

Once you’re satisfied you’ve added all the vehicle information for your first vehicle then it’s time to preview the inventory pages.

Viewing your inventory

First we want to make sure the links to our inventory are laid out properly. To do this we want to go to “Dashboard->Permalinks” and enter a custom link stucture of;

/%postname%/%post_id%

permalinks

After you’ve updated your permalinks you should be able to visit http://www.yoursite.dev/cars-for-sale and see a list of the vehicles in your inventory.

If you just added a test vehicle you can refresh the vehicle edit page and then click on preview to see the individual vehicle page.

I’m going to go to “Dashboard->Appearance->Menus” and add a link to my Inventory page.

inventory_menu

It helps if you make sure all your links are correct. In this case I meant to use bigcitymike.dev not the misspelled bicitymike.com

I wanted too share this with you because it’s all too easy to make a simple mistake that slows you down. Check and double check what you’re doing and keep a sharp eye out for anything that might stumble you up.

Visually enhancing your Inventory Displays

So you’ve done all the settings, typed in the first car and then finally go to the inventory to see the fruits of our labor and it doesn’t look right. In our case the main photo was showing up twice.

In order to fix this we had to go to “Dashboard->Appearance->Theme Options”. Inside the theme settings we had to go to “Blog->Blog Options->Featured Images” and turn it off. This took care of our double image problem.

inventory2

It looks like we need to do a little CSS touch up to get the prices laid out right. We’ll tackle CSS issues after we’ve added some widgets and laid out some general content for our site.

Now I’m going to head off to “Dashboard->Appearance->Widgets” and take advantage of some Car Demon Widgets.

widgets

We’re going to populate the right sidebar with the Compare Vehicles Widget, the Inventory Navigation Widget and the Search Cars Widget.

right sidebar

This will make it easier to navigate our inventory. They can reach it from the main menu and from there visitors can search for specific vehicles.

If I had a large Inventory, more than a couple dozen vehicles, then I’d provide some links to jump right to specific segments of my inventory.

Let’s say I have a lot of pickups, then I need to make sure each of them has their body style field filled out because we can create link like this;

http://www.bigcitymike.com/body_style/pickup

Other fields work the same way like; condition, make, model, vehicle_year, location. Each of them will provide a list of vehicles that have values that match. like this;

http://www.bigcitymike.dev/condition/preowned

http://www.bigcitymike.dev/vehicle_year/1984

http://www.bigcitymike.dev/make/chevrolet

http://www.bigcitymike.dev/model/s-10

Now all I need to do is layout all my pages, add my content, update my menu, tweak my widgets, load up the entire inventory and then I can see what the website owner wants me to do next.

There are lots of way to improve your installation and tweak your css, your settings, installing other plugins and everything else you go through in setting up a site.

Which is why this tutorial is wrapping up to a close.

You can see the next steps we took in Part Two of “Build a Car Dealer website with WordPress”