Travel Booking Pro

Thank you for choosing Travel Booking Pro WordPress theme!

This documentation covers the installation and the usage of the theme.

The main goal of the documentation is to provide guidance and walk-through to set up the theme on your website in an easy-to-follow manner, while also introducing you to some of the features of the theme. We encourage you to go through this document and keep it handy for reference.

If you have any questions about the theme or need assistance with anything related to the theme, please feel free to open a support ticket. Our support team will be happy to assist you.

In this documentation, first, we’ll make sure that everything is ready for the installation, then we’ll set up the theme, and cover some initial configuration and customization options.

You can either follow the video or the below documentation to install and setup Travel booking Pro Theme:

How to use this Documentation? #

We recommend everyone to go through each step of the documentation to have a better understanding of the theme and its features.

However, if you are looking for a specific section, you can easily navigate using our table of contents on the left-hand side of the screen.

If you want to find a specific keyword, hit “Ctrl+F” on your browser to start searching.

Requirements for Getting Started #

Make sure Travel Booking Pro is compatible with your WordPress version.

Travel Booking Pro will work with 4.7 and above versions of WordPress.

However, for the best experience, added features, and updated security patches, we recommend you to update your WordPress to the latest version.

If you haven’t downloaded WordPress already, you can download it from the WordPress repository via https://wordpress.org/download/.

Checklist for Getting Started: #

Check WordPress Version and Update it
Install and Activate Travel Booking Pro theme
Install Necessary Plugins. Some functionality of the theme might not work if you do not install the recommended plugins.

Recommended Image Size (in px) #

Banner Section : 1920 x 800
Blog Page Full-width: 1290 x 737c
Blog Page Single: 770 x 440
Popular Package Section: 370 x 263
Deals and Discount Section: 270 x 385
Destination Page: 270 x 330
Team Section: 370 x 323
Team Page Single: 770 x 450
Contact Page Map: 530 x 327

Demo Import (Instantly Make Website Like Demo) #

You can easily make your website exactly like the live preview (demo) of the Travel Booking Pro theme by importing the demo content. Importing demo content is a great way of getting started with your website. You can get a guideline on how to set up this theme if you import the demo content.

To import the demo with a click, you need to install One Click Demo Import plugin and follow the below steps:

Go to Appearance > Import Demo Data
Select the Default Layout or One Page layout demo data you want to import
Click on Import button.

Once the demo import is successful, you will get a demo import successful message as given below:

Successfully demo imported travel booking pro

How to Check and Update WordPress Version: #

Go to Dashboard >Updates.

Please update your WordPress version, if there is an update available.

Theme Installation & Activation #

After you have the latest version of WordPress, save the downloaded Travel Booking Pro theme somewhere handy on your computer, as you will be using the included files for the rest of the installation process.

The Travel Booking Pro theme file includes:

A WordPress Theme Files (in .zip format)— This (travel-booking-pro.zip) is a compressed WordPress theme file containing all of the required templates, images, and icons required for the theme to function properly.

Note for Safari users (macOS): If you are using Safari to download the theme file, the file may unzip automatically. So, make sure your theme file is in .zip format. Here’s how to stop Safari from automatically unzipping your .zip file.

To install and activate the theme follow these steps or the above gif:

Go to Appearance > Themes.
Click on Add New button

Click on Upload Theme.

Click on “Choose File…”, select the “travel-booking-pro.zip” file from your computer and click Open.

Click Install Now.

After the theme is installed, click on “Activate” to use the theme on your website.

Installing Recommended Plugins #

You must install and activate the following plugins to get the best out of Travel Booking Pro theme.

WP Travel Engine by WpTravelEngine: This plugin helps you create and add travel trips, destinations, itinerary, and other trips details. This plugin extends the functionality of your travel website.

Travel Booking Toolkit by WpTravelEngine: This plugin adds extra homepage sections and some useful widgets on the Travel Booking Pro theme.

Contact Form 7 by Takayuki Miyoshi: Contact Form 7 helps you add and manage multiple contact forms.

Regenerate Thumbnails by Alex Mills (Viper007Bond): If you have existing content, this will help you update your image thumbnails sizes. To update the thumbnails, you must run this plugin.

