Getting Started with WordPress Themes Development

WordPress Themes are a group of files meant to establish the design and functionality of WordPress website. The site owners can choose and change the theme according to their preferences.

WordPress Themes have a lot of benefits:

1. The user has a possibility to create an individual and unique look for their WordPress site.
2. You can make use of templates, template tags, and WordPress Loop to achieve various results or looks on the website.
3. Within WordPress Themes, you’ll find alternative templates for particular site aspects, like category pages and search results pages.
4. Users can benefit from the Theme or style switcher that allows site owners to modify site look.

WordPress Theme provide lots of other benefits.

• The presentation styles and template files are detached from the system files.This way, the website can avoid considerable modifications of the visual presentation during site upgrading.
• You can modify website functionality peculiar to that Theme.
• The user can quickly modify the visual design and layout of a WordPress website.
• You should be perfectly familiar with CSS, HTML, and PHP to get a great-looking website.

There is a lot of reasons for creating your own WordPress Theme.

First off, you’ll become a real expert in CSS, HTML, and PHP. In any case, working with WordPress Themes will bring you joy, and can help advance your creativity. You can release it to the public if you want to give something back to the WordPress Community.

Using WordPress implies keeping up with the following standards:

• Using well-organized, error-free PHP and active HTML.
• Using clean and active CSS.
• Following design guidelines in Site Design and Layout.

WordPress Themes are located in subdirectories of the WordPress directory (wp-content/themes/ by default). You can’t directly shift it by the using wp-config.php file. All theme stylesheet files, template files, optional files, JavaScript files, and images are located in the Theme Directory. This way, if you create a theme called ‘test’, it will be placed in the directory wp-content/themes/test/. The theme name shouldn’t  contain numbers, otherwise it will be shown in the accessible themes catalogue.

During each new installation, WordPress adds a default theme.  For choosing the best variant of your own Theme files, you should look through the files in the default theme intently.

Besides images and JavaScript files, a WordPress Theme is usually composed of three essential file types.

• The stylesheet named style.css that manages the presentation of website pages.
• WordPress template files that manage the way site pages bring about the information to be displayed on the site.
• Optional functions file, which serves as a part of WordPress Theme files.

Let’s examine it in detail.

A Child Theme is the most simple theme. It contains only a style.css file and the images.

For the purpose of avoiding problems in Theme section dialogue, every theme must have different details listed in its comment headers. If you want to copy an existing Theme while creating your own one, you have to modify this information first.

There is an example of the first few lines of the stylesheet, named stylesheet header, for “Twenty Thirteen”  Theme

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.

Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

Note: The author’s name has to coincide with the Theme Author’s wordpress.org username completely. The author can even choose their real name.

There is a Tag catalogue that helps users characterize themes. To make sure your theme can be easily found, you can utilize the tag filter. There is an entire catalogue of available tags.

To identify the theme, use the comment header lines in style.css. The theme will be shown as an accessible theme option in the Administration Panel under Design Themes.

• When working on your CSS, follow CSS standards.
• In most cases, try to utilize available CSS.
• If it’s impossible, use vendor-specific prefixes to benefit from CSS3 features.Try to divide CSS into sections.
• You should make all possible HTML elements styled by your theme (except a child Theme),  both in post/page content and in comment content.
• We suggest you to add print-friendly styles to charts, captions, block quotes, images, lists, etc.
• You can add a print stylesheet with media “print” or append to a print media block in your principal stylesheet.

In the theme subdirectory, you’ll find a functions.php theme that can utilize a functions file. If you choose themes that feature this file, it will be automatically loaded during WordPress initialization.

Recommended ways this file can be used:

• If you want to enable Theme Features, such as Sidebars, Navigation Menus, Post Thumbnails, Post Formats, Custom Headers, Custom Backgrounds and others
• To determine functions used in some template files of your theme.

