Create a WordPress Theme

Week 34

Create your own WordPress theme and then customise it. Add the hacks mentioned in the lesson CMS and WordPress part 3. Do some research on the Internet and find two more hacks and implement it on your site.

For this week’s learning activity I decided to create a child theme from an already existing WordPress theme. I created a WordPress site in through 1-clic installation and chose the Twenty Nineteen theme. Since I was going to make only a few changes, I decided to work directly in I followed the LinkedIn tutorial WordPress: Building Child Themes by Patrick Rauland.

First, I edited the child’s style.css and changed the background colour as suggested in the tutorial.

After that I played around editing in the browser and changed background colours, text size and style…

Then I added a favicon to my site following the instructions on this weeks lesson. Although the parent theme I chose allows to add a favicon, I decided to try and do it by adding it to the functions.php file to see if it worked. It did. Now I know I can change the WordPress icon to the one I choose even when the selected theme doesn’t give me the option.

I changed a few more details in the Customise section. The theme I picked doesn’t allow too many changes, so I only added a menu, two extra pages and changed the colour of the links to deep red.

Finally, I added a screenshot for the preview of the child theme.

Customise a WordPress Site

Week 33

Take your theme that you have installed on your hosting account and customise it as per this module. Then I want you to find some WordPress hacks that you can use to customise your website even further. The main thing with this project is to not just do things for the sake of doing them. I would like you to explain the tweaks that you have made and your reasoning for adding certain features.

When creating my portfolio in week 32, I also added 4 posts, an about page and played around with the options to customize it. Below I list those changes and the new ones I made this week.

  • I changed some general settings such as title and tagline, site language, timezone, date format (d/m/Y) and time format (H:i).
  • I changed comment settings so no one can comment. Since it is a portfolio and there is a contact form available, I preferred to disable this option.
  • I changed the permalinks to use post name instead of the default one. It is more search engine friendly and gives the reader an idea of what the post is about.
  • I installed the WPS Hide Login plugin to protect my website by changing the login URL and preventing access to the wp-login.php page and the wp-admin directory to non-connected people.
  • Added a gravatar.
  • I uploaded a logo and a site icon.
  • I changed the number of columns in the post grid on desktop to three.
  • I added a contact form to my About page. For that, I installed the Ninja Forms plugins.
  • I added additional CSS in order to change the look of the navigation menu. The menu items were underlined and I changed it so they appear without decoration except on hover.
    This is the CSS code I added:
    .alt-nav a {text-decoration: none;}
    .alt-nav a:hover {text-decoration: underline ;}
  • Also adding additional CSS, I removed the left padding in the about page, so the photo and text are centered.
    .resume-template .entry-content {max-width: 500px; padding-left: 0;}
  • Finally, I edited the file footer.php to change the hypelink text from the blog name to my name.

Here is a link to my portfolio.

Working with WordPress

Week 32

In week 32 we began to learn about WordPress and how we can use it to create websites. For this Learning Activity I have set up a web for my portfolio using this content management system.

So far, I have added the semester’s completed mandatory assignments and some learning activities that I liked to my portfolio. I know the look of it can be improved a lot, and I will continue doing so, as this semester the portfolio is interactive.

This is the link to my Portfolio.

Point of Sale

Week 31

Consider the touchpoints of your brand in general (to ensure that all the elements work together) and then focus on your packaging. Design a set of Point of Sale elements that will promote your product in-store. The set can consist of however many elements you choose. It can be in any format that you would like it to be. Please consider the following:

1. Can customers clearly see your product in your Point of Sale elements?
Do you use your Point of Sale to also showcase your actual product?

2. Brand Integration. Does it integrate with the brand’s look and feel?
3. Designed to sell! Does it persuade customers to buy your product?

The Point of Sale I designed is a cardboard box with shelves to showcase the actual product. Its design integrates with the brand’s look and feel since it uses the same colours, shapes and photo. The logo is clearly visible, as is the byline. It is meant to be positioned at the end of a pet food supermarket aisle to persuade dog owners to buy the product.

Brand manual.
Take pictures of your elements and include them in a presentation of your brand called a brand manual or a design manual. Your brand manual should have a minimum of 7 pages and include logo, color scheme and chosen typography as well as the different elements produced during this 4 week project period (brochure, infographic, packaging, point of sale). 
Hand in your brand manual as a PDF.


Week 30

Using the logo you created in Week 1 and the brochure you designed in Week 2, think about your brand and design packaging for your product. Remember that you can decide about the detail of your product. Is it dog biscuits, meat products in a tin, dry pellets or a new and exciting product?  Do your design according to the following steps:

1 – Exploration: Use sketching techniques to draw thumbnails and hand in your thumbnails as scanned PDFs.

2 – Brand integration: Choose one of your thumbnails and refine your design. Place it next to your brochure and logo and see how you can merge your design with the brand identity. Also, what fundamentals of the brand can you draw from and use in your design?
Hand in a picture of your thumbnails, mock-ups, logo and brochure together.

