Dead Pharaoh is a personal website which was presented as my final project of my MA in Web Design at the University of Greenwhich. Dead Pharaoh contains nitty-gritty short videos and blog entries which tell my journey into learning skateboarding. The aim of this website was to spread my passion for skateboarding and to see other people’s passion in the form of comments to my videos and blog entries.
I created wireframes in order to have a better idea of where I should have placed the different elements on the page.
During the information architecture phase, I started to think how the website had to be organized. As can be seen from the sitemap represented here below, the user is able to access the main pages of the website through the navigation and sub-navigation.
I decided to use SASS in order to apply to my project a DRY (Do Not Repeat Yousef) principle of software development. Although I was quite reluctant to use SASS as I was intimated by the command line, I decided to give it a try.
I used the SASS expanded style as very similar to the stylesheet I was used to craft. This definitely made the learning process easier. In regards of SASS basic rules that I used the most I would say are the following: import, nesting, mixins, variables and ampersand. I found particularly useful the @import rule. I imported my reset stylesheet, typography rules, and variables file where I stored variables for site colours, fonts, etc. I also kept divided different parts of the website. I have a file .scss for links rules, one for navigations and one for post and pages rules.
Flexbox to create a responsive layout
In order to create the layout of Dead Pharaoh I used flexbox. I decided to use flexbox because is the layout model I was the most familiar with. Another reason is because it’s supported in all major browsers: 95.8% support global support (see figure 8). The most challenging layout that the built was the one in homepage (figure 9). The reason is because I used the same template part named “content.php”. I wanted to show the same post elements (i.e. thumbnail, title and continue reading link) and structure for both the featured posts and latest posts sections and wanted to avoid duplication of code. Therefore, both sections share the same structure and classes, so I needed to find a while to style them differently and make them responsive.
The final style tiles for Dead Pharaoh (Figure 13) show the main elements of my design: colours, typefaces, buttons, patterns, feel and tones through adjectives. I would say that I’m quite happy with my final choices.
I decided to use WordPress as Content Management System (CMS) because of the following reasons:
Major Project Report – Vito Dipinto
- Nature of my project: Dead Pharaoh is a personal blog and I believe that WordPress, given its origin in blogging and its user friendliness was a valid choice.
WordPress Theme Development Tasks Completed:
Setting Up a WordPress Development Environment
- Install WordPress locally (MAMP);
- Install Sass and Compass;
- Download Underscores Theme from https://underscores.me/;
- Setup of underscores to work with Sass and Compass (creation of a config.rb file, creation of a sass directory);
- Install Plugin Show Current Template, which show the current template in use and template files name currently in use in the tool bar. Setting Up the Functions.php
- Configure the theme info inside style.scss (theme name, theme uri, etc.)
- Enqueue of theming scripts:
- CSS Stylesheet;
- Font-awesome CDN;
- Google Fonts: PT Sans and Source Code Pro;
- Remove emoji;
- Register Site Menus (navigation bar, footer menu).
- Enables post thumbnails;
- Register custom image sizes for featured images;
- Register sidebars (one for the homepage, another for the pages, another for the footer, at the moment deactivated;
- Create a function that display the category lists wherever I want in my theme. In my case: archive page and videos and articles page.
- Add function that shows meta information for the current post: date, time, author.
- Add custom image sizes attributes that enhance responsive image functionality for content images.
- Add Google Analytics
- Register Logo as custom header image.
Use of Underscores as based theme
Underscores is a starter theme that provides the WordPress core theme functionality. It also uses DRY development practices. It does it by using reusable custom template parts which are referenced more than once in the different pages. In my case, I had five template part files stored in the template-parts directory.
- Content.php is called from index.php and it used for displaying just the thumbnail, post title, and continue reading link.
- Content-single.php is called from single.php and is used for displaying the full post content, starting with the title then conditionally showing the thumbnail in full width if the post is not of category Videos (explained in section Conditional Visibility of Thumbnail Image for Single Posts), followed by the post meta data, the post content itself and post footer if one exists, links to the previous and next post, related posts and finally a comments section.
- Content-page.php is called from page.php which is used by the Gallery and Bio pages. It shows the content of the page itself and comments if there are any. At time, comments are not enabled on these pages.
- Content-excerpt.php shows generally the same post elements as content.php plus the category list and an excerpt from the post. This represents the most used template as it is called in:
- Category.php where posts from a particular category are listed
- Page-archive.php for a list of all posts in the website’s history
- Search.php for search results
- Content-none.php which shows latest posts where no other post content has been found for a page
- Content-none.php itself is a template part shown on multiple pages. This is one of the files that was provided with the Underscores theme and was largely left unedited. It shows different content based on whether the page being viewed is a 404, search or another page. It is called from:
- 404.php when a user goes navigates to a page which cannot be found
- Page-archive.php when no posts exist in the history of the site
- Page.php where the page has no posts to display
- Search.php where no results are returned from a search