Simple booking WordPress theme
- Created: 08/04/2013
- latest Update: 16/07/2013
- By: Umbrella
- Email: firstname.lastname@example.org
Travelo is a wordpress theme made for tourism purposes.
Build on a clean design, and in a good thought funcionality Travelo can be your best choice if you have a Travel Company but you don’t have an online payment service available. Travelo is a simple product which makes possible the User to book an offer by writting personal details, which will be approved/declined from the agent of the tour company. The main importance is on the filter, which can categorize your offers in a good way for the users.
How to set up the theme?
Just upload travel.zip via theme uploaded on your wp-admin and you’re ready to go.
If you get any error after you installed the theme than this could happen :
1.Because you uploaded the theme as a Folder and you where using FTP Text Mode, use Binary Mode instead
2.Or delete the Theme folder and install .zip file which is in this package
Creating a Tour
(We recommend you to create the filter and tour attributes before you start creating tours).
To create a new tour go at Tours / Add new.
- Add the main text first, then start filling the other data
- Write the price/cost of the tour.
- Enter the currency (you can use different currency for different tours)
- Enter the description of the tour which will be shown on the buckets at hompage.
- Enter the short descriptions of the tour which will be visible on the slider.
- Add the available dates for the tour (Arrival and Return).
- Write custom attributes and check them to be visible at a tour.
- Upload the images that you want on the inside tour slider. (650×352 px).
- Use tabs for more detailed description or specifications.
- Rate the tour by its exclusivity (1 to 5 stars).
- Enable/Disable tabs on the page.
- Enable/Disable default attributes of tours.
- Check if you want the category to be on slider.
- Check if you want the reviews to be on the tour page.
- Enable/Disable the user ratings.
Setting up the homepage
Pages / Add new / Select Home from the templates
Name the page Home.
How to set up tour on homepage slider?
To select the tours that you want to be shown on the slider you shoud go
At pages / home / and at slider module you will select the tours and re-order them.
To make it look same as in the demo you should procced as this while creating a tour:
- Write the description you want to be shown on slider(hompage)
- Choose if you want the category too.
- Don’t forget, the slider image will be the featured image of the tour.
- The recommended size is 1645 x 550 px.(you can use larger photos, but please try to maintain the same ratio, in order to avoid image deformations.
The 3 featured offers on homepage
Are set automatically as the latest posted tours.
You can set different description when you add/edit the tour at Homepage Description of tour.
The search filter is a very helpful element for users to filter the results fast for finding better and more accurate results.
The filter can be built for your needs at Umbrella Theme Options / Filter:
We recommend up to 4 filters ( 3 + 1 Price included).
1. You can categorize with price from $ amount to $ amount on as many rows as you want. Below price are the attributes which will be shown down the photo gallery of an offer/tour page.
2. You can name the attributes and choose if you want them to show on filter.
3. After this you need to create categories of attributes which are shown at Tour dropdown menu on wp-admin.
Create categories for each attribute, for example:
Location: England, France, Germany, Spain
Type: Group Tour, Simple Tour, Festival
Hotel: Hilton, 4 Seasons, Sheraton
These attributes will save you time while adding tours, you can select them with checkbox.
The permalink for the search page mustn’t be “search” because it conflicts with the wordpress default search page.
You must choose a different permalink name.
Ex : localhost/website/search-results
Don’t forget to make the home template as the homepage of your website.
This could be done at Settings / Reading /
– Front page display / A static page / Choose your home template.
Setting up the About Us Page
There are three main options to set up the about page as in our demo site.
1.The full width block where you can add your main company information and details.
2.Three small block when you can enter simple data, different specifications and maybe some details for job opportunities.
3.You can add your staff, write the name, the position, text details and link the icons to the social networks.
Setting up the Tours page
This is a very simple step, you just need to create a new page choose the name and choose the template “Tours”.
Choose the featured photo on the right and you’re done.
Setting up the Blog
Pages / Add new / Choose the blog from the templates. Add a featured image.
Don’t forget to customize your sidebar at Appearance / Widgets.
If you delete all widgets the blog will become 3 columns and at the single page (article template) will turn on a full width page, including the post image will increase the size.
When you create a post you have to add the title, the content, the description which will be shown at the blog page, the article photo and the big featured image (which is optional).
Setting up the Booking
1. First you need to create the page by going at Pages / Add new / Choosing the template Booking.
2. Then at Umbrella Options / Booking Options you can build the simple booking form
3. You can add as much booking fields you want by adding a field name and choosing the field type which can be text, phone, number, date.
You can choose if a field should be mandatory (requested) or optional.
For example: Name, Surename, Phone, Country, Address, Arriving date, leaving date, Number of adults, number of children etc. + you can add a big box for extra message.
4. The email is mandatory in the beginning and can’t be changed to optional, in order to keep in touch with real users and avoid spammers.
5. You can enable a pop up for the terms of conditions that could be filled with content on the editor. (if you enable this option, this is going to be mandatory to users).
6. You can choose the mail subject and the messages text for approved and unapproved bookings.
You can manage the bookings at Booking menu on the wp-admin:
You can see the booking.
Approve or Unapprove, Send e-mail or Delete it!
You can directly receive e-mails when a booking is done.
You need to enable the email notification and add the email address that you want to receive the email’s
To enable this feature go to Options on admin panel and in the options go to Booking options
Setting up the Contact page
Pages / Add new / Choose Contact from the templates.
1. Write your address/location
2. Write a title for the contact form
3. Write your mobile phone number
4. Write your email address
5. Write your fax number
6. Point your location to the map (google maps).
Setting up the Default page
Pages / Add new / Leave the Default template selected.
This template allows you to have a page and a sidebar at the same time.
The sidebar can be customized at Appearance / Widgets.
You can add a featured image for this too.
Setting up the Full Width page
Pages / Add new / Select the Full Width page.
This template gives you the possibility to create a page in full site size without sidebar or extra modules.
Setting up the default featured image
Attention: This photo will be shown on the big wide image space if there aren’t any photos uploaded from the user for that exact page.
This could be done by going at Umbrella Options / Main / Default Image and choose and upload the photo you want.
Adding your logo
Upload your logo to replace the default text which appears automatically after you install the theme.
Umbrella Options / Main / Logo
Setting up the Default Tour Attributes
This is a great tool if you have a lot of similarity between tours/offers.
With this options (which can be found at Umbrella Options/Default Tour Attributes) you can add some attributes that will remain default and can be shown in a tour be checking the box “enable default tour attributes” at the tour creating page.
How to set up the Shortcodes
Travelo gives you several useful shortcodes to make your wordpress daily use easier:
– The block quote
[blockquote] Text goes here [/blockquote]
– Headings h1, h2, h3, h4, h5, h6 styled
In the case below just change the 1 to the other 2,3,4,5,6 numbers to get the style.
[h1]The first line of text is here[/h1]
[accordion_item title="Title1"]For at least 40,000.[/accordion_item]
[accordion_item title="Title2"]A highly developed[/accordion_item]
Just replace the “Title1” with your title and the text with your content.
To add more accordions just copy one of the existing and change the tile and conent. Careful with the starting & ending tags [accordion][/accordion]
[tab title="Tab1"]The earliest.[/tab]
[tab title="Tab2"]A highly.[/tab]
Just replace the “Tab1” with your title and “the earliest” with your content and you’re done. To add more tabs, just copy one of the lines ex. [tab title="Tab1"]The earliest.[/tab] and edit the data in it.
– And white, black, blue, green, orange, red buttons.
The last but not least, some cool colorful buttons that can be used to link to other important pages. (according to the colors, these can take a lot of attention to users).
Change it with your url, and the “text” to your link name. The buttons come on several colors so you can change the “White” to Black, Blue, Green, Orange, Red and get the respective colors.
New Features Travelo 2.0
- Revolution Slider
- Skitter slider Short code
- Short code Tours
- Font Awesome Short code
- Short code Columns
- Google Fonts
- Price Removal
- Widget Tour Search
- Sidebar Right
- Tour Alert – Fix
- Special char Booking – Fix
- Bucket Height – Fix
- Tab – Fix
- search.php – Fix
The Responsive feature is always on. But if you need to disable the this feature you can go to Options -> Main -> Disable Responsive
Responsive is tested on I phone 3-4 , I pad , Samsung Galaxy s2, s3, Note 2. For other media screens it was tested with https://quirktools.com/
5 new skins + the default.
To change the skin go to Options->Main -> Skins and choose the one that you want.
Disclaimer: Skins panel in the demo is not included in the theme. The skin panel is only for presentation.
When the theme is installed it will show a message that you can and need to install the Revolution Slider just click begin installation and all its done.
There is a dummy content that you can import and it will import the slider like in the demo. You can find the dummy content in the Theme package.
When you create a slider you can copy the short-code and put in every editor. But if you want to put the slider in the header (on top of the content), you can find a filed in every page, post, tour post “Do Shortcode”. So if you put the shortcode in that field or put the alias of the slider it will show the slider in the header.
Here is a video that themepunch has created on how to setup the revolution slider http://www.youtube.com/watch?feature=player_embedded&v=cVleysEPHM4
In Travelo 2.0 is also the free awesome skitter slider.
In the skitter slider you can choose between 5 themes of the slider
You choose also the sizes of the slider
- Small 200 x 100
- Medium 500 x 200
- Large 800 x 300
And you can choose for every image a different effect. Here is the list of slider effects:
How to setup skitter Short code
Go to Options -> Shortcode slider
You can use Add slider button to add a new slider.
After a new slider fields has opened you must add a slider name, a unique name because this its the slider ID (alias).
Choose the theme of the slider.
Choose the size of the slider
After you added those filed you need to press the button add image, and it will open some fields to insert an image.
So now you need to add an image, the description and choose an effect to it.
Note: You can make how many sliders as you want. But they all need to have different names.
After all this is done.
You need to go to the page, post, tour_post or every editor that you want and you can see the icon of the slider . So when you press this button a shortcode will appear in the editor and just put the name of the slider in the shortcode.
[Slider name="Unique Name"]
Short code Tours
To add the slider with all your tours on a different page (The slider like in the home page that displays all the tours).
Short code Font Awesome
Font Awesome is a shortcode to add icons with up to 316 icons.
It’s easy to add an icon anywhere you want, just like this:
[fontAwesome name="icon-name" size="icon-size"] [/fontAwesome]
You can use 3 different sizes, like:
icon-4x, or leave it blank for normal size.
here they are a list of icons you can use:
Short code Columns
You will find the shortcodes in the editor (1/2 , 1/3, 1/4, 1/6)
Just press the button and the shortcode will appear, now you put the text in the shortcode and all is done.
To change the font of your site, go to Options->Main->Google Fonts and choose what ever font do you like. There are more then 500 fonts that you can choose from.
If you have the need to disable all prices of all your tours without deleting all the prices. Just go to Options->Main and you will see Disable Price. Click on that check box and all the prices will be removed from the web but not from your admin panel because maybe you need to show them again in some point.
Widget Tour Search
If you have the need to add the filter for search tours as a widget, go to Appearance->Widgets and add the Umbrella Tour search to your side bar.
Add a title of that widget and all is done. The Search filter now is shown in the sidebar.
- Special char Booking
- Bucket Height
1. We realized that the booking form worked fine if you don’t use special chars like (. , – / ? ) etc.
Now this is fix so you can name the filters (inputs) like you want.
2. Bucket height was fixed so every time you added text more then the bucket height was, the text was displayed out of the bucket, Now is fixed so the the bucket height is dynamic.
3. Each time you pressed enter(new line) it displayed like a new tab, So that is fixed now.
4. search.php was missing on the theme so now we added it and designed it so now you can use the search widget.
Note: If any of you have those issues, please update the theme.