WordPress Guide. v WorldTicket WordPress manual, 16 MAY / 23

(1)

WordPress Guide

(2)

1 Introduction

This guide will assist you in..

1.Selecting the type of booking flow integration you need, and enabling you to understand the three options, and their advantages and complexities

a.WordPress based on a child theme of WorldTicket template (Theme) (Recommended) b.WordPress using your own template (Theme)

c.Any other CMS or Website solution

2.Installing the Booking Flow, depending on your choice for integration

If you have questions, comments or suggestions for this guide or our WordPress plugin, please contact Customer Support.

Examples of customer booking flows

www.bornholmerflyet.dk – responsive web design www.igavion.fr – normal web design www.enterair.pl – normal web design www.flynonstop.no – highly customized styling www.krohnair.no – normal web design

1.1 Document Information

The current list of changes is below

Date Version Changes

02-01-2013 1.0 Document Created from internal

version

04-04-2013 1.1 Added information about the use of

Child Themes

22-05-2013 1.2 Change layout, added live

customers

30-09-2013 1.3 Updated with information about the

3 options for integration

17-10-2013 1.4 Structure and clarification

1.1.1 1.2 Functional Overview of Booking Flow

The booking flow contains a number of pages with components called widgets.

(5)

On the landing page, there is the QuickBook widget, that links to the booking page. Using the QuickBook widget will lead to the second screen on the booking page called Flights.

Booking page, contains the booking wizard widget includes all the screens needed to purchase tickets. Additionally it is possible to have sidebar widgets such as, your choice, booking rules, price calculator, SSR calculator and login link.

Additionally there is a low fare calendar, and a self service page with the booking list widget

1.3 Selecting your Web-solution

In the previous document, choosing_implementation, the three possible solutions was described including the consequences of the choice made.

The possible solutions are:

A) Use WordPress and follow our guide B) Use WordPress, but alter the themes and structure C) Use another CMS system

If you are in any doubt, read the document again and contact your WorldTicket Professional Service Consultant

(6)

WorldTicket theme, WorldTicket plugin, and qTranslate plugin

2.1 Prerequisites

Before we can begin installing our Plug-In, we need to have the following in place.

1) You need to have access to a Web Server with the technical components for WordPress WordPress requires PHP and MySQL. If you do not have access to WebServer you need a Web Server for local use, for e.g. development or demo purposes, then XAMPP from Apache is a good and easy choice - http://www.apachefriends.org/en/xampp.html

2) You need a WordPress installation, preferably in the latest version

If you do not have a WordPress, the latest version of Wordpress can be downloaded here: http://wordpress.org/latest.zip

Easy Install guide on XAMPP and WordPress can be found here http://wpmu.org/install-wordpress-locally-on-windows-with-xampp/ Full and Official WordPress install guide can be found here

http://codex.wordpress./Installing_WordPress

Latest version of WordPress that has been tested by WorldTicket is 4.2.2

3) You need to have the WordPress Plugin qTransate-x installed and active

You can find this in your WordPress administration page /wp-admin/ and search for

qTranslate-x

Select Install Now

WordPress will now download and install the plugin When done select

Activate Plugin

4) You only have the relevant Languages in Settings > Languages enabled

5) You also need basic knowledge on WordPress

(7)

2.2 Steps to get you up and running

The steps include:

1) Installing the Themes 2) Installing the Plugins

3) Setup WorldTicket Plugin for WordPress 4) Doing the CAS Setup – if needed

5) Configure WordPress further

2.3 WordPress Theme installation

Download the WorldTicket Theme file

http://www.worldticket.net/wpplugin/worldticket_theme.zip Go to your WordPress admin page, and navigate to

Appearance > Themes > Install Themes

When WordPress is done, you must activate the theme, by selecting Activate

NOTE: that if you are trying to INSTALL with option “B”, you should not click Activate, however

you still need to download it to access the CSS file necessary for the plugin to function properly.

(8)

2.4 WordPress Plugin installation

Download the WorldTicket Plugin file

http://www.worldticket.net/wpplugin/worldticket_plugin.zip Go to your WordPress admin page, and navigate to

Plugins > Add New

Select Upload and Choose File and select the location where you saved the worldticket_plugin.zip

When WordPress is installed the plugin successfully, select Activate Plugin

