CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <link href="https://plus.google.com/107188080561309681193" rel="publisher"/> <meta name="google-site-verification" content="7VWES_-rcHBcmaQis9mSYamPfNwE03f4vyTj4pfuAw0"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="generator" content="MediaWiki 1.15.5"/> <meta name="keywords" content="Child Themes,CSS,FTP Clients,Function Reference/get stylesheet directory,Function Reference/is rtl,I18n for WordPress Developers,Multilingual Codex,Plugin API,Post Formats,Template Hierarchy,Templates"/> <link rel="shortcut icon" href="/web/20130116014908im_/http://codex.wordpress.org/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/web/20130116014908/http://codex.wordpress.org/opensearch_desc.php" title="Codex (en)"/> <link rel="alternate" type="application/rss+xml" title="Codex RSS feed" href="/web/20130116014908/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=rss"/> <link rel="alternate" type="application/atom+xml" title="Codex Atom feed" href="/web/20130116014908/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=atom"/> <script type="text/javascript" src="https://web-static.archive.org/_static/js/bundle-playback.js?v=7YQSqjSh" charset="utf-8"></script> <script type="text/javascript" src="https://web-static.archive.org/_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="https://web-static.archive.org/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://codex.wordpress.org/Child_Themes","20130116014908","https://web.archive.org/","web","https://web-static.archive.org/_static/", "1358300948"); </script> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/banner-styles.css?v=p7PEIJWi" /> <link rel="stylesheet" type="text/css" href="https://web-static.archive.org/_static/css/iconochive.css?v=3PDvdIFv" />  <title>Child Themes « WordPress Codex</title> <link rel="stylesheet" href="//web.archive.org/web/20130116014908cs_/http://wordpress.org/style/codex-wp4.css?3"/> <link rel="stylesheet" href="//web.archive.org/web/20130116014908cs_/http://wordpress.org/style/wp4.css?27"/> <link media="only screen and (max-device-width: 480px)" href="//web.archive.org/web/20130116014908cs_/http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet"/> <link rel="shortcut icon" href="//web.archive.org/web/20130116014908im_/http://wordpress.org/favicon.ico?3" type="image/x-icon"/> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://web.archive.org/web/20130116014908/https://ssl." : "https://web.archive.org/web/20130116014908/http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> var pageTracker = _gat._getTracker("UA-52447-1"); pageTracker._initData(); pageTracker._trackPageview(); function recordOutboundLink(link, category, action) { pageTracker._trackEvent(category, action); setTimeout('document.location = "' + link.href + '"', 100); } </script>  <script type="text/javascript" src="//web.archive.org/web/20130116014908js_/http://wordpress.org/wp-includes/js/jquery/jquery.js"></script> <script>document.cookie='devicePixelRatio='+((window.devicePixelRatio === undefined) ? 1 : window.devicePixelRatio)+'; path=/';</script>  <script type="text/javascript" src="/web/20130116014908js_/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/20130116014908js_/http://codex.wordpress.org/skins/common/wikibits.js"></script> </head> <body id="wordpress-org"> <div id="header"> <div class="wrapper"> <h1><a href="//web.archive.org/web/20130116014908/http://wordpress.org/">WordPress.org</a></h1> <form action="https://web.archive.org/web/20130116014908/http://wordpress.org/search/do-search.php" method="get" id="head-search"> <input class="text" name="search" type="text" value="Search WordPress.org" maxlength="150" onfocus="this.value=(this.value=='Search WordPress.org') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search WordPress.org' : this.value;"/> <input type="submit" class="button" value="Go"/> </form> <ul> <li><a href="https://web.archive.org/web/20130116014908/http://wordpress.org/showcase/" title="See some of the sites built on WordPress.">Showcase</a></li> <li><a href="https://web.archive.org/web/20130116014908/http://wordpress.org/extend/themes/" title="Find just the right look for your website.">Themes</a></li> <li><a href="https://web.archive.org/web/20130116014908/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/20130116014908/http://wordpress.org/extend/mobile/" title="Take your website on the go!">Mobile</a></li> <li><a href="https://web.archive.org/web/20130116014908/http://wordpress.org/support/" title="Forums, documentation, help." class="current">Support</a><ul class="nav-submenu"><li><a href="https://web.archive.org/web/20130116014908/http://wordpress.org/support/" title="Support and discussion forums.">Forums</a></li><li><a href="https://web.archive.org/web/20130116014908/http://codex.wordpress.org/Main_Page" title="Documentation, tutorials, best practices.">Docs</a></li></ul></li> <li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/" title="Contribute your knowledge.">Get Involved</a><ul class="nav-submenu"><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/core/" title="Write the code.">Core</a></li><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/ui/" title="Improve the interface.">UI</a></li><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/accessibility/" title="Create a better experience.">Accessibility</a></li><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/plugins/" title="Extend the system.">Plugins</a></li><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/themes/" title="Beautify the web.">Themes</a></li><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/support/" title="Help the users.">Support</a></li><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/polyglots/" title="Translate for the world.">Polyglots</a></li><li><a href="https://web.archive.org/web/20130116014908/http://make.wordpress.org/mobile/" title="On the go.">Mobile</a></li></ul></li> <li><a href="https://web.archive.org/web/20130116014908/http://wordpress.org/about/" title="About the WordPress Organization, and where we're going.">About</a></li> <li><a href="https://web.archive.org/web/20130116014908/http://wordpress.org/news/" title="Come here for the latest scoop.">Blog</a></li> <li><a href="https://web.archive.org/web/20130116014908/http://wordpress.org/hosting/" title="Find a home for your blog.">Hosting</a></li> <li id="download"><a href="https://web.archive.org/web/20130116014908/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/20130116014908/http://codex.wordpress.org/index.php?title=Special:UserLogin&returnto=Child_Themes">Log in</a> </p> </div> </div> </div> <div id="pagebody"> <div class="wrapper"> <div class="col-10" id="bodyContent"> <h2 class="pagetitle">Child Themes</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/20130116014908/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/20130116014908/http://wpdocs.sourceforge.jp/Child_Themes" class="external text" title="http://wpdocs.sourceforge.jp/Child_Themes">日本語</a> • <a href="/web/20130116014908/http://codex.wordpress.org/ko:Child_Themes" title="ko:Child Themes">한국어</a> • <a href="/web/20130116014908/http://codex.wordpress.org/fr:Th%C3%A8mes_Enfant" title="fr:Thèmes Enfant">Français</a> • <a href="/web/20130116014908/http://codex.wordpress.org/pt-br:Temas_Filhos" title="pt-br:Temas Filhos">Português do Brasil</a> • <a href="/web/20130116014908/http://codex.wordpress.org/%D0%94%D0%BE%D1%87%D0%B5%D1%80%D0%BD%D0%B8%D0%B5_%D1%82%D0%B5%D0%BC%D1%8B" title="Дочерние темы">Русский</a> • <a href="/web/20130116014908/http://codex.wordpress.org/sk:Odvoden%C3%A9_t%C3%A9my" title="sk:Odvodené témy">Slovenčina</a> • <a href="https://web.archive.org/web/20130116014908/http://codex.wordthai.com/Child+Themes" class="external text" title="http://codex.wordthai.com/Child+Themes">ไทย</a> • <a href="/web/20130116014908/http://codex.wordpress.org/zh-cn:%E5%AD%90%E4%B8%BB%E9%A2%98" title="zh-cn:子主题">中文(简体)</a> • <small>(<a href="/web/20130116014908/http://codex.wordpress.org/Multilingual_Codex#Language_Cross_Reference" title="Multilingual Codex" class="mw-redirect">Add your language</a>)</small> </p> <p>A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. This article shows how to create a basic child theme and explains what you can do with it. As an example parent theme it uses <a href="https://web.archive.org/web/20130116014908/http://theme.wordpress.com/themes/twentytwelve/" class="external text" title="http://theme.wordpress.com/themes/twentytwelve/">Twenty Twelve</a>, the new default theme in <a href="/web/20130116014908/http://codex.wordpress.org/Version_3.5" title="Version 3.5">WordPress 3.5</a>. </p><p>Making a child theme is very simple. Create a directory by using <a href="/web/20130116014908/http://codex.wordpress.org/FTP_Clients" title="FTP Clients">FTP</a> or whatever file management application your host provides. Put a properly formatted <i>style.css</i> file in it, and you have a child theme! The child theme contains a "Template: parent-theme-dir" header to distinguish it from standalone themes. With a little understanding of HTML and <a href="/web/20130116014908/http://codex.wordpress.org/CSS" title="CSS">CSS</a>, you can make that <i>very basic child theme</i> modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved. </p><p><b>For this reason, child themes are the recommended way of making modifications to a theme.</b> </p><p>With a basic understanding of PHP, <a href="/web/20130116014908/http://codex.wordpress.org/Templates" title="Templates">WordPress Templates</a>, and the <a href="/web/20130116014908/http://codex.wordpress.org/Plugin_API" title="Plugin API">WordPress Plugin API</a>, you can make the child theme extend virtually every aspect of a parent theme, and again, without actually changing the parent theme files. </p> <table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div> <ul> <li class="toclevel-1"><a href="#Directory_structure"><span class="tocnumber">1</span> <span class="toctext">Directory structure</span></a></li> <li class="toclevel-1"><a href="#The_required_style.css_file"><span class="tocnumber">2</span> <span class="toctext">The required style.css file</span></a></li> <li class="toclevel-1"><a href="#Example_of_a_basic_Child_Theme"><span class="tocnumber">3</span> <span class="toctext">Example of a basic Child Theme</span></a> <ul> <li class="toclevel-2"><a href="#Note_on_the_.40import_rule"><span class="tocnumber">3.1</span> <span class="toctext">Note on the @import rule</span></a></li> <li class="toclevel-2"><a href="#Note_on_RTL_support"><span class="tocnumber">3.2</span> <span class="toctext">Note on RTL support</span></a></li> <li class="toclevel-2"><a href="#Note_on_Twenty_Eleven_and_using_the_Dark_Theme_or_Link_Color_option"><span class="tocnumber">3.3</span> <span class="toctext">Note on Twenty Eleven and using the Dark Theme or Link Color option</span></a></li> </ul> </li> <li class="toclevel-1"><a href="#Using_functions.php"><span class="tocnumber">4</span> <span class="toctext">Using functions.php</span></a> <ul> <li class="toclevel-2"><a href="#Referencing_.2F_Including_Files_in_Your_Child_Theme"><span class="tocnumber">4.1</span> <span class="toctext">Referencing / Including Files in Your Child Theme</span></a></li> <li class="toclevel-2"><a href="#Using_Post_Formats"><span class="tocnumber">4.2</span> <span class="toctext">Using Post Formats</span></a></li> </ul> </li> <li class="toclevel-1"><a href="#Template_files"><span class="tocnumber">5</span> <span class="toctext">Template files</span></a></li> <li class="toclevel-1"><a href="#Other_files"><span class="tocnumber">6</span> <span class="toctext">Other files</span></a></li> <li class="toclevel-1"><a href="#Internationalization"><span class="tocnumber">7</span> <span class="toctext">Internationalization</span></a></li> <li class="toclevel-1"><a href="#Resources"><span class="tocnumber">8</span> <span class="toctext">Resources</span></a></li> </ul> </td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script> <a name="Directory_structure" id="Directory_structure"></a><h2> <span class="mw-headline"> Directory structure </span></h2> <p>A child theme resides in its own directory in <i>wp-content/themes</i>. The scheme below shows the location of a child theme along with its parent theme (Twenty Twelve) in a typical WordPress directory structure: </p> <ul><li> <b>site_root (www)</b> <ul><li> <b>wp-content</b> <ul><li> <b>themes</b> (directory where all themes are) <ul><li> <b>twentytwelve</b> (directory of our example parent theme, Twenty Twelve) </li><li> <b>twentytwelve-child</b> (directory of our child theme; can be named anything) <ul><li> <b>style.css</b> (required file in a child theme; must be named <i>style.css</i>) </li></ul> </li></ul> </li></ul> </li></ul> </li></ul> <p>This directory can contain as little as a <i>style.css</i> file, and as much as any full-fledged WordPress theme contains: </p> <ol><li> style.css (required) </li><li> functions.php (optional) </li><li> Template files (optional) </li><li> Other files (optional) </li></ol> <p>Let’s see how each of these works. </p> <a name="The_required_style.css_file" id="The_required_style.css_file"></a><h2> <span class="mw-headline"> The required style.css file </span></h2> <p><i>style.css</i> is the one and only <b>required</b> file in a child theme. It provides the information header by which WordPress recognizes the child theme, and <b>it replaces the style.css of the parent</b>. </p><p>As with any WordPress theme, the information header must be at the top of the file, the only difference being that in a child theme the <code>Template:</code> line is required, so that WordPress knows which theme is the parent of the child theme. </p><p>Here is an example information header of a child theme’s <i>style.css</i>: </p> <pre> /* Theme Name: Twenty Twelve Child Theme URI: http://example.com/ Description: Child theme for the Twenty Twelve theme Author: Your name here Author URI: http://example.com/about/ Template: twentytwelve Version: 0.1.0 */ </pre> <p>A quick explanation of each line: </p> <ul><li> <code>Theme Name</code>. (<b>required</b>) Child theme <b>name</b>. </li><li> <code>Theme URI</code>. (optional) Child theme webpage. </li><li> <code>Description</code>. (optional) What this theme is. E.g.: My first child theme. Hurrah! </li><li> <code>Author</code>. (optional) Author name. </li><li> <code>Author URI</code>. (optional) Author webpage. </li><li> <code>Template</code>. (<b>required</b>) <b>directory</b> name of parent theme, case-sensitive. <ul><li> <b>NOTE</b>. You have to switch to a different theme and back to the child theme when you modify this line. </li></ul> </li><li> <code>Version</code>. (optional) Child theme version. E.g.: 0.1, 1.0, etc. </li></ul> <p>The part after the closing <code>*/</code> of the header works as a regular stylesheet file. It is where you put the styling rules you want WordPress to apply. </p><p>Note that a child theme’s stylesheet replaces the stylesheet of the parent completely. (The parent’s stylesheet is not loaded at all by WordPress.) So, if you simply want to modify a few small things in the styling and layout of the parent —rather than make something new from scratch— you have to import explicitly the stylesheet of the parent, and then add your modifications. The following example shows how to use the <code>@import</code> rule to do that. </p> <a name="Example_of_a_basic_Child_Theme" id="Example_of_a_basic_Child_Theme"></a><h2> <span class="mw-headline"> Example of a basic Child Theme </span></h2> <p>Our parent theme for this example is Twenty Twelve. We like most everything about it, except the color of the site’s title, which we want to change from black to green. Using a child theme, all it takes is three simple steps: </p> <ol><li> Make a new directory in <i>wp-content/themes</i>, and name it <i>twentytwelve-child</i> (or anything you like). </li><li> Save the code below in a file named <i>style.css</i>, and drop this file in the new directory. </li><li> Go to Dashboard › Themes and activate your new theme, the Twenty Twelve Child. </li></ol> <pre> /* Theme Name: Twentytwelve Child Description: Child theme for the twentytwelve theme Author: Your name here Template: twentytwelve */ @import url("../twentytwelve/style.css"); #site-title a { color: #009900; } </pre> <p>Here is what the above code does, step by step: </p> <ol><li> <code>/*</code> opens the child theme’s information header. </li><li> <code>Theme Name:</code> declares the child theme’s name. </li><li> <code>Description:</code> describes what the theme is. (Optional; can be omitted.) </li><li> <code>Author:</code> declares the author’s name. (Optional; can be omitted.) </li><li> <code>Template:</code> declares the child theme’s parent; i.e., the directory of the theme whose templates the child uses. </li><li> <code>*/</code> closes the child’s information header. </li><li> The <code>@import</code> rule brings in the parent’s stylesheet. </li><li> The <code>#site-title a</code> rule defines a colour (green) for the site’s name, overriding the corresponding rule of the parent. </li></ol> <a name="Note_on_the_.40import_rule" id="Note_on_the_.40import_rule"></a><h3> <span class="mw-headline"> Note on the <code>@import</code> rule </span></h3> <p>There must be no other CSS rules above the <code>@import</code> rule. If you put other rules above it, it will be invalidated and the stylesheet of the parent will not be imported. </p> <a name="Note_on_RTL_support" id="Note_on_RTL_support"></a><h3> <span class="mw-headline"> Note on RTL support </span></h3> <p>To support RTL languages, add <b>rtl.css</b> file to your child theme, containing: </p> <pre> /* Theme Name: Twenty Twelve Child Template: twentytwelve */ @import url("../twentytwelve/rtl.css"); </pre> <p>WordPress auto-loading rtl.css file only if <a href="/web/20130116014908/http://codex.wordpress.org/Function_Reference/is_rtl" title="Function Reference/is rtl">is_rtl()</a>. Even if the parent theme has no rtl.css file, it's recommended to add the rtl.css file to your child theme. </p> <a name="Note_on_Twenty_Eleven_and_using_the_Dark_Theme_or_Link_Color_option" id="Note_on_Twenty_Eleven_and_using_the_Dark_Theme_or_Link_Color_option"></a><h3> <span class="mw-headline"> Note on Twenty Eleven and using the Dark Theme or Link Color option </span></h3> <p>The twenty eleven dark theme stylesheet and the link color option are loaded after the child theme stylesheet, therefore some color changes might not show as they are loaded earlier. </p><p>There is no need to change the dark stylesheet or code in the twenty eleven parent directory, as we can correct this by giving our color change priority, we do this by adding !important to the style. </p><p>Here we will change the Site Title color, and the negate the Site Title hover color, if we did not like the title color or it being shown as a link. </p> <pre> /* Theme Name: Twenty Eleven Child Description: Child theme for the Twenty Eleven theme Author: Your name here Template: twentyeleven */ @import url("../twentyeleven/style.css"); /* This will override site title color even on the dark theme */ #site-title a { color: #009900 !important; } /* This will override the changed link color */ #site-title a:focus, #site-title a:hover, #site-title a:active { color: #009900 !important; } </pre> <p>The selected style colors with the !important will now not be changed by the dark stylesheet or the link color option. </p> <a name="Using_functions.php" id="Using_functions.php"></a><h2> <span class="mw-headline"> Using functions.php </span></h2> <p>Unlike <i>style.css</i>, the <i>functions.php</i> of a child theme does not override its counterpart from the parent. Instead, it is <b>loaded in addition to the parent’s functions.php</b>. (Specifically, it is loaded right <i>before</i> the parent’s file.) </p><p>In that way, the <i>functions.php</i> of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its <i>functions.php</i> file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a <i>functions.php</i> file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme. </p><p>The structure of <i>functions.php</i> is simple: An opening PHP tag at the top, a closing PHP tag at the bottom, and, between them, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary <i>functions.php</i> file that does one simple thing: Adds a favicon link to the <code>head</code> element of HTML pages. </p> <pre> function favicon_link() { echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n"; } add_action( 'wp_head', 'favicon_link' ); </pre> <p>TIP FOR THEME DEVELOPERS. The fact that a child theme’s <i>functions.php</i> is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. E.g.: </p> <pre> if ( ! function_exists( 'theme_special_nav' ) ) { function theme_special_nav() { // Do something. } } </pre> <p>In that way, a child theme can replace a PHP function of the parent by simply declaring it again. </p> <a name="Referencing_.2F_Including_Files_in_Your_Child_Theme" id="Referencing_.2F_Including_Files_in_Your_Child_Theme"></a><h4> <span class="mw-headline"> Referencing / Including Files in Your Child Theme </span></h4> <p>When you need to include files that reside within your child theme's directory structure, you will use <a href="/web/20130116014908/http://codex.wordpress.org/Function_Reference/get_stylesheet_directory" title="Function Reference/get stylesheet directory">get_stylesheet_directory()</a>. Because the parent template's style.css is replaced by your child theme's style.css, and your style.css resides in the root of your child theme's subdirectory, get_stylesheet_directory() points to your child theme's directory (not the parent theme's directory). </p><p>Here's an example, using <code>require_once</code>, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme's directory structure. </p> <pre> require_once( get_stylesheet_directory(). '/my_included_file.php' ); </pre> <a name="Using_Post_Formats" id="Using_Post_Formats"></a><h4> <span class="mw-headline"> Using Post Formats </span></h4> <p>A child theme inherits <a href="/web/20130116014908/http://codex.wordpress.org/Post_Formats" title="Post Formats">post formats</a> as defined by the parent theme. But, when creating child themes, be aware that using <i>add_theme_support('post-formats')</i> will <b>override</b> the formats as defined by the parent theme, not add to it. </p> <a name="Template_files" id="Template_files"></a><h2> <span class="mw-headline"> Template files </span></h2> <p><a href="/web/20130116014908/http://codex.wordpress.org/Templates" title="Templates">Templates</a> in a child theme behave just like <i>style.css</i>, in that <b>they override their namesakes</b> from the parent. A child theme can override <b>any</b> parental template by simply using a file with the same name. (NOTE. <i>index.php</i> can be overriden only in WordPress 3.0 and newer.) </p><p>Again, this WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated. </p><p>Here are a few example cases for using template files in a child theme: </p> <ul><li> To add a template that is not offered by the parent theme (e.g., a template for a sitemap page, or for single-column pages, that will be available to select in the Page Edit screen). </li><li> To add a more specific template (see <a href="/web/20130116014908/http://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a>) than what the parent uses (e.g., a <i>tag.php</i> template to use for tag archives instead of the generic <i>archive.php</i> of the parent). </li><li> To replace a template of the parent (e.g., make your own <i>home.php</i> to override the parent’s <i>home.php</i>). </li></ul> <a name="Other_files" id="Other_files"></a><h2> <span class="mw-headline"> Other files </span></h2> <p>In addition to <i>style.css</i>, <i>functions.php</i>, and to template files like <i>index.php</i>, and <i>home.php</i>, a child theme can use any type of file full-fledged themes use, as long as that file is properly linked. For example, a child theme can use icons and images that are linked from its stylesheet, JavaScript files linked from the top or bottom of pages, or extra PHP files called from its <a href="/web/20130116014908/http://codex.wordpress.org/Templates" title="Templates">templates</a> or from its <i>functions.php</i> file. </p><p>In other words if you have a file in your parent theme parent-theme-dir/includes/filename.php and this file is not included by any of your template files or functions.php file then you can not override this file by your child theme. </p> <a name="Internationalization" id="Internationalization"></a><h2> <span class="mw-headline"> Internationalization </span></h2> <p>Child themes, much like other extensions, may be prepared to be translated into other languages by using gettext functions. For an overview, please see <a href="/web/20130116014908/http://codex.wordpress.org/I18n_for_WordPress_Developers" title="I18n for WordPress Developers">I18n for WordPress Developers</a>. This section will address special considerations regarding internationalization of child themes. </p> <ul><li> Start by adding a languages directory. Something like <code>my-theme/languages/</code> works rather well. </li><li> Next, a textdomain needs to be loaded. load_child_theme_textdomain() can be used in functions.php during the after_setup_theme action. The following should illustrate: </li></ul> <pre> <?php /** * Setup My Child Theme's textdomain. * * Declare textdomain for this child theme. * Translations can be filed in the /languages/ directory. */ function my_child_theme_setup() { load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' ); } add_action( 'after_setup_theme', 'my_child_theme_setup' ); ?> </pre> <p>At this point, hardcoded strings in the child theme are ready to be prepared to be translated. Here is a simple example of echoing the phrase "Code is Poetry": </p> <pre> <?php _e( 'Code is Poetry', 'my-child-theme' ); ?> </pre> <p>The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme. In the event that a template file from the parent has been included, the textdomain should be changed from the one defined in the parent to the one defined by the child. </p> <a name="Resources" id="Resources"></a><h2> <span class="mw-headline"> Resources </span></h2> <ul><li> <a href="/web/20130116014908/http://codex.wordpress.org/Theme_Development" title="Theme Development">Theme Development</a> </li><li> <a href="https://web.archive.org/web/20130116014908/http://themeshaper.com/modify-wordpress-themes/" class="external text" title="http://themeshaper.com/modify-wordpress-themes/">How to Modify WordPress Themes the Smart Way</a> - four-part series on child themes </li><li> <a href="https://web.archive.org/web/20130116014908/http://op111.net/53" class="external text" title="http://op111.net/53">How to make a child theme for WordPress: A pictorial introduction for beginners</a> - illustrated introduction to child themes </li><li> <a href="https://web.archive.org/web/20130116014908/http://aaron.jorb.in/blog/2010/04/05/introducing-thirty-ten/" class="external text" title="http://aaron.jorb.in/blog/2010/04/05/introducing-thirty-ten/">Introducing Thirty Ten</a> - guide to creating a Twenty Ten Child Theme </li><li> <a href="https://web.archive.org/web/20130116014908/http://theme.fm/2011/07/how-to-create-a-child-theme-based-on-twenty-eleven-791/" class="external text" title="http://theme.fm/2011/07/how-to-create-a-child-theme-based-on-twenty-eleven-791/">How to: Create a Child Theme Based on Twenty Eleven</a> </li><li> <a href="https://web.archive.org/web/20130116014908/http://wpmu.org/customizing-your-wordpress-theme-using-firebug/" class="external text" title="http://wpmu.org/customizing-your-wordpress-theme-using-firebug/">Customizing Your WordPress Theme Using Firebug</a> </li></ul>  <div class="printfooter"> Retrieved from "<a href="https://web.archive.org/web/20130116014908/http://codex.wordpress.org/Child_Themes">http://codex.wordpress.org/Child_Themes</a>"</div> <div id="catlinks"><div id="catlinks" class="catlinks"><div id="mw-normal-catlinks"><a href="/web/20130116014908/http://codex.wordpress.org/Special:Categories" title="Special:Categories">Categories</a>: <span dir="ltr"><a href="/web/20130116014908/http://codex.wordpress.org/Category:Design_and_Layout" title="Category:Design and Layout">Design and Layout</a></span> | <span dir="ltr"><a href="/web/20130116014908/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/20130116014908/http://codex.wordpress.org/Main_Page">Home Page</a></li> <li><a href="/web/20130116014908/http://codex.wordpress.org/WordPress_Lessons">WordPress Lessons</a></li> <li><a href="/web/20130116014908/http://codex.wordpress.org/Getting_Started_with_WordPress">Getting Started</a></li> <li><a href="/web/20130116014908/http://codex.wordpress.org/Working_with_WordPress">Working with WordPress</a></li> <li><a href="/web/20130116014908/http://codex.wordpress.org/Blog_Design_and_Layout">Design and Layout</a></li> <li><a href="/web/20130116014908/http://codex.wordpress.org/Advanced_Topics">Advanced Topics</a></li> <li><a href="/web/20130116014908/http://codex.wordpress.org/Troubleshooting">Troubleshooting</a></li> <li><a href="/web/20130116014908/http://codex.wordpress.org/Developer_Documentation">Developer Docs</a></li> <li><a href="/web/20130116014908/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/20130116014908/http://codex.wordpress.org/Codex:Community_Portal">Community portal</a></li> <li id="n-currentevents"><a href="/web/20130116014908/http://codex.wordpress.org/Current_events">Current events</a></li> <li id="n-recentchanges"><a href="/web/20130116014908/http://codex.wordpress.org/Special:RecentChanges">Recent changes</a></li> <li id="n-randompage"><a href="/web/20130116014908/http://codex.wordpress.org/Special:Random">Random page</a></li> <li id="n-help"><a href="/web/20130116014908/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/20130116014908/http://wordpress.org/about/privacy/">Privacy</a> | <a href="https://web.archive.org/web/20130116014908/http://wordpress.org/about/license/">License / GPLv2</a>     See also: <a href="https://web.archive.org/web/20130116014908/http://wordpress.com/?ref=wporg-footer" title="Hassle-free WP hosting">Hosted WordPress.com</a> | <a href="https://web.archive.org/web/20130116014908/http://wordpress.tv/" title="Videos, tutorials, WordCamps">WordPress.TV Videos</a> | <a href="https://web.archive.org/web/20130116014908/http://central.wordcamp.org/" title="Find a WordPress event near your home">WordCamp Events</a> | <a href="https://web.archive.org/web/20130116014908/http://buddypress.org/" title="A set of plugins to transform your WordPress into a social network">BuddyPress Social Layer</a> | <a href="https://web.archive.org/web/20130116014908/http://bbpress.org/" title="Fast, slick forums built on WordPress">bbPress Forums</a> | <a href="https://web.archive.org/web/20130116014908/http://jobs.wordpress.net/" title="Find or post WordPress jobs">WP Jobs</a> | <a href="https://web.archive.org/web/20130116014908/http://ma.tt/" title="Co-founder of WordPress, an example of what WordPress can do">Matt</a> </p> <br/> <iframe src="https://web.archive.org/web/20130116014908if_/http://www.facebook.com/plugins/like.php?app_id=121415197926116&href=http%3A%2F%2Fwww.facebook.com%2Fwordpress&send=false&layout=button_count&width=150&show_faces=false&action=like&colorscheme=light&font=lucida+grande&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowtransparency="true"></iframe>  <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://web.archive.org/web/20130116014908if_/http://platform.twitter.com/widgets/follow_button.html?screen_name=WordPress&show_count=false" style="width:150px; height:20px;"></iframe> <h6>Code is Poetry</h6> </div> </div> <script type="text/javascript">_qoptions={qacct:"p-18-mFEk4J448M"};</script> <script type="text/javascript" src="https://web.archive.org/web/20130116014908js_/http://edge.quantserve.com/quant.js"></script> <noscript><img src="https://web.archive.org/web/20130116014908im_/http://pixel.quantserve.com/pixel/p-18-mFEk4J448M.gif" style="display: none;" border="0" height="1" width="1" alt=""/></noscript>  <script type="text/javascript" src="https://web.archive.org/web/20130116014908js_/http://s.gravatar.com/js/gprofiles.js"></script> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://web.archive.org/web/20130116014908/https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <script type="text/javascript"> (function($){ $(document).ready(function() { $('#footer a').click(function() { if (this.href.indexOf('wordpress.org') == -1 && this.href.indexOf('http') == 0) { recordOutboundLink(this, 'Outbound Links', this.href); return false; } }); }); })(jQuery); </script> </body>  </html> </body>  </html>