Week 10 Post – Report 10

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.

color scheme
Color Scheme Obtained Using This Method



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.

css validator


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.

2 comments on “Week 10 Post – Report 10

  1. Boyan, finally catching up with last week’s posts. Excellent organization of structural elements for the theme based on your consultation with Beverley. I am very impressed with the level of detail in terms of what kinds of functionality the students require. There are a couple of other considerations you should consider:

    — What do the faculty need in a student site? This is important because faculty access student sites to find assignments and one of the things I have found is that the sidebar with all the various widgets should be easy to find. Some themes require that you click on a button to reveal the sidebar. This is not good because it means that faculty have to spend more time figuring this out.

    — You also need to be aware of the modifications that our developers are making, not just to the class site, but they effect the student sites as well. Note that there has been a change in the way categories are listed: they are now listed by the name of the course rather than the class code.

    — Finally, you will need to have your theme tested by the developers to be sure it is compatible with OSS and its multi-site architecture. I am not really sure what makes a theme compatible or incompatible, but that is something to investigate.

    Great information about debugging. I have never checked my own code and I probably should.

    Excellent work!!

    1. Thanks for your feedback.

      For the sidebar thing, I want to talk to your more about it on today’s meeting. I actually think it’s not a bad idea to have it collapsed when the window size is small, as part of responsive design.

      I know that compatibility with OSS is important but I don’t know which aspect should I pay attention to when I am coding. Is it possible for us to have a meeting with the developers at the end of this semester? Then I will know more about what I should change to cope with their modifications and how to make it compatible. Before that I will not code on the real WordPress theme but test my ideas on simple HTML page.

Leave a Reply