The WordPress plugin is activated if you see the message Plugin Activated.

(9)

● JavaScript resources relative path – the path where application has been installed

(/sms_name) – Note the name is wrong. It should not be called “relative” since it could be absolute, if it is not placed on a worldticket.net server (domain name

myairline.worldticket.net ). if in doubt contact your WorldTicket Consultant.

● CAS properties (mandatory if CAS used) - /, /booking, /settings.php

● Single sign out server names to trust (mandatory if CAS used) - sms.worldticket.net or

Press Apply, and the Components configuration should be expanded to contain a form as below. Note sometime this can be a bit slow to appear if its not working try pressing apply again.

(10)

If this does not happen, try setting the JavaScript resources relative path to , http://www.worldticket.net/sms-demo and press Apply

The above will show that the plugin is working as expected, but you need to set the relative path to the right path of your web server in order to get everything working. The likely scenario is that the path should be /sms-name where name is your airline name, but this is installation dependent. If you have your solution hosted at your own site, set this path to be the URL of the location of SMS, minus the “/sms-airline” path.

I.e. http://yourairline.worldticket.net/yourairline/sms-airline/ becomes E.g. http://yourairline.worldticket.net/yourairline/

Set the following parameters in the form below.

1) Check or set parameter Quickbook > Show airline calendars

(11)

3) If we don't use CAS we'll have to setup some other parameters:

Login links widget > Login form URL and set name of page where login form are placed.

Usually it is bookinglist/

Login links widget > Logout URL set the same value bookinglist/

Remember to select the Apply configuration button.

The Plugin is now installed and the initial configuration is done. For further info, see the detailed manual information on

Configuring the WordPress WorldTicket PlugIn

2.5 Setting up WordPress

Go to section Settings > Permalinks chose Post name and save settings Add pages Booking and Booking List.

Follow to the section Pages > Add New The first page we called Booking

Enable HTML editing mode and in the field for input text paste in the text below

(12)

<iframe id="__gwt_historyFrame" style="position: absolute; width: 0pt; height: 0pt; border: 0pt none;" src="javascript:''" width="320"

height="240"></iframe>

<div id="booking_wizard_widget"><span style="display: none;">booking</span></div>

Select Publish

Add the second page with name Booking List

Below the Title please change Permalink from booking-list to bookinglist After this change paste in the text below

<div id="booking_list_wizard_widget"><span style="display: none;">booking list</span></div>

Publish the page.

WordPress installation has been completed! The booking flow should now be functional.

2.6 Customize the booking page plugin

In setting -> WorldTicket you have the option to change to setting related to how the WorldTicket module is displayed on your site.

(13)

Here you can see where to find the settings for the different pages within the booking page.

For instance the first page “select” where you choose the departure and destination airports including the dates, this page can be customized. Through the “first booking page” tap.

Besides the content pages related to the

booking page. You can change the some of the sidebar widgets, “price calculator widget”, “SSR calculator widget”, “your choice”

The module on the front page is called Quickbook and can also be altered from here.

2.7 Styling the site to your airlines look and feel

The look and feel in WordPress is called the “Appearance”, and to create your own look and feel of the site, it is suggested to create a Child Theme.

Previously the normal approach was to Customize the existing WorldTicket theme, however doing this could potentially overwrite your changes, and therefore the right approach is to create a Child Theme.

To create a child theme, you should go to the Themes Folder in the WordPress The example folder is C:\xampp\htdocs\singlesite\wp-content\themes\ Ask your system administrator if in doubt.

Create a new folder called “worldticket-airline-name” where Airline Name must be replace with your name.

Go into the folder and create a text file called styles.css and insert the following text into the file

(14)

Template: worldticket_theme */ @import url("../worldticket_theme/style.css"); a { outline: none;

color: #red;

text-decoration:none; }

Now you have a new css document where you can add all of your own styling, the worldticket css file is included in the top, there for all changes you add to this document, will happen afterwards and there for you can overwrite if needed.

3 Additional Information on Option B

For option B you need to follow the guide for option A, however you do not activate the

WorldTicket theme. The theme contains all the styling, therefore you will need to manually include the styles.

4 Installing Without WordPress

This chapter will help you install the module on a webpage not running out of WordPress.

4.1 Technical Overview of Booking Components

This chapter is a technical description of how to implement our booking flow.