Post Type Switcher by John James Jacoby: You can easily change post type of existing posts with this plugin.

How to Install Recommended Plugin: #

Go to Appearance> Install Plugins

Click “Install” to install the plugins.

Click “Activate” to activate the plugins

Setting up the Front/Landing/Home Page and Blog Page #

To get started with customizing the theme, you first need to set up a front page. If you want to make your website look like the demo, you should select Front Page as Static Page.

Configure the Home Page and Blog Page #

Go to Appearance > Customize > Homepage Settings
Select A Static page under Your homepage displays.
If you are using this theme in a fresh WordPress installation, go to the next point. If you are using this theme in an old WordPress, choose the page you want to set homepage as Frontpage and choose the page you want to set as a blog page as Posts Page.
Click on Publish.

Logo and Header Settings #

You can add your logo, tagline, phone number, search form, and social media icons on the top of your website here.

Site Identity (Add Logo/Name and Tagline on your website) #

You can change the name and logo of your website here.

Go to Appearance > Customize > Logo & Header Settings> Site Identity
Click Select Logo and upload your logo.
Enter Site Title and Tagline.
Check Display Site Title and Tagline.
Click Select Image and upload Image for Site Icon (favicon).
Click on Publish.

Appearance Settings #

Color Scheme #

Please follow the below steps to configure the color scheme of your website.

Go to Customize > Appearance > Appearance Settings > Color Scheme
Select the Background Color & Primary Color
Click on Publish

Background Settings #

Please follow the below steps to configure Background settings of your website.

Go to Appearance > Customize > Appearance Settings > Background Settings
Click on Image & upload the background image of your choice. You can also select from the predefined patterns as background on your website.
Click on Publish

Configure background settings travel booking pro

Layout Settings #

Header Layout: #

Go to Appearance > Customize > Layout settings> Header layout
Select a header for your website
Click Publish.

General Sidebar layout : #

Go to Appearance > Customize >Layout Settings> General Sidebar Layout
Select the Sidebar option for Page, Post, Blog, and default.
Click Publish.

Pagination Type #

Please follow the below steps to change the pagination type of your website.

Go to Appearance > Customize > Layout Settings > Pagination Settings
Select the Pagination of your choice
Click on Publish

configure pagination settings travel bookingpro

Typography Settings #

You can change the fonts of your contents and Heading tags here.

Go to Appearance> Customize> Typography Settings
Select the content type to change its typography

Configure Font Family, Style, Size, and Color (Using Color pallet).
Click on Publish

Front Page Settings #

You can manage and edit homepage sections here. You must be on Home Page to customize the sections.

Also, make sure you have set the home page as a static front page– if not please refer to Setting Up the Front Page section of this documentation. Also, you must install and activate Travel Booking Toolkit plugin to see all the home page sections.

Banner Section #

You can attract your visitors using the banner section. You can add image, video, or slider in the banner section. If you choose to add image or video, you can add a search form on the top of image or video.

Static/Video CTA Banner #

Go to Appearance> Customize> Front Page Settings> Banner Section
Choose “Static/Video CTA Banner” in Banner Options
Upload and select a video. You can also enter a youtube link. If you have the video link or the video, the image will not be displayed.
If you want to put an image in the banner, click on “Add new image” to add images to the banner section
Select the image you want to display on the banner section. You can also randomize added images. When you click on “Randomize uploaded headers” button, the uploaded banner images will be displayed randomly every time your website is loaded. Make sure you don’t have video select if you want to show an image.
Enable/Disable Search Form
Enter the title and subtitle for the banner.
Click on Publish

Static/Video Newsletter Banner #

Go to Appearance> Customize> Front Page Settings> Banner Section
Choose “Static/Video CTA Banner” in Banner Options
Upload and select a video. You can also enter a youtube link. If you have the video link or the video, the image will not be displayed.
If you want to put an image in the banner, click on “Add new image” to add images to the banner section
Select the image you want to display on the banner section. You can also randomize added images. When you click on “Randomize uploaded headers” button, the uploaded banner images will be displayed randomly every time your website is loaded. Make sure you don’t have video select if you want to show image.
Enter Banner Newsletter shortcode
Click on Publish

