Documentation

Table of Contents

Note: This page assumes you’re running the very latest version (1.46).

Getting Started

If you have any problems or questions, please check out or make a new post on our Support Forum.

Installing Automotiv

You should be able to install the theme directly inside of WordPress. Go to the Themes menu on the left of wp-admin, select “Add New Themes”, and then click “upload”. Select the supplied OpenHouse theme zip file and you’re done.

Manually installing the theme (recommended)

If you have problems installing directly inside of WordPress (errors, freezing, etc.) you can install the theme manually. To install manually, you’ll need an FTP program. The Firefox (web browser) plugin FireFTP works perfectly. Unzip the supplied OpenHouse theme (it should be zipped). On the server, navigate to your /themes folder. Create a subfolder called “OpenHouse” (or something else if you wish), and then upload all the theme files to that folder. (Be sure you upload the unzipped theme, not the actual theme “Zip” file.

Once uploaded, you can go to the Appearance -> Themes section of WordPress and then activate the new theme.

Ok, it should be installed. Now on to the steps to get your new site functional!

PATCH (Version 1.47.3)

Be sure to download this patch as it includes some bug fixes and new features. Please download this file, unzip it: http://dl.dropbox.com/u/418387/themeforest/Automotiv/update_1.47.3.zip. Once unzipped, put the folders and files on your site, overwriting the existing folders and files. You will need to do this with some sort of FTP program. I like and use the free Firefox plugin called FireFTP.

Quick Setup (Recommended)

Follow these steps to get set up as quickly as possible, especially if you are running WP 3.1 or higher. 3.1 or higher is highly recommended because the imported XML file will contain a lot more information. This will automatically create required categories, pages, menu items, and more. It won’t get you 100% to the level where the demo site is at, but it will get you most of the way there.

Step 1:

Download the demo site’s XML data file: http://dl.dropbox.com/u/418387/themeforest/Automotiv/automotive_xml.zip

Unzip it, and then in wp-admin, go to Tools -> Import -> WordPress. Import the XML file, and be sure to include everything, including attachments. After that’s done, you will have a bunch of posts, categories, sample home listings, and more.

Note: You will eventually want to delete many of my sample “pages”, for example the documentation pages. When you do so, be sure to NOT DELETE the “Search Results”, “Contact Us”, and “Sales Reps” pages.  If you accidentally delete the Search Results page, no problem. Just follow the instructions below in the Manual Setup section. If you delete Contact Us and Our Agents, then follow the instructions in the proper sections of the documentation.

Step 2: Activate Menu bar

Go to Appearance -> Menus. If you’re running WP 3.1 or higher, there will already be a sample header and footer menu created. Feel free to delete, re-arrange, or add new menu items.

To make sure the menus show up on the site, go to the top left of the screen is a section called “Theme Locations”. Be sure to select the header and footer menus accordingly. It should be self explanatory when you see it.

Step 3:

In Appearance -> Theme Options ->General, set the “Search Results Page” to be set to “Search Results” (if it’s not already set to it). Even if it is set already, go ahead and click “Save” anyway since it will set lots of theme defaults.

Step 4: Permissions for timthumb script

This theme relies on the Timthumb.php script for taking your original large image, and repurposing it in other sizes throughout the site (like in the slideshow, thumbnails, etc.) That way you don’t need to upload more than one Portfolio or Blog image.

The /scripts folder, and scripts/cache folder must be set to a permission setting of 0777. That allows it to read and write. If it is not 0777, then the images on the site will not show up. You will need to access your site folders to change the folder permissions.

I recommend the free FireFTP plugin for Firefox. Simply log in to your server. Right-click on the folders, choose Properties, and change the number to 0777.

If this does not work, some users keep the /scripts folder at 0755 and only make the /scripts/cache to be 0777. Try that instead.

If you’re having problems with images not showing up, then check out this forum thread.

Step 5: Permalinks

Go to Settings -> Permalinks and make sure any one other than the first choice is selected.

You’re Done!

Well, not quite. 🙂 At this point all the “required” things are done. But there will be other things that need to be done, like adding the logo (do that in Appearance -> Theme Options -> General), adding the footer widget area, etc. The rest of the documentation shows how to do all that.

Manual Setup

Follow these steps if you want full control over the setup process and you want to fully understand the workings of the theme. Or if things don’t go well with the recommended way above, then follow these steps.

Step 1: Create your Blog or News categories

Assuming you want to post articles to your site, you will need to create “Categories” for them. You can create a category called “News” (to hold news related posts), “Blog” (for general blog type posts), or any other category name. The live demo has 2 categories called “News” and “Blog”. Feel free to have only one or the other; both are not required. You can also create sub-categories under the main categories if your posts benefit from them.

Note: DO NOT create a category for your vehicle listings. The listings don’t use categories at all.

Step 2: Search Results Page

Create a new “Page”, using the Page Template called “Search Results”. Enter a “Title” for the post… for example “Search Results”. You can leave the content blank. Publish it.

In Appearance -> Theme Options -> General section, set the “Search Results Page” to the Page that you just created.

Step 3: Create the Menus

Before doing this, please watch this nice video tutorial (will open in a new window) that explains this feature. I didn’t make that video.

My screencast for creating the header and footer menus

This theme has a main menu in the header and a smaller menu in the footer. The menus are generated using WordPress’ new “Menus” feature. In the wp-admin, under the Appearance tab, click on “Menus” to access the Menus page.

Click the “+” tab to add a menu called “Main”. This will be the main menu in the header. Click the “Save Menu” button. Click the “+” tab again to create another menu called “Footer”. Click the “Save Menu” button again.

In the Theme Locations section, set the Main Navigation Menu to be “Main”, and the Footer Navigation Menu to be “Footer”. Click the “Save” button.

Click on the “Main” tab to activate the Main menu. In the Pages and Categories sections, check all the boxes for the pages and categories that you want to add to this Main menu. You can click/drag the results to be in the exact order that you want.

Click on the “Footer” tab, and do the same thing that you did in the previous step.

Note: Whenever you add a Page or a Category, then you will need to come into this “Menus” page and add it to your Header and Footer menus. Sorry, this is not my fault… it’s a quirk from WP 3.0.

Also note: In Step 2 you added a “Search Results” page. You will not want that page in your menus. To exclude it from the menus, simply don’t add it to the menus!

Step 4

This theme relies on the Timthumb.php script for taking your original large image, and repurposing it in other sizes throughout the site (like in the slideshow, thumbnails, etc.) That way you don’t need to upload more than one Portfolio or Blog image.

The /scripts folder, and scripts/cache folder must be set to a permission setting of 0777. That allows it to read and write. If it is not 0777, then the images on the site will not show up. You will need to access your site folders to change the folder permissions.

I recommend the free FireFTP plugin for Firefox. Simply log in to your server. Right-click on the folders, choose Properties, and change the number to 0777.

If this does not work, some users keep the /scripts folder at 0755 and only make the /scripts/cache to be 0777. Try that instead.

Step 5: Permalinks

Go to Settings -> Permalinks and make sure any one other than the first choice is selected.

Done!

Enjoy your new theme! You are now ready to post a vehicle Listing, or blog/news post. Read on for instructions on adding a news/blog post and Vehicle Listing post.

Step 6

It’s not critical at this point, but you will notice that your site does not have a logo. Go to Appearance -> Theme Options -> General, under Logo URL, give the full URL to your image. Also set the width and height of the image. If the logo isn’t positioned exactly right, you can enter values in “Logo position X” and “Logo position Y” to fine tune it’s position.

Every other setting in Theme Options isn’t critical at this point. The theme should be working… you now just need to add some content!

Theme Options


The Theme Options page in the wp-admin dashboard is your Control Central for everything in the theme. It is critical that you become comfortable with it and are aware of it’s many settings. All of the settings include a description of what they do. If anything is unclear or confusing, please don’t hesitate to contact me. The Theme Options is found in Appearance -> Theme Options.

The Theme Options are divided into 6 sections:

General

Includes settings for color scheme, Logo settings, and some critical settings that must be set or the theme won’t work.

Slideshow

Includes all the settings for controlling the behavior of the Slideshow on the homepage. You can control the transition effect, number of items to show, the order of items, exactly which items show, and more.

Browse By

All settings for activating and customizing the ‘Browse By’ menu.

Social Networking

Includes all the settings you need for setting up your Twitter, Facebook, and other social networking sites.

Hide or Show Stuff

Settings to hide or show elements/features of this theme. For example, if you don’t use Twitter, you can “hide” it from the homepage and the sidebar.

Language

Controls all the headings and labels used throughout the site. Handy if you don’t like my wording, or if your site is in a language other than English.

Miscellaneous

Settings that didn’t find a home in any section above. Like Jpg quality, Google Maps API Key and lots more.

Creating your first post

Creating a Vehicle Listing Post

Creating a news/blog post

Sales Rep Page/Adding Sales Reps

To add Sales Reps to the site, go to Sales Rep -> Add New Sales Rep. All the options are self explanatory. Add the Sales Rep in the same way as you add any other post or listing.

To add the Sales Rep “Page”, first create a “Page”. Type in a title and optional content. Set the Page Template to “Sales Rep”. Publish the page. To add the page to your menu, go to Appearance -> Menus, and add it to the menu just like any other page.

The Automotiv theme features an advanced search box where you can perform a specific search for a vehicle based on manufacturer, engine size, transmission, minimum, maximum price, and body type.

The Manufacturers, minimum price, maximum price, and Body Type need to be configured. This page details how to do that.

Manufacturer

Customizing the Max Price, Min Price, Model Year, and Mileage

Editing the Body Types

Customizing the Search Parameters

Setting up the Footer (widgetized areas)

The footer is entirely made up of 4 Widgetized areas. When you go to Appearance -> Widgets, you’ll see Footer1, Footer2, Footer3, and Footer4. Here is how we set up the demo footer:

Footer1

We dragged in the “Recent Posts” widget into this Widget area.

Footer2

This is a standard Text Widget. Drag a Text Widget in there and give it a title, for example “Business Hours”.
For the content of the text, copy this and paste it in:

<ul id="businesshours">
<li><strong>Monday</strong><span>10am to 9pm</span></li>
<li><strong>Tuesday</strong><span>10am to 9pm</span></li>
<li><strong>Wednesday</strong><span>10am to 9pm</span></li>
<li><strong>Thursday</strong><span>10am to 9pm</span></li>
<li><strong>Friday</strong><span>10am to 9pm</span></li>
<li><strong>Saturday</strong><span>10am to 5pm</span></li>
<li><strong>Sunday</strong><span>Closed</span></li>
</ul>

Footer3

The Google Maps is actually a Text Widget. You’ll need to go to http://maps.google.com and find your business location. Then click on the button called “Link” in the top right of the screen. Then click the “Customize and Preview embedded map” link.

In the window that pops up enter a custom size of Width: 200 and Height: 180. Then copy the code at the bottom to the clipboard, and then paste it into your text widget. In the code, i also removed all text inside and including the <small> tag.

Footer4

The fourth and last footer widgetized area uses the “Contact Us” widget. Drag it into the Footer4 widget area, and fill in the textboxes with your contact information.

Setting up the Contact Us Page

The contact form is made possible by the fantastic Contact Form 7 plugin. Once installed and activated, go to its Control Panel (bottom left of the wp-admin dashboard). You can configure the form however you like, or just keep the defaults.

When it’s all set up, copy the shortcode at the top of that page.

Create a new “Page”, and set the Template to “Contact”. Enter a page title, and some optional body text. In the body of the post, PASTE the shortcode that you copied. Publish the page, and you’re done!

This Contact Us page will not show in the main menu by default. You have to add it to the menu using the Appearance -> Menus feature of wp-admin.

Setting up “Browse By” in the menu

Please note that this feature was added by popular demand and really isn’t required. That’s because you can find any automobile on the lot by doing a standard search. But having a “browse” feature is nice if the user doesn’t really know what he/she is looking for and just wants to browse.

IMPORTANT: This feature requires you to have version 1.3 of the theme installed. You can check the theme version by going to Appearance -> Themes.

Note: If you are “upgrading” to the latest version, after you upgrade, be sure to go to Theme Options, and click on any of the Save buttons.

Screencast of setting up “Browse By” in the menu

To better understand what the Browse menu is, please check out the demo site’s main menu. There is a “Browse” item. When you hover over it the dropdown shows that you can browse listings according to ‘Body Type, ‘Price Range’, ‘Transmission’, ‘Manufacturer’, and ‘Engine Size’. This is an alternate way to find a vehicle listing if you don’t want to perform an actual Search.

First, make sure the “Browse By” menu item is enabled in Theme Options. Go to Appearance -> Theme Options -> Browse By, and make sure the first setting there is set to “Yes”. Be sure to check out the other options there for setting up the text and also ability to exclude some Browse By categories.

For “Browse By” to work, you need to check off the Body Type, Manufacturer, etc. in each Listing post. In the right column of each Automobile Listing post are sections for ‘Manufacturer’, ‘Engine Size’, ‘Transmission’, ‘Price Range’, and ‘Body Type’. I said in a previous page that these sections are optional, and only required if you want to be able to browse by these categories (WP calls them Taxonomies).

On a fresh theme install, these taxonomy groups will be blank, unless you install the XML file as explained in the Getting Started section. You will need to populate them with values. You can add them right in the Listing Post right sidebar, or in the left sidebar (Under Vehicle Listings you’ll see Manufacturer, Engine Size, Transmission, Price Range, and Body Type). Once all your taxonomy items are added, you simply check off the appropriate one for each Vehicle Listing post. For example, if a Ford with Manual transmission, with an engine size of 2.2L, that costs $11,000, and is an SUV, you could check off the following:

  • Manufacturer: Ford
  • Price Range: $10,000 – $15,000
  • Engine Size: 2.1K – 3.0L
  • Transmission: Manual
  • Body Type: SUV

Note: Setting these DO NOT affect the search engine at all. The search engine looks at the other Vehicle Listing post data. Checking off these items is ONLY if you want to browse by them in the menu.

‘All Vehicles’ Link in the menu

Note: version 2.3 or higher of the theme is required. To enable an “All Vehicles” link in the “Browse By” menu item (see demo for an example), go to Appearance -> Theme Options -> Browse By, and make sure “Include ‘All Listings'” is set to “Yes”. Right under it you can also set the text to use for “All Listings”.

If you want an “All Listings” menu item that is NOT inside the “Browse By” menu, then you need to add the menu item manually. First, find and copy the URL to your Search Results “Page”. Then to to Appearance -> Menus. Add a Custom menu. For the address, paste in the URL of the Search Results “Page”. Then type in the menu item name under it. Add it to the menu and drag it to the position that you want.

Customizing Text

You can customize the text of various parts of the site, like for the search box labels, heading text, error messages, the intro text, and more. To do this, go to Appearance -> Theme Options -> Custom Text.

For the wording for the features list (in the Listing Detail page, next to the large slideshow image), you need to hand edit /includes/features.php. A future update will allow editing this text from Theme Options, but for now you must edit this file.

If you need to change the wording for things that are shown in the WP backend, like when you make a Listing post, etc., you need to hand edit the functions.php file. Just do a search for the word you need to change and you’ll find where to change it. Just be careful to not break the code.

Setting up the Slideshow

The Appearance -> Theme Options screen has all your settings for controlling the homepage Slideshow.

The Slideshow can display one of 2 things: Recent Listings, or Just Photos.

Recent Listings: This is the default. It pulls in recent listings (photo and text)
Just Photos: Pulls in just photos (no text) that you post via the “Slideshow Photos” Post Type. To add a slideshow photo, go to Slideshow Photos -> Add new Slideshow Photo. Each post will have it’s own photo.

Other settings in the Theme Options are the Slideshow quantity, transition, order, etc. All self explanatory.

Changing the Color Skin

You can change the color skin to be virtually anything!! All the background colors, gradients and highlights will adjust to fit your chosen color. You don’t need to change the color in a PSD file, slice it up, etc.

To change the color skin, go to Appearance -> Theme Options -> General -> Color Scheme. Simply choose a color from the color picker.

The headings on the whole theme will also change to your skin color. If your chosen skin color is very light, then some heading text will be difficult to read against a light background. In this event, the next Theme Options setting “Alternate Text Color Scheme” is there to help out. Choose a darker color so that text will show up better against the light background.

Customizing/Modifying the theme

Many people take this theme and modify the PHP template files, CSS, functions.php, etc. to meet their exact needs. If you do this, and then later update/upgrade to a newer version of the theme, then you will lose your changes.

Because of this, if you do intend to modify the template in any way, I recommend you create a “child theme”. With your child theme, you can change any PHP file, CSS file, etc, and if you later update the site, your changes won’t be affected.

Creating a child theme actually is very simple. Please go here to learn how to do this.

Modifying the CSS

The main CSS style is style.css, which is located in the root folder. You can modify it, however, if you ever upgrade to a newer version of the theme, all your changes to style.css will be replaced with the new version.

So instead of modifying the style.css file directly, you can modify it in a safer way 2 ways:

Child theme

Make the CSS changes in a child theme. See the section above for details.

CSS setting in Theme Options

You can modify the CSS that affects globally all the pages in the site in the Theme Options. In the Appearance -> Theme Options -> General section, there is a setting for CSS. You can put in your custom style in there. If you want to override something in style.css, then simply enter the same exact selector as used in style.css, and then add or modify any of the properties.

Custom Shortcodes

This theme has a bunch of custom Shortcode tags that makes adding multiple text columns, toggle boxes, text button, etc. a breeze. This page explains all the included Shortcode tags with examples.

Note: adding Shortcodes requires you to be in HTML mode. Also, if your text appears too small, that is because your next is not wrapped in HTML paragraph tags. You will need to be in HTML mode and manually put in paragraph tags. (the WordPress editor often adds its own paragraph tags, or doesn’t, and one has little control over this. So if your text is too small, go into HTML mode and wrap your text in paragraph tags.)

Multiple Text Columns

Adding multiple columns of text is a snap with the “columns” shortcodes. As an example, to add 4 equal width text columns that span the width of the site, add this to your page (in HTML mode):

[one_quarter]<p>first column text</p>[/one_quarter]
[one_quarter]<p>2nd column text</p>[/one_quarter]
[one_quarter]<p>3rd column text</p>[/one_quarter]
[one_quarter_last]<p>4th columnn text</p>[/one_quarter_last]

The Multiple Columns sample page has visual samples plus sample code. A couple important things to note here is that you need to surround your text with HTML paragraph tags. And I don’t know why, but you actually do need that extra line break between columns.

Toggle boxes

Click me to see a toggle box in action


[/toggle]

Link Button

You can make a link into a button that matches your color scheme.

The shortcode tag for this is:

[button URL="http://www.sample.com"]Button Text[/button]

The result would look like this:

Button Text

Drop Cap

You can make the first letter of any paragraph a dropcap with the following code:

[dropcap]O[/dropcap]nce upon a time in a land far far away...

The result would look like this:

O

nce upon a time, in a land far far away… Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Highlight

You can highlight text by changing the background and foreground color of text. You can define up to 2 highlight colors in Appearance ->Theme Options -> Miscellaneous. The colors are designated by the Shortcodes “highlight1” and “highlight2”.

This is some [highlight1]text to highlight[/highlight1] This is some [highlight2]more text to highlight[/highlight2]

The result would look like this:

This is some text to highlight This is some more text to highlight

Pull Quote

You can make any text become a pull quote which makes it a box, aligned to the left or right, with surrounding text flowing around it.

The shortcode tag for this is:

[pullquote_left]Sample text[/pullquote_left]
[pullquote_right]Sample text[/pullquote_right]

Horizontal Divider Line

This code adds a subtle divider line on the page:

[line]

Which results in a line like this:

Back to Top Link

This one is simple also. It adds a “go to top” link which animates smoothly to the top of the page.

[top]

Which results in a line like this:

Clear

This is one of the most helpful Shortcodes, and is not even visible. Sometimes your content wraps around a floated object (like an image), but you just want the content to start after the image because it’s a new paragraph not related to the image. Simply add this shortcode before your new content:

[clear]

We are taking suggestions

Have an idea for a shortcode tag that would have mass appeal? Just contact me and maybe it’ll be included in an update.

Page Templates

This theme includes a number of Page Templates. When you create a “page”, you can choose from one of these templates.
“Contact Us” Page template


“Right Sidebar” Page template
“Left and Right Sidebar” Page template