Table of Content

 

Theme Features

  • Car Rental System
    • Unlimited vehicle fleet
    • Booking in easy 3 steps
    • Quick registration for customers
    • Email notifications
    • Bookings managment
    • Localization: currencies, locations, countries, etc.
  • Design Customization
    • 6 color schemes plus your own created ones
    • Your own logo
    • Your own background image or pure color
    • Homepage slider
    • Sidebar position: right/left
    • PSD included
  • Page Templates
    • Quote page
    • Booking page
    • Blog
    • Contact
  • Useful Shortcodes
    • Columns
    • Gallery
    • Video
    • Typography
    • Lists
    • Tables
    • Google Maps
    • FAQ
    • Testimonials
    • Sitemap
  • 6 Sidebar Widgets
    • Latest blog posts
    • Advertisment
    • Custom menu
    • Subpages menu
    • Custom text
    • FAQ
  • Rich Documentation
 

Theme Installation

Just 3 simple steps, and your Car Rental Theme is installed:

  1. Unzip archive with Car Rental Theme.
  2. Upload theme folder "car-rental" to your wordpress hosting "wp-contents/themes" via ftp connection.
  3. Activate your theme from "Appearance ->Themes" wordpress admin panel.

Theme Translating

It's a piece of cake to translate theme to any language:

  1. Download a gettext file editor like poedit and install it.
  2. Open the English car-rental-en_EN.po file which is located in "car-rental/languges" directory with poedit.
  3. Now go through and translate all the text one line at a time in the bottom box.
  4. Then "File" => "Save as" to your desktop or a folder on your computer. This will output a .po and .mo files.

Note: For more info, see this tips & tricks.

Layout Settings

All settings are executed from theme menu: "Settings->Layout"

Note: Don't forget to save changes by pressing "Save Layout Settings" button!

Theme Style

This option can be used for color scheme customization. There are 6 ready-to-use color schemes:

  • Green
  • Orange
  • Red
  • Blue
  • Purple
  • Violet

If you are familiar with CSS you can make your own color scheme. In order to do that, edit and save your_style.css style file in Theme folder: "car-rental/front/templates/css/styles/".

Backgrounds

In order to improve visual flexibility, use the power of Car Rental Theme backgrounds uploading. If you want to use a pure color as a background, fill in the "Background color" field with hexadecimal color code (e.g. FFFFFF for white color).

In order to set an image as background use the following fields:

  • Background status — check the status "show image" to enable image output.
  • Background image — browse any picture in the following formats: jpeg, png or gif.
  • Background position — check the place for the image. Use "top left" to repeat and "top center" for large landscape pictures.
  • Background repeat — check the background image repeat style.
  • Background attachment — check scrolling or fixed output for background image.

Logotype

In order to use your own logotype browse desired image in following formats: jpeg, png or gif.

Contacts

In order to set your own contact information in the header of the site fill in the corresponding fields. Use the following shortcodes:

					[title] CALL FREE [/title]
					[phone] 0800 123 4567 [/phone]
					[time] Sun 8am - Fri 11pm and Sat 8am - 12pm [/time]
				

In order to set your own contact information in the footer of the site fill in the corresponding fields. Use the following shortcodes:

					[phone] 0800 123 4567 [/phone]
					[email] email@yoursite.com [/email]
					[adress] your address [/adress]
					[skype] skype_name [/skype]
				

Copyrights

In order to set copyrights in footer, input your text in corresponding field. In order to make your link clickable at home page, use the following shortcode:

					[url] Your Company Name [/url]
				

Google Analytics

In order to view statistics of your site, register in Google Analytics and input your code in the corresponding field.

Navigation Menus

In order to create and manage navigation menu, standard wordpress option is used:

  1. Go to "Appearance ->Menus"
  2. Create menu name for each Theme Location: Header Navigation, Footer Navigation, Sidebar Navigation.
  3. Choose corresponding names in "Theme Location" unit and press "Save".
  4. Add links for each menu using following units: Pages, Custom links or Categories.

