05/03/2018
Today, I set myself the task of writing the introductory paragraphs for each main header section. These sections are ‘About’, ‘Café & Shop’, ‘Creative Space’, ‘Volunteer’ and ‘Donate’. The ‘About’ section was very simple as I took the content from their ‘Welcome to The Greenhouse’ section, already featured on their current website. ‘Café & Shop’ was more challenging and made me realise that I wasn’t sure how to summarise up this service at all. I will be asking Tigger how best to go about describing this session in our meeting tomorrow (06/02/2017). ‘Creative Space’, ‘Volunteer’ and ‘Donate’ were simple and I was able to make a substantial start on these. As I work on the website and add more content, I expect I will think of more things to add to the introductory pages. In light of this, I decided to do some work with the content I already had. I placed text into the ‘Wine’ and ‘Volunteer’ section. This took a few hours because the content that I was pulling from their current website wasn’t perfect English. With the help of Grammarly and good old-fashioned proofreading, I am happy with the way these sections turned out.
After I had done a lot of writing for the day I decided to finish with a bit of light CSS experimentation. I added a gradient to the menu bar and a hover fade to some of the images on the site. At first, I applied the fade to every single image, but I soon resolved this and now the fade only applies to images featured on pages I have created.
06/03/2018
During the second day of the build, I spend some time in the morning perfecting the new version of the information flow chart. I added a colour scheme to differentiate between page names and content. This not only helps me greatly but would prove useful during my meeting with Tigger later on in the day. I made sure that all of the content cards I had created for the prototype test were featured on here and it would all make logical sense to someone who was seeing it for the first time. Once this was completed, I wrote down the questions I wanted to ask Tigger. These were:
- How best do I sum up the Café and Shop?
- What do you want to promote in the café?
- What do you want to promote in the shop?
- Do you have an explanatory paragraph for ‘food’ as you do ‘wine’?
- What exactly is the eARTh project?
- Do volunteers have specific job roles I can include?
The meeting with Tigger went extremely well and he was as hospitable as ever. We had a lovely talk about how the website is coming along and he was very happy with the progress. I went over the questions I had prepared and gathered some information but he suggested I prepare a Word document so he can fill it in. I thought this was a brilliant suggestion so when I got home, I prepared a total of nine questions for him to answer. I suggested for most of them to be bullet-pointed so I can form them into full sentences whilst uploading them. The questions were:
- How best can I sum up the Café & Shop? (Can be bullet pointed)
- What are the main aspects of the café you would like to be highlighted? (Can be bullet pointed)
- What are the main aspects of the shop you would like to be highlighted? (Can be bullet pointed)
- Do you have an explanatory paragraph for ‘Food’ as you do ‘Wine’?
- Please sum up the backstory of the eARTh project and its connection to The Greenhouse Trust in a short paragraph. (Optional)
- How best shall I sum up the Creative Space? (Can be bullet pointed)
- What causes is the public supporting by donating to The Greenhouse Trust? / Why should people donate? (Can be bullet pointed)
- Are there other ways (other than volunteering) in which the public can contribute?
- Are there any success stories that are a result of the funding gathered from donations? (These would be great to be featured on the donation page)
I made sure they reflected my original inquiries, but with Tigger’s blessing, I was able to ask him to go into more depth. Additionally, he allowed me to take some of my own pictures in the café (using my iPhone 7). After this, h showed me around the art exhibition he is curating in the space above the main café and said he would be happy to let me come and take some more photos of my own if I feel it necessary. Overall it was a successful visit and I am confident that things are going in the right direction so far.
07/03/2018
In the morning, I received the questionnaire back I had sent to Tigger the previous day, so I set about tidying the text up ready for the website. After reading through the replies and thinking about what goes where it dawned on me that my project plan has no logical order. I had content but I didn’t know where to start with it. This was an extremely valuable lesson and I am glad I have learned it early on in the project. I will be adapting my project plan for the second week to better suit this planning structure. Nevertheless, I still ensured the word document from Tigger was in suitable English for me to copy and paste along the line.
- Any future (project) plans I make need to have a logical order to them.
- Whilst (project) planning, try to be more specific and break down tasks into their core attributes.
08/03/2018
When inputting text, I saw there was a lot of white space around the edges of the site. The white colour that is currently being used in the background makes the pages look empty and unfinished. I will be overcoming this by picking an earthy colour scheme to stick to for the rest of the duration of the project. I started searching colour schemes used in interior design to try and gather some inspiration but the results generated, in my opinion, were not fitting the vision I had in my head. As a result of this, I found a picture of a woodland with some colours picked from the image underneath. The image consists of light, medium and dark green and brown tones. This perfectly encompasses the natural aesthetic I have been envisioning and the work The Greenhouse Trust do with soil conservation.
Later on, I looked into ways to display the images in the online art gallery. The best way to achieve this would be using a slideshow plug-in, so I downloaded NextGEN Gallery. It claims to be “the most popular WordPress gallery plugin of all time” and came with a lot of great reviews. I added the 13 images Tigger had sent me, watched their ‘Getting Started’ video and played around with a few controls. In the first iteration, there is an option to show the images as a slideshow or as a set of thumbnails. At the moment, the slideshow looks uneven because the images I got sent are all sized differently. I would rather not resize them because the smaller images will lose quality if blown up and vice versa, so I will be displaying them as thumbnails. When the user clicks on an image, they will then be able to see the full size. Lastly, the transition time on the gallery slides is very slow. If I do decide to incorporate a slideshow feature further down the line, I will have to take this into consideration and alter accordingly.
09/03/2018
I had an exciting day of tackling the technicalities of my WordPress site. Due to the recent success of installing my image gallery plug-in, I saw that I could really utilise plug-ins to give my project some appealing extras. I needed to include the opening times of the café and bookstore and I wanted to do this in a unique way. The plug-in ‘Business Hours Indicator’ includes features which display the time along with whether the café is open or not. Personally, I haven’t seen this on a website before, so it really stood out to me and is my favourite feature. It can also display opening times on any page of my website with the use of some shortcode. I used this on the front page to display the current time and café’s current the status.
[mbhi location="Norwich"]
If a business has multiple establishments with varying opening times, the plug-in enables the owner to define these under relevant location names. In my case, I will only be creating one for Norwich but it is clear how this can benefit wider spread businesses.
My main challenge of the day, however, was to create a child theme of my current theme, Shapely. A child theme is used to inherit the looks and functionality of its parent theme, without having to edit the original source files. They are favourited over having to edit the main parent theme because if the parent theme is updated, all the inputted code will be lost. Initially, I chose Shapely because it is versatile, well constructed and I especially enjoyed the parallax features on the homepage. Having said this, I need to be able to edit my site as much as necessary. The ‘Additional CSS’ feature that WordPress provides in the customisation panel is limiting because the box is small and I want the freedom to edit whatever I need with ease. I do not have the prior experience to create this myself with code and the time limitations of this project meant that I was cautious about taking too much on. I asked James to help me and together we went through the WordPress documentation provided on their website. I tried to work through it on my own but I had not dealt with .php files before and I just wasn’t grasping the concept very well. Before we got to this, however, I had to make a style.css file in my child themes folder in my local directory (to be able to edit from home) and this can transfer into my nwinter-ex1 directory using a simple FTP client such as FileZilla. This file is where all the new CSS I am writing is stored. The following text is inputted into the top of my style.css file to ensure that when everything is named accordingly and can be referred to in the future.
/*
Theme Name: Shapely Child
Theme URI: http://nwinter-ex1.nuacomputerscience.co.uk/shapely-child
Description: Shapely Child Theme
Author: Naomi Winter
Author URI: http://nwinter-ex1.nuacomputerscience.co.uk
Template: shapely
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shapely-child
*/
Once this was set up I needed to link my child theme with my parent theme using PHP. PHP is a server-side scripting language and in this case, the function being executed is telling the server to enqueue shapely-child, load my style.css file (found in this folder) and replace the parent theme style sheet with mine. The child theme’s functions.php file is loaded right before the parent theme’s. The PHP file looks like this:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'shapely-child'; // This is 'shapely-style' for the Shapely theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'shapely-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
I made sure everything was in working order and any updates I made to the style.css file were uploaded correctly and I finished for the day.