Teach you to design your own WordPress theme

A few months ago, I was asked to accept a challenge from Slocum themes to design wordpress themes for bloggers. The idea is to use all the WordPress default features to create a concise and effective theme.

I decided to draw inspiration from social media. After all, the upgraded version of social media can be viewed as a micro-blog. For social media platforms like Facebook, Twitter, Google + and Pinterest, I did some research, especially with photos, and socialize was born.

Design process

The first step is always to draw a wireframe on a piece of paper, then design it in Photoshop and then encode it. Given the WordPress theme, I was able to list all the components and elements of the site, so I decided to follow the basic WordPress blog style (header, main, sidebar, footer) without drawing too many wireframes.

Instead, I want to create a set of style guides, so I break everything down, design a component one at a time, and maintain the unity of the overall design. I'm only putting them together after all the components are finished, not in the usual way, first designing the home page again, and I want to create a reliable guide that can be used on all pages.

Article components

With this in mind, I think my focus should be on the most important element of the blog-"article component", how it should be displayed on the home page to attract users to read more deeply. So this is the starting point for everything. I break down the article component into more subtle elements, such as:

Article date

Article author

Article title

Article thumbnail

Article description

Action Item

I decided to ignore some of the other common elements, such as categories, tags, and comment numbers.

After drawing a few drafts, I have a fixed concept of what I want to design. I'm not reinventing the wheel, I'm trying to simplify it, and now most blog topics have an amazing number of options, and my idea is to keep it simple and efficient on both the desktop and the mobile device.

With the first and most important component complete, I list all the other components and elements that need to be designed.

Color

Font

Grid

Image

Navigation and buttons

Side Sidebar

End of page

Article page

Article comments

Color

Because the theme will have a variety of color schemes, how many colors to use, it is important to use where. That's how I break it down:

Primary color

Auxiliary color

Background color

Text color

Link color

Link

Mouse hover State

Mouse click state

Once the color guide is created, you can use Adobe Photoshop to easily replace it with a different color, reducing saturation to black and white, and then overwriting a layer of selected colors.

Font

The next step is to define a set of font-structure benchmarks to guide the articles on the home page and inside pages. In this project, the font I selected is source Sans Pro, a sans serif font produced by Adobe, which behaves well in the user interface. Although I have created a simple set of guidelines in Photoshop, I need to encode a complete version for reference (see the Font Guide).

Grid

I created a very efficient grid system for blogs with sidebar, streaming layouts, fully responsive, with a maximum support of 1200 pixel wide

Image

Although the theme is responsive, some pictures will vary in size depending on the size of the screen, and I still want to set the maximum and minimum size according to the grid.

Navigation and buttons

The navigation remains very concise and the color effect is determined by the color I choose, in order to maintain consistency throughout the subject.

Side bar and end of page

The footer and sidebar use the same components, so I design them as one, and the only difference is that the background color at the end of the page makes the components feel slightly different.

Articles and Comment components

To complete all the components in my style guide, the articles and article comment components are also bad.

The final design

Once my style guide is complete, I just need to put everything together, and I've written HTML and CSS and handed it to my friends in Slocum studio to handle it as a WordPress theme. Some elements have slight changes in the encoding process.

This is the final home page, this set of themes is completely responsive, featuring 8 different colors.

Note : For more wonderful tutorials, please pay attention to the Triple Web Design Tutorial section,