Do you need more information? Please, see following video tuturial: WordPress 3.0 Menu Management Function

Note: Header and Sidebar navigation menus support only 1 level of nested links, and Footer navigation menus support only upper level links.

Homepage Settings

You can set homepage from "Settings->Homepage" theme menu. Use the following fields:

  • Homepage content — choose the page you created in "Pages->Add New" beforehand.
  • Quote form — settings unit, manages form.
    • Main quote page — check the quote page you created before (see quote page creation), which will be used to view results.
    • Title — form header.
    • Position — "left" or "right" (form position).
  • Showcase — settings unit for text or slider output.
    • Type — unit type: "slider" or " text".
    • Slider effect — slides change effect.
    • Text content — check the page you created "Pages->Add New", it's content will be used instead of slider.

Note: Don't forget to save changes by pressing "Save Homepage Settings" button!

Contact page

Creating Contact page

In order to create Contact Page:

  1. Open "Pages->Add New"
  2. Fill in the title and content of the page.
  3. Choose template "Contacts" in "Page Atttributes"
  4. Press "Publish" button

Contact form Settings

To customize your contact form, follow this way: "Settings->Contact page" and fill in the corresponding fields:

  • Email — this email will be used for incoming messages.
  • Subjects — Subgect of the letter (input most popular ones or leave this field empty).

Note: Don't forget to save changes by pressing "Save Contact Form Settings" button!

Rental System Settings

General

For general settings open "Settings->Rental system->General" theme menu and fill in the following fields:

  • Email — input email address, which will be used for notifications about new bookings and set as sender email in client notifications letters.
  • Booking notification — check whether or not to notify you about new bookings via email.
  • Currency — choose the default currency. Additional currencies creation is described in the next chapter.
  • Auto update currency — check whether or not to update currency rates daily using Yahoo Finance.
  • Booking page — choose Booking page you created before (see booking page creation), which will be used by the customer for booking.
  • Terms & Conditions page — choose Terms & Conditions page you created before in "Pages->Add New".
  • Minimum driving age — minimal customer's age.
  • Maximum driving age — maximum customer's age.
  • Customer titles — input titles which will be available for customers on the booking page.
  • Countries — input countries which will be available for customers on the booking page.
  • Locations — input locations, which will be available for customers in quote form.

Note: Don't forget to save changes by pressing "Save General Settings" button!

Currencies

Currencies can be found in "Settings->Rental system->Currencies" theme menu. You can either use default currencies or create new ones.

Currency Adding/Editting

In order to add/edit currency:

  1. Click "Add Currency"/"Edit"
  2. Fill in all required fields:
    • Status — available ("working") or not available ("idle") currency.
    • Title — currency title.
    • Code — trilateral currency code is the same as the ISO 4217 (all currencies codes)
    • Symbol left/right — сurrency symbol (example: "$" for USD).
    • Decimal place — numbers of digits after the comma.
    • Value — used for currency value calculation relative to default currency.
  3. Click "Add New Currency"/"Edit Currency" to add/save currency.

Default Currency

Go to "Settings->Rental system->General" theme menu and set currency in the "Currency" field.

Automatic Currency Update

Go to "Settings->Rental system->General" theme menu and set "yes" in the "Auto update currency" field.

Disabling Currency

Set the currency status as "idle".

Moving Currency to Archive

Hover mouse cursor over the currency and click "move to archive" or check number of currencies and choose an action "move to archive".

Deleting Currency

In order to delete currency move it to archive first. Then go to "Archive" and you will be able to delete currency.

Warning: deleting currency you are also deleting all bookings related to it.

Email Templates