Banner as a Slider #

Log in to WordPress Admin Panel.
Go to Appearance> Customize> Front Page Settings> Banner Section
Choose “Banner as Slider” in Banner Options

Slider using Latest Posts #

Select Slider Content Style as Latest Posts
Select the number of Slides you want to display
Enable Slider Auto to make slides transition automatically without clicking (Blue is enabled).
Enable Slider Loop to allow the slider to repeat selected posts automatically.
Enable Slider Caption to show the post title to appear on the slider post image.
Choose Slider Animation type.
Select Slider Animation from the drop-down
Click on Publish

slider as latest posts travel booking pro

Creating Slider using Category

Choose Slider Content Style to Category
Choose the Slider Category.
- The featured Image of the posts under the selected category will appear as Slide Images.
- Post Title of the post under the selected category will appear as Slide Title.
- Post Excerpt will appear on the Slider as slide Content. The first few sentences of the post content will appear as slide content if the Post excerpt is not entered.
Enable Slider Auto to make slides transition automatically without clicking (Blue is enabled).
Enable Slider Loop to allow the slider to repeat selected posts automatically.
Enable Slider Caption to show the post title to appear on the slider post image.
Choose Slider Animation type.
Select Slider Animation from the drop-down
Enter the Readmore Button Label
Click on Publish.

Slider as Pages #

Select Slider Content Style as Pages
Click on Add New Pages & Select Pages to be displayed in the slider section
Enable Slider Auto to make slides transition automatically without clicking (Blue is enabled).
Enable Slider Loop to allow the slider to repeat selected posts automatically.
Enable Slider Caption to show the post title to appear on the slider post image.
Choose Slider Animation type.
Select Slider Animation from the drop-down
Enter the Readmore Button Label
Click on Publish.

Creating Slider using Custom slides #

Choose Slider Content Style to Custom.
Click on Add new slide.
Click Add Image to upload an Image.
Enter Title, Description and Link for the Slide.
Click Add new Slide to add new slides. Click on Slide No. (1,2,3…) to modify the slides
Enable Slider Auto to make slides transition automatically without clicking (Blue is enabled).
Enable Slider Loop to allow the slider to repeat selected posts automatically.
Enable Slider Caption to show the post title to appear on the slider post image.
Choose Slider Animation type.
Select Slider Animation from the drop-down
Enter the Readmore Button Label
Click on Publish.

Search Section #

Note: Make sure you have installed and activated the WP Travel Engine – Trip Search plugin for this section to work properly.

Go to Appearance> Customize> Front Page Settings> Search Section
Enable Search Bar to show and allow trip search from the homepage search bar.
Click Publish.

About Section: #

Go to Appearance > Customize > Front Page Settings> About Section
Add “Text” widget for the title and description of the section. Add “WP Travel Engine: Icon Text Widget” for the about section.

Enter a title and content. Upload an Image or choose an Icon. Add more widgets to add more of the icon text section.
Enter Read more text and Read more URL
Click on Publish.

Popular Packages Section #

Note: Please add trips before you start with the section. Go to Trips > Add New trips. Then you will be able to select a trip from the dropdown below.

Go to Appearance> Customize> Front Page Settings> Popular Packages
Check Enable Popular Packages Section.
Enter Section Title and description.
Uncheck Enable Popular Package Demo Content to hide demo content.
Choose Popular Packages One, Popular Packages Two and Popular Packages Three.
Enter Read More Label, View All Label and View All URL
Click Publish.

Call to Action One: #

Go to Appearance> Customize> Front Page Settings> Call To Action One
Add “WP Travel Engine: Call To Action Widget” for the Call to Action one.

Enter the title and content for the section. Choose the button Alignment. Choose the number of Call to action buttons. Enter Button text and Button Link, Choose a background color or an image.

Click Publish.

Featured Section: #

Note: Make sure you have created packages before you start with the section.

