wpVoyager

wpVoyager & TravellerPress Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on themeforest.net/user/purethemes. Thanks so much!


Author: Purethemes
Created: 03 July 15
Modified: 03 July 15
Current Version: 1.0
Documentation Version 1.0

This documentation in latest version is always available on docs.purethemes.net/wpvoyager

I assume you have your own WordPress installation, so let's get started!


Installation

You can do it in two ways:

  1. FTP Upload:
    • Extract the “wpvoyager.zip”
    • Open up your FTP manager and connect to your hosting
    • Browse to wp-content/themes
    • Upload the wpvoyager theme folder.
    • Log Into WordPress and go to Appearance - Themes
    • Find the wpVoyager and click activate
  2. WordPress Upload
    • Download the “Installable WordPress file only” you'll find it here

    • Navigate to Appearance Add New Themes Upload.
    • Follow the instructions on the screen, select the downloaded theme folder (“wpVoyager-theme.zip”).
    • Hit Install Now and the theme will be uploaded and installed.

Once the theme is uploaded, you need to activate it. Go to Appearance Themes and activate wpVoyager.

 

Plugins installation - step I

If installation was successful, you'll see a notice about required plugins for wpVoyager, to proceed click "Begin installing plugins"


Plugins installation - step II

You'll see a list of plugins, select all and choose Install, if everything will go OK, you'll be moved to the Plugins menu in wp-admin, all new plugins should be activated

It might happen that you'll encounter error, in that case install plugins one by one.

The most important and requried plugin is TravellerPress. WP Post Series is needed for a creating posts series (for example group posts from one travel), Purethemes.net Shortcodes, Followers and Web Fonts Social Icons WP are used for various features like social icons or shortcodes generator. It's recommended to install them

If you installed required plugins and don't need anything else, just click Dismiss this notice


After activating the theme, you will notice under Appearance menu new sub-menu Theme Options. You'll find there Theme Options Panel, from where you can do a lot of cool stuff. Every section of Theme Options Panel will be described later.


Now open this Options Panel and hit Save button - it will set some options for the start.


If you want to have the same content on your website as Live Preview of wpVoyager theme, you'll need to import demo content. To do that please go to Tools Import WordPress, install plugin you'll see and than select file "extras/import.xml". You'll find it in "All files & documentation"

Notice All photos included with import file are just plain gray color, as they are copyrighted files purchased on PhotoDune. If you want to use them, list of links is at the end of this documentation.

If your import was successful, please go to Appearance Menus and in Manage Locations and for 'Primary Menu' choose "Menu", than save.

Next, you should setup your permalinks to look pretty. You can go to Settings Permalinks, choose the Custom Structure, and use this: /%category%/%postname%/

This theme uses WordPress 3.0 Custom Menus. Go to Appearance > Menus and you will see a panel where you can create new menus. Create one, add your created pages to it(from the left side panels) and save it. After this, go to tab Manage Locations where you can select the Menu from dropdown box . Choose your newly created menu, click Save and your menu is ready.

Post

Creating posts is nothing special if you have even basic experience with WordPress. wpVoyager theme offers couple of additional options in Post editor.

Post types

wpVoyager supports two format of posts - gallery and video. You can change it in right side box. Default is Standard - that one shows only text of post and thumbnail image if added. Each change will show a form with options to fill. For Video, just put there a link to a vide from youtube,viemo, or any other service that has support for oEmbed.

Below Editor you'll see Layout box and Post options box.

Layout

Layout gives you ability to select sidebar to display with post or page, and also select layout of post - you can put sidebar on left or right side, or just show full-width content.

Sidebar

You can create more sidebars in Theme Options in Sidebars section. Just follow instruction there. After that you will be able to add Widgets to them in Appearance -> Widgets, and that way create

Post lead section type