Email template management can be implemented from "Settings->Rental system->Email templates" theme menu.
Here are subject/message email templates ready to use for:

  • Booking notification — notification email template about new bookings which should be sent to the manager (in the case this option enabled in "Settings->Rental system->General" theme menu). In order to input all necessary data, use available shortcodes.
  • Customer booking — notification email template which should be sent to the customer about his booking. In order to input all necessary data, use available shortcodes.
  • Customer registration — notification email template which should be sent to the customer about his registration as new customer. In order to input all necessary data, use available shortcodes.
  • Password recovery — notification email template which should be sent to the customer with new passwod. In order to input all necessary data, use available shortcodes.

Note: Don't forget to save changes by pressing "Save Email Templates" button!

Vehicle Management

Vehicle management can be found in "Vehicles" theme menu. Here you can either edit existing, or can create new ones.

Adding New Vehicle

In order to create a new vehicle:

  1. Click "Add Vehicle"/"Edit"
  2. Fill in all fields:
    • Status — available ("working") or not available ("idle") car for booking.
    • Manufacturer — vehicle manufacturer (e.g. Nissan).
    • Series — vehicle series (e.g. Patrol)
    • Year — model year (e.g. 2011).
    • Class — vehicle class (e.g. sedan).
    • Vehicle image — browse vehicle image in one of the following formats: jpeg, png or gif.
    • Description — vehicle description, use shortcodes if necessary (see Shortcodes usage).
    • Cost per day — rental price in default currency (default currency can be set in "Settings->Rental system->General" theme menu).
    • Quantity — quantity of the vehicles.
    • Transmission — type of transmission.
    • Doors — number of doors.
    • Seats — number of seats.
    • Air conditioning — air conditioning (yes/no).
  3. Click "Add New Vehicle"/ "Edit Vehicle" to add/edit vehicle.

Disabling Vehicle

Go to the vehicle and set "idle" status.

Moving Vehicle to Archive

Hover mouse cursor over the vehicle and click "move to archive" or check number of vehicle and choose an action "move to archive".

Deleting Vehicle

In order to delete vehicle move it to archive first. Then go to "Archive" and you will be able to delete vehicle.

Warning: deleting vehicle you are also deleting all bookings related to it.

Quote Pages Creation

These pages are used to look for specific vehicles. Such page can be set as home page of your site in "Settings->Homepage" theme menu.

In the case there are some quote pages (for example: Car Hire, Vans Hire and Sportcar Hire), you should create one main (home) page and 3 subsidiary pages. In this case home page works as trigger and you have an ability to choose which page to use for search. It's very convenient, because you can choose parent page from quote form.

Main Quote Page Creation

In order to create main quote page:

  1. Open "Pages->Add New".
  2. Fill in title and content of the page.
  3. Check "Get a Quote" in "Page Atttributes" template.
  4. Fill in "Quote Form Settings" unit:
    • Title — quote form title.
    • Vehicle classes — classes for search. If the page has subsidiary pages, just check parental one.
  5. Click "Publish".

Subsidiary Quote Page Creation

In order to create subsidiary quote page:

  1. Open "Pages->Add New".
  2. Fill in title and content of the page.
  3. Check "Get a Quote" in "Page Atttributes" template.
  4. Check parent quote page page in "Page Atttributes" unit
  5. Fill in "Quote Form Settings" unit:
    • Title — quote form title.
    • Vehicle classes — classes for search. If the page has subsidiary pages, just check parental one.
  6. Click "Publish".

Booking Page Creation

In order to create booking page:

  1. Open "Pages->Add New".
  2. Fill in the title, leave content empty.
  3. Check "Booking" template in "Page Atttributes" unit.
  4. Click "Publish".

Booking Management

You can manage bookings in "Bookings" theme menu. New bookings appear right away after your customer chooses vehicle and fills in the form at the booking page. Vehicle will not be marked as taken until booking status is "new" or "cancel".

New Bookings Notification

  1. Set email notification in "Settings->Rental system->General" theme menu.
  2. Number of new bookings is displayed to the right from "Bookings" theme menu.

