A few months ago I decided to make a challenge for my self. With this in mind, the challenge was to design and develop a free WordPress theme. The idea was to create an effective and simple theme, with the most important features that WordPress can offer. I decided to get my inspiration from social media and also I tried to make a puzzle with words to create the name of the theme. So the name came up by the acronyms of words “fashion” and “claire” and finally
The Design Process
My first step of the design process is to always wireframe on paper ad design on Adobe XD, Adobe Photoshop or Figma, before getting to the coding. As a result, in the case of Fashionclaire free WordPress blog theme, I list all the elements, components that incorporated into the theme customizer and site which I want to design.
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 should 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?
Color palette of Theme
Below, is the basic color palette. The color for the heading is #151515 and the color for the body is #333333. Also, the color for categories, tags, and links is #aa8c00, and I use for the secondary color.
The base typography which applies in the body and heading, is PT-Serif. This font is a transitional serif typeface with humanistic terminals and it harmonizes across metrics, proportions, weights, and design. Consequently, this font can be used for a blog.
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 have 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 wordpress.org directory contains only themes which are considered 100% GPL or GPL compatible. This includes making sure both the code and all of the bundled assets are compatible.WordPress.org
The navigation is accessible, simple and as a re
The Basic UI Design Elements
Sidebar and Footer Widgets
Footer and widgets ha the same components. The only think that it changes is the background color on the footer (#fafafa), which give a bit different feel to all of these components.
- Popular Posts.
- Latest Posts.
- In addition, you can add your socia 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, Souncloud, Vimeo, Youtube, Snapchat etc).
Homepage of Fashionclaire
The design of homepage is simple and minimal while it takes the style of a classic blog. Similarly, consists of the layout of posts, the sidebar and the footer. Also, in the header included a top bar section, which you can add the social media accounts.
The post is the most important element of the blog and it’s display to help along you to read the content. In fact, the post component is composed by :
- Post thumb / Featured image.
- The title of post.
- The date of post.
- Number of comments.
- Terms, like category and tags.
- Post description (excerpt/content).
- Call to action.
Among the most important tools in the quest for complete website control are page templates. They allow users to dramatically alter their website’s design and functionality.
For instance, do you want to customize the about page? Almost done. Do you want an additional left sidebar only in your blog page? Truly, you can change. Do you want to have a full-width template which is different from the default page template, in your about page? Certainly, you can do that. Hence, Fashionclaire Free WordPress Blog Theme it comes with 3 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 fashionclaire gives you the ability to select from 3 different single post templates :
- Left Sidebar.
- Right Sidebar.
- Without Sidebar.
Final Design of Fashionclaire
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, for this reason, I focused on the Customizer settings and options of Fashionclaire WordPress blog theme. In fact, the user and the developer easy can make the changes on the theme.
Features of Fashionclaire
- You can select from 53 total Google fonts, and use them not only for 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
choiceto appear them in desktop and mobile layout.
- Option to remove the author content in 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 color for navigation menu.
- Choose the color for tag, category, breadcrumb, post navigation, author content, etc..