A few months ago I decided to make a challenge for my self. The idea was to create an effective and simple WordPress theme, with the most important features that WordPress can offer. I decided to get my inspiration from around the web and after that, I made a quiz with keywords, and finally, I created the name of the theme. So the name came up by the acronyms of words “fashion” and “claire” and finally
First I needed to understand the user, so I used a user-needs statements method, and then I created a persona development. Steve helped me to align the goals of creating the WordPress theme.
Steve, is a perfect writer but on the other hand, is a person with no technical skills. He needs to create quickly and confidently his own personal blog. To point out without leaving his comfort zone, in other to spend more time do the things that really matter.
How might we …
- Help Steve to find out his personal blog, to implement his needs?
- Help him to clearly the specifications of the theme that he wants to use?
- Encourage him that it is easy to use the WordPress theme, without having any specific technical skills and knowledge?
- Help Steve to choose his specific requirements for his blog theme?
Using sketching, I created low and mid-fidelity wireframes. This helped me a lot to see in action how the main content of the front page looks like.
The sketching focused on the front page and more specifically on the desktop and mobile layout.
The wireframes gave to me the abillity to modify better the visual hierarchy of the content.
Options and Features of Theme
From the beginning, I had some thoughts on the options and features that I should add and use. All things considered :
- How many fonts can I use and which of them I can finally include?
- Another one thing, these fonts will be able to support languages such as Latin, Cyrillic?
- Regardless of my options, what color combination should I make for the user to easily change the colors from the customizer?
- Although, WordPress theme has a default page, can the user select the template for post and page?
- In case that the content is long enough in view of mobile, what items should display?
The Design System
I wanted to translate elegant style into colors. The color palette contains the basic colors of black shades color and gold color. Of course the user can change them, easily.
High Fidelity Prototype of Fashionclaire
Below, is the high fidelity prototype of Fashionclaire Free WordPress Blog Theme.
Digging the WordPress theme
Below are the basic development process and the scales of how I implement the WordPress theme.
Grid System of Theme
The next step was to create a grid that would work well for the theme requirements. With this intention, the grid in the front-end is fluid and fully responsive with a max-width of 1200px which is based on display property.
Images of Fashionclaire
Every set of images has some specific size and will vary depending on the size of the screen. As a result, all the images have some max and min sizes based on the Grid and the layout of the display.
The navigation is accessible, simple and as a re
Sidebar and Footer Widgets
- Popular Posts.
- Latest Posts.
- In addition, you can add your social media accounts like (Facebook, Twitter, Instagram, Linkedin, Pinterest, Vine, Github, Github, Stack Overflow, Xing, Lastfm, Spotify, Telegram, Foursquare, Yelp, Tripadvisor, Tumblr, Soundcloud, Flickr, 500px, WordPress, Soundcloud, Vimeo, Youtube, Snapchat, etc).
The post is the most important element of the blog and it’s displayed to help along you to read the content.
In fact, the post component is composed of:
- Post thumbnails / Featured image.
- The title of the post.
- The date of the post.
- The number of comments.
- Terms, like category and tags.
- Post description (excerpt and content).
- Call to action.
For instance, do you want to customize the about page? Almost done. Do you want an additional left sidebar only on your blog page? Truly, you can change. Do you want to have a full-width template that is different from the default page template, in your about page? Certainly, you can do that. Hence, the theme comes with three different page templates :
- Left Sidebar.
- Right Sidebar.
- Without Sidebar.
Custom Single Post Templates
Custom single post templates allow you to easily select different templates for your posts.
So, do you want to create a custom single post template for your post? No problem. In that case, the theme gives you the ability to select from 3 different single post templates :
- Left Sidebar.
- Right Sidebar.
- Without Sidebar.
Customizer Theme Settings
The Customizer has pre-built controls for thinks like text, checkboxes, dropdown selects, radio groups, as well as more complex controls such the color picker and of course the image uploader.
For the most part of the theme is the customizer. So for Fashionclaire Free WordPress Blog, I focused on the Customizer settings and options of the theme. In fact, the user and the developer easily can make changes to the theme.
Features of Fashionclaire
- You can select from 53 total Google fonts, and use them not only for the title, tagline but also for body and headings.
- Option to show and hide the excerpt.
- Add excerpt length.
- Add, social media accounts in the header and at the same time the choice to appear them in desktop and mobile layout.
- Option to remove the author content in a single post.
- Show and hide breadcrumbs in single post, page, and archive.
- Show and hide related post section (desktop and mobile layout).
- Display the option or not for “continue reading”.
- Change the color for body, headings, secondary and background.
- Choose a color for the navigation menu.
- Choose the color for a tag, category, breadcrumb, post navigation, author content, etc..
Creating a free WordPress theme is an idea that I had in my mind for a few months already. My idea was to create a WordPress theme from scratch using the latest coding standards. My first mistake when getting started is that I spent a lot of time to figure out which options need to include in the customizer. I tried to think so much from the creator’s side and from the side of the user. Eventually, I realized that in the end, I will not be satisfied with anything, so I moved on the process and I wrote down all the important customizer settings.
The Theme Review team of WordPress is very strict in security settings and general in security management. From the beginning, I hadn’t given it the importance it needed for security. As a result, I lose a lot of time because the theme after the reviewing goes to the end of the queue. That made me think twice before taking the next step.
Working on a Free WordPress theme, made me realize that the blog is also a better place. If you building a blog theme, then typography is the main key point, but some other key points are the settings and the features of the theme. Finally, It was a wonderful experience designing this theme and even more fascinating about the research method.
The changes are gradually being made to the core of WordPress, but since the style of WordPress themes will be changing due to the Gutenberg editor, I will update the current theme with the latest requirements that provide the Theme review team of WordPress. But upon renewal, this side project of Fashionclaire Free WordPress Blog Theme will remain available on Github.