Changing Booking Status

  1. Hover your mouse cursor over the booking and choose "Details".
  2. Change bookings status and click "Change".

If you change booking status to "pending", "renting" or "complete", script will verify vehicle availability one more time for specified rental period. After that status will be changed according to time.

Moving Booking to Trash

Hover your mouse cursor over the booking and choose "move to archive" or check some bookings and choose "move to trash" below.

Deleting Booking

In order to delete existing booking you should move booking to trash first. Then go to the "Trash" menu where you will be able to delete booking.

Warning: after deleting booking can't be restored!

Customer Management

You can manage customers from "Customers" theme menu. New customers appear right away after booking with "Register and get account data via email" option.

Editing Customer Data

In order to edit customer data:

  1. Hover your mouse cursor over the customer and click "Edit".
  2. Edit all necessary fields.
  3. Click "Edit Customer" to save new data.

Banning Customer

In order to ban your customer go to editing customer menu and set "Banned" status below or check several customers and choose "Switch to banned" action below.

Moving Customer to Archive

Hover your mouse cursor over customer and click "move to archive" or check several customers and choose "Move to archive" action below.

Deleting Customer

In order to delete existing customer you should move customer to archive first. Then go to the "Archive" menu where you will be able to delete customer.

Warning: Deleting customer you also delete bookings related to him! Deleted customers and bookings can't be restored!

Advertising Management

Advertising can be customized in "Adverts" theme menu.

Homepage Slider

In order to make slider appear, you should activate it and customize in "Settings->Homepage" theme menu:

  1. Go to "Adverts->Homepage slider".
  2. Fill in all necessary fields:
    • Show — check ("yes") or ("no") to show the slider.
    • Target URL — input link to the target URL.
    • Image — browse an image 460px x 250px size with the slide.
  3. Click "Save Homepage Slider" to save data.

In order to activate sidebar banner, you need to activate widget (see Sidebar widgets: Advert). In order to prepare sidebar banner:

  1. Go to "Adverts-> Sidebar banners".
  2. Fill in all necessary fields:
    • Show — show the banner ("yes") or ("no").
    • Titile — title that is used to choose banner in widget.
    • Target URL — target page URL.
    • Image size — size of banner.
    • Image — browse an image (size the same you set in "Image size" field).
  3. Click "Save Sidebar Banners" to save data.

Blog

Creating Blog

In order to create blog:

  1. Go to "Posts->Categories".
  2. Create new category "Blog".
  3. If necessary, you can create several subcategories with parental one "Blog".

Adding New Posts to Blog

In order to add new entry:

  1. Go to "Posts->Add New".
  2. Fill in title and content fields.
  3. Check "Blog" category.
  4. If you need a thumbnail image, click "Set featured image" and upload an image in "Featured Image" unit.
  5. Click "Publish".

Widgets — controllable elements in sidebar. To manage widgets go to "Appearance ->Widgets" wordpress admin panel menu. There are two zones: "Available Widgets" and "Sidebar Widget Area". In order to activate widget, drag the one you need from "Available Widgets" to "Sidebar Widget Area" zone.

Do you need more information? Please, see Widgets Overview video tuturial.

This widget allows you to show 1–5 last entries from your blog. In order to activate widget:

  1. Drag "Blog"widget to "Inactive Widgets" zone.
  2. Customize widget:
    • Title — blog title.
    • Blog category — blog category (see Creating blog).
    • Number of posts — number of post to show.
    • Show post image — check to show thumbnail image along with the title.
  3. Click "Save".
  4. Drag "Blog" from "Inactive Widgets" to "Sidebar Widget Area".

This widget allows you to show 1–5 of the most popular questions. In order to activate widget:

  1. Drag "FAQ" widget to "Inactive Widgets" zone.
  2. Customize widget:
    • Title — FAQ title.
    • FAQ page — choose page with full list of FAQ (see Shortcodes: FAQ).
    • Question/Answer — input questions and answers in pairs.
  3. Click "Save".
  4. Drag "FAQ" from "Inactive Widgets" to "Sidebar Widget Area".

