Travel Island – WordPress Theme Documentation

item_preview-wordpress

Author: dtbaker
Created: 12th November 2014
Tested with: WordPress 4.2
Tested plugins: WooCommerce  2.3.13 + WidgetAreaManager 1.53 + Contact Form 7 v4.2.1 + Social Icons by Fairhead Creative + Column Shortcodes v0.6.6 + W3 Total Cache v0.9.4.1
WPML and RTL compatible
View online demo: click here
Download theme: click here

Theme Documentation

[dtbaker_accordion]

Theme Installation

Please watch this instructional video showing how to install this WordPress theme and setup default content:

 

Below are the step by step instructions:

  1. Purchase the theme from ThemeForest.net
  2. After purchasing go to your Downloads page ( http://themeforest.net/downloads )
  3. Click on the Download button and choose the Installable WordPress file option and save this ZIP file to your desktop.
  4. Login to WordPress and go to Appearance > Themes > Install Themes
  5. Click the Upload tab
  6. Choose the downloaded ZIP file from your desktop and click upload
  7. Go back to Appearance > Themes and click Activate on the Travel Island theme.
  8. Note: If you are prompted to install Widget Area Manager please follow the prompts. If for some reason this plugin does not install automatically please download it from here and install it like a normal plugin: click here. The Widget Area Manager is required for this theme to operate correctly. It will allow you to control the position of sidebars and what content to display in them.
  9. Continue below for setting up default content…

Here is a screenshot showing step by step instructions for installing the theme:

download_screenshot

Default Content:

( this step is also covered in the video screencast linked above )

You can optionally install the default content so the theme looks exactly like the demo site ( travel-island-wordpress-theme.dtbaker.net ).
Please only do this on a fresh new empty WordPress website – installing default content on an active existing website could cause problems, and the end result probably wont look like the demo.

default-wordpress-content-settings

If you wish to install the default content please follow these steps exactly:

  1. Install and activate the theme as mentioned above.
  2. Make sure all required plugins are installed and activated
  3. Go to Appearance > Default Content and follow the instructions

Done, your new WordPress website should now look identical to the live demo.
If it doesn’t or you need assistance please send us an email and we can happily help get you up and running: http://dtbaker.net/envato/support-ticket/

Sidebars

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:

Responsive Design

Works on iPhone, Tablet and Desktop

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’ );

Home Page Slider

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:

  1. Edit the page you wish to insert the slider on
  2. Click the “Add media” button above the text editor
  3. Choose the “Create Gallery” option on the left
  4. Select (or upload) the images you wish to use in the slider ( 920px x 600px is a good image size to use)
  5. Click the “Create a new gallery” button
  6. Enter a caption under each image
  7. Set the “Size” to “Home slider 2”
  8. Set the “Gallery Type” to “Home Image Slider”
  9. Click “Insert new gallery” button.
  10. Save the page and preview the result.

Setting up the Home Page

  1. Go to Pages > Create new
  2. Create your home page, call it “home” so you can recognise it
  3. 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]]
  4. On the right hand side of this home page, select the “Home Page Template” under the template dropdown.
  5. Click the publish/update button.
  6. Go to Pages > Create new again
  7. Create a blog page, call it “blog” so you can recognise it
  8. Click the publish/update button.
  9. Go to Settings > Reading
  10. Select the “a static page” option
  11. Select the “home” page you created as the front page.
  12. Select the “blog” page you created as the blog page.
Note: if you insert the default content (see above) all this will be done for your automatically.

Setting up the Contact Page

  1. Install the free Contact Form 7 plugin (the theme will prompt you to install this at the start)
  2. Click the “Contact” option at the bottom left of WordPress
  3. Copy the shortcode, it will look something like this: [contact-form-7 id="169" title="Contact form 1"]
  4. Go to Page > Create new
  5. Create your contact page, call it “Contact Us” so you can recognise it
  6. Paste the above shortcode ( [contact-form-7 id="169" title="Contact form 1"] ) onto this page.
  7. 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.
    [[google_map address=”Gold Coast, Australia” height=400 enlarge_button=1]Our Studio:
    First Floor,
    1 Smith Street,
    Gold Coast,
    Australia[/google_map]]
  8. Go to Appearance > Widgets
  9. Click the down arrow on the right of the “Contact” sidebar.
  10. Drag a “Text” widget from the middle over to the “Contact” sidebar.
  11. In the “Title” put “Contact Details”.
  12. In the text area paste this code:
    <ul>
    <li><strong>Address:</strong><br>
    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>
    </ul>
  13. Adjust the text as necessary.
  14. Drag the “Opening Hours” widget from the middle over to the “Contact” sidebar.
  15. Fill in the details as required.
  16. Drag the “Social Icons” widget from the middle over to the “Contact” sidebar.
  17. Fill in the details (full http:// links to your social pages) as required.
Note: if you insert the default content (see above) all this will be done for your automatically.

Setting up the main menu

  1. Go to Appearance > Menu
  2. Click the “Add Menu” plus sign at the top
  3. Name your menu Main Menu
  4. Tick the pages or categories on the left, and click “Add to Menu”
  5. Drag / drop to re-arrange items on the menu.
  6. You can have max of two levels drop down in this theme.
  7. Click “Save Menu”
  8. On the left under “Theme Locations” please choose your “Main Menu” under the “Primary Menu” drop down and click “Save”.
  9. (you can repeat this process for the Footer Menu if you like).
  10. 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.

Setting up the gallery page

  1. Go to Pages > Add New
  2. Name your page (eg: Our Gallery)
  3. Click the Upload/Insert button, and upload your gallery images
  4. Type the [[ gallery ]] shortcode onto your page.
  5. Press save.

Header & Logo

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).