3 – Design: Now design your packaging properly, using any design application of your choice (or a combination of e.g. Photoshop, InDesign and Illustrator). Export the flat design as a PDF.

4 – Presentation: Make a life-size mock-up of your final design and take photographs of it. Remember that you can take more than one photo to show the different angles and sides of the packaging. Here your presentation skills are vital. How do you present the final mock-up in a photo to reflect the true essence of your design?

1 – Exploration

I began by sketching a few ideas for the packaging, considering different presentations: carton box, bag, bucket.

2 – Brand integration

I decided to go for a bag. The product I chose to design is the packaging for dry dog food. I used the brochure and the logo designs from previous weeks to inspire the design, so the brand has a cohesive look.

3 – Design

Then I moved to Illustrator and continued developing the design. I chose to use the same colours as in the brochure (photo below). I also experimented with other colours that could be used for different food recipes and/or dog ages. The colours I used are the same as in the brochure’s infographic (see pictures below).

4 – Presentation

Below I added photos of my packaging sketches together with the brand products and close-ups of the packaging mock-up I created.

Illustration, Infographic and Brochure

Week 29

Use the logo you created in Week 1 and design a brochure for your product. You may use any format you like, just make sure that the format is in line with and adds to your logo design. Your brochure must contain an illustration. This could be the infographic alone, or it could be the infographic and the rest of the brochure (in other words, the entire brochure may be illustrated if you’d like).When designing the brochure and creating your illustration, make definite use of the fundamentals of visual language as discussed in this lesson. 
You must illustrate an infographic and design a brochure:

1. Illustration of infographic

The brochure design and infographic illustration should work together. Consider the format and style of your brochure and illustrate an infographic using fictitious data (or you could do research to get a better idea of actual statistics). The infographic must display the nutritious benefit of your product to dogs. It should contain the nutritional value, as compared to the necessary nutrition intake of dogs. It must also give an indication of consumption per size of dog. You may also add information of your choice that you think is relevant.

2. Design of brochure

Design a brochure that introduces your product and includes the infographic illustrated in Question 1. You can decide on the information and format of your brochure. As a guideline, consider a brochure of A4 (lying), folding to A5 (standing). You don’t have to have more than four pages in your brochure (but it depends on your design and style). You must base your brochure design on the design of your logo. Thus, look at your logo and design a brochure that complements and blends in with it.

This is the final look of my brochure and infographics. I chose the recommended size A4 (lying).

Market Your Website

Week 27

Now that you have built and tested your website, I would like you to market it. Let’s say that your budget is NOK 10 000 (or 1800 $ US). Please do the following:

  • Do some research on what advertising costs. You could for instance contact your local newspaper, print shop and other websites.
  • Make a detailed list of how you would market your website. Remember to keep your budget in mind.
  • What if you had double the budget? Come up with a second marketing strategy, this time with NOK 20 000 at your disposal. (3600 $ US)
  • Come up with a viral idea. It doesn’t have to be a video; it can be guys dancing at the airport in gorilla suits. You can use ANYTHING that is at your disposal. Be creative!

The website provides information about the town of León, located in the north-west part of Spain. Advertising the web on the local radio or newspaper didn’t seem like a good idea since I’d be reaching people who already live in the city or are familiar with the place. Besides, when it comes to a webpage, I think it’s better to promote it online, where the potential users will only have to click on a link, rather than remember its name or URL.

10000 NOK (930€)

  • Facebook and Instagram accounts (free). I would focus on creating quality content to attract and grow audience overtime.
  • Facebook ads (average cost-per-click is 0.97$). Limit to 150€.
  • Instagram ads (cost-per-click from 0.20 to 2€). Limit to 150€.
  • Hire an influencer (500€ for 50.000+ followers) who would show the website to their supporters.
  • Print 500 leaflets (110€). I would initially leave the leaflets in neighbouring provinces’ tourist offices.

20000 NOK (1860€)

  • All of the above.
  • Viral idea – Create a promotional video (up to 2 minutes long) about the city and the activities that one can enjoy when visiting (700€). This video would be used on social media to advertise the website. I’d also create an Instagram contest in which people have to find the answers to three questions about León in the promotional video. Those who answer all the questions correctly get the chance to win a weekend getaway for two. This costs 200-250€ because the hotels and restaurants would offer low prices as they get the promotion through the contest as well.


Coding basics

Week 26

This week we have continued learning about web design. The task was to take the basic website I designed in previous Learning Activities (Put Thought Into Your Design and Planning the Structure) and convert that into HTML and CSS code.

This is my web about my hometown: visitLeón.

I have learned a lot during the week while coding the website. There are quite a few things I would like to fix/improve, but I did what I could with the time I had (and the skills at the time!).

EDIT: I used Atom to code the web as well as Chrome’s Inspect tool.