Our booking component is written on Google Web Toolkit, and has the following features

1) Quickbook form 2) Booking flow

3) Payment status page as a part of the booking flow 4) Booking List (LogIN) -

5) Low Fare Calendar as the first page of the booking flow

(15)

4.2 Dependencies of JavaScript Logic

The logics that activates the DIV tags, is placed in our standard solution, hosted on our standard hosting site. Add the script to the header of all the html files, ask your professional WorldTicket Consultant for your specific script tag if in doubt.

<script

src="http://yourairline.worldticket.net/yourairline/dynamic_booking/dynamic_booking.nocac he.js"></script>

Note: “yourairline” should be replaced by your server name. Please ask your Consultant for that.

4.3 Dependencies of W1 CSS

You need to include the WorldTicket style sheet in your own you do this by adding, the following in your css file

@import url("../worldticket_theme/style.css");

you can download the css file from

http://flynonstop.worldticket.net/wp-content/themes/worldticket1/style.css

Default.css -

e.g. http://flynonstop.worldticket.net/flynonstop/css/default.css

4.4 Setting up the page

The following section is delivered without warranties, since the recommended approach is Method A, and this is only for CSS, JS and HTML Experts, with a desire to solve the issues that show up.

All pages must have the CSS, JS and HTML Tags listed below:

<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1"> <meta name='gwt:property' content='locale=en' />

<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="default.css" />

(or add @import url("../worldticket_theme/style.css"); to the default.css)

<script type="text/javascript"> var SMS = {contextPath: '/yourairline'};

(16)

Note: “yourairline” should be replaced by your server name. Please contact your Consultant.

If you use more language versions of your website, gwt:property meta tag should be used accordingly. Examples of languages we support:

en - English fr - French de - German da - Danish es - Spanish pl - Polish ua - Ukrainian ru - Russian se – Swedish

Note: If you want to use other language, please contact your Consultant.

4.4.1 Front-page, containing QuickBook

This is the quickbook widget for the front page of your site

div class="tab-menu">

<div class="tab-menu-tabs">

<div class="menu-tab menu-selected

tab-menu-tab-first"> <span>Book</span>

</div>

<div class="tab-menu-tab">

<a href="./bookinglist?LoginPlace:BookingListPlace">Rebook</a> </div>

<div class="tab-menu-tab tab-menu-tab-last"> <a href="booking">Lowfare calendar</a> </div>

</div>

<div id="quickbook_widget"></div> </div>

(17)

4.4.2 Booking-page

This is the html for the second html file, containing the book flow

<div id="booking_wizard_widget"><span style="display: none;">booking</span></div>

4.4.3 Bookinglist-page

This is the html for the rebook and booking-list page.

<div id="booking_list_wizard_widget"><span style="display: none;">booking list</span></div>

In order for the customer to log out, we need to enable the login widget, this widget is normal displayed in the top menu of all pages.

<div id="login_links_widget"></div>

(18)

5 General Information

5.1 Explanation of the Buttons in the Components Configuration

Configuration of the WorldTicket module, can be done in the settings menu, if you are using WordPress you can find this menu by going to settings -> worldticet. If you are not, previously you where not able to see the following menu how ever with the introduction of SMS 4.16 you can find this menu by going to

http://delta.mmba.ciklum.net/test-aironix/js/gwt/configuration.html **** jeg skal bruge et eller andet eksempel her

This menu allows you to alter the appearance of the WorldTicket module.

If you are using WordPress, you need to click the “apply configuration” this will store the settings in the WordPress database.

If you are not using WordPress, you need to click the “Save to DB” this stores the information in the SMS database.

If a WordPress user clicks “save to db” it will have no effect on the WordPress site how ever if any other sites are running with the same SMS you could affect that site.

5.2 Solving Styling Issues

Cascading Style Sheets are layers on top of each other, but how does the browser knows which to take?

It does it in the following sequence

1) Style attribute on element e.g. <li style=”color: red;”>

2) Style with ID selector e.g. #footer{color: red;} 3) Style with Class, Pseudo-class or attribute

a. For Class e.g. li.favorite{color: silver;} b. For Pseudo-Class e.g li.active

4) Style with elements e.g. a{color: red;}

And if nothing else helps, the important keyword can help you. E.g. a#footer {color:blue !important;}