This widget allows you to show advertising banner. In order to activate widget:

  1. Drag "Advert" widget to "Inactive Widgets" zone.
  2. Customize widget:
  3. Click "Save".
  4. Drag "Advert" from "Inactive Widgets" to "Sidebar Widget Area".

This widget allows you to show custom menu. In order to activate widget:

  1. Drag "Custom menu" widget to "Inactive Widgets" zone.
  2. Customize widget:
    • Title — menu title.
    • Select Menu — check "sidebar" (see Navigation menus (header, sidebar and footer) settings).
  3. Click "Save".
  4. Drag "Custom menu" from "Inactive Widgets" to "Sidebar Widget Area".

This widget allows you to show subpages for the page if there are any ones. In order to activate widget:

  1. Drag "Subpages" widget to "Inactive Widgets" zone.
  2. Customize widget:
    • Title — menu title.
  3. Click "Save".
  4. Drag "Subpages" from "Inactive Widgets" to "Sidebar Widget Area".

This widget allows you to show custom text. In order to activate widget:

  1. Drag "Text" widget to "Inactive Widgets" zone.
  2. Customize widget:
    • Title — box title.
    • Text — custom text.
  3. Click "Save".
  4. Drag "Text" from "Inactive Widgets" to "Sidebar Widget Area".

Shortcodes

Shortcodes — simple macroses like [shortcode] or [shortcode id="cool"] custom text [/shortcode], wgich can be used in posts content or vehicle description.

Content Columns

In order to split post content in 2 columns use the following syntax:

				[2_cols]
				   [col_1] First column content [/col_1]
				   [col_2] Second column content [/col_2]
				[/2_cols]
				

You can see shortcodes realization at demosite.

Typography

In order to make introductory text use the following syntax:

				[intro] Introductory text [/intro]
				

In order to make title with delimiter use the following syntax:

				[heading] Big heading [/heading]
				

In order to make a divider, use the following syntax:

				[divider]
				

In order to highlight part of the text, use the following syntax:

				[highlight]This text will be highlighted [highlight]
				

In order to underline part of the text, use the following syntax:

				[underline] This text will be underlined [underline]
				

You can see shortcodes realization at demosite.

Lists

In order to use lists with different bullets, use the following syntax:

				[list type="check"]
					<li> First list item </li>
					. . . . . . . . . . . .
					. . . . . . . . . . . .
					<li> Last list item </li>
				[/list]
				

Where type can be: check, arrow, plus or star.

Table

In order to make a table, use the following syntax:

				[table]
				  <tbody>
					<tr><th>First Heading</th> . . . <th>Last Heading</th></tr>
					<tr><td>Content</td> . . . <td> Content </td></tr>
					. . . . . . . . . . . . . . . . . . . . . . . . . . .
					. . . . . . . . . . . . . . . . . . . . . . . . . . .
					<tr><td> Content </td> . . . <td> Content </td></tr>
				  </tbody>
				[/table]
				

Note: html tag <table> is not absent, it will be added automatically!

You can see shortcodes realization at demosite.

In order to make a photo gallery, use the following syntax:

				[gallery]
				

Note: You need to create photo gallery In post content first. See the video tutorial

You can see shortcodes realization at demosite.

YouTube, Vimeo

In order to embed YouTube/Vimeo video in post content, use the following syntax:

				[youtube video_id=" lJapyQ2xFkk" size="medium" align="right"]
				[vimeo video_id="2133098" size="medium" align="right"]
				

Custom Parameters:

  • video_id — Youtube's/Vimeo's video ID.
  • size — can be: "large", "medium", "mini".
  • width — player width (in pixels).
  • height — player height (in pixels).