Go to Appearance> Customize> Front Page Settings> Featured Section
Check Enable Featured Trip Section to show this section on your homepage.
Enter Section Title and description.
Uncheck Enable Featured Demo Content to hide demo content.
Choose a featured trip category or latest trips to display under the section.
Choose the number of trips to display
Enter Read More Label and View All Label
Click Publish.

Deals Section : #

Note: Please add trips before you start with the section. Go to Trips > Add New trips. Then you will be able to select a trip from the dropdown below.

Go to Appearance> Customize> Front Page Settings> Deals Packages
Check Enable Deal and Discount Section to display it on your homepage
Enter Section Title and description.
Uncheck Enable Deal Demo Content to hide demo content.
Choose Deal Post One, Deal Post Two, Deal Post Three, and Deal Post Four.
Enter Read More Label, View All Label and View All URL
Click Publish.

Destination Section : #

Note: Note Please add destinations before you start with this section. Go to Trips > Add New trips > Add destination. Then you will be able to select a destination from the dropdown below.

Go to Appearance> Customize> Front Page Settings> Destination Section
Check Enable Destination Section to display it on your homepage
Enter Section Title and description.
Uncheck Enable Destination Demo Content to hide demo content.
Choose Destination One, Destination Two, Destination Three, and Destination Four.
Click Publish.

Call to Action Two: #

Go to Appearance> Customize> Front Page Settings> Call To Action Two
Add “WP Travel Engine: Call To Action Widget” for the Call to Action one.

Enter the title and content for the section. Choose the button Alignment. Choose the number of Call to action buttons. Enter Button text and Button Link, Choose a background color or an image.

Click Publish.

Activities Section #

Note: Add Activities before you start with this section. Go to Trips > Add New trips > Add activities. Then you will be able to select an activity from the dropdown below.

Go to Appearance> Customize> Front Page Settings> Activities Section
Check Enable Activities Section to display it on your homepage
Enter Section Title and description.
Uncheck Enable Activities Demo Content to hide demo content.
Choose Activities One, Activities Two, ActivitiesThree, Activities Four, Activities Five, Activities six, Activities Seven and Activities Eight.
Click Publish.

Testimonial Section: #

Go to Appearance> Customize> Front Page Settings> Testimonial Section
Enter Section Title and subtitle.
Check Enable Testimonial Demo Content to display demo content it on your homepage when there is no content
Choose a number of testimonials to display.
Choose the Post Order.
Enter View all Label
Enter the Testimonial Link
Click Publish.

Blog Section: #

Go to Appearance> Customize> Front Page Settings> Blog Section
Check Enable Blog Section to display it on your homepage
Enter Section Title and Subtitle
Enter Readmore text and View all Label
Click Publish.

Client Section #

Go to Appearance> Customize> Front Page Settings> Client Section
Click on Add a Widget button and add “WP Travel Engine: Client Logo”.

Enter the section title. Check “Display logo in black and white” to display the logos in black and white. Click “Add Another Logo” to add Logo.

Click Publish.

Sort Homepage Section #

You can short the order of Homepage section and show or hide any section from the homepage using this section.

Go to Appearance> Customize> Front Page Settings> Sort Homepage Section.
Click on the eye icon at the beginning of a section name to enable or disable the section.

Drag the sections up and down to arrange them.
Click Publish.

One page Settings #

Go to Appearance > Customize > Frontpage Settings> Sort or Toggle Frontpage Sections
Enable Section Menu to make home page one page scrolling with the section menu.
Enable Home link to show Home link in the menu.
Enter menu titles for each section
Click Publish.

About Page Settings #

About Page Introduction section #

Go to Appearance > Customize > About Page Template Settings>About Page Intro Section
Click on Add a widget. Add “Text” widget for the title and description. Add “WP Travel Engine: Icon Text” widget for the Introduction section.

Enter Title, Content, Link, Link Text. Click Upload to upload an image or select an icon. You can add more icon text widget by adding more widgets.

Click Publish.

About Template Client Section #

Go to Appearance > Customize > About Page Template Settings> About Page Client Section
Add “WP Travel Engine: Client Logo” for the client Logo.

Enter the section title. Check “Display logo in black and white” to display the logos in black and white. Click “Add Another Logo” to add Logo.

