Reading WordPress Theme Design

Two Things to Consider about the Theme

What type of blog this theme is going to be applied for?

The theme I will develop is for OSS personal blog site and students would mainly use it for submitting assignments, organizing thoughts and ideas and exchanging ideas via commenting. So the most important thing is to display the content and organize the content.

Opinions from ADM students? 

I consulted Beverley for some advice on what functionalities ADM students normally use and what kind of theme style they prefer.

• Do they use pages or just use posts?
• Their posts tend to be very long? With many images and videos?
• Do they use categories a lot as a way to group posts for each assignment?
• What widgets do they normally have?
• What do they always do on the blog except for creating posts and reply to comments? (what other usability I need to take care of so that it’s easy for students to use it)
• Based on your observation, what kind of theme styles do they like the most? (Elegant, simple, colorful, text-based, image-based, etc)
• How do they like header images? or feature images? larger the better or smaller the better?
• etc

From her advice and my understanding, the key points are

• Wider width for text and images are preferred.
• Larger sizes for fonts and line heights would make reading more comfortable as most OSS users tend to have text-heavy posts.
• Students prefer white themes, as simple as possible, with rooms for personal customization: able to change color of links, title, header images etc.
• Students would copy information directly from another source into their post so quote/ citation format is important. (many students may not realize this function yet)
• Students mostly use post rather than page, so it may not be necessary for the navigation menu to appear all the time.
• Category information is important for each post because students use different categories for different courses and assignments. They would want to know which course and assignment each post is about at the first glance. This implies the importance of category page as well.
• Comment information also matters because it’s a discussion and sharing platform.
• Beverley noticed that most students display the whole post content on the index page. It’s because the theme they chose has such a default setting and also because they may not know that they can add a Read More tag anywhere they want. (an Excerpt meta box on edit page maybe helpful since they can put content they want to show on index page)

function first_try_addbox() {
 add_meta_box('postexcerpt', __('Excerpt'), 'post_excerpt_meta_box', 'post', 'normal', 'core');
}
add_action( 'admin_menu', 'first_try_addbox' );

• From the two student sites Beverley gave me as examples, there are no feature images shown on index page. I don’t know if it’s the setting of theme or the choice of students. Personally, I don’t like large feature images on index page because the effect depends a lot on the chosen image.

With the above features / restrictions, how to realize the oriental style is a thing to consider. The preset color scheme is one aspect, but students have the option to change them. Details like the icon, box border, title underline, etc is another aspect but they should not conflict with the display of content.

What widgets or plugins might be used in this theme?

As mentioned above, category widget should be included. Students also use Recently posted, Recent comments, Tag Cloud, perhaps a plain text/html one for them to share their social media details

Design Process

The design and production procedure introduced in this book is to sketch the design and test the CSS typography, layout and color scheme on a separate HTML page first (design for both large screens and small screens). The reason is that the design may not be able to implement and the result may not be as appealing as you thought. It’s easier to change on a separate HTML page if some problem occurs at this stage. The test should be done on different browsers and different sizes of screen(mobile)

Before testing typography, we need to include text content into the HTML site. The tip from the author Silver here is to start with a lot of text. If the site looks fine with a lot of text, when users input less content it would still look fine; but the opposite may result in an expected result.

When considering fonts,

I usually think in terms of headers, secondary fonts, block-quotes, specialty text (like depicting code), and paragraph page text.

Silver provides a list of basic fonts on page 34.

For font size, Silver recommends using px directly. However, I prefer the idea of this Font Size Idea: px at the Root, rem for Components, em for Text Elements.

If the typography doesn’t look good here, further layout and color won’t help much. Silver suggests to settle down typography at this stage.

For checking layout, Silver introduces a method that I found useful which is to add bright colored border to each div in the process of adjusting so that it’s easy to see the effect.

After settling down the layout, we need to consider the color scheme. Silver recommends to prepare a palette of 6 to 10 colors for a theme. A trick is to pick an image that has the colors you like and use Photoshop to retrieve the color palette. We can check if the color scheme is satisfactory by adding corresponding CSS to the HTML file.

Validating

Testing is wholly based on the visual output of the website. Browsers would help you output the desired result even if there is some error in the code. When more codes are present, there will be a time when browser can no long cover the error and it would be extremely hard for you to troubleshoot.

Silver recommends to validate codes using  W3C’s XHTML(not so useful in WordPress theme development) and CSS validators and change the invalid codes immediately before continuing.

I missed this step when I developed my first theme and the visual output of my theme was fine. However, when I uploaded my style.css file, 6 errors occurred.

Summary

This book gives a good guideline on how to design the theme from scratch, also some tricks and useful websites that designers can use. From this week onward, I will start thinking about how my final theme would look like and do some prototypes on separate HTML pages.