Chapter 1 Introduction

Main objective

The main objective of this project is to design and develop a set of personal blog site themes that explore different dimensions of WordPress. The themes should be custom designed and written, capable of fulfilling the technological, functional, and aesthetic needs of the art students in the School of Art, Design and Media (ADM) and it should be fully tested and implemented within Open Source Studio (OSS).

Brief introduction of results

• Plum Blossom

Plum Blossom is a theme that is suitable for students who desire a clean look of their site and/or for students who are interested in Asian art. The structured layout of articles and the elegant linen-and-white color scheme provide a simple and tiny look of the site. The design details present an oriental style to the users without compromising the simplicity. It is customizable and fully responsive to cope with different requirements of users.

• Palette

Palette, different from Plum Blossom, is suitable for students who like magazine-style image-based look of site and/or for them who like to manipulate colors. The emphasis on the feature images makes it a best choice for art students who are good at using pictures to convey ideas. The infinite scroll of images present the pictures as if they are exhibited in a gallery. The plenty color choices provided allows students to design their own color scheme.

The reason to do it

• Brief Introduction of WordPress, Open Source Studio (OSS) and WordPress Themes

WordPress (https://wordpress.org/) is a content management system (CMS) built on PHP and MySQL. It is a popular blogging system and is also used to create dynamic webpages. It is completely free and open source so that it is easy to modify and customize it.

Open Source Studio (OSS) (https://oss.adm.ntu.edu.sg/) is “a collaborative, online software environment designed to meet the needs and dynamics of studio-based teaching in the media arts.” (What is OSS?, n.d.) It is based on multisite WordPress and every student in the School of Art, Design and Media (ADM) is assigned a WordPress personal blog site.

Every WordPress blog site needs a theme to control how the content is displayed. With the same content, different themes can create completely different looks and provide different functionalities.

• Web application development

Designing and developing WordPress themes for Open Source Studio (OSS) requires me to go through the whole Software Development Life Cycle (SDLC) of gathering requirements from clients, analyzing, designing, developing, testing and deploying. In order to achieve the results I want, I need to learn and master web-related programming languages including PHP, HTML, CSS, JavaScript and jQuery. During the process, I can understand thoroughly all the techniques and hierarchies inside WordPress. All these experiences would help me build a solid foundation for web application development where I want to pursue my career in.

• User interaction

This project is not isolated in the sense that there is always interaction between me, as a developer, and students and staff members in the School of Art, Design and Media (ADM), as clients and end users. I am able to gather their requirements and user feedback and incorporate them into the web application development process. At the end, my themes will be inside the Open Source Studio (OSS) system and available for all the students to use with my name on them as the author. The sense of accomplishment being an author of a theme that is used by students is a strong reason for me to choose this project.

• Information Engineering and Media (IEM) – Where Technology Meets Art

The idea of merging art and technology together attracted me 4 years ago when I chose my major and I have enjoyed a lot from the mixed art and engineering courses during my undergraduate study. The art courses like the drawing classes have taught me how to appreciate beauty and in the modeling classes I learned how to create innovative yet practical designs. This project, with almost equal importance in design part and coding part, will act as a wonderful ending for my undergraduate study as an Information Engineering and Media (IEM) student.

Chapter 2 Background

WordPress

WordPress (https://wordpress.org/) is one of the most popular content manage system. As of March 2016, it is used by 26.1% websites in the world and takes market share of 59.1% among all content management systems (Usage of content management systems for websites, 2016). Some notable big brand websites which use WordPress include The New York Times Company (http://www.nytco.com/), Harvard Business Review Blog (https://hbr.org/) and BBC America (http://www.bbcamerica.com/).

WordPress is a free software, which means everyone can download, install and use it without paying anything. It is an open source software, which means the source codes are available after the software is downloaded so that everyone can modify and customize it.

WordPress is maintained and developed by WordPress Community (https://wordpress.org/news/category/community/) which consist of developers and consultants from all over the world and they “contribute to WordPress by writing patches, answering support questions, writing plugins, creating themes, translating WordPress and updating documentation.” (Balkhi, 2015)

In this project, I will become a member of the Community and contribute to WordPress by creating new themes for it.

Open Source studio (OSS)

Open Source studio (OSS) (https://oss.adm.ntu.edu.sg/) is a project led by Visiting Associate Professor Randall Packer in the School of Art, Design and Media (ADM). It is a collaborative, online software environment based on multisite WordPress. It aims to provide an online platform which imitates the studio-based teaching environment in art courses and create an environment for “critical writing, media documentation, portfolio presentation, online conferencing, asynchronous discussion, and social media.” (What is OSS?, n.d.)

In Open Source Studio (OSS), every student enrolled in the art courses is assigned a personal WordPress blog site. Each course has a class site where all students enrolled in the specific course are included in. When a student post something which is related to the specific course on the personal site, an excerpt of the content will show up in the class site automatically where classmates can go to read and comment on the post. In this way, all students can share their thoughts and communicate freely on this platform.

WordPress Themes

A WordPress theme controls how the content is organized and presented on your website. It determines the front-end appearance which the visitors will see when they go to the site. It reflects the personality of the site and influences user experiences.

A theme can change the layout of site and decide whether some certain content is going to be displayed or not. However, a theme does not alter any data or content stored in the database. It picks the content it needs and puts the content to some place it belongs to.

In WordPress, theme is a folder that consists of various files including PHP files, CSS files, graphics, JavaScript files and text files. In order for these files to work together, there are some rules to follow. The followings will explain what the rules are and how a WordPress webpage is generated.

• Template Files

WordPress is a web template system, which means it combines template files to form webpages that are displayed.

Template files in WordPress theme are the PHP files that controls what content is displayed on the webpage and they normally contain a mixture of HTML, template tags and PHP codes. For example, index.php template file is used to display latest posted articles and is often set as home page; search.php template file is used to display the search results.

Don’t Repeat Yourself (DRY) is a web development principle which is also followed by WordPress theme development. Some template files, template partials, are included in other template files and is reusable throughout the web site. For example, header.php, footer.php and sidebar.php are such reusable components and can be called from index.php so that index.php does not need to repeat these codes. Comment.php can be called from every post page that enables comments to retrieve and display comments.

• Template Hierarchy

Template hierarchy is an agreed hierarchy of template files against which WordPress searches down to find the first matching template file to display a webpage when it is requested by a user.

Query string, which is the part of URL that is after the site domain, is used to search against the template hierarchy. For example, if I click on the tag ‘color’ on my Open Source Studio (OSS) site, the browser will request the link https://oss.adm.ntu.edu.sg/qibo0001/tag/color/ to the server. According to the hierarchy, WordPress will first search for tag-color.php in my theme folder. If not found, it will search for tag-8.php (since the id for ‘color’ is 8). If still cannot find, it will search for tag.php, archive.php or finally index.php.

Index.php is the most critical template file according to the template hierarchy, because it is the backup for all individual webpages if more specific template files cannot be found.

As a WordPress theme developer, it is important to remember the template hierarchy so that the correct template files modified during the development.

• Template Tags

Template tags are the WordPress PHP functions that call another template file or get data and content from database.

The template partials introduced earlier can be called from other template files using template tags. For example, get_header() retrieves header.php template file and include it in the current template file.

Information from database can also be retrieved using template tags, like the_title() retrieves the title for a post or page.

• The Loop

The loop is a WordPress technique to loop through the posts retrieved from MySQL database. The query string, which is used to determine the template file to be used, is also used for the MySQL query to retrieve posts for display. The previous example webpage https://oss.adm.ntu.edu.sg/qibo0001/tag/color/ will retrieve all the posts with the tag ‘color’ and loop through these posts.

Inside a loop, template tags can be used to further retrieve information for each post. Theme developers have full control of which information to be displayed and how it is displayed. My two themes have the same loop mechanism yet completely different look for the content displayed within the loop. Loop can also be customized or added according to the need of developers.

• Customizer

The Customizer is a theme option for users to change some aspects of the theme, like the site title, font color, header image, etc. Theme developer can program it to control what can be changes and how it can be changed. Customizer provides more flexibility and possibility for themes and it should be considered carefully by theme developers.

• Programming languages required

During the process of WordPress theme development, HTML programming is required in template files to wrap content properly for CSS styling. CSS plays an important role in realizing the visual design. PHP is required in order to understand, customize and create PHP functions. JavaScript is necessary to create appealing effect and Customizer preview. JQuery and AJAX are also needed sometimes to achieve desired results like the infinite scroll.