Configure the options menu, providing site owners  with options for colors, styles, and other aspects of your theme.The functions.php file determines the majority of theme characteristics. If you need the same function to be accessible to more than one parent theme, create the functions.php in a plugin. Functions added to plugins will be viewed by all themes.

For creating the pages requested by visitors there are provided PHP source files named Templates. Template files are made up of HTML, PHP, and WordPress Template Tags. Let’s look through the different templates determined as  a Theme section. WordPress gives you a possibility to determine separate templates for the different aspects of your site. You don’t have to have all various templates for the perfect functioning of your site. Template files  are structured upon the Templates Hierarchy according to their accessibility in a concrete Theme. WordPress permits you to determine the amount of customization depending on your preferences to realize using templates. Remember that you can utilize only one template file (index.php) as a template for every page displayed by the site. Include the following line at the top of your theme PHP files to bar the direct access to them:

defined(‘ABSPATH’) or die(“No script kiddies please!)“

In addition, try to avoid accomplishing sensitive standalone PHP code before executing any WordPress functions.

There is a catalogue of the Template files accessible in WordPress. In any case you can add any other stylesheets, images and files.

style.css

It is the most important stylesheet, that should be added with your Theme. Don’t forget, this stylesheet has to include the information header for your Theme.

rtl.css

If the website’s text direction is right-to-left, the rtl stylesheet will be included automatically. You can create it by using the RTLer plugin.

index.php

The principal template, that has to be present if your theme adds  its own templates.

comments.php

The comments template.

front-page.php

The front page template.

home.php

The home page template serves as the front page by default. After using a static front page  you’ll get the template for the page containing the latest posts.

single.php

Being the single post template it’s used in the case of single post’s querying.  If the query template is absent, you should use index.php. To display single posts from the custom post type called “book” utilize single-book.php. The using of index.php is recommended if the query template for the custom post is absent.

page.php

Use the page template if an individual Page is queried.

category.php

Utilize the category category template when the category is queried.

tag.php

Utilize the tag template when a tag is queried.

taxonomy.php

Utilize this term template when a custom taxonomy is queried.

author.php

Utilize the author template when an author is queried.

date.php

Utilise the date/time template when a date or time is queried.

archive.php

Utilize the archive template hen a category, author, or date is queried. You should remember that this template will be annulled by category.php, author.php, and date.php for their respective query types.

search.php

Utilize the search results template when a search is performed.

attachment.php

Utilize the attachment template when viewing a single attachment.

image.php

Utilize the image attachment template when viewing a single image attachment.  With the same purpose you can use  attachment.php.

404.php

You should utilize the 404 Not Found template when WordPress cannot find a post or page that matches the query. Utilize these files as a substitution for index.php, when accessible, according to the Template Hierarchy, and when the corresponding Conditional Tag returns true.

A WordPress Theme contains at least two files:

• style.css
• index.php

These files belong to the Theme directory. The index.php template file differs by its flexibility. You can utilize it for adding all references to the header, sidebar, footer, content, categories, archives, search, error, and any other page generated in WordPress.

You can part it into modular template files. If other template files are not provided WordPress can dispose default files or functions to accomplish their tasks. For example, if the searchform.php isn’t provided, WordPress executes a default function to display the search form.

 Typical template files contain:

• comments.php
• comments-popup.php
• footer.php
• header.php
• sidebar.php

With the help of these template files you have a possibility to put template tags within the index.php master file to place these other files according to your preferences.

• To add the header, use get_header.
• To add the sidebar, use get_sidebar.
• To add the footer, use get_footer.
• To add the search form, use get_search_form

There is an example of the include usage:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

As certain template functions can be deprecated or absent you should add these files to your theme. In the version 3.0, the deprecated default files are placed in wp-includes/theme-compat. For example, to supply a safe work of the function get_header() you should provide header.php and comments.php for the function comments_template().

Your Themes Directory contains all page templates. The indispensable condition of the new custom page’s developing is creation of the file. To give an example we’ll create a page named  snarfer.php. At the top of the snarfer.php file, place the following:

 <?php