(19)

For further information on CSS tags and specificity read this - http://css-tricks.com/specifics-oncss-specificity/ and http://css-tricks.com/id-your-body-for-greater-css-control-and-http://css-tricks.com/specifics-oncss-specificity/ and http://css-tricks.com/when-using-important-is-the-right-choice/

For further information on Child Themes please read the Official WordPress article on Child Themes, if you prefer to see a Video, see this blog from a 3rd party web developer How to Create a WordPress Child Theme

5.3 Google Analytics

Google analytics can be used to track trafick on your site normal this is done by adding a few lines of java script to all html(php & jsp e.g.) this way the page can notify google analytics that the page have been loaded. If wordpress is used the we only need this in one place “footer.php” copy this code into the document and change the two parameters analytics id and domain analytics id is found on your google analytics page and look like UA-00000000-0, the domain name is the webpage name yourairline.com

_gaq.push(['_setAccount', 'ANALYTICS ID']); _gaq.push(['_setDomainName', 'DOMAIN NAME']);

_gaq.push(['_trackPageview', location.pathname + location.search + location.hash.substring(0, location.hash.indexOf(':'))]);

(function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();

window.onhashchange = function() {

_gaq.push(['_trackPageview', location.pathname + location.search + location.hash.substring(0, location.hash.indexOf(':'))]);

}; </script>

5.4 Search Engin Optimasation – 'SEO

Search Engine Optimization(SEO) is a concept that helps your site achieve higher ranking on search engines like google. A higher ranking means costumers searching will be more likely to have your

(20)

5.4.1 Title & Description

<Title>

The tittle tag is of cause the tittle of your page, how ever it should not only be your company name, include a something like a slogan “Your airline, slogan” a maximum of 70 characters, including a business name, slogan or brand.

<meta name = “description” content = “text” />

The description tag is the tag that describes what your page is about, what can you offer the viewer? A guide should be to hit somewhere between 2-5 lines of text, how ever the most important should be in the beginning, as only the first, 180 charcters will be shown by most search engins.

google search results appear like :

This is an example how the title and the description is used on google, “Balboa Park” is the titel and the two lines below are the description.

It is worth spending some time on this apearnce of your site, as the user will determin very quickly if your result seems interesting, if the user decides that thats not the case, none of the following will help.

5.4.2 content is king

Search engines have robots that crawl(look at) your site, these robots only understand text, they cant see images or text inside images, in order for search engine to better understand your site you need to have 'Human text'(sentences, not single words).

(21)

one examples could be: if i had a t-shirt shop, i would maybe have a picture of the tshirt, and a description text saying

“100% cotten available in S / M / L / XL”

This is a very poor job for the search engine as it cannot see the picture, if i how ever changed the text to.

“High quality tshirt with batman print from the movie batman returns. Made in UK, in 100% cotten. Available in all size”

Now the search have a much better understanding of the product.

5.4.3 Keywords

Another thing is keywords, these are the words that people search for, this could be a rout or airline, airplane vacation, and so on. In order to make the search engines understand that your site is all about this we need to mention these words several times on our page. In fact there is a concept of keyword density which is keywords/total words = keyword density but to keep it simple just remember that the words the client would use to search needs to be mentioned on your site, and more times = better.

5.4.4 HTML tags part 2

The first html part(Title & Description) described the two most important things to do with HTML tags, here we will describe a few more things that can help you achieve the best result possible.

<h1>

Header one, one page, should only have one of these tags. What happens is that the search engine will look at this and say “this is the most important part of the page”

The rest of the header tags you can use as much as needed, the search engine will still look at them and rank them in importance relating the the number.

Header tags can be an important tool to illustrate what is important on a page.

(22)

We mentioned earlier that search engines cannot view images, however this can be a tool to help make up for that. If you want to further improve the on images, you can make sure that the file name has a descriptive name e.g. spring_campain.jpeg instead of 123398dd.jpeg, the size of the images, load time matters to SEO there for images should be as small as passable (bear in mind that the that this should not go to such an extend that the actual quality of the image become so poor that the user will notices)

5.4.5 Links

Another trend of search engines are that they want to display content that other people find useful (someone else think that its useful, it could be to you as well). What this means for you is get your name around.

Get other sites to link to your site, if you can get another website to link to your website, we SE will notice it when it crawls the site, it perceives this as the current site thinks that your site is important. Therefore every time some one link to your website your site becomes more important.

Social networks, websites are not the only way to get links, the social networks are getting more important to the search engines as they represent real people. There for getting people to “share your name, and link”

Google+ it shouldn't come as big surprise that google search engine is interacting very nice with googles own social network google+. In fact people forget that if they have a gmail account, they have a google+ account. If a friends on google plus +1 (“like”) your site, the site will suddenly have super high importance's(displayed in the very top) when his friends searches for for sites that

matches the criteria.

Other Social networks like, facebook, linkedin, twitter & instantgram can all be a useful way to spread your name, and make your brand more important to search engines.

5.4.6 Useful WordPress Plugins

All in one SEO as mentioned in the previous chapter about search engine optimization, this

plugin makes it easier for you to easily improve your visibility on search engines.

Advanced Code Editor

This plugin enable a code editor in the Wordpress admin page, it include line numbering, and validation, this can possibly save you hours of debugging.

(23)

5.5 Front end code - javascript

For the more advanced user it, moving some elements in the gwt can be an option, however this has to be done in javascript with jQuery. But first we have to realize how time is a factor on website using gwt.

Normal a page loads, and the content is there from the beginning, in the case of gwt, the page loads, and then the gwt start working with filling out the div tags. There for any code that needs to interact with the gwt elements on the front end needs to wait for these elements to be ready for it.

Luckely we have some ways of doing this. Add the following code to the javascript file, (or the bottom of the page)

function onPlaceChanged() { } function onGwtReady() { }

these functions acts as handels for you to know when you can do things. onGwtReady is called on the first page that loads, forinstance booking.html onPlaceChange is called when ever the page changes to a sub page, booking.html/#BookingSecondPagePlace. Some code is only needed on some pages this can be done like this

function onPlaceChanged() { if (window.location.href.indexOf("BookingSecondPage") > 0) { secondBookingPage(); } }

the method secondBookingPage will now be called when ever “bookingSecondPage” is part of the url.

var second_book_count = 0;

function secondBookingPage() { if (jQuery('.flight-segment-item.flight-segment-info-header').length > 0) {

jQuery('.flight-segment-item.flight-segment-infoheader').first().insertAfter(jQuery('.label.direction-label').first());

(24)

}}}

