How to Code WordPress Theme Perfectly?

This is a guest post by Joseph Herb, a WordPress Consultant at PreceptionSystem.

WordPress is one of the most excellent applications that used as a
blogging platform as well as for developing websites. Developing theme
for WP site is simple as it is one of the most flexible platform and
easy-to-use. In this post, we are going to take through the process of
developing excellent WordPress theme that enhances your site’s looks.

WordPress Coding Standards

Every developer has their own preferred style of coding. Some of them
prefer a single line of code while some don’t like whitespace that
much. However, if you are developing theme for your client then ensure
to code clearly. Whenever writing codes, make sure to have code “clear
enough”.

There are universal standards for coding that create every with same
style. Additionally, not only developers, but also theme marketplaces
and download centers need to codes with standards. Four main programming
and markup languages like CSS, JavaScript, HTML, and PHP are required
to develop WordPress themes.

Let’s discuss each of them in brief:

CSS Standards

You will find longer list for proper CSS coding:

  • Use readable selectors. .c6 is not a good name – name it .column-sixth!
  • Ordering for the properties needs to be “display, positioning, box model, colors, typography and other”.
  • No over qualifying. div.column is meaningless when you can just use .column.
  • Properties and their values should be in lowercase too, except for font names and vendor-specific properties.
  • Use lowercase letters to name all your class and id selectors and separate words with hyphens.
  • Order the vendor prefixes from longest (-webkit-) to shortest (no prefix).
  • Keep your media queries at the bottom of your stylesheet.
  • Comment your CSS code as you comment in PHP. More on that later.
  • Properties should be indented with tabs.
  • You can group selectors but every selector must have its own line for readability.
JavaScript Standards
  • As JavaScript is becoming vital for many WordPress themes, we have created standards and rules for it as well.
  • You cannot open and close Braces within the same line.
  • Use single quotes instead of double quotes, unless a string contains single quotes.
  • Use whitespace for readability, not for fun
  • Treat conditionals and loops very delicately – they’re usually the
    easiest to misread. Using braces and whitespace are key to this.
  • If you’re going to use jQuery; define an anonymous function, and pass jQuery as the argument before doing anything else.
  • Multiple variables can be declared on a single line. However, for assigning value, you have to require separate lines.
  • Use whitespace freely as you please in your code – don’t use whitespace on blank lines
  • The new Array() and new Object() notations are “no-no”s. Use shorthand equivalents ([] and {}) instead.
  • Name your functions and variables using camelCase, not_with_underscores. Constructors should be in TitleCase.
HTML Standards

If you want to write standards-compliant HTML code, there are simple roles for that:

  • Type attribute values in lowercase – unless it is for humans.
  • Ensure to wrap your attribute values with quotes. Single and double quotes both are acceptable.
  • Always Validate your code with W3C.
  • Take care of self-closing elements. End the element with a space, a slash and the “greater than” sign.
  • Indentation must be logical and readable. PHP code mixed within the HTML shouldn’t be an exception.
PHP Standards:

It is one of the difficult parts that include numerous rules like:

  • Single and double quotes
  • Naming conventions
  • Special guest star SQL and formatting database queries
  • “Yoda Conditions”
  • Whitespace usage
  • Regular expressions

Properly Commenting Your Code

It is compulsory to create theme with clear coding and readable so other developers understand how you have created your theme. PHPDoc is the best practice for PHP while phpDocumentor is of the documentation style. Such things are used between hired WordPress developers and suggested PHP Documentation Standards page at Make WordPress. A clean documentation style is provided for your PHP code.

Moreover, the WordPress CSS Standards page at Make WordPress suggests
things that you usually like to do in PHPDoc as for CSS. If we are
concerning HTML and JavaScript code, no recommended or required way to
comment your code. However, it doesn’t mean you can’t do anything. It is
advisable to make yourself clear about coding and gather essential
information by commenting in blogs, forums or anywhere you find vital.

How to Validate and Test the Theme?

No doubt, you are developing theme that runs excellent in your
website, however, you have to double sure that your created theme should
work in many other websites as many people are downloading theme to
make their website manageable. To validate your WP theme as per the set
of guidelines and rules use Theme Check a free WordPress plugin. I like to give you proper guidance of how to use Theme Check.

Developing a perfect theme, you can place your theme in theme
directories and earn handsome money. There are three different ideas
given below to test your theme and validate your code.

Validate your HTML & CSS with the W3C Validators

You have to validate your code with the validation services of the W3C. If you are looking for best validation services, then HTML Markup Validator then CSS Validator services are best one. After going through this, check the demo page and ensure that your theme doesn’t have any errors.

Use the “Developer” Plugin to Correct Your Theme

Developed by Automattic, Developer
is a free plug-in that helps WP devs in their development task. It
delivers the essential plug-ins for development environment and makes
your task easier than before. 30 various plugins are available for you, some of them help to debug your theme while some make development process easier.

Test Your Theme With Test Data

Developers have to test their code with some content. No matter you
have developed your own codes, ensure to consider testing with some
“test data”.

  • Make use of exhaustive test data. You can also have option of using WPTest.io, which is an excellent site, consisting of sample WordPress content

OR

  • Make use of WordPress’ sample data that has some of the most used
    content types and helps you to observe your theme’s shortcomings beside
    content you overlooked to consider.

Closing Thought:

Going through the process, you will find essential steps for
developing marvelous theme for WP site. Points like proper coding,
testing and validation of theme, commenting with some standards, etc.
are discussed. If you are finding any problem in development part, let
us know through comment section.