Click Publish.

About Page Service Section: #

Go to Appearance > Customize > About Page Template Settings> About Page Service Section
Add “Text” widget for the title and description. Add “WP Travel Engine: Image Text” widget for the service section.

Enter Title, Content, Link, Link Text and upload an image.

Click Publish.

About Page Testimonial Section : #

Go to Appearance > Customize > About Page Template Settings>Testimonial Section
Enter the Title for the section
Choose the number of testimonials to display
Choose the Posts order.
Click Publish.

Team Section: #

Go to Appearance > Customize > Team Section
Enter the Title for the section
Choose the number of testimonials to display
Choose the Posts order.
Click Publish.

Sort About Page sections #

Go to Appearance> Customize> About Page Template Settings> Sort About Page Section.
Click on the eye icon at the beginning of a section name to enable or disable the section.

Drag the sections up and down to arrange them.
Click Publish.

Contact Template Settings #

Go to Appearance> Customize> Contact Template Settings
Enter the shortcode generated by Contact form 7 plugin
Enable Google Map to show the Google map. If disabled contact template featured image will be used as a fallback.
Enable Scrolling wheel to allow zooming the map
Enable Map controls to display controls icon on the map.
Enable Map marker for marker icon to appear above the map.
Enter Marker Title.
Enter Google API Key
Enter Latitude and Longitude
Enter Zoom level.
Enter Contact Details
Click Publish.

Team Page Template Settings: #

Core member Section #

Go to Appearance> Customize> Team Page Template Settings> Core member Section.
Enable Core member to display it on the page.
Enter the Title and Subtitle.
Choose the number of team members to display
Choose the Post order
Click Publish.

Our Team Section in Team Page #

Go to Appearance> Customize> Team Page Template Settings> COur Team Section.
Enable Our Team to display it on the page.
Enter the Title and Subtitle.
Choose the Post order
Click Publish.

Single Trip Page Settings #

Go to Appearance> Customize> Single Trip Page settings
Enable Related Tips to display related trips on a trip page.
Enter Related Trip Title and Related Trip Read more
Choose Related Trip Taxonomy.
Click Publish.

General Settings #

Header Settings: #

Go to Appearance > Customize > General Settings > Header Settings
Enable Search Form to show search form in the header.
Enter Phone Number
Enable Social Links to display it on your header.
Enter your Social Links
Click on Publish.

404 Page Settings #

Go to Appearance> Customize> General Settings> 404 Page Settings
Check Enable Popular on 404 Page to display popular trips in 404 Page.
Choose popular trips to display
Click Publish.

Social Sharing: #

Go to Appearance> Customize> General Settings>Social Sharing
Enable or disable social sharing buttons on the archive and single posts.
Sort or toggle social sharing buttons.
Click Publish.

SEO Settings #

Go to Appearance> Customize> General Settings>SEO settings
Enable the Last Update Post Date to display the date in which post was last updated
Enable Breadcrumbs
Enter Home Text for Breadcrumb.
Click on Publish.

Post Page Settings #

Go to Appearance> Customize> General Settings> Post Page Settings
Enter Excerpt Length and read more Label.
Enable Category Meta to hide category meta in single and archive page.
Rearrange Post Meta
Choose to Show Prefix in Archive Page
Choose to Hide or Show author Section
Enable or Disable Related Posts after post
Enter the title for related posts
Enable or Disable Recent Posts after post
Enter the title for recent posts
Choose to Show or hide featured Image in posts.
Enable to Highlight Author Comments.
Click Save & Publish.

Sidebar Settings #

You can add and configure sidebars here. But, to add tools to the sidebar you should go to Appearance>Widgets.

Add a Sidebar #

Login to your WordPress Dashboard.
Go to Appearance> Customize> Sidebar Settings
Click Add New sidebar
Give the sidebar a name
Click Save & Publish

You can see the new sidebar in Appearance> Widgets. Add a widget to the sidebar and click save to configure the newly created sidebar.

Configure Sidebar #

