CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://codex.wordpress.org/Theme_Development","20110512235319","https://web.archive.org/","web","/_static/", "1305244399"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="generator" content="MediaWiki 1.15.5"/> <meta name="keywords" content="Theme Development,Theme Development,Adding Administration Menus,Administration Panels,Author Templates,CSS,CSS Coding Standards,CSS Fixing Browser Bugs,CSS Shorthand,CSS Troubleshooting,Category Templates"/> <link rel="shortcut icon" href="/web/20110512235319im_/http://codex.wordpress.org/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/web/20110512235319/http://codex.wordpress.org/opensearch_desc.php" title="Codex (en)"/> <link rel="alternate" type="application/rss+xml" title="Codex RSS feed" href="/web/20110512235319/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=rss"/> <link rel="alternate" type="application/atom+xml" title="Codex Atom feed" href="/web/20110512235319/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=atom"/> <title>Theme Development « WordPress Codex</title> <style type="text/css"> @import url("https://web.archive.org/web/20110512235319cs_/http://s.wordpress.org/style/codex-wp4.css?3"); @import url("https://web.archive.org/web/20110512235319cs_/http://s.wordpress.org/style/wp4.css?10"); </style> <link media="only screen and (max-device-width: 480px)" href="https://web.archive.org/web/20110512235319cs_/http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet">  <link rel="shortcut icon" href="https://web.archive.org/web/20110512235319im_/http://s.wordpress.org/favicon.ico" type="image/x-icon"/> <script src="https://web.archive.org/web/20110512235319js_/http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-52447-1"; urchinTracker(); </script>  <script type="text/javascript" src="/web/20110512235319js_/http://codex.wordpress.org/index.php?title=-&action=raw&gen=js&useskin=codex"></script> <script type="text/javascript">wgBreakFrames=false;wgContentLanguage='en';</script> <script type="text/javascript" src="/web/20110512235319js_/http://codex.wordpress.org/skins/common/wikibits.js"></script> </head> <body id="wordpress-org"> <div id="header"> <div class="wrapper"> <h1><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/" title="WordPress">WordPress.org</a></h1> <form action="https://web.archive.org/web/20110512235319/http://wordpress.org/search/do-search.php" method="get" id="head-search"> <input class="text" name="search" type="text" value="Search the Codex" maxlength="150" onfocus="this.value=(this.value=='Search the Codex') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search the Codex' : this.value;"/> <input type="submit" class="button" value="Go"/> </form> <ul> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/" title="Home is where the heart is.">Home</a></li> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/showcase/" title="See some of the sites built on WordPress.">Showcase</a></li> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/extend/" title="Taking WordPress beyond your wildest imagination">Extend</a> <ul class="nav-submenu"> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/extend/plugins/" title="Plugins can extend WordPress to do almost anything you can imagine.">Plugins</a></li> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/extend/themes/" title="Find just the right look for your website.">Themes</a></li> </ul></li> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/about/" title="About the WordPress Organization, and where we're going.">About</a></li> <li><a class="current" href="https://web.archive.org/web/20110512235319/http://codex.wordpress.org/Main_Page" title="Documentation, tutorials, best practices.">Docs</a></li> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/development/" title="Come here for the latest scoop.">Blog</a></li> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/support/" title="Support and discussion forums.">Forums</a></li> <li><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/hosting/" title="Find a home for your blog">Hosting</a></li> <li id="download"><a href="https://web.archive.org/web/20110512235319/http://wordpress.org/download/" title="Get it. Got it? Good.">Download</a></li> </ul> </div> </div> <div id="headline"> <div class="wrapper"> <h2>Codex</h2> <div class="portlet" id="p-personal"> <p class="login">Codex tools: <a href="/web/20110512235319/http://codex.wordpress.org/index.php?title=Special:UserLogin&returnto=Theme_Development">Log in</a> </p> </div> </div> </div> <div id="pagebody"> <div class="wrapper"> <div class="col-10" id="bodyContent"> <h2 class="pagetitle">Theme Development</h2>  <p class="LanguageLinks" style="border:1px solid #CCCCCC; line-height:1.5; text-align:left; color:#333333; font-size:90%; padding:10px;"><span style="white-space:nowrap;"><a href="/web/20110512235319/http://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>:</span> <strong class="selflink">English</strong> • <a href="https://web.archive.org/web/20110512235319/http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90" class="external text" title="http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90">日本語</a> • <a href="/web/20110512235319/http://codex.wordpress.org/pt-br:Desenvolvimento_de_Temas" title="pt-br:Desenvolvimento de Temas">Português do Brasil</a> • <a href="/web/20110512235319/http://codex.wordpress.org/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BC" title="Создание тем">Русский</a> • <a href="/web/20110512235319/http://codex.wordpress.org/zh-cn:%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91" title="zh-cn:主题开发">中文(简体)</a> • <a href="/web/20110512235319/http://codex.wordpress.org/zh-tw:%E4%B8%BB%E9%A1%8C%E9%96%8B%E7%99%BC" title="zh-tw:主題開發">中文(繁體)</a> • <small>(<a href="/web/20110512235319/http://codex.wordpress.org/Multilingual_Codex#Language_Cross_Reference" title="Multilingual Codex" class="mw-redirect">Add your language</a>)</small> </p> <table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div> <ul> <li class="toclevel-1"><a href="#Why_WordPress_Themes"><span class="tocnumber">1</span> <span class="toctext">Why WordPress Themes</span></a></li> <li class="toclevel-1"><a href="#Theme_Development_Standards"><span class="tocnumber">2</span> <span class="toctext">Theme Development Standards</span></a> <ul> <li class="toclevel-2"><a href="#Anatomy_of_a_Theme"><span class="tocnumber">2.1</span> <span class="toctext">Anatomy of a Theme</span></a></li> <li class="toclevel-2"><a href="#Theme_Stylesheet"><span class="tocnumber">2.2</span> <span class="toctext">Theme Stylesheet</span></a> <ul> <li class="toclevel-3"><a href="#Stylesheet_Guidelines"><span class="tocnumber">2.2.1</span> <span class="toctext">Stylesheet Guidelines</span></a></li> <li class="toclevel-3"><a href="#Child_Themes"><span class="tocnumber">2.2.2</span> <span class="toctext">Child Themes</span></a></li> </ul> </li> <li class="toclevel-2"><a href="#Functions_File"><span class="tocnumber">2.3</span> <span class="toctext">Functions File</span></a></li> <li class="toclevel-2"><a href="#Template_Files"><span class="tocnumber">2.4</span> <span class="toctext">Template Files</span></a> <ul> <li class="toclevel-3"><a href="#Template_Files_List"><span class="tocnumber">2.4.1</span> <span class="toctext">Template Files List</span></a></li> <li class="toclevel-3"><a href="#Basic_Templates"><span class="tocnumber">2.4.2</span> <span class="toctext">Basic Templates</span></a></li> <li class="toclevel-3"><a href="#Custom_Page_Templates"><span class="tocnumber">2.4.3</span> <span class="toctext">Custom Page Templates</span></a></li> <li class="toclevel-3"><a href="#Query-based_Template_Files"><span class="tocnumber">2.4.4</span> <span class="toctext">Query-based Template Files</span></a></li> <li class="toclevel-3"><a href="#Defining_Custom_Templates"><span class="tocnumber">2.4.5</span> <span class="toctext">Defining Custom Templates</span></a></li> <li class="toclevel-3"><a href="#Including_Template_Files"><span class="tocnumber">2.4.6</span> <span class="toctext">Including Template Files</span></a></li> <li class="toclevel-3"><a href="#Referencing_Files_From_a_Template"><span class="tocnumber">2.4.7</span> <span class="toctext">Referencing Files From a Template</span></a></li> <li class="toclevel-3"><a href="#Plugin_API_Hooks"><span class="tocnumber">2.4.8</span> <span class="toctext">Plugin API Hooks</span></a></li> <li class="toclevel-3"><a href="#Untrusted_Data"><span class="tocnumber">2.4.9</span> <span class="toctext">Untrusted Data</span></a></li> <li class="toclevel-3"><a href="#Translation_.2F_i18n_Support"><span class="tocnumber">2.4.10</span> <span class="toctext">Translation / i18n Support</span></a></li> <li class="toclevel-3"><a href="#Theme_Classes"><span class="tocnumber">2.4.11</span> <span class="toctext">Theme Classes</span></a></li> </ul> </li> <li class="toclevel-2"><a href="#Template_File_Checklist"><span class="tocnumber">2.5</span> <span class="toctext">Template File Checklist</span></a> <ul> <li class="toclevel-3"><a href="#Document_Head_.28header.php.29"><span class="tocnumber">2.5.1</span> <span class="toctext">Document Head (header.php)</span></a></li> <li class="toclevel-3"><a href="#Navigation_Menus_.28header.php.29"><span class="tocnumber">2.5.2</span> <span class="toctext">Navigation Menus (header.php)</span></a></li> <li class="toclevel-3"><a href="#Widgets_.28sidebar.php.29"><span class="tocnumber">2.5.3</span> <span class="toctext">Widgets (sidebar.php)</span></a></li> <li class="toclevel-3"><a href="#Footer_.28footer.php.29"><span class="tocnumber">2.5.4</span> <span class="toctext">Footer (footer.php)</span></a></li> <li class="toclevel-3"><a href="#Index_.28index.php.29"><span class="tocnumber">2.5.5</span> <span class="toctext">Index (index.php)</span></a></li> <li class="toclevel-3"><a href="#Archive_.28archive.php.29"><span class="tocnumber">2.5.6</span> <span class="toctext">Archive (archive.php)</span></a></li> <li class="toclevel-3"><a href="#Pages_.28page.php.29"><span class="tocnumber">2.5.7</span> <span class="toctext">Pages (page.php)</span></a></li> <li class="toclevel-3"><a href="#Single_Post_.28single.php.29"><span class="tocnumber">2.5.8</span> <span class="toctext">Single Post (single.php)</span></a></li> <li class="toclevel-3"><a href="#Comments_.28comments.php.29"><span class="tocnumber">2.5.9</span> <span class="toctext">Comments (comments.php)</span></a></li> <li class="toclevel-3"><a href="#Search_Results_.28search.php.29"><span class="tocnumber">2.5.10</span> <span class="toctext">Search Results (search.php)</span></a></li> </ul> </li> <li class="toclevel-2"><a href="#JavaScript"><span class="tocnumber">2.6</span> <span class="toctext">JavaScript</span></a></li> <li class="toclevel-2"><a href="#Screenshot"><span class="tocnumber">2.7</span> <span class="toctext">Screenshot</span></a></li> <li class="toclevel-2"><a href="#Theme_Options"><span class="tocnumber">2.8</span> <span class="toctext">Theme Options</span></a></li> </ul> </li> <li class="toclevel-1"><a href="#Theme_Testing_Process"><span class="tocnumber">3</span> <span class="toctext">Theme Testing Process</span></a></li> <li class="toclevel-1"><a href="#Resources_and_References"><span class="tocnumber">4</span> <span class="toctext">Resources and References</span></a> <ul> <li class="toclevel-2"><a href="#Code_Standards"><span class="tocnumber">4.1</span> <span class="toctext">Code Standards</span></a></li> <li class="toclevel-2"><a href="#Theme_Design"><span class="tocnumber">4.2</span> <span class="toctext">Theme Design</span></a></li> <li class="toclevel-2"><a href="#CSS"><span class="tocnumber">4.3</span> <span class="toctext">CSS</span></a></li> <li class="toclevel-2"><a href="#Templates"><span class="tocnumber">4.4</span> <span class="toctext">Templates</span></a></li> <li class="toclevel-2"><a href="#Testing_and_QA"><span class="tocnumber">4.5</span> <span class="toctext">Testing and QA</span></a></li> <li class="toclevel-2"><a href="#Release_.26_Promotion"><span class="tocnumber">4.6</span> <span class="toctext">Release & Promotion</span></a></li> </ul> </li> </ul> </td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script> <p><br/> This article is about developing WordPress Themes. If you wish to learn more about how to install and use Themes, review <a href="/web/20110512235319/http://codex.wordpress.org/Using_Themes" title="Using Themes">Using Themes</a>. This topic differs from <a href="/web/20110512235319/http://codex.wordpress.org/Using_Themes" title="Using Themes">Using Themes</a> because it discusses the technical aspects of writing code to build your own Themes rather than how to activate Themes or where to obtain new Themes. </p> <a name="Why_WordPress_Themes" id="Why_WordPress_Themes"></a><h2> <span class="mw-headline"> Why WordPress Themes </span></h2> <p>WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to take advantage of in order to instantly change their website look. </p><p>You may wish to develop WordPress Themes for your own use, for a client project or to <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Review" title="Theme Review">submit to the WordPress Theme Directory</a>. Why else should you build a WordPress Theme? </p> <ul><li> To create a unique look for your WordPress site. </li><li> To take advantage of <a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">templates</a>, <a href="/web/20110512235319/http://codex.wordpress.org/Template_Tags" title="Template Tags">template tags</a>, and <a href="/web/20110512235319/http://codex.wordpress.org/The_Loop_in_Action" title="The Loop in Action">the WordPress Loop</a> to generate different website results and looks. </li><li> To provide alternative templates for specific site features, such as <a href="/web/20110512235319/http://codex.wordpress.org/Category_Templates" title="Category Templates">category pages</a> and search result pages. </li><li> To quickly switch between two site layouts, or to take advantage of a <a href="/web/20110512235319/http://codex.wordpress.org/Plugins" title="Plugins">Theme or style switcher</a> to allow site owners to change the look of your site. </li></ul> <p>A WordPress Theme has many benefits, too. </p> <ul><li> It separates the presentation styles and <a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">template files</a> from the system files so the site will upgrade without drastic changes to the visual presentation of the site. </li><li> It allows for customization of the site functionality unique to that Theme. </li><li> It allows for quick changes of the visual design and layout of a WordPress site. </li><li> It removes the need for a typical WordPress site owner to have to learn CSS, HTML, and PHP in order to have a great-looking website. </li></ul> <p>Why should you build your own WordPress Theme? That's the real question. </p> <ul><li> It's an opportunity to learn more about CSS, HTML, and PHP. </li><li> It's an opportunity to put your expertise with CSS, HTML, and PHP to work. </li><li> It's creative. </li><li> It's fun (most of the time). </li><li> If you <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Review" title="Theme Review">release it to the public</a>, you can feel good that you shared and gave something back to the <a href="/web/20110512235319/http://codex.wordpress.org/Contributing_to_WordPress" title="Contributing to WordPress">WordPress Community</a> (okay, bragging rights) </li></ul> <a name="Theme_Development_Standards" id="Theme_Development_Standards"></a><h2> <span class="mw-headline"> Theme Development Standards </span></h2> <p>WordPress Themes should be coded using the following standards: </p> <ul><li> Use well-structured, error-free PHP and valid HTML. See <a href="/web/20110512235319/http://codex.wordpress.org/WordPress_Coding_Standards" title="WordPress Coding Standards">WordPress Coding Standards</a>. </li><li> Use clean, valid CSS. See <a href="/web/20110512235319/http://codex.wordpress.org/CSS_Coding_Standards" title="CSS Coding Standards">CSS Coding Standards</a>. </li><li> Follow design guidelines in <a href="/web/20110512235319/http://codex.wordpress.org/Site_Design_and_Layout" title="Site Design and Layout">Site Design and Layout</a>. </li></ul> <a name="Anatomy_of_a_Theme" id="Anatomy_of_a_Theme"></a><h3> <span class="mw-headline"> Anatomy of a Theme </span></h3> <p>WordPress Themes live in subdirectories residing in <tt>wp-content/themes/</tt>. The Theme's subdirectory holds all of the Theme's stylesheet files, <a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">template files</a>, and optional functions file (<tt>functions.php</tt>), JavaScript files, and images. For example, a Theme named "test" would reside in the directory <tt>wp-content/themes/test/</tt>. Avoid using numbers for the theme name, as this prevents it from being displayed in the available themes list. </p><p>WordPress includes a default theme in each new installation. Examine the files in the default theme carefully to get a better idea of how to build your own Theme files. </p><p>For a visual guide, see this infographic: <a href="https://web.archive.org/web/20110512235319/http://yoast.com/wordpress-theme-anatomy/" class="external free" title="http://yoast.com/wordpress-theme-anatomy/">http://yoast.com/wordpress-theme-anatomy/</a> </p><p>WordPress Themes typically consist of three main types of files, in addition to images and JavaScript files. One is the stylesheet called <tt>style.css</tt>, which controls the presentation (visual design and layout) of the website pages. The second is the optional functions file (<tt>functions.php</tt>). The other files are the <a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">template files</a> which control the way the site pages generate the information from your WordPress database to be displayed on the site. Let's look at these individually. </p> <a name="Theme_Stylesheet" id="Theme_Stylesheet"></a><h3> <span class="mw-headline"> Theme Stylesheet </span></h3> <p>In addition to CSS style information for your theme, <tt>style.css</tt> provides details about the Theme in the form of comments. The stylesheet <i><b>must</b></i> provide details about the Theme in the form of comments. <i><b>No two Themes are allowed to have the same details</b></i> listed in their comment <a href="/web/20110512235319/http://codex.wordpress.org/File_Header" title="File Header">headers</a>, as this will lead to problems in the <a href="/web/20110512235319/http://codex.wordpress.org/Administration_Panels#Design_-_Change_the_Look_of_your_Blog" title="Administration Panels">Theme selection dialog</a>. If you make your own Theme by copying an existing one, make sure you change this information first. </p><p>The following is an example of the first few lines of the stylesheet, called the stylesheet header, for the Theme "Twenty Ten": </p> <pre> /* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: wordpressdotorg Author URI: http://wordpress.org/ Version: 1.0 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional) License: License URI: General comments (optional). */ </pre> <p><i>NB: The name used for the Author is suggested to be the same as the Theme Author's wordpress.org username, although it can be the author's real name as well. The choice is the Theme Author's.</i> </p><p>The comment header lines in <tt>style.css</tt> are required for WordPress to be able to identify a Theme and display it in the <a href="/web/20110512235319/http://codex.wordpress.org/Administration_Panels" title="Administration Panels">Administration Panel</a> under <a href="/web/20110512235319/http://codex.wordpress.org/Administration_Panels#Design_-_Change_the_Look_of_your_Blog" title="Administration Panels">Design</a> > <a href="/web/20110512235319/http://codex.wordpress.org/Administration_Panels#Themes" title="Administration Panels">Themes</a> as an available Theme option along with any other installed Themes. </p> <a name="Stylesheet_Guidelines" id="Stylesheet_Guidelines"></a><h4> <span class="mw-headline"> Stylesheet Guidelines </span></h4> <ul><li> Follow <a href="/web/20110512235319/http://codex.wordpress.org/CSS_Coding_Standards" title="CSS Coding Standards">CSS coding standards</a> when authoring your CSS. </li><li> Use valid CSS when possible. As an exception, use vendor-specific prefixes to take advantage of CSS3 features. </li><li> Minimize CSS hacks. The obvious exception is browsers-specific support, usually versions of IE. If possible, separate CSS hacks into separate sections or separate files. </li><li> All possible HTML elements should be styled by the Theme, both in post/page content and in comment content. <ul><li> Tables, captions, images, lists, block quotes, et cetera. </li></ul> </li><li> Adding print-friendly styles is highly recommended. <ul><li> You can include a print stylesheet with <tt>media="print"</tt> or add in a print media block in your main stylesheet. </li></ul> </li></ul> <a name="Child_Themes" id="Child_Themes"></a><h4> <span class="mw-headline"> Child Themes </span></h4> <p>The simplest Theme possible is a child theme which includes only a <tt>style.css</tt> file, plus any images. This is possible because it is a <i>child</i> of another theme which acts as its parent. </p><p>For a detailed guide to child themes, see <a href="/web/20110512235319/http://codex.wordpress.org/Child_Themes" title="Child Themes">Child Themes</a> or <a href="https://web.archive.org/web/20110512235319/http://op111.net/53" class="external text" title="http://op111.net/53">this great tutorial by op111</a>. </p> <a name="Functions_File" id="Functions_File"></a><h3> <span class="mw-headline"> Functions File </span></h3> <p>A theme can optionally use a functions file, which resides in the theme subdirectory and is named <tt>functions.php</tt>. This file basically acts like a <a href="/web/20110512235319/http://codex.wordpress.org/Plugins" title="Plugins">plugin</a>, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages). Suggested uses for this file: </p> <ul><li> Define functions used in several template files of your theme. </li><li> Enable features such as post thumbnails, custom header and background, and navigation menus. </li><li> Set up an options menu, giving site owners options for colors, styles, and other aspects of your theme. </li></ul> <p>The default WordPress theme contains a <tt>functions.php</tt> file that defines many of these features, so you might want to use it as a model. Since <tt>functions.php</tt> basically functions as a plugin, the <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference" title="Function Reference">Function_Reference</a> list is the best place to go for more information on what you can do with this file. </p> <a name="Template_Files" id="Template_Files"></a><h3> <span class="mw-headline"> Template Files </span></h3> <p><a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">Templates</a> are PHP source files used to generate the pages requested by visitors, and are output as HTML. Let's look at the various templates that can be defined as part of a Theme. </p><p>WordPress allows you to define separate templates for the various aspects of your site. It is not essential, however, to have all these different template files for your site to fully function. Templates are chosen and generated based upon the <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a>, depending upon what templates are available in a particular Theme. </p><p>As a Theme developer, you can choose the amount of customization you want to implement using templates. For example, as an extreme case, you can use only one template file, called <tt>index.php</tt> as the template for <i>all</i> pages generated and displayed by the site. A more common use is to have different template files generate different results, to allow maximum customization. </p> <a name="Template_Files_List" id="Template_Files_List"></a><h4> <span class="mw-headline"> Template Files List </span></h4> <p>Here is the list of the Theme files recognized by WordPress. Of course, your Theme can contain any other stylesheets, images, or files. Just keep in mind that the following have special meaning to WordPress -- see <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a> for more information. </p> <dl><dt><tt>style.css</tt></dt><dd> The main stylesheet. This <b>must</b> be included with your Theme, and it must contain the information header for your Theme. </dd><dt><tt>rtl.css</tt></dt><dd> The rtl stylesheet. This will be included <b>automatically</b> if the website direction is RTL. you can generate it using a plugin called <a href="https://web.archive.org/web/20110512235319/http://wordpress.org/extend/plugins/rtler/" class="external text" title="http://wordpress.org/extend/plugins/rtler/">the RTLer</a>. </dd><dt><tt>index.php</tt></dt><dd> The main template. If your Theme provides its own templates, <tt>index.php</tt> must be present. </dd><dt><tt>comments.php</tt></dt><dd> The comments template. </dd><dt><tt>front-page.php</tt></dt><dd> The front page template, it is only used if you use a <a href="/web/20110512235319/http://codex.wordpress.org/Creating_a_Static_Front_Page" title="Creating a Static Front Page">static front page</a>. </dd><dt><tt>home.php</tt></dt><dd> The home page template, which is the front page by default. If you use a <a href="/web/20110512235319/http://codex.wordpress.org/Creating_a_Static_Front_Page" title="Creating a Static Front Page">static front page</a> this is the template for the page with the latest posts. </dd><dt><tt>single.php</tt></dt><dd> The single post template. Used when a single post is queried. For this and all other query templates, <tt>index.php</tt> is used if the query template is not present. </dd><dt><tt>single-<post-type>.php</tt></dt><dd> The single post template used when a single post from a custom post type is queried. For example, <tt>single-books.php</tt> would be used for displaying single posts from the custom post type <tt>books</tt>. <tt>index.php</tt> is used if the query template for the custom post type is not present. </dd><dt><tt>page.php</tt></dt><dd> The page template. Used when an individual <a href="/web/20110512235319/http://codex.wordpress.org/Pages" title="Pages">Page</a> is queried. </dd><dt><tt>category.php</tt></dt><dd> The <a href="/web/20110512235319/http://codex.wordpress.org/Category_Templates" title="Category Templates">category template</a>. Used when a category is queried. </dd><dt><tt>tag.php</tt></dt><dd> The <a href="/web/20110512235319/http://codex.wordpress.org/Tag_Templates" title="Tag Templates">tag template</a>. Used when a tag is queried. </dd><dt><tt>taxonomy.php</tt></dt><dd> The <a href="/web/20110512235319/http://codex.wordpress.org/index.php?title=Taxonomy_Templates&action=edit&redlink=1" class="new" title="Taxonomy Templates (page does not exist)">term template</a>. Used when a term in a custom taxonomy is queried. </dd><dt><tt>author.php</tt></dt><dd> The <a href="/web/20110512235319/http://codex.wordpress.org/Author_Templates" title="Author Templates">author template</a>. Used when an author is queried. </dd><dt><tt>date.php</tt></dt><dd> The date/time template. Used when a date or time is queried. Year, month, day, hour, minute, second. </dd><dt><tt>archive.php</tt></dt><dd> The archive template. Used when a category, author, or date is queried. Note that this template will be overridden by <tt>category.php</tt>, <tt>author.php</tt>, and <tt>date.php</tt> for their respective query types. </dd><dt><tt>search.php</tt></dt><dd> The search results template. Used when a search is performed. </dd><dt><tt>attachment.php</tt></dt><dd> Attachment template. Used when viewing a single attachment. </dd><dt><tt>image.php</tt></dt><dd> Image attachment template. Used when viewing a single image attachment. If not present, attachment.php will be used. </dd><dt><tt>404.php</tt></dt><dd> The <b><a href="/web/20110512235319/http://codex.wordpress.org/Creating_an_Error_404_Page" title="Creating an Error 404 Page">404 Not Found</a></b> template. Used when WordPress cannot find a post or page that matches the query. </dd></dl> <p>These files have a special meaning with regard to WordPress because they are used as a replacement for <tt>index.php</tt>, when available, according to the <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a>, and when the corresponding <a href="/web/20110512235319/http://codex.wordpress.org/Conditional_Tags" title="Conditional Tags">Conditional Tag</a> returns true. For example, if only a single post is being displayed, the <tt><a href="/web/20110512235319/http://codex.wordpress.org/Conditional_Tags#A_Single_Post_Page" title="Conditional Tags">is_single()</a></tt> function returns 'true', and, if there is a <tt>single.php</tt> file in the active Theme, that template is used to generate the page. </p> <a name="Basic_Templates" id="Basic_Templates"></a><h4> <span class="mw-headline"> Basic Templates </span></h4> <p>At the very minimum, a WordPress Theme consists of two files: </p> <ul><li> <tt>style.css</tt> </li><li> <tt>index.php</tt> </li></ul> <p>Both of these files go into the Theme directory. The <tt>index.php</tt> <a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">template file</a> is very flexible. It can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error, and any other page created in WordPress. </p><p>Or, it can be divided into modular template files, each one taking on part of the workload. If you do not provide any other template files, WordPress will use a default version. For example, if you do not have either a <tt>comments.php</tt> template file, WordPress will automatically use the <tt>wp-comments.php</tt> template files using <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a>. (Note: As of version 3.0, the default files aren't guaranteed to be present or to be the same as they have been. It's much safer to supply your own template files.) </p><p>Typical template files include: </p> <ul><li> <tt>comments.php</tt> </li><li> <tt>footer.php</tt> </li><li> <tt>header.php</tt> </li><li> <tt>sidebar.php</tt> </li></ul> <p>Using these template files you can put template tags within the <tt>index.php</tt> master file to include these other files where you want them to appear in the final generated page. </p> <ul><li> To include the header, use <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/get_header" title="Function Reference/get header">get_header()</a></tt>. </li><li> To include the sidebar, use <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/get_sidebar" title="Function Reference/get sidebar">get_sidebar()</a></tt>. </li><li> To include the footer, use <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/get_footer" title="Function Reference/get footer">get_footer()</a></tt>. </li><li> To include the search form, use <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/get_search_form" title="Function Reference/get search form">get_search_form()</a></tt>. </li></ul> <p>Here is an example of the <i>include</i> usage: </p> <pre> <?php get_sidebar(); ?> <?php get_footer(); ?> </pre> <p>For more on how these various Templates work and how to generate different information within them, read the <a href="/web/20110512235319/http://codex.wordpress.org/Templates" title="Templates">Templates</a> documentation. </p> <a name="Custom_Page_Templates" id="Custom_Page_Templates"></a><h4> <span class="mw-headline">Custom Page Templates</span></h4> <p>The files defining each Page Template are found in your <a href="/web/20110512235319/http://codex.wordpress.org/Using_Themes" title="Using Themes">Themes</a> directory. To create a new Custom Page Template for a Page you must create a file. Let's call our first Page Template for our Page <tt>snarfer.php</tt>. At the top of the <tt>snarfer.php</tt> file, put the following: </p> <pre><?php /* Template Name: Snarfer */ ?> </pre> <p>The above code defines this <tt>snarfer.php</tt> file as the "Snarfer" Template. Naturally, "Snarfer" may be replaced with most any text to change the name of the Page Template. This Template Name will appear in the Theme Editor as the link to edit this file. </p><p>The file may be named <i>almost</i> anything with a <tt>.php</tt> extension (see <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Development#Template_Files_List" title="Theme Development">reserved Theme filenames</a> for filenames you should <i>not</i> use; these are special file names WordPress reserves for specific purposes). </p><p>What follows the above five lines of code is up to you. The rest of the code you write will control how Pages that use the Snarfer Page Template will display. See <a href="/web/20110512235319/http://codex.wordpress.org/Template_Tags" title="Template Tags">Template Tags</a> for a description of the various WordPress Template functions you can use for this purpose. You may find it more convenient to copy some other Template (perhaps <tt>page.php</tt> or <tt>index.php</tt>) to <tt>snarfer.php</tt> and then add the above five lines of code to the beginning of the file. That way, you will only have to <i>alter</i> the HTML and PHP code, instead of creating it all from scratch. Examples are shown <a href="#Examples" title="">below</a>. Once you have created the Page Template and placed it in your Theme's directory, it will be available as a choice when you create or edit a Page. (<b>Note</b>: when creating or editing a Page, the Page Template option does not appear unless there is at least one template defined in the above manner.) </p> <a name="Query-based_Template_Files" id="Query-based_Template_Files"></a><h4> <span class="mw-headline"> Query-based Template Files </span></h4> <p>WordPress can load different <a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">Templates</a> for different <i>query</i> types. There are two ways to do this: as part of the built-in <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a>, and through the use of <a href="/web/20110512235319/http://codex.wordpress.org/Conditional_Tags" title="Conditional Tags">Conditional Tags</a> within <a href="/web/20110512235319/http://codex.wordpress.org/The_Loop" title="The Loop">The Loop</a> of a template file. </p><p>To use the <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a>, you basically need to provide special-purpose Template files, which will automatically be used to override <tt>index.php</tt>. For instance, if your Theme provides a template called <tt>category.php</tt> and a category is being queried, <tt>category.php</tt> will be loaded instead of <tt>index.php</tt>. If <tt>category.php</tt> is not present, <tt>index.php</tt> is used as usual. </p><p>You can get even more specific in the Template Hierarchy by providing a file called, for instance, <tt>category-6.php</tt> -- this file will be used rather than <tt>category.php</tt> when generating the page for the category whose ID number is 6. (You can find category ID numbers in <a href="/web/20110512235319/http://codex.wordpress.org/Administration_Panels#Manage_-_Change_your_content" title="Administration Panels">Manage</a> > <a href="/web/20110512235319/http://codex.wordpress.org/Administration_Panels#Categories" title="Administration Panels">Categories</a> if you are logged in as the site administrator in WordPress version 2.3 and below. In WordPress 2.5 the ID column was removed from the Admin panels. You can locate the category id by clicking 'Edit Category' and looking 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 a more detailed look at how this process works, see <a href="/web/20110512235319/http://codex.wordpress.org/Category_Templates" title="Category Templates">Category Templates</a>. </p><p>If your Theme needs to have even more control over which Template files are used than what is provided in the <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a>, you can use <a href="/web/20110512235319/http://codex.wordpress.org/Conditional_Tags" title="Conditional Tags">Conditional Tags</a>. The Conditional Tag basically checks to see if some particular condition is true, within the <a href="/web/20110512235319/http://codex.wordpress.org/The_Loop_in_Action" title="The Loop in Action">WordPress Loop</a>, and then you can load a particular template, or put some particular text on the screen, based on that condition. </p><p>For example, to generate a distinctive stylesheet in a post only found within a specific category, the code might look like this: </p> <pre> <?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 } ?> </pre> <p>Or, using a query, it might look like this: </p> <pre> <?php $post = $wp_query->post; if ( in_category( '9' ) ) { get_template_part( 'single2' ); } else { get_template_part( 'single1' ); } ?> </pre> <p>In either case, this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories, however, see the <a href="/web/20110512235319/http://codex.wordpress.org/Conditional_Tags" title="Conditional Tags">Conditional Tags</a> article to look at all the options. </p> <a name="Defining_Custom_Templates" id="Defining_Custom_Templates"></a><h4> <span class="mw-headline"> Defining Custom Templates </span></h4> <p>It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the <tt>template_redirect</tt> <a href="/web/20110512235319/http://codex.wordpress.org/Plugin_API#Current_Hooks_For_Actions" title="Plugin API">action hook</a>. More information about creating plugins can be found in the <a href="/web/20110512235319/http://codex.wordpress.org/Plugin_API" title="Plugin API">Plugin API</a> reference. </p> <a name="Including_Template_Files" id="Including_Template_Files"></a><h4> <span class="mw-headline"> Including Template Files </span></h4> <p>To load another template (other than header, sidebar, footer, which have predefined included commands like <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/get_header" title="Function Reference/get header">get_header()</a></tt>) into a template, you can use <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/get_template_part" title="Function Reference/get template part">get_template_part()</a></tt>. This makes it easy for a Theme to reuse sections of code. </p> <a name="Referencing_Files_From_a_Template" id="Referencing_Files_From_a_Template"></a><h4> <span class="mw-headline"> Referencing Files From a Template </span></h4> <p>When referencing other files within the same Theme, avoid hard-coded URIs and file paths. Instead reference the URIs and file paths with <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/bloginfo" title="Function Reference/bloginfo">bloginfo()</a></tt>: see <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Development#Referencing_Files_From_a_Template" title="Theme Development">Referencing Files From a Template</a>. </p><p>Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. For example, if you include an <tt>images/</tt> directory in your Theme, you need only specify this relative directory in the CSS, like so: </p> <pre> h1 { background-image: url(images/my-background.jpg); } </pre> <a name="Plugin_API_Hooks" id="Plugin_API_Hooks"></a><h4> <span class="mw-headline"> Plugin API Hooks </span></h4> <p>When developing Themes, it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins users might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see <a href="/web/20110512235319/http://codex.wordpress.org/Plugin_API" title="Plugin API">Plugin API</a> for more information). </p><p>Most Action Hooks are within the core PHP code of WordPress, so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme, in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Here is a list of the special Action Hook Template Tags you need to include: </p> <dl><dt> <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_head" title="Function Reference/wp head">wp_head()</a> </dt><dd> Goes in the <tt><head></tt> element of a theme, in <tt>header.php</tt>. Example plugin use: add JavaScript code. </dd></dl> <dl><dt> <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_footer" title="Function Reference/wp footer">wp_footer()</a> </dt><dd> Goes in <tt>footer.php</tt>, just before the closing <tt></body></tt> tag. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer. Very commonly used to insert web statistics code, such as Google Analytics. </dd></dl> <dl><dt> <a href="/web/20110512235319/http://codex.wordpress.org/index.php?title=Function_Reference/wp_meta&action=edit&redlink=1" class="new" title="Function Reference/wp meta (page does not exist)">wp_meta()</a> </dt><dd> Typically goes in the <tt><li>Meta</li></tt> section of a Theme's menu or sidebar; <tt>sidebar.php</tt> template. Example plugin use: include a rotating advertisement or a tag cloud. </dd></dl> <dl><dt> <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/comment_form" title="Function Reference/comment form">comment_form()</a> </dt><dd> Goes in <tt>comments.php</tt> directly before the comment form's closing tag (<tt</form></tt>). Example plugin use: display a comment preview. As of <a href="/web/20110512235319/http://codex.wordpress.org/Version_3.0" title="Version 3.0">WordPress 3.0</a>, you should use the default comment form instead, see <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/comment_form" title="Function Reference/comment form">comment_form()</a>. </dd></dl> <p>For a real world usage example, you'll find these plugin hooks included in the default Theme's templates. </p> <a name="Untrusted_Data" id="Untrusted_Data"></a><h4> <span class="mw-headline"> Untrusted Data </span></h4> <p>You should escape dynamically generated content in your Theme, especially content that is output in HTML attributes. As noted in <a href="/web/20110512235319/http://codex.wordpress.org/WordPress_Coding_Standards" title="WordPress Coding Standards">WordPress Coding Standards</a>, text that goes into attributes should be run through <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/esc_attr" title="Function Reference/esc attr">esc_attr</a></tt> so that single or double quotes do not end the attribute value and invalidate the XHTML and cause a security issue. Common places to check are <tt>title</tt>, <tt>alt</tt>, and <tt>value</tt> attributes. </p><p>In a few cases there might already be a template tag for common cases where safe output is needed. One such case involves the "title" attribute when used with <tt>the_title()</tt> for post and page titles. To avoid a security vulnerability, use <tt>the_title_attribute()</tt> instead. Here's an example of correct escaping for the <tt>title</tt> attribute in a post title link when using translatable text: </p> <pre><?php echo esc_attr( sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ) ); ?></pre> <p>Replace deprecated escape calls with the correct calls: <tt>wp_specialchars</tt>, <tt>htmlspecialchar</tt> with <tt>esc_html</tt>, <tt>clean_url</tt> with <tt>esc_url</tt>, and <tt>attribute_escape</tt> with <tt>esc_attr</tt>. See <a href="/web/20110512235319/http://codex.wordpress.org/Data_Validation#Attribute_Nodes" title="Data Validation">Data_Validation</a> for more. </p> <a name="Translation_.2F_i18n_Support" id="Translation_.2F_i18n_Support"></a><h4> <span class="mw-headline"> Translation / i18n Support </span></h4> <p>To ensure smooth transition for language localization, use the <tt><a href="/web/20110512235319/http://codex.wordpress.org/I18n_for_WordPress_Developers" title="I18n for WordPress Developers">gettext</a></tt> functions for wrapping all translatable text within the template files. This makes it easier for the translation files to hook in and translate the titles into the site's language. See more at <a href="/web/20110512235319/http://codex.wordpress.org/WordPress_Localization" title="WordPress Localization" class="mw-redirect">WordPress_Localization</a> and <a href="/web/20110512235319/http://codex.wordpress.org/I18n_for_WordPress_Developers" title="I18n for WordPress Developers">i18n for WordPress Developers</a>. </p> <a name="Theme_Classes" id="Theme_Classes"></a><h4> <span class="mw-headline"> Theme Classes </span></h4> <p>Implement the following template tags to add WordPress-generated class attributes to body, post, and comment elements. For post classes, apply only to elements within <a href="/web/20110512235319/http://codex.wordpress.org/The_Loop" title="The Loop">The Loop</a>. </p> <ul><li> <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/body_class" title="Function Reference/body class">body_class()</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/post_class" title="Function Reference/post class">post_class()</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/comment_class" title="Function Reference/comment class">comment_class()</a> </li></ul> <a name="Template_File_Checklist" id="Template_File_Checklist"></a><h3> <span class="mw-headline"> Template File Checklist </span></h3> <p>When developing a Theme, check your template files against the following template file standards. </p> <a name="Document_Head_.28header.php.29" id="Document_Head_.28header.php.29"></a><h4> <span class="mw-headline"> Document Head (header.php) </span></h4> <ul><li> Use the proper DOCTYPE. </li><li> The opening <tt><html></tt> tag should include <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/language_attributes" title="Function Reference/language attributes">language_attributes()</a></tt>. </li><li> The "content-type" meta element should be placed before everything else, including the title element. </li><li> Use <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/bloginfo" title="Function Reference/bloginfo">bloginfo()</a></tt> to fetch the title and description. </li><li> Use <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/add_theme_support#Feed_Links" title="Function Reference/add theme support">automatic feed links</a> to add feed links. </li><li> Add a call to <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_head" title="Function Reference/wp head">wp_head()</a></tt>. Plugins use this action hook to add their own scripts, stylesheets, and other functionality. </li></ul> <p>Here's an example of a correctly-formatted HTML5 compliant head area: </p> <pre> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" 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> </pre> <a name="Navigation_Menus_.28header.php.29" id="Navigation_Menus_.28header.php.29"></a><h4> <span class="mw-headline"> Navigation Menus (header.php) </span></h4> <ul><li> The Theme's main navigation should support a custom menu with <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_nav_menu" title="Function Reference/wp nav menu">wp_nav_menu()</a></tt>. <ul><li> Menus should support long link titles and a large amount of list items. These items should not break the design or layout. </li><li> Submenu items should display correctly. If possible, support drop-down menu styles for submenu items. Drop-downs allowing showing menu depth instead of just showing the top level. </li></ul> </li></ul> <a name="Widgets_.28sidebar.php.29" id="Widgets_.28sidebar.php.29"></a><h4> <span class="mw-headline"> Widgets (sidebar.php) </span></h4> <ul><li> The Theme should be widgetized as fully as possible. Any area in the layout that works like a widget (tag cloud, blogroll, list of categories) or could accept widgets (sidebar) should allow widgets. </li><li> Content that appears in widgetized areas by default (hard-coded into the sidebar, for example) should disappear when widgets are enabled from Appearance > Widgets. </li></ul> <a name="Footer_.28footer.php.29" id="Footer_.28footer.php.29"></a><h4> <span class="mw-headline"> Footer (footer.php) </span></h4> <ul><li> Use a <tt>wp_footer()</tt> call, to appear just before closing <tt>body</tt> tag. </li></ul> <pre> <?php wp_footer(); ?> </body> </html> </pre> <a name="Index_.28index.php.29" id="Index_.28index.php.29"></a><h4> <span class="mw-headline"> Index (index.php) </span></h4> <ul><li> Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate. </li><li> Include <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_link_pages" title="Function Reference/wp link pages">wp_link_pages()</a></tt> to support navigation links within posts. </li></ul> <a name="Archive_.28archive.php.29" id="Archive_.28archive.php.29"></a><h4> <span class="mw-headline"> Archive (archive.php) </span></h4> <ul><li> Display archive title (tag, category, date-based, or author archives). </li><li> Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate. </li><li> Include <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_link_pages" title="Function Reference/wp link pages">wp_link_pages()</a></tt> to support navigation links within posts. </li></ul> <a name="Pages_.28page.php.29" id="Pages_.28page.php.29"></a><h4> <span class="mw-headline"> Pages (page.php) </span></h4> <ul><li> Display page title and page content. </li><li> Display comment list and comment form (unless comments are off). </li><li> Include <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_link_pages" title="Function Reference/wp link pages">wp_link_pages()</a></tt> to support navigation links within a page. </li><li> Metadata such as tags, categories, date and author should not be displayed. </li></ul> <a name="Single_Post_.28single.php.29" id="Single_Post_.28single.php.29"></a><h4> <span class="mw-headline"> Single Post (single.php) </span></h4> <ul><li> Include <tt><a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_link_pages" title="Function Reference/wp link pages">wp_link_pages()</a></tt> to support navigation links within a post. </li><li> Display post title and post content. <ul><li> The title should be plain text instead of a link pointing to itself. </li></ul> </li><li> Display the post date. <ul><li> Respect date and time format settings unless it's important to the design. (User settings for date and time format are in Settings > General.) </li><li> For output based on the user setting, use <tt>the_time( get_option( 'date_format' ) )</tt>. </li></ul> </li><li> Display the author name (if appropriate). </li><li> Display post categories and post tags. </li><li> Display an "Edit" link for logged-in users with edit permissions. </li><li> Display comment list and comment form. </li></ul> <a name="Comments_.28comments.php.29" id="Comments_.28comments.php.29"></a><h4> <span class="mw-headline"> Comments (comments.php) </span></h4> <ul><li> Author comment should be highlighted differently. </li><li> Display gravatars (user avatars) if appropriate. </li><li> Support threaded comments. </li><li> Display trackbacks/pingbacks. </li><li> This file shouldn’t contain function defines unless in a <tt>function_exist()</tt> check to avoid redeclaration errors. Ideally all functions should be in functions.php. </li></ul> <a name="Search_Results_.28search.php.29" id="Search_Results_.28search.php.29"></a><h4> <span class="mw-headline"> Search Results (search.php) </span></h4> <ul><li> Display a list of posts in excerpt or full-length form. Choose one or the other as appropriate. </li><li> The search results page show the previous search term. It's a simple but useful way to remind someone what they just searched for -- especially in the case of zero results. Use <tt>the_search_query</tt> or <tt>get_search_query</tt> (echo or return the value). For example: <pre><h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2></pre> </li><li> It's a good practice to include the search form again on the results page. Include it with: <tt>get_search_form()</tt>. </li></ul> <a name="JavaScript" id="JavaScript"></a><h3> <span class="mw-headline"> JavaScript </span></h3> <ul><li> JavaScript code should be placed in external files whenever possible. </li><li> Use <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference/wp_enqueue_script" title="Function Reference/wp enqueue script"> wp_enqueue_script</a> to load your scripts. </li><li> JavaScript loaded directly into HTML documents (template files) should be CDATA encoded to prevent errors in older browsers. </li></ul> <pre> <script type="text/javascript"> /* <![CDATA[ */ // content of your Javascript goes here /* ]]> */ </script> </pre> <a name="Screenshot" id="Screenshot"></a><h3> <span class="mw-headline"> Screenshot </span></h3> <p>Create a screenshot for your theme. The screenshot should be named <tt>screenshot.png</tt>, and should be placed in the top level directory. The screenshot should accurately show the theme design, and should be saved in PNG or JPG format. </p> <a name="Theme_Options" id="Theme_Options"></a><h3> <span class="mw-headline"> Theme Options </span></h3> <p>Themes can optionally include an options page. For example code, see <a href="https://web.archive.org/web/20110512235319/http://themeshaper.com/sample-theme-options/" class="external text" title="http://themeshaper.com/sample-theme-options/">A Sample WordPress Theme Options Page</a>. </p><p>When enabling an options page, use the <tt>edit_theme_options</tt> capability instead of <tt>switch_themes</tt> for options panels, unless the user actually should be able to switch Themes to be able to use your options panel. WordPress itself uses the <tt>edit_theme_options</tt> capability for menus, background, header, widgets, et cetera. See more at <a href="/web/20110512235319/http://codex.wordpress.org/Roles_and_Capabilities#Capabilities" title="Roles and Capabilities">Roles and Capabilities</a> and <a href="/web/20110512235319/http://codex.wordpress.org/Adding_Administration_Menus" title="Adding Administration Menus" class="mw-redirect">Adding Administration Menus</a>. </p><p>A note about network mode and Theme options: </p><p>If you are using the <tt>edit_themes</tt> capability anywhere in your Theme, and the Theme is running on a network-enabled WordPress install (previously WordPress MU), be aware that the <tt>edit_themes</tt> capability used for accessing Theme options pages will prevent site admins in a network from seeing the options menu. Use <tt>edit_theme_options</tt> instead. </p> <a name="Theme_Testing_Process" id="Theme_Testing_Process"></a><h2> <span class="mw-headline"> Theme Testing Process </span></h2> <ol><li> Fix PHP and WordPress errors. Add the following debug setting to your <tt>wp-config.php</tt> file to see deprecated function calls and other WordPress-related errors: <tt>define('WP_DEBUG', true);</tt>. See <a href="/web/20110512235319/http://codex.wordpress.org/WordPress_Deprecated_Functions_Hook" title="WordPress Deprecated Functions Hook">Deprecated Functions Hook</a> for more information. </li><li> Check template files against <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Development#Template_File_Checklist" title="Theme Development">Template File Checklist</a> (see above). </li><li> Do a run-through using the <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Unit_Test" title="Theme Unit Test">Theme Unit Test</a>. </li><li> Validate HTML and CSS. See <a href="/web/20110512235319/http://codex.wordpress.org/Validating_a_Website" title="Validating a Website">Validating a Website</a>. </li><li> Check for JavaScript errors. </li><li> Test in all your target browsers. For example, IE6, IE7, IE8, Safari, Chrome, Opera, and Firefox. </li><li> Clean up any extraneous comments, debug settings, or TODO items. </li><li> See <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Review" title="Theme Review">Theme Review</a> if you are publicly releasing the Theme by submitting it to the Themes Directory. </li></ol> <a name="Resources_and_References" id="Resources_and_References"></a><h2> <span class="mw-headline"> Resources and References </span></h2> <a name="Code_Standards" id="Code_Standards"></a><h3> <span class="mw-headline"> Code Standards </span></h3> <ul><li> <a href="/web/20110512235319/http://codex.wordpress.org/Know_Your_Sources" title="Know Your Sources">Know Your Sources</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/WordPress_Coding_Standards" title="WordPress Coding Standards">WordPress Coding Standards</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/CSS_Coding_Standards" title="CSS Coding Standards">CSS Coding Standards</a> </li></ul> <a name="Theme_Design" id="Theme_Design"></a><h3> <span class="mw-headline"> Theme Design </span></h3> <ul><li> <a href="/web/20110512235319/http://codex.wordpress.org/Site_Design_and_Layout" title="Site Design and Layout">Site Design and Layout</a> </li></ul> <a name="CSS" id="CSS"></a><h3> <span class="mw-headline"> CSS </span></h3> <ul><li> <a href="/web/20110512235319/http://codex.wordpress.org/CSS" title="CSS">CSS</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/CSS_Shorthand" title="CSS Shorthand">CSS Shorthand</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/CSS#WordPress_Generated_Classes" title="CSS">WordPress Generated Classes</a> </li></ul> <a name="Templates" id="Templates"></a><h3> <span class="mw-headline"> Templates </span></h3> <ul><li> <a href="/web/20110512235319/http://codex.wordpress.org/Stepping_Into_Templates" title="Stepping Into Templates">Stepping Into Templates</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Templates" title="Templates">Templates</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Template_Tags" title="Template Tags">Template Tags</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/The_Loop" title="The Loop">The Loop</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Conditional_Tags" title="Conditional Tags">Conditional Tags</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Function_Reference" title="Function Reference">Function Reference</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/I18n_for_WordPress_Developers" title="I18n for WordPress Developers">I18n for WordPress Developers</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Data_Validation" title="Data Validation">Data Validation</a> </li></ul> <a name="Testing_and_QA" id="Testing_and_QA"></a><h3> <span class="mw-headline"> Testing and QA </span></h3> <ul><li> <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Unit_Test" title="Theme Unit Test">Theme Unit Test</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/Validating_a_Website" title="Validating a Website">Validating a Website</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/CSS_Fixing_Browser_Bugs" title="CSS Fixing Browser Bugs">CSS Fixing Browser Bugs</a> </li><li> <a href="/web/20110512235319/http://codex.wordpress.org/CSS_Troubleshooting" title="CSS Troubleshooting">CSS Troubleshooting</a> </li></ul> <a name="Release_.26_Promotion" id="Release_.26_Promotion"></a><h3> <span class="mw-headline"> Release & Promotion </span></h3> <ul><li> <a href="/web/20110512235319/http://codex.wordpress.org/Theme_Review" title="Theme Review">Theme Review Process</a> </li></ul>  <div class="printfooter"> Retrieved from "<a href="https://web.archive.org/web/20110512235319/http://codex.wordpress.org/Theme_Development">http://codex.wordpress.org/Theme_Development</a>"</div> <div id="catlinks"><div id="catlinks" class="catlinks"><div id="mw-normal-catlinks"><a href="/web/20110512235319/http://codex.wordpress.org/Special:Categories" title="Special:Categories">Categories</a>: <span dir="ltr"><a href="/web/20110512235319/http://codex.wordpress.org/Category:Design_and_Layout" title="Category:Design and Layout">Design and Layout</a></span> | <span dir="ltr"><a href="/web/20110512235319/http://codex.wordpress.org/Category:WordPress_Development" title="Category:WordPress Development">WordPress Development</a></span> | <span dir="ltr"><a href="/web/20110512235319/http://codex.wordpress.org/Category:UI_Link" title="Category:UI Link">UI Link</a></span></div></div></div>  </div> <div class="col-2"> <ul class="submenu"> <li id="n-mainpage"><a href="/web/20110512235319/http://codex.wordpress.org/Main_Page">Home Page</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/WordPress_Lessons">WordPress Lessons</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/Getting_Started_with_WordPress">Getting Started</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/Working_with_WordPress">Working with WordPress</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/Blog_Design_and_Layout">Design and Layout</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/Advanced_Topics">Advanced Topics</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/Troubleshooting">Troubleshooting</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/Developer_Documentation">Developer Docs</a></li> <li><a href="/web/20110512235319/http://codex.wordpress.org/About_WordPress">About WordPress</a></li> </ul> <h3>Codex Resources</h3> <ul class="submenu"> <li id="n-portal"><a href="/web/20110512235319/http://codex.wordpress.org/Codex:Community_Portal">Community portal</a></li> <li id="n-currentevents"><a href="/web/20110512235319/http://codex.wordpress.org/Current_events">Current events</a></li> <li id="n-recentchanges"><a href="/web/20110512235319/http://codex.wordpress.org/Special:RecentChanges">Recent changes</a></li> <li id="n-randompage"><a href="/web/20110512235319/http://codex.wordpress.org/Special:Random">Random page</a></li> <li id="n-help"><a href="/web/20110512235319/http://codex.wordpress.org/Help:Contents">Help</a></li> </ul> </div> </div> </div> <div id="footer"> <div class="wrapper"> <p> <a href="https://web.archive.org/web/20110512235319/http://wordpress.org/about/privacy/">Privacy</a> | <a href="https://web.archive.org/web/20110512235319/http://wordpress.org/about/gpl/">License / GPL</a>     See also: <a href="https://web.archive.org/web/20110512235319/http://wordpress.com/" title="Hassle-free WP hosting">WordPress.com</a> | <a href="https://web.archive.org/web/20110512235319/http://wordpress.tv/" title="Videos, tutorials, WordCamps">WordPress.TV</a> | <a href="https://web.archive.org/web/20110512235319/http://central.wordcamp.org/" title="Find a WordPress event near your home">WordCamp</a> | <a href="https://web.archive.org/web/20110512235319/http://jobs.wordpress.net/" title="Find or post WordPress jobs">WP Jobs</a> | <a href="https://web.archive.org/web/20110512235319/http://ma.tt/" title="Co-founder of WordPress, an example of what WordPress can do">Matt</a> | <a href="https://web.archive.org/web/20110512235319/http://www.facebook.com/WordPress">Fan WP on Facebook</a> | <a href="https://web.archive.org/web/20110512235319/http://wordpress.org/news/feed/" class="rsslink">Blog RSS</a> </p> <h6>Code is Poetry</h6> </div> </div> </body>  </html>