Report 4 – Week 5

Accomplishment this week


I started this week’s work with the small-screen menu. I wanted it to have similar style of the large-screen menu. The basic color scheme is also grey, red and white.

Problem#1: I used superfish for the menu and set the breakpoint to be 600px. The superfish shouldn’t work when the screen width is smaller than 600px but actually it does.

 var breakpoint = 600;
 var sf = $('ul.nav-menu');
  else if($(document).width() < breakpoint) { //<--shouldn't work when window size < 600px

10-level depthSolution: Then I realize it’s because of some mistake I made when I modified the layout file. I didn’t notice that in the widget Nav Menu there are 10 levels of menu items and they expand out of window when the window size is small. So the actual window size is not as small as I thought.

//in sidebar-content.css
.site-content .widget-area {
 width: 250px;
 float: left;
 padding: 1rem;
 margin: auto;
 overflow:hidden; // <-- add this to keep widgets inside widget area only

However I don’t think this is a proper solution because the result is really unpleasant. The content outside widget area is simply cut and there is no way for users to see those abandoned content.


Problem#2(not solved yet!!): The level 3 menu items act weird. They are in the list originally but expand outside window when the mouse if over level 2 or level 3.

mouse-not-over                                 mouse-over


Search Box

blue-borderProblem#1: When the input text field is focused, the outline color of input field changes to blue color which is not something I want (the menu button in responsive no-blue-bordermenu design also has this problem).

Solution: One line code will solve this:

outline: 0!important;  //add this to button:focus and input[type="***"]:focus

I found some useful advice about this from Stack Overflow which says

Before removing that ugly blue outline, you may want to take accessibility into consideration. By default, that blue outline is placed on focusable elements. This is so that users with accessibility issues are able to focus that button by tabbing to it. Some users do not have the motor skills to use a mouse and must use only the keyboard (or some other input device) for computer interaction. When you remove the blue outline, there is no longer a visual indicator on what element is focused. If you are going to remove the blue outline, you should replace it with another type of visual indication that the button is focused.

shadow-borderWhen I remove the blue outline for input field, it doesn’t have any indication for focus so I added some shadow to indicate it.

textarea:focus {
 color: #111;
 outline: 0!important;
 box-shadow:2px 2px 5px #000;


responsive-search-toggleProblem#2: For the responsive design of search box, the search icon is falls to the next line of Menu button even when the line height is sufficient.


.main-navigation .menu-toggle {
 .main-navigation.toggled .menu-toggle {
 float: none;



Problem#1: When I added float: left; to the footer widgets, the site-info appeared on the top of footer widgets.

.footer-widgets .widget {
 float: left;                //<--this line causes problem
 width: 350px;
 margin: 0 2rem 4rem 2rem;



Solution: Then I realized the floating element doesn’t count for the space. Because all widgets are floating, the parent <div class=”footer-widget”> has 0px for height. Therefore, site-info comes up. After I added clear: both; to site-info class, the site-info appeared in the right place, the bottom of website.

.site-info { 
background-color: #000; 
background-color: hsl(0,0,0%); 
text-align: center; 
clear: both; //<-- this line solves problem 

Problem#2: Definition of widthcol in Masonry? At first I thought it means the minimum width of column of the floating elements, but when I set the value to be 300px it doesn’t work. It works when I set it to 30px.


Single Post and Index Page

sample-postWhen formatting single page template, I found that the font I chose for meta and navigation is very similar to the font used in body part. So I changed PT Serif to Sans Serif and used that instead.

I encountered with great trouble when I was doing the Index Page. I was planning to do something but failed. For posts with feature images, I wanted to show feature image and put the title, meta and continue-reading icon above the image (like the screenshot at right from a theme demo). Posts without feature image would be displayed normally with title, meta, excerpt and so on. I tried different ways but didn’t find a way to achieve this.


Outcome (so far)

Through these two weeks of theme developing, I am more familiar with the theme development progress and hierarchy of the template files. There were always unexpected problems popping up and I’ve learnt a lot when I tried to solve those problems.

Underscores provides a very good start point. All contents are already there, I can simply move the elements to the place I prefer and modify their looks. However, there were also elements that I failed to find their original places. For example, when I modify the comments, I wanted to do some change to the meta part. I could only find the PHP codes that fetch all information into an array but didn’t find the codes that wrap the information with HTML tags. These template files are convenient to use but quite complicated in nature.

I found that it is not difficult to develop a theme but very difficult to make it special, unique and at the same time appealing to users. I am restricted by my imagination and programming skills. The outcome of this first theme is very plain and I am not really satisfied. Sometimes when I wanted to do something, like the index page, I couldn’t find the way to achieve it then I had to change my design.

I looked through some popular themes, most of them make use of large, high-resolution images as their feature images or header images. They look really cool with those demo images. But when a theme depends highly on the uploaded images, how to make sure it won’t look strange when user chooses not to upload images or the image is not suitable?

Below are some screenshots of my theme:

Footer Widgets
Footer Widgets
SIngle Post
SIngle Post

Planning for Next Week

If we are stilling doing theme next week, I will try to make it better. There are still some unsolved problems like the bug in responsive menu and there are some undone work like gallery and content-aside template.

In the mean time I want to take some time to read books. I found the book WordPress for Dummies not useful so I want to read another one which is  Professional WordPress: Design and Development. It introduces the back-end process which I think will be useful.


TODO: Gallery, content-aside template.

4 comments on “Report 4 – Week 5

  1. Very detailed documentation of your process of theme development. I was particularly struck by your comment that while technical problems can all be resolved, the real challenge is in the design. That is why I would like to have you work with Beverley for the next few weeks, so that together you and she can collaborate on programming and design. We’ll discuss in our meeting today. Excellent work!

    For the widgets with hierarchy like Navigation Menu, Categories and Pages, it is possible that the the deep levels are off the container (as in Menu Problem#1). I set overflow:hidden for all widgets but I don’t want the information contained in these levels to simply disappear. So I added scroll bar to these 3 widgets by adding
    overflow: auto;
    It’s hard to play with this now because all the later codes are based on it. I would download another Underscores and play around with it.

  3. For the bug in small-screen menu, I solved it by adding the following codes to media query
    .main-navigation ul ul li:hover > ul,
    .main-navigation ul ul li.focus > ul {
    left: 0;
    This left was set to 100% in large screen, which means when the the second level menu item is focused or hovered, the ul contained in the second level menu item ( the third level menu) will be moved to the right side of the second level menu. When I set it to 0 for small screen, the third level menu won’t fly to the right.
    Problem Solved!

Leave a Reply