Login to your WordPress Dashboard.
Go to Appearance> Customize> Sidebar Settings
Select Sidebars for various Pages, like Blog Page, Single Page, Single Post Page, etc. The sidebar selected under the particular pages will only be displayed on the page. For example Blog Page Sidebar appears only on the blog page.
Click Save & Publish

Misc Settings #

Go to Appearance > Customize > General Settings > Misc Settings
Enable Admin Bar to disable admin bar on frontend when logged in
Enable Sticky Header to stick header at the top.
Enable Scroll to Top to display a button to reach to the top while scrolling down the website.
Click on Publish

Create Menu from Customizer #

Login to your WordPress Dashboard.
Go to Appearance > Customize> Menus in the WordPress Dashboard
Click on Add a menu button

Give a name to your menu name and click Create Menu button

Click “Add Items” to add items (pages, posts, categories, events, services, custom links…) to the Menu
Click “+” icon on the items list to add the item to the menu
Drag and Drop the added items to rearrange them.
Check the Menu location to Primary or Footer
Click Save & Publish

Create Menu from Dashboard #

Login to your WordPress Dashboard.
Go to Appearance > Menus in the WordPress Dashboard
Click on create a new menu.

Give a name to your menu in Menu Name and click Create Menu button.

Select the items from Pages, Posts, Custom Links, or Categories and click “Add to Menu”.

Drag and Drop the added items to rearrange them.
Check the Menu location to Primary or Footer
Click Save Menu

Widgets #

You can add the widgets to the sidebar in two ways, either via Dashboard or Customizer.

Adding Widgets via Customizer #

Login to your WordPress Dashboard.
Go to Appearance> Customize>Widgets
Make sure you are on the page you want to add widgets to.
Click on the desired Sidebar or location (the one you want to add widgets to). You can add widgets on Footer as well.
Click on Add a Widget to add widgets
Select desired Widgets and give the title to the widget.

Click Add a Widget to add more widgets in the sidebar
Drag and reorder the widget as desired
Click Save & Publish

Adding Widgets via Dashboard #

Login to your WordPress Dashboard
Go to Appearance> Widgets
Available widgets are listed on the left-hand side while Sidebars are listed on the right side (including the sidebars you create)
Drag and drop the widgets to the desired sidebars.

Performance Settings #

You can Enable performance settings to make your website load fast. You have options to enable/disable following performance metrics.

Lazy Load of Featured Images
Lazy Load Content Images
Defer JavaScript
Remove ver parameters

To change the Performance Settings:

Log in to WordPress Admin Panel.
Go to Appearance > Customize > General Settings> Performance Settings
Enable Lazy Load to enables lazy loading of featured images.
Enable Lazy Load Content Images to enables lazy loading of images inside page/post content.
Enable/Disable Defer JavaScript
Enable/Disable Remove ver parameters to remove “ver” parameter from CSS and JS file calls
Click Publish

Additional CSS #

You can add extra CSS codes here. If you want to modify the color, fonts, or any other CSS effects, you can enter the code here.

Login to your WordPress Dashboard
Go to Appearance> Additional CSS
Enter your code
Click Save & Publish when you are done.

Footer Section #

The theme has 4 widgets area in the footer. You can add various widgets in the area. To add widgets in the footer, go to Appearance> Customize>Widgets and select the Footer Location (footer one, two, three, four) and add the widgets.

Footer Credit Settings #

You can edit the footer credit using this setting.

Login to your WordPress Dashboard
Go to Appearance> Customize> Footer Settings
Upload a background image for the section
Enter your desired footer credit text
Enable Hide Author Link & WordPress Link to hide credits in the footer section
Click on Publish when you are done.

Helpful Tips #

We highly recommend using Child Theme if you need to change the code of the theme. Do not change the codes in the files of the parent theme as all such changes will be lost when the theme is updated.
Always keep a BackUp of your theme before making any changes to the theme.
If you get any problem in using the theme, you can do the following things:
- Deactivate the plugins, sometimes plugin conflict may cause issues with the theme. Please deactivate the unused plugins.
- Replace the latest modified code with the original code.
- If the issue pertains, feel free to contact us using our Support Ticket

Updated on May 24, 2024