WordPress Themes are very popular and very useful as well. Normal user can very easily change design of their websites with free or premium themes while Theme developers can create and sell high quality themes.
It is important to follow best practices when creating WordPress themes for your own blog or for clients. In this article you will learn about theme development process and best practices to follow when creating WordPress themes.
Here is an excerpt from WordPress CSS Coding Standard page.
Like any coding standard, the purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins. Files within a project should appear as though created by a single entity. Above all else, create code that is readable, meaningful, consistent, and beautiful.
WordPress theme Stats: Their are thousands of free and premium themes are available out there. As of Feb 4 2015 there are 3018 free themes available at https://wordpress.org/themes/. Premium versions of these free themes are also available which offers more advance features, future updates and support.
These all free themes created and published by individual developers or teams, Any one can create and publish WordPress themes, You can publish your themes as free download or you can sell your themes as well.
WordPress theme development business
You can sell themes on online marketplaces like ThemeForest.net or on your personal website or blog. WordPress Theme Development is big industry, individual and teams make millions of dollar every year by selling premium themes.
Avada is one of the most popular and number 1 selling theme which has over 100000 copies sold as of Feb 2015. Pakistani freelancer earns $1 million dollars by selling a WordPress Theme as of August 2013 and recently in August 2014 business insider also published a detailed article A Pakistan-Based Developer Is Building A Huge House For His Family After Selling One WordPress Theme.
Based in Lahore, Pakistan, developer Muhammad Haris partnered with US-based designer Luke Beck to start their WordPress development venture.
Professional Theme development
You can understand how big theme development industry is. This is just one example of success, there are so many other online market places which sells premium WordPress themes.
If you are interested in WordPress theme development, its’s a very good idea but there are some very important things you need to know. WordPress has high coding standards for plug in and theme development. You should always follow best practices when creating WordPress themes.
WordPress has a extensive documentation for theme developers at http://codex.wordpress.org/Theme_Development , which is very helpful when creating Themes for WordPress. You should read this documentation to learn best and recommended practices for theme development.
Custom or Child Theme Development: There are two ways to create WordPress themes. You can create custom themes from scratch, which is time consuming, difficult and complicated process specially if you are a beginner.
WordPress Child theme development is much better and recommended way to start creating themes. It saves your time as a developer. If you are new to theme development then it will be much easy for you to understand how WordPress themes works.
if you want to sell sell WordPress themes than child theme development is not for you, you will have to create standard themes from scratch. You can use starter WordPress themes to build and sell themes.
Underscore is very powerful and developer friendly starter theme, All the essential mark up is available, you can start writing your own CSS to design your themes. Underscore is developed by Automatic the company behind wordpress.com and wordpres.org.
Underscore offers a just right amount of lean, well-commented, modern, HTML5 templates and minimum CSS. All the necessary PHP mark up for WordPress is already written for you. You can build your custom themes very quickly and easily without learning best practices and coding standards from scratch.
But to create custom themes or child themes you need to know CSS. With CSS you can create unique layouts and add awesome styling to your WordPress themes. You can even reset and rebuild WordPress theme CSS and define your own layout with CSS.
WordPress CSS Coding Standard
CSS is simple and easy to learn but it can be tricky and complicated as well when creating advance layout. WordPress team has also published detailed CSS Coding Standards for theme developer. These WordPress CSS coding standards are very helpful when creating or editing theme layouts with CSS.
You can read more details about WordPress CSS coding standard at core handbook. You can learn how to structure your CSS in WordPress themes. Every developer has different method for structuring CSS Stylesheet.
WordPress CSS Coding Standards guidelines recommend to Use tabs, not spaces, to indent each property.
Use tabs, not spaces, to indent each property.
Add two blank lines between sections and one blank line between blocks in a section.
Each selector should be on its own line, ending in either a comma or an opening curly brace. Property-value pairs should be on their own line, with one tab of indentation and an ending semicolon. The closing brace should be flush left, using the same level of indentation as the opening selector.
<
div class=”line number1 index0 alt2″>
Correct CSS Structure :
#selector-1,
#selector-2,
#selector-3 {
background: #fff;
color: #000;
}
Incorrect CSS Structure:
#selector-1, #selector-2, #selector-3 {
background: #fff;
color: #000;
}
#selector-1 { background: #fff; color: #000; }
In above example you can see how you should structure CSS when developing WordPress themes or CSS.
Guidelines for CSS Selectors, Properties, Properties ordering, vendor Prefixes, values, Media Queries, Commenting, Best Practices are also available at WordPress CSS Coding Standard page. You should read this page to learn more.
WordPress Generated Classes
WordPress also generate some special CSS classes for block level elements and aligning images. These CSS classes were introduces in version 2.5. aligncenter,alignleft, alignnone and alignright are few of those classes.
WordPress also use these same classes to align images that have a caption. Few other CSS classes are required for captions and accessibility as well. According to WordPress every theme should have these CSS styles in its style.css file.
I recently created a child theme with Bootstrap framework, 2012 was parent theme but i used deregister function to unregister parent theme’s CSS styles. Images were not aligned properly in my child theme because these recommended CSS styles were not available in my child theme’s CSS file.
After Adding these CSS styles all images were aligned properly. So it is always to good idea to add these styles to your theme’s CSS file. You can see all styles below or visit WordPress CSS page to learn more.
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
WordPress CSS Resources
At the bottom of WordPress CSS page you can find CSS Resources section. There are 8 resources available. These resources are also very helpful for beginner and intermediate WordPress developers.