Adding javascript to the website

Open ‘functions.php’ file and create a new function called foundation_scripts. This function will look quite similar to the one that was created for CSS.

Foundation is depending on jQuery 2 however WordPress is using jQuery 1.11.3.

(For more information click here)

In order for Foundation to work, pulling jQuery 2.2.2 is needed through function.

Go to jQuery official website and find the latest version of jQuery –

Open it in new tab and copy the link –

Paste the link into the code –

Add ‘enqueue_script’ in order to run jQuery on front end of the site.

However, jQuery cannot run on back end of the site as the back end is not running on 2.2.2 version and it can cause damage to some files if it does run it on higher version of jQuery. Therefore conditional statement is needed to avoid that situation –  This means that if we are not in admin area, call jQuery script. To finish it off, add 

Now, once the front end is open, it will run the latest version of jQuery.

Checking if jQuery is working

Open source code of the page and find 

Open the link and full code should appear. This means that the latest version of jQuery is working.

Linking all javascript links

Create separate folder for javascripts called ‘javascripts’ and copy all files in there. Open ‘functions.php’ and type wp_enqueue_script code with path required javascript. Go to ‘footer.php’ and delete the link from there as it is not needed there anymore. Refresh the page, view the source code and check if the link is there.

Do this for every javascript link in the footer.

Result – 

All of them are working fine as the  is outputting all of javascripts.

Adding Javascript links from header

To link javascript links from header is the same process as linking them from footer however, there is a small change.

Instead of adding ‘true’ like this – 

Value will change to ‘false’ –

This means that links will be added into header instead of footer. Now that javascript links are pulling in dynamically, go to ‘header.php’ and remove javascript links as they are not needed anymore.

There is javascript in header that is not in a file –

To link this javascript with WordPress, creating a new JS file is needed and linking it like rest of javascript links.
New JS file ‘head_own.js’ has been created and JS code from the header has been copied into it.

Go to file ‘functions.php’ and link it the way that was explained earlier. Refresh the page and check result.

Error/Solution

After checking website for changes, recently linked javascript was not working. This was due to wrong order of links in ‘function.php’ file. This means that order of all links has to be exactly the same as it is in ‘header.php’ because they rely on each other and they have to be loaded in certain order.

After changing order of JS links, the full website was working perfectly fine.

Pulling in CSS to the website

There are three ways to pull in CSS –

1. add full path to style sheet – 
   The problem is that there is a lot of writing of the code.
2. Shorting first option by using ‘blog info tag’ and using ‘template directory’ to give us the same information but dynamically therefore shorten writing time of code
3. Using ‘functions.php’ file – write all stylesheets there and pull it out where they are needed by adding code – <?php wp_head(); ?> before head tag closes. This tag allows export out code into head tag before it closes down. This is the ideal way of pulling in CSS into the website dynamically. 

Create ‘stylesheets’ folder in ‘kingstonBC’ folder and copy all stylesheets there. Then create a new file called ‘functions.php’ and create there a new function to load CSS –

FTP files and check the result –

Now that style.css is pulling in dynamically, go to ‘header.php’ and remove CSS link as it is not needed anymore –

There is only one stylesheet pulled in from ‘functions.php’ therefore there are only a few changes to the website. Next step is to link all four more CSSs from the ‘functions.php’ file. Copy first line of the code and duplicate it as many times as needed and rewrite the path of each file –

There is CSS link that relies on Google fonts and is pulled into the website from the web –

To make this link dynamic, type – 

It is the same link that was used for other CSS links however, it does not need ‘get_template_direcroty_uri()’ as it is pulled in from the internet and not file.

Result – 

Stylesheets are working fine however, images are missing as they are pulled in from different folders. Also, WordPress drop down menu that goes above the navigation is missing. This is because <?php wp_footer(); ?> is missing in ‘footer.php’ file before closing body and html tag – 

Result – 

The images missing 

Some images are going to be replaced with images that are going to be added from admin area of WordPress therefore it is okay that they are missing. However, the icons are not going to be replaced with dynamically added images therefore all icons need to be uploaded to the site.