You can display post (the top part) in three ways.

  • Map - the full width map that will show all the markers and other elements you've posted on your map
  • Full width photo - instead of a map you'll have a full size photo with parallax effect - you can upload and select the image below in "Post lead full screen image" - if you won't do it, the Featured Image set for the post will be used.

    It should be 1920x590px, if the original image is bigger it will be cropped and resized by WordPress

  • Simple header - just standard header and post content.

If you want to use shortcodes in post content, you need to write the excerpt or you might see non parsed shortcodes in search results or in front page.

Layout box

Layout box gives you ability to select sidebar to display with post or page, and also select layout of post - you can put sidebar on left or right side, or just show full-width content. Full width is default.

Sidebar

You can create more sidebars in Theme Options in Sidebars section. Just follow instruction there. After that you will be able to add Widgets to them in Appearance -> Widgets, and that way create

Slider

If you'll change your Page Template to "Page with Slider", you can select here which slider will be displayed

Parallax header

You can set for a page a Parallax header using this set of options in Page Editor. Example of that page is our Contact Page

Title bar status on this page

This is not related to parallax - this option is set to ON by default, if'll switch it to OFF it will simply disable the titlebar, so your content will be directly under the menu. Usefull for some custom pages.

Parallax header background

By uploading/selecting any image here, you'll enable Parallax header. Image should be 1920px wide and min 300px high

Overlay color & opacity

Change the color of the overlay of parallax - it makes text more readable on bright images

Subtitle

Optional subtitle for the parallax. Check our Contact Page to see how it looks

The main feature of wpVoyager comes from the TravellerPress plugin. It's our plugin made for easy map managment - you can simply draw on the map markers, polylines, polygons, or add KML layers of the places you've visited.
Here's how to use the map feautres

Global map

This is the map that is displayed on front page. You can change settings of that map in Appearance -> Theme Options -> Home Page.

Global map displays all main markers of posts. Each post has option to set Main marker that will represent this posts on map.

Setting Main Point



You can set that marker in various ways. The easiest would be to just drag and drop it to the place you want. This should fill both adress and Latitude and Longitude fields.
Other way is to type address of the place you want to select. Thanks to autocomplete feature, it will use the same way of autocompleting addresses as the Google Maps use. Just confirm the address from the dropdown, and it should fill the Latitude and Longitude fields.
You could also put the Lat/lng coordinates manually by simply writing them in fields. To display marker on map, the lat/lng is used, not the actuall address, so those fields are more important.

Main Infobox