/*

Template Name: Snarfer
*/
?>

The above code determines this snarfer.php file as the “Snarfer” template. Usually, “Snater” can be substituted by most any text to modify the page template’s name. This template name will be shown in the Theme Editor as the link for this file edition. You can choose any name (with a .php extension) for your file. You can utilize  just with the above five lines of code.

The rest of the code manages the way of the page  displaying . Copy some other templates (like page.php or index.php) to snarfer.php  and after that include the above five lines of code to the file commencement. That way, you should just alter the HTML and PHP code in place of generating it all from scratch. You’ll find the examples below. After creating and locating a page template in your theme’s directory it will be accessible when you generate or edit  a page.

You should remember, that at the time of page creating and editing, the Page Template option will not be shown unless there is at least one template determined in the above scratch.

WordPress has possibility to load various Templates for various query types. Here are two ways for doing this: as part of the built-in Template Hierarchy, and through the use of Conditional Tags within The Loop of a template file.

For utilizing the Template Hierarchy you have to provide special-purpose Template files. After this action these Template files will automatically be utilized to annul index.php. If your Theme has a template named category.php and a category is being queried, category.php will be loaded in place of index.php. If category.php is absent, index.php is used as usual.

To obtain more specific functions in the Template Hierarchy you should add a file named category-6.php — this file will be utilized rather than category.php in case of page creating for the category with ID number 6.  (The category ID numbers is placed in Manage > Categories if you are logged in as the site administrator in WordPress version 2.3 and below.In WordPress 2.5 the ID column isn’t placed in the Admin panels anymore. To place  the category id, click ‘Edit Category’ and look on the URL address bar for the cat_ID value. It will look ‘…categories.php?action=edit&cat_ID=3’ where ‘3’ is the category id).

For providing more Theme control over Template Files, you should utilize Conditional Tags verifying if some particular condition is true, within the WordPress Loop. You can load a particular template, or add some specific text on the screen according to your preferences and queries.

There is an example how to create a distinctive stylesheet within the limits of particular category:

<?php
if ( is_category( ‘9’ ) ) {
   get_template_part( ‘single2’ ); // looking for posts in category with ID of ‘9’
} else {
   get_template_part( ‘single1’ ); // put this on every other category post
}
?>

Or, you can use a query, it might look like this:

<?php
$post = $wp_query->post;
if ( in_category( ‘9’ ) ) {
   get_template_part( ‘single2’ );
} else {
   get_template_part( ‘single1’ );
}
?>

Depending on the category of the individual post, the example code will contain different templates.

To determine supplementary templates that are shown according to your own custom criteria you should utilize the WordPress plugin system. Use the template_redirect action hook to complete this leading characteristic.

Utilize get_template_part() to load another template (except header, sidebar, footer, which have predefined added commands like get_header()) into a template. Thanks to it you can reutilize without difficulties the code section of Theme.

Don’t utilize hard-coded URIs and file paths to reference other files within the same theme. You can replace it by bloginfo().

You should remember that URis utilizing in the stylesheet are connected to the stylesheet, not the page that references the stylesheet. In that way, if you indicate  an images/ directory in your Theme, you should just define this relative directory in the CSS. It might look like this:

h1 {

   background-image: url(images/my-background.jpg);
}

As for developing Themes, you should pay your attention on the fact that your Theme has to be configured so it may function well with every WordPress plugins users have possibility to make decision to install. With the aid of “Actions Hooks”, Plugins can append functionality to WordPress.

The majority of Action Hooks are located within the core PHP code of WordPress, so it isn’t necessarily for your Theme to have any particular tags to work.

In any case, you should necessarily add several Action Hooks to your Theme,  in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Below you’ll find a list of the particular Action Hook Template Tags you should add:

wp_head()

Goes in the <head> element of a theme, in header.php. Example plugin utilization: include JavaScript code.

wp_footer()