Create a new folder called ‘fonts’ in ‘kingstonBC’ folder and copy all files from ‘fonts’ in HTML/CSS theme into newly created folder.

Open ‘font-awesome.css’ file and add path to files –

Result – 

 

Turning static website into WordPress website – beginning

The website is all finished and the client is happy with it (also successful user testing), next step is to turn static website built using Zurb Foundation 5 into WordPress website to allow the client use CMS to add content to the website.

WordPress itself is difficult platform therefore tutorials on how to convert static website into WordPress was needed. Treehouse was used for tutorials –

Setting up the files and WordPress

 

WordPress is already on the server (for more information about installation of WordPress, please click here and then here)

This is what WordPress looks like on the server –

This is what structure of the WordPress looks like –

The theme is going to be stored here –

HTML/CSS Foundation 5 folder structure that is going to be converted into WordPress theme –

Let’s start converting

We are working with files on the server therefore do not forget to have it linked with the server!
Create a new folder for the new theme in ‘Themes’ folder. All files for new theme are going to be stored there.

To get started with basic theme, all that is needed is ‘style.css’. Create a new file called ‘style.css’ and save it in the new folder called ‘kingstonBC’.

Open ‘style.css’ in one of the existing WordPress themes and copy comment that goes on the top and customise it –

Create ‘index.php’, leave it blank and save it in the ‘kingstonBC’ file as well. With style sheet and index already in place, activation of the theme is possible. FTP the file to the server, refresh the page and the theme is there. Click on ‘Activate’ to activate the theme –

The blank page should appear as there is no content for now –

Now, the process of copying/pasting of the content is starting in order to turn static website into WordPress theme.

Open ‘index.html’ file and also ‘index.php’ file in Sublime Text 3 web editor.

Copy all the code from ‘index.html’ and paste it to ‘index.php’. FTP the ‘index.php’ to the server and check the result –

The basic mark up is set up on the page, breaking it down to various includes is the next step. The way to do it, is to create ‘footer.php, header.php, sidebar.php’ and slice up the ‘index.php’ into different sections –

Header.php

Everything from the top to the body tag will go to ‘header.php’, however, there is navigation that needs to go to the header section as well in order to make it dynamic.
In its place, php code is needed to call out ‘header.php’ code into the ‘index.php’ – 

FTP files to the server and check the result. If nothing has changed on the website, everything is working fine!

Footer.php

Copy everything from the bottom to beginning of the footer section from ‘index.php’ into ‘footer.php’ file. In its place add php code to call out ‘footer.php’ code into the ‘index.php’ – 

FTP files to the server and check the result. If nothing has changed on the website, everything is working fine!

Next step

Header, Footer and main body sections of the websites are dynamic now therefore the next step is to pull in CSS.

User journey

The user journey has been created with the final designs of the website for better visual representation.
Created in Adobe Photoshop CS6

1. Index 

2. About page

3. Services

4. Gallery

5. Gallery-single

6. Blog

7. Blog-single

8. Contact

Adding anchor links to the website

Anchor link is the link that brings users to specific place on the website.

This is necessary addition to the website as users need to be directed to the ‘Join us’ section after they click on the ‘Join now’ button on the hero image. 

To add anchor link, determine where the anchor link will be and where you want it to go.

• The anchor link will use this format: <a href=“#anchor” >Anchor Link Text</a>
• The anchor destination will use this format: <a name=“anchor”>Anchor Destination Text</a>