Now, you can change the content of the marker's infobox. You can select any image (if you won't, the Featured Image set in post will be used), change the icons color using ColorPicker, or set your short custom text for the marker (if you won't, it will show first 16 words from the post content)

Map elements editor

This is the map that is displayed in post header section (the same as global map) but it additionally uses polylines, polygons, and KML layers.

Adding markers

To add a marker you need to first click the blue button "Add the marker" - it will add new element to the list and drop new marker to the center of your map. Now, just like with Main Marker, you can drag and drop, or type and choose the address from dropdown in address field.

By clicking the arrow next to address, you'll access details of the marker infobox.

By clicking the green icon, you'll be moved to the marker if it's out of your map view.



Now, you can change the content of the marker's infobox. You can select any image (or don't), change the icons color using ColorPicker, set the title (if you won't the address of marker will be used) or set your short custom text for the marker



Adding polylines

To add a polyline you need to first click the blue button "Draw new polyline" - it will add new element to the list. Now to start drawing polyline just click on the map. Each click will add new marker (they are draggable, so you can edit polyline that way). When you want to finish drawing, click the "Stop" button -

By clicking the arrow next to address, you'll access details of the marker infobox.



Now, you can change the content of the marker's infobox. You can select any image (or don't), change the icons color using ColorPicker, set the title (if you won't the address of marker will be used) or set your short custom text for the marker



Adding polygons

To add a polygone you need to first click the blue button "Draw new polyline" - it will add new element to the list. Now to start drawing polygone just click on the map. Each click will add new marker (they are draggable, so you can edit polygone that way). When you want to finish drawing, click the "Stop" button -

By clicking the arrow next to address, you'll access details of the marker infobox.



Now, you can change the content of the marker's infobox. You can select any image (or don't), change the icons color using ColorPicker, set the title (if you won't the address of marker will be used) or set your short custom text for the marker



Adding KML Layers

To add a KML layer you need to first click the blue button "Add new KML layer" - it will add new element to the list. You just need to upload your KML file (or paste the URL if it's already hosted somewhere). You want see it on map unless you save the changes (you don't have to publish post yet, you can save it as Draft)

KML layer doesn't have any extra options as the file itself may contain all the overlays etc.

Example of KML layer


Single Map Options

You can change the map settings for each post.

  • Map type there are 4 defaults map types you can choose from
  • Map zoom the default settings is "auto". The map will adjust itself to show all elements on it. Sometimes, the zoom is set to close, or some elements are hidden below header or just not visible clearly, you can set the max zoom for the map to keep it further
  • Map styles you can use custom map styles with Google Maps so you won't need to use always the same boring map. There are two big sites with pre-made styles: Snazzy Maps and Mapstylr
    First you need to add styles to the plugin, to do that, go to Settings -> TravellerPress and click Add New Style, and paste the JavaScript Style Array or JSON code from the map style you've chosed on of the sites. Choose a name, save, and now in Post Options you'll be able to select that style.

You should use contact form 7 plugin for contact form. After installing it, go to Contact - Add new (or edit current one) and in Form field paste what's below:

                                    
<fieldset>
    <div>
         [text* name id:name placeholder "Name"]
    </div>

    <div>
        [email* email id:email placeholder "Email Address"]
    </div>

    <div>
       [textarea* textarea-682 placeholder "Message"]
    </div>
</fieldset>
<div id="result"></div>
[submit id:submit class:submit "Send Message"]
<div class="clearfix"></div>



                                    

Than at the top of page you'll see shortcode, for example (it will be different on your website):

[contact-form-7 id="503" title="Contact form 1"] 
Use it on a page you want to have contact form.

Here's some short info about basic plugins you can and need to use in wpVoyager.

This will add new icon to your TinyMCe editor (the one you use to edit posts and pages) that will open a box with shortcode generator.

Lets you setup a simple series of posts using taxonomies. Posts within a series will show an information box above the content automatically with links to other posts in the series and a description.

Adds a widget with icons and number of followers/fans from popular social sites. To use it, please first put all required API keys in Settings -> Followrs. It won't work without that! (You can put APIs only for services you want to use)

Adds a widget and shortcode with icons from popular social sites. Example here

If you're using MailChimp for sending mailings, you can get subscribers by using official MailChimp Widget plugin that is nicely styled for wpVoyager.

This will replace standard "next/prev" page buttons with pagination list.

wpVoyager has many shortcodes which will help you to build awesome layouts. In "extras" folder you have sample layouts saved as text files, so you can just copy them to your Editor and use them as a base for your site.

Here is list of all shortcodes:

[clear]

Empty div with clearfix, use after floated elements

[icon icon="book"]

This will add one of icons from Font Awesome pack

[tooltip title="" url="" side=""] text [tooltip]

Create tooltip over link, showed on hover.

Options
  • title
  • url
  • side top | left | bottom | right
[list style=1 color="yes"]
<ul>
<li> list item </li>
<li> list item </li>
</ul>
[/list]
                            
Options
  • style 1 | 2 | 3 | 4
  • color yes | no

Use it to replace boring list bullets with nice icons

[quote author="Laurie Colwin" source="http://google.com"]No one who cooks, cooks alone. Even at her most solitary, a cook in the kitchen is surrounded by generations of cooks past, the advice and menus of cooks present, the wisdom of cookbook writers.[/quote]

Nicely styled quote box

Options
  • author name of author
  • source link to source
[space class="margin-top-30"]

This works like [clear] shortcode but allows you to add custom class, for example to make some whitespace. There are couple class available, margin-top-xx, margin-bottom-xx where xx can be number 0,10,15,20,25,30,35,40,45 or 50

[space class="margin-top-30"]

This works like [space] shortcode shows horizontal grey line

wpVoyager is based on modified Skeletons grid - Full width page has 16 columns, if it's page with sidebar it has 16 columns. Using columns shortcodes you can build your own layouts.

The important part of columns shortcode except the width is place. You have 3 options here - first, none or last. If last is used, it's assumed that this column is last in current row and floats will be cleared. First  will set margin-left to 0px. If you have more than two columns you might want to use also place="center" - it will set margin left and margin right to 0px. It's good to try different parameters to find out what looks the best in specific situation.


[column width="one-third" place="first" ] Put here content [/column] [column width="two-thirds" place="last" ] Put here content[/column]
                            
Options
  • width "1/3", "2/3", "sixteen" (default), "fifteen", "fourteen", (..), "two", "one"
  • place "first" (default), "center", "last", "none"
  • custom_class just adds custom class to the container div, handy if you want to style something in different way

You can use other shortcodes in columns.

It need's to be wrapped with [accordionwrap] shortcode

[accordionwrap] [accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, condiment ultrices consequat eu lorem ipsum dolor sit amet inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo dolor sit amet.[/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion][accordion title="Accordion#1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit tortor libero sodales leo, eget blandit nunc tortor eu nibh. Aenean nisl orci lorem, [/accordion] [/accordionwrap]
                    
[tabgroup] [tab title="Tab 1"] Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 2"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit.[/tab] [tab title="Tab 3"] Lorem ipsum pharetra felis. Aliquam egestas consectetur elementum class aptent taciti sociosqu ad litora torquent perea conubia nostra lorem inceptos orem ipsum dolor sit amet, consectetur adipiscing elit. [/tab] [/tabgroup]
                    
[dropcap type=""] A[/dropcap]

Make first letter of paragraph larger than the rest of the text. As "type" you can use also 'full'.

[highlight style=""] text [highlight]

This will highlight wrapped text.

Options
  • style "color" (default), "gray", "light"
[box type=error] Error! Please fill in all the fields required. [/box]
                            
Options
  • type "error", "notice", "warning", "success"
[button color="green" url="#" icon="icon-ok" iconcolor="white"] Text [/button]
                            
Options
  • url link
  • color "color" (default), "gray", "dark"
  • customcolor "#000000" (any color hash)
  • iconcolor "white","black"
  • icon Font Awesome icon name
  • target "_blank"
  • customclass
[shareit facebook="yes" pinit="yes" twitter="yes" gplus="yes"]
                            
Options
  • facebook - set to "yes" to show button
  • pinit - set to "yes" to show button
  • twitter - set to "yes" to show button
  • gplus - set to "yes" to show button
[slider ids="1,2,3,4" caption="yes" fullwidth="no" order="ASC" orderby="menu_order ID"]
                            
Options
  • ids - IDS of images you want to show in slider (using Purethemes Shortcodes plugin you'll have media window to select images you want)
  • caption - shows title of images in slider
  • fullwidth - set to "yes" if you want to have slider wider than the content of page
w
[photogrid ids="1,2,3,4" columns="two" caption="yes" fullwidth="no" order="ASC" orderby="menu_order ID"]
                            
Options
  • ids - IDS of images you want to show in slider (using Purethemes Shortcodes plugin you'll have media window to select images you want)
  • columns two | three | four | five | six | - tells in how many columns should the photos be displayed
  • caption - shows title of images in slider
  • fullwidth - set to "yes" if you want to have photgrid wider than the content of page
  • wpVoyager MailChimp List Signup
    Works only if you have installed plugin named 'MailChimp Widget'
  • wpVoyager Author
    Dispays informations about author of current post or about selected author
  • wpVoyager Posts
    Shows posts by the order

Options panel is based on amazing OptionsTree plugin.

Home Page
  • Front Page settings - you can decide what you want to show of front (home) page - it can be global map with all posts markers, a slider you've created in WPV Slider, or just nothing and have simple header with lists of posts
  • Select Sldier if you'll decide to show slider on front page, choose here which one.
General
  • Comments on pages if you don't want to have comment box on static pages, set this option to Off to hide them on every page
  • Custom CSS any small CSS changes should be done here (or in child theme) to keep them after update
Typography

You can choose from one of 500+ Google fonts. Select font for body and for headers. You can also just choose some nice font for a logo if you prefer to have text logo instead of image.

You need to first Add Google Font and Save Changes to be able to choose font from the list

Header
  • Header over the map (boxed/full-width) If set to ON header will be switched to boxed mode and displayed over the map, if OFF, it will be full-width and the map will be displayed below it. This setting is ignored on pages with slider or default header
  • Logo settings You can upload logo image here and adjust it's position using margins
  • Logo area width Full width of top area is 16 columns. Logo area by default is 13 columns, while icons and contact details area is 3 columns wide. If you want to have bigger logo, please change here number of columns for logo.
Blog

You can set here some basic thing for the blog, like layout, informations displayed on posts, and social icons below posts

Footer

You can set widgets layout, copyrights text and add the Fun Facts section

Sidebars

All sidebars that you create here will appear both in the Appearance > Widgets, and then you can choose them for specific pages or posts. Please choose a unique title for each sidebar and make it one word.

wpVoyager is using new feature of latest WordPress - Theme Customizer, you'll get there by clicking Appearance - Customize

It gives you real time preview of changes you made to your site.

wpVoyager theme is translation ready. I assume your WordPress is already in your language. If not:

  1. Go to: Dashboard > Settings > General and change the Site language.
  2. Open wp-config.php and modify the line below, or add it if it is missing.

For German language it will be:

 define ('WPLANG', 'de_DE'); 

There are three ways to translate it to your language:

Method 1 - using Loco Translate

Install plugin Loco Translate. After successful installation go to Loco Translate -> Manage Localization, you should see this screen:

Codestyling localization

Click New language, select your language and click Start Translating.

Now you should see that screen where you can translate each string that is used in theme:

VFCtaJT

When you're done, click Save, and you can also click both "Po" and "Mo" buttons to save them on your PC as a backup.

Method 2 - using Codestyling Localization

Install plugin Codestyling Localization. After successful installation go to Tools -> Localization, you should see this screen:

Codestyling localization

Click Themes (if you'll see any timeout errors etc., click the 'enable low memory code' checkbox) and find wpvoyager on the list:

Here we already have English and Polish version Here we already have English and Polish version

Now we can add new languages, let's add German. Click Add New Language, in the popup find 'de_DE' and click "create po-file'.

German language should appear on the list.MTHLs5B

Click Rescan button and than 'Scan now' in new popup. After that you can click Edit on the list.

This how it should look now:

J1nQDpX

You can translate here every string that comes in the theme, and after you do it click Generate mo-file

There's a notice message on the top:

Warning: The actual loaded translation content contains mixed textdomains and is not pure translateable within one textdomain. It seems, that there is code contained extracted out of other plugins, themes or widgets and used by copy & paste inside some source files. The affected unknown textdomains are: woocommerce, option-tree
All strings that are from WooCommerce textdomain will be translated automatically if your WooCommerce is in the same language as you set (so German in this example). Read more about WC localization - Translating WooCommerce

 

Method 3- using PoEdit

Download PoEdit and run it.

Zrzut ekranu 2014-10-25 00.42.09

Click 'Create new translation', navigate to wpvoyager/languages,  and select en_US.po (you might need to switch filter on the browser from *.pot to *.po). Select your language"

Zrzut ekranu 2014-10-25 00.46.33  

now you can translate one by one each string from the theme, after you finish (you don't need to translate everything, save the file as for example fr_FR.po, not fr.po like PoEdit suggest. That should generate two .po and .mo file.

 

Making your Localization upgrade safe

Keep a backup of your translation in safe place, as WordPress might remove files during auto-updates, and you probably wouldn't want to lose it :)


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.