Goes in footer.php, just before the closing </body> tag. Example plugin utilization: add PHP code that has to run after everything else, at the bottom of the footer. Utilize to include web statistics code, like Google Analytics.

wp_meta()

Generally goes in the <li>Meta</li> category of a Theme’s menu or sidebar; sidebar.php template. Example plugin utilization: add a rotating advertisement or a tag cloud.

comment_form()

Goes in comments.php directly before the file’s closing tag (</div>). Example plugin utilization: display a comment preview. This plugin is contained in the default Theme’s templates.

As regards WordPress 3.4, all WordPress Themes have a new Theme Customisation characteristic. On the theme customisation Admin page you’ll find options that a theme affirms  support for with add_theme_support() or the Settings API, that permits admins to look through non-constant previews of changes made by them in real time.

Before adding new options to a theme’s Theme Customization page you should look through the documentation on the Theme Customization API.

Try to avoid dynamically generated content in your Theme, particularly content being output to HTML attributes. According to WordPress Coding Standards, text referred to attributes should be run through esc_attr() so that single or double quotes do not end the attribute value and invalidate the XHTML and cause a security issue. In common cases if safe output is needed you can use few special template tags. For example to escape a security vulnerability, output a post title to a title attribute utilizing  the title_attribute() in place of the_title().

<a href=”<?php the_permalink(); ?>” title=”<?php sprintf( __( ‘Permanent Link to %s’, ‘theme-name’ ), the_title_attribute( ‘echo=0’ ) ); ?>”><?php the_title(); ?></a>

Substitute deprecated escape calls with the right calls:

wp_specialchars() and htmlspecialchars() with esc_html(), clean_url() with esc_url(), and attribute_escape() with esc_attr().

For the purpose of guaranteeing smooth position for language localisation, apply the WordPress gettext-based i18n functions to cover all translatable text within the template files. This simplifies the process of hooking in and translating (by translation files) the labels, titles and other template text into the site’s current language.

To include WordPress-created class attributes to body, post, and comment elements utilize the following template tags. Use post classes exceptionally to the elements within The Loop.

• body_class()
• post_class()
• comment_class()

During developing a Theme accord your template files with the following template file standarts.
1. Document Head (header.php)

• Use the proper DOCTYPE.
• Use language_attributes() to open <html> .
• The <meta> charset element should be located before everything else, including the <title> element.
• Use bloginfo() to set the <meta> charset and characterization elements.
• Use wp_title() to set the <title> element.
• Use get_stylesheet_uri() to get the URL of the current theme stylesheet.
• Use Automatic Feed Links for including feed links.
• Append a call to wp_head() before the closing </head> tag. Plugins apply this action hook to add their own scripts, stylesheets, and other functionality.

 There’s an example of an accurate-formatted  HTML5 compliant head area:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
   <head>
       <meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
       <title><?php wp_title(); ?></title>
       <link rel=”profile” href=”http://gmpg.org/xfn/11″ />
       <link rel=”stylesheet” href=”<?php echo get_stylesheet_uri(); ?>” type=”text/css” media=”screen” />
       <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
       <?php if ( is_singular() && get_option( ‘thread_comments’ ) ) wp_enqueue_script( ‘comment-reply’ ); ?>
       <?php wp_head(); ?>
   </head>

2. Navigation Menus (header.php)

The theme’s principal navigation should provide a custom menu with wp_nav_menu(). Menus should provide long link titles and a large numbers of list items. You should remember these items should not break the design or layout. Submenu items have to be displayed accurately. Try to support drop-down menu styles for submenu items. Drop-downs allowing showing menu depth in place of just showing the top level.

3. Widgets

Another important point is the maximal Theme widgetizing. Every area in the layout that serves as a widget (tag cloud, blogroll, list of categories) or could accept widgets (sidebar) should allow widgets. Content shown  in widgetized areas by default (hard-coded into the sidebar, for example) should be removed when widgets are enabled from Appearance > Widgets.

4. Footer