(Source: http://www.boostsuite.com/2012/05/10/what-is-an-anchor-link/#anchorlink1)

Adding anchor link into the code

Find code for ‘Join now’ button in index.html and add ‘#anchor’ in href – 

Find ‘Join us’ section and add  before the section starts. That is it!

Linking other sub-pages with the anchor link

To link other sub-pages with the ‘Join us’ section in index.html, add

in required place. This will automatically take users to ‘Join us’ section on index page where ever they are on the website.

Repeat this step in every sub-page on the website.

Creating ‘Join us’ form

‘Join us’ form has been created with www.jotform.com. This form builder was used in previous year for one of the projects and worked well therefore the decision to use it for this project has been made.

Jotform.com is form builder helps to create and publish online forms without writing code. This builder allows to create any forms suited needs of project and embed it into website for free. Responsive/adaptive design is certainty. Of course, there are options to buy extra packages which allow users to do more on the website but for this is not necessary for this project.

Working screen looks like this –

The picture above shows ‘Join us’ form that has been created for this project.

This website allows users to quickly add tools that they need by dragging from left navigation side straight to form. Also change colours, fonts, font size etc. For those who understand CSS it even gives you opportunity to type/change CSS code.

Preview of different platforms is available to check what the form will look like on different devices –

Once the form is created, click on ‘Publish’, copy link and paste it into the code.

There are options to link it, embed it or share it with different platforms.

In the option account there are going to be all created forms. There is option to edit, view, share, embed, delete, save as PDF etc. all forms.

What it looks like on the website

This is what the form looks like after embedding it to the website –

All fields with red star next to them have to be filled in otherwise it will not allow submission. Once this is completed, confirming message appears on the screen to inform users that their submission has been sent.

After that, the club will receive submission message in inbox –

Changing ‘Thank you’ message after submitting the form

There is option to choose what to include in thank you message to make it more personal for users. The full name of users has been decided to use so users will see personalized message.

Setting up email notification

There is option to personalise email that is sent to the club after users send their join in request.

This is what style of emails looks like –

 

 

 

 

Client providing the content/request from the client

The client provided content for the website that was requested weeks back therefore content at ‘Our services’ and ‘About us’ section can be finally updated. Also, names of boxers/staff/coaches were provided in order to add their real names into the website.

Request of the client

“Can I ask that all staff (inc coaches) go under the same section on the site. We’re all an equal team and play vital roles. And the phone numbers for Jason and Sean as I sent you before are included. They play a vital role in the running of the club so its important their numbers go on. Can we have all members just under the section ‘staff’ instead of having a coaches section.” 

The requested changes are going to be made.

Missing photos of a few members

There are photos of members missing:

Staff – Susan Thompson, Nicola Mcmahon, Chris Bellis, Liam Macmillan

Boxers – George Shields, Liam Macmillan, Ben Teall, Luke Young

This is due to them not being present of the photo shoot on last client meeting. Decision to add them to the website after the project is finished was made due to time scale. This decision was discussed and agreed with the client.

Requested changes

All requested changes have been done and the client is happy with the website.

Changes into the design after user testing

1.Added more images to create slider

Sources: http://uhd-wallpapers.net/sport-girl-with-boxing-gloves-wallpaper

Source: http://www.wallpaperup.com/30626/boxer_punching_bag_1920x1200_wallpaper_Sports_Boxing.html

2. Decision to keep the ‘Sponsors’ section was made however, the image was made darker in order to create better contrast of background with logos. Also icons were made smaller. This is because of additional user testing where more users and the client were happy with the design of this section.

3. Turned overlay effect down as it was hard to see photos of boxers/coaches/staff when viewing on mobile/tablet devices. Also deleted social media icons as they were not needed and moved the text down so it does not get in the way of images.

User testing

After finishing adding images to the website, user testing was done to find out what potential users think.

Responds

Overall, everyone was happy with the design, colour scheme and layout of the website. However, they were some things pointed out that need changing.

1. adding more images to create slider

2. Get rid of ‘Our sponsors’ section near footer and create separate page for sponsors of the club. This is because logos are too big, and it looks misplaced.

3. Turning overlay effect down as it is hard to see photos of boxers/coaches/staff when viewing on mobile/tablet devices.

Next step

Made changes to the design that were pointed out during user testing.

Adding background to sections of the website/changing idea about video section

Backgrounds for each section of the website were added. The images are not original work, they were downloaded from Google – apart from ‘About us’ and ‘Contact’ section where original work images were used. Background for ‘About us’ section is boxer from the club and for ‘Contact’ section was used the location of the club.

Original idea for the index page was to have promotional video of the club however, this is not possible due to amount of work and timescale for one person to do. Therefore, the idea has been changed from promotional video to hero image to create ‘waw factor’ in users coming to the website.

Result

Next step