Reading time: 9 minutes
Update: 13 november 2025
If you're a web designer and you're using wordpress more often, you might like this case study, and i'll show you how i designed the wordpress theme. Enjoy
A few months ago, at the invitation of slocum themes, i accepted the challenge of designing the wordpress theme for bloggers. The idea is to create a simple and effective theme using all wordpress defaults。
I decided to draw inspiration from social media. After all, social media upgrades can be seen as microblogging. I've done some research on how social media platforms like facebook, twitter, google+ and pinterest display articles, especially articles with photographs, and then socialize was born。
Design process
The first step will always be to draw a line frame on the paper, then design it in the photoshop, then code it. Given that it's the subject of wordpress, i can list all the components and elements of the site, so i decided to follow the basic wordpress blog style (page header, subject, sidebar, end of page) without drawing too many lines。
Instead, i want to create a set of style guides, so i'm going to break everything down, and i'm going to design one component at a time, and i'm going to keep the whole design unified. I'm only going to put all the components together when i'm done, not in the usual way, starting with the first page and then the internal page, and i want to create a reliable guide that can be used on all the pages。
Articles component
With this in mind, i think my focus should be on the most important element of the blog, the “article component”, how it will be presented on the front page to attract in-depth reading by users. So this is the beginning of everything. I have broken the articles into more subtle elements, such as:
I decided to ignore some other common elements, such as classification, labelling, comment numbers。
After drawing a few manuscripts, i had a fixed idea of what i wanted to design. I'm not re-engineering the wheel, i'm trying to simplify it, and most blog themes today have a staggering number of options, and my idea is to keep it simple and effective on the desktop and mobile devices。
As the first and most important component is completed, i list all the other components and elements that need to be designed。
Colour
It is important where the themes are used because of the variety of colour scenarios and the colours used. This is how i break it down:
Once the colour guide has been created, it can easily be replaced with a different set of colours using adobe photoshop, reducing saturation to black and white and covering the selected colours in one layer。
Fonts
The next step is to define a set of font structure benchmarks that can be used to guide articles on both the front and the inside pages. In this project, the font i selected was source sans pro, a non-linear font produced by adobe and performed well in the user interface. Although i have created a simple set of guides in the photoshop, a complete version of the guide needs to be encoded for reference (see font guides)。
Grid
I created a grid system that is very effective for blogs with side bars. Flow layout. It's completely responsive, with a maximum of 1,200 pixel width
Picture
Although the theme is responsive, some pictures will be sized according to the size of the screen, and i want to set the maximum and minimum sizes based on the grid。
Navigation and buttons
The navigation is very simple, and the color effects are determined by the colours that i choose, in order to maintain consistency across the subject。
Sidebar & end of page
The end of the page and the sidebar used the same components, so i designed them as one, and the only difference is that the background color at the end of the page makes it slightly different。