Apply the wp_footer() call, for appearing just before closing body tag.
<?php wp_footer(); ?>
</body>
</html>

5. Index

• Display a catalogue of posts in excerpt or full-length form.
• Add wp_link_pages() to support navigation links within posts.

6. Archive

• Display archive title (tag, category, date-based, or author archives).
• Display a posts catalogue in excerpt or full-length form.
• You should add  wp_link_pages() to support navigation links within posts.

7. Pages

• Display page title and page content.
• Display comment list and comment form (without disabled comments).
• Add wp_link_pages() to support navigation links within a page.
• Don’t forget, Metadata such as tags, categories, date and author should not be displayed.
• Display an “Edit” link for logged-in users with edit allowance.

8. Single Post

• Add wp_link_pages() to support navigation links within a post.
• Display post title and post content.
• The title should be clear text in place of a link pointing to itself.
• Display the post date.
• The important point for the design is respecting the date and time format settings (you’ll find user settings for date and time in Administration Panels > Settings > General). For output based on the user setting, you should make use of the_time ( get_option( ‘date_format’ ) )

• Display the author name (if necessary).
• Display post categories and post tags.
• Display an “Edit” link for logged-in users with edit permissions.
• Display comment list and comment form.
• Show navigation links to next and earlier post using previous_post_link() and next_post_link().

9. Comments

• Author comment should be differently marked.
• Display gravatars (user avatars) if necessary.
• Support threaded comments.
• Display trackbacks/pingbacks.
• This file shouldn’t hold function determinations except the function_exist() check to avoid redeclaration errors. All functions have to be placed  in functions.php.

10. Search Results

• Display a posts catalogue in excerpt or full-length form.
• The search results page displays the search term which included the results. It’s not difficult for user

 It’s a simple but useful way to remind someone what they just quested for — especially if there are  zero results. Utilize  the_search_query() or get_search_query(). For example:

 <h2><?php printf( __( ‘Search Results for: %s’ ), ‘<span>’ . get_search_query() . ‘</span>’); ?></h2>

You should add the search form again on the results page. Add it with: get_search_form().

• You should place JavaScript code in external files whenever practicable.
• For loading your scripts utilize wp_enqueue_script().
• During JavaScript loading directly into HTML documents (template files) it’s a good practice to encode it by CDATA for avoiding errors in older browsers.

<script type=”text/javascript”>
/* <![CDATA[ */
// content of your Javascript goes here
/* ]]> */
</script>

When creating a screenshot don’t forget it should be named screenshot.png, and be located in the top level directory. The screenshot should correctly display the theme design and be saved in PNG format. We recommend to choose  880 x 660 image size. The screenshot will only be displayed like  387×290, but the over double-sized image permits  for high-resolution viewing on HiDPI displays.

Themes have a possibility to optionally support the Theme Customize Screen.In case of enabling the availability of the Theme Customize Screen for a user role, utilize the edit_theme_options user capability in place of the switch_themes capability unless the user should also have possibility to switch the themes. In case of utilizing the edit_themes capability anywhere in your Theme to obtain the Administrator functions access to the Theme Customize Screen (or some custom screens), be aware that since Version 3.0, this capability is not added to the Administrator functions by default in the case of WordPress Multisite installation. If you need to see the “Theme Options” menu, utilize edit_theme_options.

1. Determine PHP and WordPress errors. Include the following debug setting to your wp-config.php file to look through deprecated function calls and other WordPress-related errors: define(‘WP_DEBUG’);.
2. Verify template files against Template File Checklist.
3. Do a run-through utilizing the Theme Unit Test.
4. Validate HTML and CSS. Look through Validating a Website.
5. Verify for JavaScript errors.
6. Check  all your target browsers. For example, IE7, IE8, IE9, Safari, Chrome, Opera, and Firefox.
7. Delete all  extraneous comments, debug settings, or TODO items.
8. Look through Theme Review in the case of Theme releasing by submitting it to the Themes Directory.