The above code, moves an element to a new place, but what first happens is that .length > 0 checks if the element allready exists, if length is 0 it means that either the element does not excist on the page or it is not loaded yet.

There for we have an else loop, this else loop have a condition that makes sure this code will only be executed 10 times, the reason for this is, we don't want to have any code that keeps running forever.

Inside the else loop we use the setTimeout, this makes sure that we call the same method again in 200 milliseconds, and hopefully the element is now ready for use.

6 Appendix 1 - Troubleshooting

1) I get this error, what do I do?

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'qtrans_convertURL' not found or invalid function name in C:\xampp\htdocs\singlesite\wp-includes\plugin.php on line 170

WordPress Guide. v WorldTicket WordPress manual, 16 MAY / 23

WordPress Guide

Table of Contents

1 Introduction

1.1 Document Information

1.1.1

1.2 Functional Overview of Booking Flow

1.3 Selecting your Web-solution

2.1 Prerequisites

2.2 Steps to get you up and running

2.3 WordPress Theme installation

2.4 WordPress Plugin installation

2.5 Setting up WordPress

2.6 Customize the booking page plugin

2.7 Styling the site to your airlines look and feel

3 Additional Information on Option B

4 Installing Without WordPress

4.1 Technical Overview of Booking Components

4.2 Dependencies of JavaScript Logic

4.3 Dependencies of W1 CSS

4.4 Setting up the page

4.4.1

Front-page, containing QuickBook

4.4.2

Booking-page

4.4.3

Bookinglist-page

5 General Information

5.1 Explanation of the Buttons in the Components Configuration

5.2 Solving Styling Issues

5.3 Google Analytics

5.4 Search Engin Optimasation – 'SEO

5.4.1

Title & Description

5.4.2

content is king

5.4.3

Keywords

5.4.4

HTML tags part 2

5.4.5

Links

5.4.6

Useful WordPress Plugins

5.5 Front end code - javascript

6 Appendix 1 - Troubleshooting