You can see shortcodes realization at demosite.

Google Maps

In order to add Google map to the post content, use the following syntax:

				[map size="medium" address="target address" zoom="20"]
				

Custom Parameters:

  • lat/lon — set location by latitude/longitude.
  • address — set location by address.
  • size — can be: "large", "medium", "mini".
  • width — width in pixels.
  • height — height in pixels.
  • zoom — set zoom level.
  • maptype — can be: "ROADMAP", "SATELLITE", "HYBRID", "TERRAIN".
  • kml — add KML via URL link.
  • marker — set "yes" for show or "no" for hide marker.
  • markerimage — add image as map icon via URL link to image file.

Note: More information with examples in this video tutorial.

You can see shortcodes realization at demosite.

FAQ

In order to add question/answer couple in the post content, use the following syntax:

				[faq]
				  [q] The big question [/q]
				  [a] The little answer [/a]
				[/faq]
				

You can see shortcodes realization at demosite.

Testimonials

In order to add testimonial in the post content, use the following syntax:

				[testimonial]
				  [q] Testimonial quote [/q]
				  [a] Author's Name  [/a]
				[/testimonial]
				

You can see shortcodes realization at demosite.

Sitemap

In order to add sitemap, create a single page and paste the following shortcode in the post content:

				[sitemap]
				

You can see shortcodes realization at demosite.

CSS Files

Car Rental Theme imports 3 CSS files:

  • reset.css — general reset CSS file also contains some general styling, such as anchor tag colors, font-sizes, etc.
  • 960.css — framework CSS file contains all divs which construct the layout prototype.
  • style.css — main CSS file contains all of the specific stylings for the page skin.
  • color_name.css — CSS file contains all of the specific stylings for your own color scheme (see Theme Style).

The file style.css is separated into several sections like the bellow as sample:

				/* Header
				----------------------------------------------------------------------------------------------------*/
				
					/* Contacts
					----------------------------------------------------------------------------------------------------*/
				
						#header-contacts {
							float: right;
							margin-top: 20px;
							width: 250px;
						}
							#header-contacts .title {
								font: normal 1.4em/1 Tahoma, Arial, sans-serif;
							}
							#header-contacts .phone {
								margin: 5px 0;
								font:  2.8em/1 Arial, sans-serif;
							}
							#header-contacts .time {
								font: normal 1.0em/1 Tahoma, Arial, sans-serif;
							}
					/* Primary navigation
					----------------------------------------------------------------------------------------------------*/
					
						#navigation-bar {
							margin-top: 20px;
							width: 940px;
							height: 80px;
							border-radius: 5px;
							-moz-border-radius: 5px;
							-webkit-border-radius: 5px;
							-gecko-border-radius: 5px;
							-khtml-border-radius: 5px;
							background: url("front/templates/images/header_navigation/background.png") repeat-x 0 0;
						}
					. . . etc, etc. . . .

				

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

JavaScript Files

Car Rental Theme imports 7 Javascript files:

  • jquery.js — JavaScript library that greatly reduces the amount of code that you must write.
  • jquery.nivo.slider.js — slider plugin for jQuery.
  • jquery.color-box.js — customizable lightbox plugin for jQuery.
  • jquery.autocomplete.js — autocomplete/autosuggest plugin for jQuery.
  • jquery.calendar.js — date picker plugin for jQuery.
  • jquery.cookie.js — cookie plugin for jQuery.
  • extensions.js — custom scripts.

PSD Files

I've included 3 PSD files with this theme:

  • Main layout
  • Header navigation arrow
  • List bullets

If you'd like to change theme color to custom, open "header_navigation_arrow.psd", make the necessary adjustments, and then save the file as "over_arrow_yourcolor.png" to "car-rental/front/templates/images/header_navigation/" directory. Do the same for the bullets, please look at the "car-rental/front/templates/images/bullets/" folder to get an idea of filenames.

Sources and Credits