This page contains the help documentation for the Travel Island WordPress theme.
- Responsive Design
- Home Page Slider
- Setting up the Home Page
- Setting up the Contact Page
- Setting up the Main Menu
- Setting up the Gallery
- Header & Logo
- Background Images
- Footer Images
- Custom Widgets
- Custom Shortcodes
- Theme File Structure
- Sources & Credits
Quick Installation Instructions:
- Upload theme zip file
- Activate theme
- Install required and recommended plugins (see note that appears after theme activation)
- Register for automatic updates (Appearance > Options: Envato)
- Insert default content (Appearance > Options: Default Content)
Upon downloading the .zip file from themeforest.net you will have all files inside the theme package. Do not upload the entire file you get from ThemeForest. Extract this zip file and locate the “travel_island_wp_theme.zip” file. This is the one you need to upload to WordPress. Login to your WordPress admin, go to Appearance > Themes, Add new theme, Upload, and then select this “travel_island_wp_theme.zip” file and upload..
Once uploaded, click the activate button. Once activated you should be prompted to install the “Widget Area Manager” plugin and the “Jigoshop” plugin (see screenshot below). Click the relevant buttons to install these plugins. Please contact us via our support system if you have difficulty installing this theme or the recommended plugins. Here is a screenshot of installing those plugins:
For more information on Installing WordPress please see here: http://codex.wordpress.org/Installing_WordPress
Important: Once the theme is installed, you will have a new menu on the left under Appearance called “Options: Envato”. Please go to this new page and enter your envato licence purchase code. This will qualify you for free theme updates, bug fixes and new features. You will be notified in WordPress when a new update is available to this theme. More instructions are available on this page.
You will see a new menu on the left under Appearance called “Options: Default Content” – please go here if you would like to setup your theme exactly like the demo website. This is what the default content screenshot looks like. Easy!
This theme allows you to easily control the position of sidebars (display on the left, right or hidden). Just navigate to the page you wish to change and hover your mouse over the “Left/Right Column” menu on the top admin bar to see all the options. Here is a screenshot showing how easy it is to change the position of the sidebar:
[banner title=”Responsive Design”]Works on iPhone, Tablet and Desktop[/banner]
The design is created in a way that works on desktop, mobile and tablet screen sizes. This is an amazing feature as more and more users are going mobile. Below are some screenshots showing the design on different screen sizes. You can try it yourself by simply shrinking your browser window, or visiting this demo website from your mobile device.
To disable this responsive design please delete this line of code from header.php on line 105: wp_enqueue_style( ‘travel_island_media’ );[banner title=”Home Page Slider”][/banner]
There are two types of home page sliders, one with a sidebar and one without a sidebar. You can also choose the height of your slider (the images are automatically cropped). Here is a screenshot of the slider options:
Here is a screenshot of the slider settings page (simple isn’t it!):
The “home page slider” is a nice animating image slider that you can place on any page of your website (but generally only the home page). You can have as many images in the slider as you like.
Here is the process to setup the slider from scratch:
- Create a new page in WordPress called “Slider” (you can make this a ‘private’ page if you like)
- Go to Appearance > Widgets and drag the “Home Page Slider” widget over to the “Home Slider” sidebar (see screenshot)
- From the new drop down menu select your “Slider” page.
- Click “Save” at the bottom
- Click the “Manage Slider Images” button
- Click “Upload/Insert” media and upload your images as normal
- Click “Show” next to each uploaded image, fill in the “Title” and “Slider Link” boxes. The “Title” is displayed on the right hand side of that slider image on the home page, the “Slider Link” is where users will go when clicking on the slider.
- Once filling in these options scroll down and click “Save All Changes”.
- Almost done!
- Navigate to the home page of your website. At the top you will see the normal admin bar, with a new menu called “Above Content”.
- Please hover over “Above Content” and set the “Position” to “Width of Content”, then hover over “Widgets” and set it to “Home Slider”.
- Go to Pages > Create new
- Create your home page, call it “home” so you can recognise it
- In the text area paste the following two shortcodes. These will create the full width specials banner, followed by a listing of blog posts:
[[banner title=”Special:” link=”Buy Now!” linkhref=”http://tf.dtbaker.com.au/wordpress/travel_island/?post_type=product”]]5 nights accommodation on Hamilton Island for just $799[[/banner]][[fancy_posts columns=”2″ category=”travel-deals” max=4]]
- On the right hand side of this home page, select the “Home Page Template” under the template dropdown.
- Click the publish/update button.
- Go to Pages > Create new again
- Create a blog page, call it “blog” so you can recognise it
- Click the publish/update button.
- Go to Settings > Reading
- Select the “a static page” option
- Select the “home” page you created as the front page.
- Select the “blog” page you created as the blog page.
- Install the free Contact Form 7 plugin (the theme will prompt you to install this at the start)
- Click the “Contact” option at the bottom left of WordPress
- Copy the shortcode, it will look something like this: [[contact-form-7 id=”169″ title=”Contact form 1″]]
- Go to Page > Create new
- Create your contact page, call it “Contact Us” so you can recognise it
- Paste the above shortcode ( [[contact-form-7 id=”169″ title=”Contact form 1″]] ) onto this page.
- Create a Google Map on this page by copying and pasting the below shortcode onto the page. The “Our Studio” bit is what appears in the box in the middle of the map. The address is the actual address where the point on the map will go. The height sets the height in pixels of the map. The enlarge_button option shows an “enlarge map” button under the map, change this from 1 to 0 if you do not want the button to appear.
1 Smith Street,
- Go to Appearance > Widgets
- Click the down arrow on the right of the “Contact” sidebar.
- Drag a “Text” widget from the middle over to the “Contact” sidebar.
- In the “Title” put “Contact Details”.
- In the text area paste this code:
Gold Coast, Australia</li>
<li><strong>P:</strong> 1300 555 555</li>
<li><strong>F:</strong> 1300 555 555</li>
<li><strong>M:</strong> 1300 555 555</li>
- Adjust the text as necessary.
- Drag the “Opening Hours” widget from the middle over to the “Contact” sidebar.
- Fill in the details as required.
- Drag the “Social Icons” widget from the middle over to the “Contact” sidebar.
- Fill in the details (full http:// links to your social pages) as required.
- Go to Appearance > Menu
- Click the “Add Menu” plus sign at the top
- Name your menu Main Menu
- Tick the pages or categories on the left, and click “Add to Menu”
- Drag / drop to re-arrange items on the menu.
- You can have max of two levels drop down in this theme.
- Click “Save Menu”
- On the left under “Theme Locations” please choose your “Main Menu” under the “Primary Menu” drop down and click “Save”.
- (you can repeat this process for the Footer Menu if you like).
- If you are unable to add certain things to the menu (eg: categories, product categories) please click the Screen Options at the top and make sure these are ticked.
- Go to Pages > Add New
- Name your page (eg: Our Gallery)
- Click the Upload/Insert button, and upload your gallery images
- Type the [[ gallery ]] shortcode onto your page.
- Press save.
This theme has a custom options page allowing you to upload your own PNG logo to appear at the top.
If you have trouble uploading the logo via this interface (eg: permission issues) please upload your logo via FTP over the top of the default logo: /wp-content/themes/travel_island/images/logo.png
There are options to control the position of the logo, so you can fine tune
You can also show or hide the header search box, and easily change the text in the phone number (the bit under the search box).
This WordPress theme allows you to choose different Google Fonts for 5 areas of the website: Main Body Font, Header Menu Font, Banner Bar Font (the blue bar you see on home page), Page Title Fonts, and Widget Fonts. Here is a screenshot of the font settings:
The background displays when viewing the website from a large screen on a desktop computer. As the screen size gets smaller (eg: tablet and mobile phone) the backgrounds will disappear. This helps the site load faster. More in the “Responsive Design” above.
The background consists of 4 images. These are in the wp-content/themes/travel_island/images/ folder. These images are called: bg_details.png, bg_sky_water.png, bg_waves_tile.png, bg_waves_tile_cover.png
The easiest way to change the background is to open each of these 4 transparent PNG images into your photo editing program (eg: PhotoShop, Gimp) and adjust as necessary.
Considerable changes to the background are considered advanced, and require moderate photoshop and css skills.[banner title=”Footer Images”][/banner]
The footer image (only displays on desktop with a large screen) is controlled by two images in the wp-content/themes/travel_island/images/ folder. These are footer_decal.png and footer_tile.png[banner title=”Custom Widgets”][/banner]
The theme comes with these custom widgets: social sidebar, opening hours sidebar and image slider
These are detailed in the above documentation.
The theme comes with the following shortcodes: google_map, fancy_posts and banner
Please see the Contact Page instructions above for the google_map shortcode. Please see the home page instructions above for details on the fancy_posts and banner shortcode.
This theme is a WordPress theme. Most of these files are standard WordPress files, so if you know your way around WordPress you will have no problems making the changes you need here. I’ve included a list of what the main files do in this theme below:
|style.css||This css controls all the styles on the website.|
|style.media.css||This css file controls the responsive layout (eg: so it looks good on a smart phone and tablet)|
|style.jigoshop.css||This css file contains modifications to the default Jigoshop stylesheet so that the shop looks nice.|
|/images/||The images used in the constructed website layout|
jquery.flexslider.js – displays the nice image slideshows on the home page
|/plugins/||Contains the default plugins that should be installed along with this theme in order to make it work correctly.|
|/shortcodes/||Contains the default shortcodes used in this theme (eg: banner, fancy posts, google map)|
|/widgets/||Contains the widgets used in this theme (eg: contact details, image slider, opening hours, social icons)|
|header.php||Used to display the header on your blog (logo area and menu).|
|footer.php||Used to display the footer on your blog.|
|class-tgm-plugin-activation.php||This class helps with the installation of the theme, it checks you have jigoshop and plugins installed correctly.|
|dtbaker.fonts.php||Allows you to select which Google fonts to use on your website.|
|dtbaker.shortcodes.php||Controls which shortcodes (from /shortcodes/ folder) are available to you in the theme.|
|dtbaker.theme_options*||These files control the options you see on the left hand side in WP admin under the Appearance menu.|
|dtbaker.widgets.php||This file loads the available widgets (from /widgets/ folder) that can be used on your site. The file also contains the default settings for the sidebar options.|
|functions.php||The main theme functions, a standard wordpress file.|
|functions.jigoshop.php||This contains some modifications to the jigoshop system, if you choose to use jigoshop this will help it look nicer.|
|template-home.php||This is the template you will apply to your home page.|
|content-single.php||This displays a single blog post|
|content.php||This displays the main blog posts page (with excerpts, read more buttons, and thumbnails)|
|content-page.php||This displays individual static pages|
|index.php||The main wordpress loop for the main blog page (makes use of the content.php file above)|
|archive.php, author.php, category.php, image.php, page.php, search.php, single.php, tag.php||Normal wordpress files|
|sidebar.php||A blank sidebar file. This theme uses the widget sidebar manager (above)|
We provide free & premium paid support via our dedicated support website. Please see here for more details: http://support.dtbaker.com.au/support-ticket.html[banner title=”Sources and Credits”][/banner]
I’ve used the following images, icons or other files as listed.
social icon set: http://thewpninja.com/simple-
logo icon: http://www.freevectors.net/
horizon clouds: http://www.freevector.com/
palm trees: http://www.designshoot.com/
surfer 2: http://www.vectoropenstock.
umbrella, ball, shoes: http://graphicriver.net/free/
Vector Inside Pages:
All photos were taken by myself and are royalty free.