Advanced Guidelines To WordPress Theme Development

In this post I will list out some important features which every WordPress theme must have and some guidelines to wordpress theme development.

Theme testing

After you are finished building a wordpress theme make sure you test in on the latest WordPress release and also in atleast two previous releases.

Template tags

A template tag in WordPress is a PHP function which is used to generate and display information dynamically. Template tags are used to combine different parts of page(footer, header, body etc) dynamically, generating wordpress information dynamically, generating author information dynamically and much more. Template tags are the basic building blocks of a WordPress theme.

Make sure you don’t use any deprecated template tags.

Developers mostly forget to use these template tags while building a theme. Take a note of these few must use template tags:

• wp_title(): Its used to display the text inside title tags. Every page must have title tag and title tag should be populated using this function.
• wp_head(): This function is called just before close head tag. This function runs the actions registered using wp_head action.
• wp_footer(): This function is called just before closing the body tags. This function runs the actions registered using the wp_footer action.
• _class(): Its always better if all wordpress themes in the world use the same CSS class names for same elements of theme. Standardization is class names for different elements of a wordpress theme is important. This will help in easy customization of the theme. There are many _class() type functions which produce the class attribute and value for different elements of a theme. Its difficult to use all the _class functions therefore a theme must have atleast post_class() and body_class().

If the layout of you theme is customizable(multiple styles of headers, sidebars, footers, pages etc) then make sure you use get_template_part() and locate_template() to combine different parts of your layout.

You shouldn’t modify the wptexturize() and wpautop() functions.

Exceptions

Eliminate messages with warnings, recommendations, errors or information. Some allowable exceptions are:

• Warning: Found base64_encode()
• Warning: Found base64_decode()
• Warning: Found fwrite()
• Warning: Found fopen()
• Warning: Found fclose()
• Recommended: Found add_theme_support(‘custom-header’, $args)
• Recommended: Found add_theme_support(‘custom-background’, $args)
• Info: Found include_once()
• Info: Found include()
• Info: Found require_once()
• Info: Found require()
• There are still many other messages which are allowed.

Specify Content Width

$content_width is used to specify the maximum width you allocate for content. WordPress core, plugins etc use this feature for various purposes. In technical terms it represents the maximum width of a image in content area.

When you insert an image to a post or page then wordpress sets the img tag width property to this value.

WordPress Classes Styling

WordPress generated HTML code has classes attached to them. We must provide styling for all those wordpress generate HTML code.

These are some ways wordpress generates HTML code

• Images included using WYSIWYG editor.
• Image captions and galleries included via WYSIWYG editor.
• WordPress automatic smilies.
• WordPress default widgets.
• WordPress comments
• WordPress Navigation Menu

We must style the HTML code generated from the above cases. List of wordpress generated classes.

WordPress Naming Conventions

Use unique prefix fir all function names, classes, hooks, public/global variables and database entries to avoid conflict issues with plugins and other themes.

Widgets Ready

Make sure the theme supports widgets.

WordPress Child Theme

A good wordpress theme must provide child theme support.

Navigation Menu

There must be atleast one navigation menu in your theme and that too generated using wp_nav_menu().

WordPress Sticky Posts

Sticky posts must be displayed appropriately. They must behave like sticky elements and must get stuck somewhere where anyone pays high attention.

Loading Front-End Assets

To load stylesheets you must use wp_enqueue_style() and to load scripts you must use wp_enqueue_script().
A must use whichever version of jQuery ships with the current version of WordPress. The jQuery file can be loaded using wp_enqueue_script().

SSL based recourses must be provided with a fallback of non-SSL version. is_ssl() can be used to check if wordpress running in SSL mode.

Tackling Security Issues

Incoming data can be validated using any of these functions based on the type of data: wp_filter_nohtml_kses, wp_filter_kses() and wp_kses.

Similarly all outgoing data should be filtered using these functions based in the type of data: esc_attr(), esc_html(), esc_js(), esc_textarea() and esc_url().

Forms and URLs making changes to critical data must be passed through nonces.

Hard Coding URls

Never use hardcoded URLs. Instead use template tags to refer or include URIs. For example: get_template_directory_uri() can be used to retrieve the URL to the theme directory.

Markup Validation

Always validate markup using W3C Validator. There must not be any warning or errors in your HTML code. Don’t use deprecated HTML tags in your wordpress theme.

Bundling Plugins with your Theme

Plugins are great way to increase the increase the capabilities of your wordpress theme. Sometimes you might want to install some plugins automatically when your theme is installed, this useful if functionality of your theme depends on some plugins.

In case your theme is depended on some wordpress plugin then use TGM Plugin Activation to install plugins programmatically via wordpress theme.

Dynamically generating CSS

Sometimes you may need to generate CSS dynamically based on user selection. For example: generating CSS color codes dynamically based on user selection. This dynamically generated CSS code needs to be inserted into a CSS file and send to the browser.

This kind of task should be done using wp_add_inline_style().

Backward Compatibility

Themes must not provide backward compatibility for out-of-date WordPress versions (more than two prior major WordPress versions e.g. if 3.9 is the current version then no version before 3.7).

Always use function_exists() to check if a function is supported or not before using it.

Internationalization In WordPress Theme

Process of making your theme compatible for multiple languages is called as Internationalization of theme. This is usually done by wrapping string with __() or _e(). The process of generating alternative language strings for your theme language is called localization. This is actually generating .pot file for your theme.

Its not compulsory to make your theme internationalized but its recommended as it targets more audience.

More on it here.

Automatic Theme Verification

Theme check plugins is a great way to automate checking of all basic and advanced theme features. It will tell you all the things that are missing and also improvements you can do to your theme.

If you are planning to launch your theme into themeforest marketplace then make use of Themeforest check. It extends the capability of Theme check plugin.

Unit Testing

Unit testing is testing your WordPress theme with some sample data. WordPress.org officially provides sample data for unit testing which can be imported to check if your theme supports and can handle all different varieties of data and settings without breaking apart and support them well.

Final Thoughts

In this post I only listen out the advanced features of a theme. I omitted the basic ones as they will well known to every wordpress developer. I will be adding more points to the above list in future. Thanks for reading. Please Share this document.