Chapter 1 Introduction

• Main objective

To 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 ADM and it should be fully tested and implemented within Open Source Studio.

• The reason to do it

(Social) While the content on your blog site shows your thoughts and ideas explicitly, the theme you are using expresses who you are implicitly through the aesthetics, what and what.

(Why developing tailored themes for OSS is important?) OSS currently uses WordPress themes which can fit into OSS environment but none of them was designed for OSS. As a teaching and sharing environment for art school students, OSS have some special requirements for themes.

 

Chapter 2 Background

• WordPress

WordPress is the popular content manage system…

• Open Source studio (OSS)

Open Source studio (OSS) is a collaborative, online software environment based on WordPress…

• WordPress Themes

A WordPress theme changes how the content is organized and displayed in your browser….

• Template Files
• Template Hierarchy
• Template Tags
• Database architecture
• The Loop

 

Chapter 3 Research

Book: Professional WordPress, Design and Development.

Book: WordPress Theme Design

Lynda.com course WordPress: Building Themes from scratch Using Underscores.

Online resources:

WordPress Codex (https://codex.wordpress.org/)

WordPress Code Reference (https://developer.wordpress.org/reference/)

WordPress Forums (https://en.forums.wordpress.com/)

Theme Handbook (https://developer.wordpress.org/themes/basics/)

Developer: Wong Hui Wen

 

Chapter 4 Preparation

• Requirements and specifications

Introduce how I gathered requirements from students (the questions emailed to students about their preferences of themes) and what are those requirements.

Introduce the specifications I came up with in order to fulfill the requirements.

• Local and live server set up

Explain why a local server is needed for development purpose and introduce a bit about Bitnami.

Explain why a live server is required for testing purpose (accessible from other devices within NTU network). Introduce how to use the computer in IEM lab as a live server. Explain how to push my theme to live server using remote control and DB Migrate plugin.

 

Chapter 5 Design

Explain why I want to design two different styles of themes and what the differences are in general (oriental vs contemporary, text-based vs image-based, pagination vs infinite scroll…).

Plum Blossom

The concept would be to present an oriental style while still maintaining simple and minimal.

• Visual design
  • Layout design, header, sidebar, content.
  • Special design elements

Plum Blossom header image, yellowish background color that may remind you of the rice paper, transparent background white color, widget borders which are traditional patterns for window frame, auspicious clouds, content borders.

• Color scheme

The reason for such a color scheme.

• Prototype design

For the prototype design, I opted a method that combines Photoshop design and simple coding. I created a static HTML page containing necessary elements like the navigation menu, header, sidebar, post content and footer. (Responsive design – two prototype for large and small screens respectively, prototype image)

• Information design

How the post is designed to be displayed on the index page? Why choose to display those metadata on the index page? Why excerpt instead of full content?

On the post pages, what is the font, font size and line height? What are the designs for hyperlink, table, code, image captions?

Why only one sidebar is designed?

• Interactive design

Customization. What are the designs for the customizer? What is the hierarchy? What functions are provided? Why I chose to provide these functions?

Collapse of navigation menu and side bar widget on smaller screen. How does it facilitate users to achieve better user experience on smaller screens?

Palette

This theme is most suitable for students whose posts involve lots of pictures or who prefer to use images as a way to tell stories. It provides more flexibility on color controls than any other theme in OSS.

• Visual design

Default color scheme. Layout design, header (contains sidebar), content, footer area (widgets). Responsive design for different screen sizes. How the size of images, length of titles change with screen size.

• Information design

How the posts are displayed on the index page using feature images? What are the important metadata?

Why the excerpt instead of feature images are shown on search pages?

What is the font and why? What are the designs for hyperlink, table, code, image captions?

Two widget areas.

• Interactive design

Color manipulation. Since it is not practical to provide color controls for all the elements in the website, three base color schemes are provided inside customizer and the users can change the color of backgrounds and words based on that.

Mouse over to see the metadata for posts. Goes along with your mouse. Direction-aware hover effect.

Infinite scroll.

 

Chapter 6 Development

Image creation

Photoshop, chop to repeatable pattern to reduce the loading time.

Coding (by theme file?)

• Theme template files

Introduce in general what template files are used in each theme, what pages can be composed out of these template files, then introduce in more details.

• Customization-related coding

Explain how the customization is achieved and real-time preview is enabled with the API and the codes.

• Infinite scroll related coding

Explain the JavaScript and AJAX used for implementing them.

• Loading icons for Plum Blossom homepage and infinite scroll

Explain how to achieve this.

• Direction aware hover effect

How to use a jQuery plugin to achieve this.

• Cascade Style Sheet (CSS)

How the CSS codes are grouped and structured. Point out some features that is implemented using CSS like the border around sidebar widget in Plum Blossom. Style word editor in WordPress to preview font and image style when writing (haven’t done yet).

 

Chapter 7 Testing

• Browser compatibility
• Mobile devices
• Touch screen devices
• Creating tutorial for student testing

Introduce the reason and necessity of creating such a tutorial and what I did to make it more useful.

• Users feedback

Take Tiffany’s site as an example to show how student can use and customize my theme. What are the places of my theme that can be improved from her example?

 

Chapter 8 Conclusion

• Summary of the project
• What have been accomplished
• What have not been accomplished
• Future improvement (release online)
• What I learnt from it
• Pursue career in web app developing