Fonts

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:

Background Images

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.

Footer Images

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

Custom Widgets

The theme comes with these custom widgets: social sidebar, opening hours sidebar and image slider
These are detailed in the above documentation.

Custom Shortcodes

The theme comes with the following shortcodes: google_map, fancy_posts, icon 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.

Installing the online shop (WooCommerce)

  1. If you wish to sell products please install WooCommerce
  2. Go to Plugins > Add New and search for “WooCommerce”
  3. Click install
  4. After installation, click activate.
  5. Go to WooCommerce > Settings and configure your preferences
  6. Further details about installing and using WooCommerce are available here:
    http://docs.woothemes.com/document/woocommerce/
  7. Further help and support for using WooCommerce is available here:
    http://www.woothemes.com/woocommerce/

Linking the WooCommerce shop to your Facebook Page

This theme comes with bonus Facebook WooCommerce Integration! This allows you to add a “Tab” to your Facebook Business Page like this:
Note: this only works if your website has an SSL certificate (ie: check that https://yourwebsite.com works first)

By adding a page tab you can get a custom shopping cart icon as shown in the below screenshot (this icon can be anything)

img_52798e39161b8

When users click on this icon they are taken to a special shop page showing all your products. Users can add products to their cart directly from Facebook and then checkout via your website

img_52798e4a9ff51

To install this plugin please look for the ‘plugins/woocommerce-facebook.zip‘ file located in the theme download zip file.
Contact us if you cannot locate this file.
Once you have this plugin file you can install it to WordPress by going to Plugins > Add New > Upload and follow the prompts.
After activating the plugin you will find a new menu under WooCommerce > Facebook – this has detailed instructions on setup.

Basically you want to go to https://developers.facebook.com/apps and create an app with settings similar to this:

img_5279862253545

If you have difficulties following the instructions located under WooCommerce > Facebook please contact us and we can assist.

Theme File Structure (advanced)

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.cssThis css controls all the styles on the website.
style.media.cssThis css file controls the responsive layout (eg: so it looks good on a smart phone and tablet)
style.jigoshop.cssThis css file contains modifications to the default Jigoshop stylesheet so that the shop looks nice.
/images/The images used in the constructed website layout
/js/javascript.js – helps the menu look nicer in older browsers
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.phpUsed to display the header on your blog (logo area and menu).
footer.phpUsed to display the footer on your blog.
class-tgm-plugin-activation.phpThis class helps with the installation of the theme, it checks you have jigoshop and plugins installed correctly.
dtbaker.fonts.phpAllows you to select which Google fonts to use on your website.
dtbaker.shortcodes.phpControls 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.phpThis 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.phpThe main theme functions, a standard wordpress file.
functions.jigoshop.phpThis contains some modifications to the jigoshop system, if you choose to use jigoshop this will help it look nicer.
template-home.phpThis is the template you will apply to your home page.
content-single.phpThis displays a single blog post
content.phpThis displays the main blog posts page (with excerpts, read more buttons, and thumbnails)
content-page.phpThis displays individual static pages
index.phpThe 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.phpNormal wordpress files
sidebar.phpA blank sidebar file. This theme uses the widget sidebar manager (above)

Support

We provide free & premium paid support via our dedicated support website. Please see here for more details: http://dtbaker.net/envato/

Sources and Credits

I’ve used the following images, icons or other files as listed.

Fonts:

Amaranth http://www.google.com/webfonts/specimen/Amaranth
Lobster http://www.google.com/webfonts/specimen/Lobster
PT Sans http://www.google.com/webfonts/specimen/PT+Sans

Icons:

social icon set: http://thewpninja.com/simple-social-media-icon-pack/

Vector Backgrounds:

logo icon: http://www.freevectors.net/details/Set+Of+Vector+Elements
plane: http://www.vectoropenstock.com/3242-Earth-Life-vector
birds: http://www.freevector.com/tropical-landscape/
horizon clouds: http://www.freevector.com/summer-beach-vector-art/
boat: http://www.vectoropenstock.com/3242-Earth-Life-vector
surfer: http://www.vectoropenstock.com/3858-Surfing-Waves-vector
dolphins: http://www.vectoropenstock.com/3242-Earth-Life-vector
palm trees: http://www.designshoot.com/palm-tree-vector-silhouette-with-sunset-colored-background.html/
surfer 2: http://www.vectoropenstock.com/2847-Rowinger-vector
family: http://www.freevectors.net/details/Family+Silhouettes
chair: http://www.vectorious.net/img-summer-background-vector-background-15851.htm
umbrella,    ball,     shoes: http://graphicriver.net/free/holiday-vector-illustrations/?ref=gfxguide

Vector Inside Pages:

world map: http://www.vectoropenstock.com/148-World-map-%284-colors%29-vector

Photos:

All photos were taken by myself and are royalty free.

[/dtbaker_accordion]

Leave a Reply

Your email address will not be published. Required fields are marked *