CINXE.COM

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <meta charset="utf-8"/>  <meta name="google-site-verification" content="7VWES_-rcHBcmaQis9mSYamPfNwE03f4vyTj4pfuAw0"/> <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("https://codex.wordpress.org/Child_Themes","20170312040610","https://web.archive.org/","web","/_static/", "1489291570"); </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 name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="noodp"> <meta name="generator" content="MediaWiki 1.23.11"/> <link rel="shortcut icon" href="/web/20170312040610im_/https://codex.wordpress.org/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/web/20170312040610/https://codex.wordpress.org/opensearch_desc.php" title="Codex (en)"/> <link rel="EditURI" type="application/rsd+xml" href="http://codex.wordpress.org/api.php?action=rsd"/> <link rel="alternate" type="application/atom+xml" title="Codex Atom feed" href="/web/20170312040610/https://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=atom"/><title>Child Themes « WordPress Codex</title> <link rel="stylesheet" href="//web.archive.org/web/20170312040610cs_/https://s.w.org/style/codex-wp4.css?2"/> <meta name="referrer" content="always"> <link href="//web.archive.org/web/20170312040610cs_/https://s.w.org/wp-includes/css/dashicons.css?20160504" rel="stylesheet" type="text/css"/> <link href="//web.archive.org/web/20170312040610cs_/https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="//web.archive.org/web/20170312040610cs_/https://s.w.org/style/wp4.css?57"/> <link media="only screen and (max-device-width: 480px)" href="//web.archive.org/web/20170312040610cs_/https://s.w.org/style/iphone.css?1" type="text/css" rel="stylesheet"/> <link rel="shortcut icon" href="//web.archive.org/web/20170312040610im_/https://s.w.org/favicon.ico?2" type="image/x-icon"/> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-52447-1']); _gaq.push(['_setDomainName', 'wordpress.org']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://web.archive.org/web/20170312040610/https://ssl' : 'https://web.archive.org/web/20170312040610/http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); function recordOutboundLink(link, category, action) { _gaq.push(['_trackEvent', category, action]) setTimeout('document.location = "' + link.href + '"', 100); } </script>  <script type="text/javascript" src="//web.archive.org/web/20170312040610js_/https://s.w.org/wp-includes/js/jquery/jquery.js?v=1.11.1"></script> <script>document.cookie='devicePixelRatio='+((window.devicePixelRatio === undefined) ? 1 : window.devicePixelRatio)+'; path=/';</script>  <script type="text/javascript">wgBreakFrames=false;wgContentLanguage='en';</script> <script type="text/javascript" src="/web/20170312040610js_/https://codex.wordpress.org/skins/common/wikibits.js"></script> <script type="text/javascript"> var toggleMenu = function(){ var m = document.getElementById('wporg-header-menu'), c = m.className; m.className = c.match( ' active' ) ? c.replace( ' active', '' ) : c + ' active'; } </script> </head> <body id="wordpress-org"> <div id="wporg-header"> <div class="wrapper"> <a id="mobile-menu-button" class="" href="#" onclick="toggleMenu();"></a> <h1><a href="//web.archive.org/web/20170312040610/https://wordpress.org/">WordPress.org</a></h1> <div id="head-search"> <form action="//web.archive.org/web/20170312040610/https://wordpress.org/search/do-search.php" method="get"> <label for="global-search" class="screen-reader-text">Search WordPress.org for:</label> <input id="global-search" class="text" name="search" type="text" value="" maxlength="150" placeholder="Search WordPress.org"/> <input type="submit" class="button" value=""/> </form> </div> <div style="clear:both"></div> <ul id="wporg-header-menu"> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/showcase/" title="See some of the sites built on WordPress.">Showcase</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/themes/" title="Find just the right look for your website.">Themes</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/plugins/" title="Plugins can extend WordPress to do almost anything you can imagine.">Plugins</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/mobile/" title="Take your website on the go!">Mobile</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/support/" title="Forums, documentation, help." class="current">Support</a><ul class="nav-submenu"><li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/support/" title="Support and discussion forums.">Forums</a></li><li><a href="//web.archive.org/web/20170312040610/https://codex.wordpress.org/Main_Page" title="Documentation, tutorials, best practices.">Documentation</a></li></ul><div class="uparrow"></div></li> <li><a href="//web.archive.org/web/20170312040610/https://make.wordpress.org/" title="Contribute your knowledge.">Get Involved</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/about/" title="About the WordPress Organization, and where we're going.">About</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/news/" title="Come here for the latest scoop.">Blog</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/hosting/" title="Find a home for your blog.">Hosting</a></li> <li id="download" class="button download-button"><a href="//web.archive.org/web/20170312040610/https://wordpress.org/download/" title="Get it. Got it? Good.">Download WordPress</a></li> </ul> <div style="clear:both"></div> </div> </div> <div id="headline"> <div class="wrapper"> <h2><a href="/web/20170312040610/https://codex.wordpress.org/">Codex</a></h2> <div class="portlet" id="p-personal"> <p class="login">Codex tools: <a href="/web/20170312040610/https://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"> <div id="siteNotice"><div id="localNotice" lang="en" dir="ltr"><div style="clear:both; background-color:#FCECAD; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto;"><a href="/web/20170312040610/https://codex.wordpress.org/File:Ambox_notice.png" class="image"><img alt="Attention" src="/web/20170312040610im_/https://codex.wordpress.org/images/c/c8/Ambox_notice.png" width="40" height="40" style="vertical-align: middle"/></a> Interested in functions, hooks, classes, or methods? Check out the new <a class="external text" href="https://web.archive.org/web/20170312040610/http://developer.wordpress.org/reference">WordPress Code Reference</a>!</div> </div></div> <h2 class="pagetitle">Child Themes</h2>  <div id="mw-content-text" lang="en" dir="ltr" class="mw-content-ltr"><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/20170312040610/https://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>:</span> <a href="/web/20170312040610/https://codex.wordpress.org/bn:Child_Themes" title="bn:Child Themes">বাংলা</a> • <strong class="selflink">English</strong> • <a href="/web/20170312040610/https://codex.wordpress.org/it:Temi_Child" title="it:Temi Child">Italiano</a> • <a class="external text" href="https://web.archive.org/web/20170312040610/http://wpdocs.osdn.jp/Child_Themes">日本語</a> • <a href="/web/20170312040610/https://codex.wordpress.org/ko:Child_Themes" title="ko:Child Themes">한국어</a> • <a href="/web/20170312040610/https://codex.wordpress.org/es:Temas_hijos" title="es:Temas hijos">Español</a> • <a href="/web/20170312040610/https://codex.wordpress.org/nl:Child_Thema%27s" title="nl:Child Thema's" class="mw-redirect">Nederlands</a> • <a href="/web/20170312040610/https://codex.wordpress.org/fr:Th%C3%A8mes_Enfant" title="fr:Thèmes Enfant">Français</a> • <a href="/web/20170312040610/https://codex.wordpress.org/pt-br:Temas_Filhos" title="pt-br:Temas Filhos">Português do Brasil</a> • <a href="/web/20170312040610/https://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/20170312040610/https://codex.wordpress.org/sk:Odvoden%C3%A9_t%C3%A9my" title="sk:Odvodené témy">Slovenčina</a> • <a class="external text" href="https://web.archive.org/web/20170312040610/http://codex.wordthai.com/Child+Themes">ไทย</a> • <a href="/web/20170312040610/https://codex.wordpress.org/zh-cn:%E5%AD%90%E4%B8%BB%E9%A2%98" title="zh-cn:子主题">中文(简体)</a> • <a href="/web/20170312040610/https://codex.wordpress.org/index.php?title=zh-tw:%E5%AD%90%E4%B8%BB%E9%A1%8C&action=edit&redlink=1" class="new" title="zh-tw:子主題 (page does not exist)">中文(繁體)</a> • <a href="/web/20170312040610/https://codex.wordpress.org/mk:%D0%94%D0%B5%D1%82%D0%B5_%D1%82%D0%B5%D0%BC%D0%B8" title="mk:Дете теми">Македонски</a> • <small>(<a href="/web/20170312040610/https://codex.wordpress.org/Multilingual_Codex#Language_Cross_Reference" title="Multilingual Codex" class="mw-redirect">Add your language</a>)</small> </p> <p>A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. </p> <div id="toc" class="toc"><div id="toctitle"><h2>Contents</h2></div> <ul> <li class="toclevel-1 tocsection-1"><a href="#Why_use_a_Child_Theme.3F"><span class="tocnumber">1</span> <span class="toctext">Why use a Child Theme?</span></a></li> <li class="toclevel-1 tocsection-2"><a href="#How_to_Create_a_Child_Theme"><span class="tocnumber">2</span> <span class="toctext">How to Create a Child Theme</span></a> <ul> <li class="toclevel-2 tocsection-3"><a href="#Creating_a_Child_Theme_from_an_Unmodified_Parent_Theme"><span class="tocnumber">2.1</span> <span class="toctext">Creating a Child Theme from an Unmodified Parent Theme</span></a></li> <li class="toclevel-2 tocsection-4"><a href="#Creating_a_Child_Theme_from_a_Modified_Existing_Theme"><span class="tocnumber">2.2</span> <span class="toctext">Creating a Child Theme from a Modified Existing Theme</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-5"><a href="#Template_Files"><span class="tocnumber">3</span> <span class="toctext">Template Files</span></a> <ul> <li class="toclevel-2 tocsection-6"><a href="#Using_functions.php"><span class="tocnumber">3.1</span> <span class="toctext">Using functions.php</span></a></li> <li class="toclevel-2 tocsection-7"><a href="#Referencing_.2F_Including_Files_in_Your_Child_Theme"><span class="tocnumber">3.2</span> <span class="toctext">Referencing / Including Files in Your Child Theme</span></a></li> </ul> </li> <li class="toclevel-1 tocsection-8"><a href="#Other_Useful_Information"><span class="tocnumber">4</span> <span class="toctext">Other Useful Information</span></a> <ul> <li class="toclevel-2 tocsection-9"><a href="#Using_Post_Formats"><span class="tocnumber">4.1</span> <span class="toctext">Using Post Formats</span></a></li> <li class="toclevel-2 tocsection-10"><a href="#RTL_support"><span class="tocnumber">4.2</span> <span class="toctext">RTL support</span></a></li> <li class="toclevel-2 tocsection-11"><a href="#Internationalization"><span class="tocnumber">4.3</span> <span class="toctext">Internationalization</span></a> <ul> <li class="toclevel-3 tocsection-12"><a href="#Example:_textdomain"><span class="tocnumber">4.3.1</span> <span class="toctext">Example: textdomain</span></a></li> <li class="toclevel-3 tocsection-13"><a href="#Example:_gettext_functions"><span class="tocnumber">4.3.2</span> <span class="toctext">Example: gettext functions</span></a></li> </ul> </li> </ul> </li> <li class="toclevel-1 tocsection-14"><a href="#Resources"><span class="tocnumber">5</span> <span class="toctext">Resources</span></a></li> </ul> </div> <h2><span class="mw-headline" id="Why_use_a_Child_Theme.3F">Why use a Child Theme?</span></h2> <p>There are a few reasons why you would want to use a child theme: </p> <ul> <li> If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved. </li> <li> Using a child theme can speed up development time. </li> <li> Using a child theme is a great way to learn about WordPress theme development. </li> </ul> <h2><span class="mw-headline" id="How_to_Create_a_Child_Theme">How to Create a Child Theme</span></h2> <h3><span class="mw-headline" id="Creating_a_Child_Theme_from_an_Unmodified_Parent_Theme">Creating a Child Theme from an Unmodified Parent Theme</span></h3> <div class="floatright"><a href="/web/20170312040610/https://codex.wordpress.org/File:child-theme-items.jpeg" class="image" title="Child Theme directory structure"><img alt="Child Theme directory structure" src="/web/20170312040610im_/https://codex.wordpress.org/images/3/3d/child-theme-items.jpeg" width="200" height="192"/></a></div> <p>A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create: </p> <ul> <li> The child theme directory </li> <li> style.css </li> <li> functions.php </li> </ul> <p>The first step in creating a child theme is to create the child theme directory, which will be placed in <tt>wp-content/themes</tt>. It is recommended (though not required, especially if you're creating a theme for public use) that the name of your child theme directory is appended with '-child'. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme 'twentyfifteen-child', indicating that the parent theme is the Twenty Fifteen theme. </p><p>The next step is to create your child theme's stylesheet (style.css). The stylesheet must begin with the following (the <a href="/web/20170312040610/https://codex.wordpress.org/Theme_Development#Theme_Stylesheet" title="Theme Development">stylesheet header</a>): </p> <pre> /* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */ </pre> <p>A couple things to note: </p> <ul> <li> You will need to replace the example text with the details relevant to your theme. </li> <li> The <tt>Template</tt> line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the <tt>Template</tt> will be <tt>twentyfifteen</tt>. You may be working with a different theme, so adjust accordingly. </li> <li> The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below). </li> </ul> <p>The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a <tt><a href="/web/20170312040610/https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts" title="Plugin API/Action Reference/wp enqueue scripts">wp_enqueue_scripts action</a></tt> and use <tt><a href="/web/20170312040610/https://codex.wordpress.org/Function_Reference/wp_enqueue_style" title="Function Reference/wp enqueue style">wp_enqueue_style()</a></tt> in your child theme's functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme's functions.php will be an opening PHP tag (<tt><?php</tt>), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies. </p> <pre> <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?> </pre> <p>If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. (See <a class="external text" href="https://web.archive.org/web/20170312040610/http://wordpress.stackexchange.com/questions/163301/versioning-import-of-parent-themes-style-css">a more detailed discussion on Stack Exchange</a>.) The complete (recommended) example becomes: </p> <pre> <?php function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?> </pre> <p>where <code>parent-style</code> is the same <code>$handle</code> used in the parent theme when it registers its stylesheet. For example, if the parent theme is twentyfifteen, by looking in its functions.php for its <code>wp_enqueue_style()</code> call, you can see the tag it uses there is <code>'twentyfifteen-style'</code>. In your child code, replace the instance of <code>'parent-style'</code> with <code>'twentyfifteen-style'</code>, like so: </p> <pre> $parent_style = 'twentyfifteen-style'; </pre> <p>Failure to use the proper tag will result in a CSS file needlessly being loaded twice. This will usually not affect the site appearance, but it's inefficient and extends your page's loading time. </p><p>Your child theme is now ready for activation. Log in to your site's administration panel, and go to <a href="/web/20170312040610/https://codex.wordpress.org/Administration_Panels" title="Administration Panels" class="mw-redirect">Administration Panels</a> > <a href="/web/20170312040610/https://codex.wordpress.org/Administration_Panels#Appearance" title="Administration Panels" class="mw-redirect">Appearance</a> > <a href="/web/20170312040610/https://codex.wordpress.org/Administration_Panels#Theme_Options" title="Administration Panels" class="mw-redirect">Themes</a>. You should see your child theme listed and ready for activation. (If your WordPress installation is multi-site enabled, then you may need to switch to your network administration panel to enable the theme (within the <a href="/web/20170312040610/https://codex.wordpress.org/Network_Admin_Themes_Screen" title="Network Admin Themes Screen">Network Admin Themes Screen</a> tab). You can then switch back to your site-specific WordPress administration panel to activate your child theme.) </p><p><b>Note:</b> You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme. </p> <h3><span class="mw-headline" id="Creating_a_Child_Theme_from_a_Modified_Existing_Theme">Creating a Child Theme from a Modified Existing Theme</span></h3> <p>It's much easier if you create a child theme from the start. However, if you have already edited the theme files directly without creating a child theme, it's important to get all your modifications into a child theme so that updating the parent does not wipe out your changes. These directions are intended to guide you in doing just that. Read through all of the steps below until you understand the process before starting. </p> <ol> <li> Make a backup of your customized parent theme using FTP, SSH or your Web Hosts file manager. You'll need this if things don't work out and you need to revert. </li> <li> Create a child theme from the Parent/Child Tab, but do not activate it yet. Make sure you check the "Copy Parent Theme Menus, Widgets and other Options" box. (It seems that the author is using a plugin called "Child Theme Configurator". You have to install it first to follow along.) </li> <li> Go to the Files tab and select any parent templates you have changed from the list of "Parent Templates" and click "Copy Selected to Child Theme." WordPress will automatically pull the templates from the new directory when it is activated (but don't activate it just yet). </li> <li> Now the tricky part -- moving your modified styles to the child theme. The best way to do this is to download your modified "style.css" file from the parent and run a DIFF against the original parent "style.css" file and move any selector blocks over to a separate file. You can use Notepad++, TextWrangler or any advanced text editor to find differences between two files. <br/>If you do not have an advanced text editor, open the modified stylesheet and manually copy/paste any selector blocks you have changed to a separate text file. </li> <li> Once you have all of your changed selectors in a file, copy the entire thing into the "Raw CSS" textarea box at the bottom of the Query/Selector tab. Click the "Save" button to the left of the textarea box (not the one at the top). </li> <li> Test the new child theme using the Live Preview. Go to Appearance > Themes and click "Live Preview" on the child themes icon. It should display all of your modifications correctly. If not, repeat step 3-5 until everything is working. </li> <li> Re-install the parent theme to a fresh, clean version and repeat step 6. If you notice anything wrong, you may need to investigate where you missed copying something. If necessary, revert to the backup parent theme and start over. </li> <li> Once everything looks good, go to Appearance > Themes and activate your new child theme. You can then make changes to the child theme without touching the parent. </li> </ol> <h2><span class="mw-headline" id="Template_Files">Template Files</span></h2> <p>If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php. </p><p>You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive. See the <a href="/web/20170312040610/https://codex.wordpress.org/Template_Hierarchy" title="Template Hierarchy">Template Hierarchy</a> for more information about how WordPress decides what template to use. </p> <h3><span class="mw-headline" id="Using_functions.php">Using functions.php</span></h3> <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, and below it, 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> <?php // Opening PHP tag - nothing should be before this, not even whitespace // Custom Function to Include function my_favicon_link() { echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n"; } add_action( 'wp_head', 'my_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 beforehand. </p> <h3><span class="mw-headline" id="Referencing_.2F_Including_Files_in_Your_Child_Theme">Referencing / Including Files in Your Child Theme</span></h3> <p>When you need to include files that reside within your child theme's directory structure, you will use <a href="/web/20170312040610/https://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> <h2><span class="mw-headline" id="Other_Useful_Information">Other Useful Information</span></h2> <h3><span class="mw-headline" id="Using_Post_Formats">Using Post Formats</span></h3> <p>A child theme inherits <a href="/web/20170312040610/https://codex.wordpress.org/Post_Formats" title="Post Formats">post formats</a> as defined by the parent theme. When creating child themes, be aware that using <i>add_theme_support('post-formats')</i> will <b>override</b> the formats defined by the parent theme, <b>not add</b> to it. </p> <h3><span class="mw-headline" id="RTL_support">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 Fourteen Child Template: twentyfourteen */ </pre> <p><b>rtl.css</b> is only loaded by WordPress if <a href="/web/20170312040610/https://codex.wordpress.org/Function_Reference/is_rtl" title="Function Reference/is rtl">is_rtl()</a> returns true. </p><p>It's recommended to add the rtl.css file to your child theme even if the parent theme has no rtl.css file. </p> <h3><span class="mw-headline" id="Internationalization">Internationalization</span></h3> <p>Child themes, much like other extensions, may be translated into other languages by using gettext functions. For an overview, please see <a href="/web/20170312040610/https://codex.wordpress.org/Translating_WordPress" title="Translating WordPress">Translating WordPress</a> & <a href="/web/20170312040610/https://codex.wordpress.org/I18n_for_WordPress_Developers" title="I18n for WordPress Developers">I18n for WordPress Developers</a>. </p><p>To internationalize a child theme follow these steps: </p> <ul> <li> Add a languages directory. <ul> <li> Something like <code>my-theme/languages/</code>. </li> </ul> </li> <li> Add language files. <ul> <li> Your filenames have to be <code>he_IL.po</code> & <code>he_IL.mo</code> (depending on your language), unlike plugin files which are <code>domain-he_IL.xx</code>. </li> </ul> </li> <li> Load a textdomain. <ul> <li> Use load_child_theme_textdomain() in functions.php during the after_setup_theme action. </li> <li> The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme. </li> </ul> </li> <li> Use GetText functions to add i18n support for your strings. </li> </ul> <h4><span class="mw-headline" id="Example:_textdomain">Example: textdomain</span></h4> <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> <h4><span class="mw-headline" id="Example:_gettext_functions">Example: gettext functions</span></h4> <pre> <?php esc_html_e( 'Code is Poetry', 'my-child-theme' ); ?> </pre> <p><br/> To sum up, all strings that use "my-child-theme" textdomain will be translatable. The translation files must reside in "/languages/" directory. </p> <h2><span class="mw-headline" id="Resources">Resources</span></h2> <p>Be aware that some of these resources recommend using <tt>@import</tt> from your child theme's stylesheet as the method of importing the parent theme stylesheet. Please use the <tt><a href="/web/20170312040610/https://codex.wordpress.org/Function_Reference/wp_enqueue_script" title="Function Reference/wp enqueue script">wp_enqueue_script()</a></tt> method described above. </p> <ul> <li> <a href="/web/20170312040610/https://codex.wordpress.org/Theme_Development" title="Theme Development">Theme Development</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://themeshaper.com/modify-wordpress-themes/">How to Modify WordPress Themes the Smart Way (four part series)</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://wpsites.net/wordpress-themes/how-to-make-your-own-child-theme-for-wordpress-beginners-guide/">How To Make Your Own Child Theme - Includes Screencast</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://www.hongkiat.com/blog/wordpress-child-themes-dev/">Guide to WordPress Child Theme Development</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://theme.fm/how-to-create-a-child-theme-based-on-twenty-eleven/">How to: Create a Child Theme based on Twenty Eleven</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://wpmu.org/customizing-your-wordpress-theme-using-firebug/">Customizing your WordPress theme using Firebug</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/">Tutorial: Child Themes basics and creating Child Themes in WordPress</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://wp.tutsplus.com/tutorials/creative-coding/how-to-modify-the-parent-theme-behavior-within-the-child-theme/">How to modify the Parent Theme behavior within the Child Theme</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/https://wordpress.org/plugins/search.php?q=child+theme">Child Theme Plugins</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/http://techblog.kjodle.net/2014/04/12/wordpress-child-themes-the-whys-and-hows/">WordPress Child Themes: The Whys and Hows</a> </li> <li> <a class="external text" href="https://web.archive.org/web/20170312040610/https://kovshenin.com/2014/child-themes-import/">An Alternative to @import in WordPress Child Themes</a> Explains why @import is no longer a best practice. </li> </ul>  </div><div class="printfooter"> Retrieved from "<a href="https://web.archive.org/web/20170312040610/http://codex.wordpress.org/index.php?title=Child_Themes&oldid=160109">http://codex.wordpress.org/index.php?title=Child_Themes&oldid=160109</a>"</div> <div id="catlinks"><div id="catlinks" class="catlinks"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/web/20170312040610/https://codex.wordpress.org/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/web/20170312040610/https://codex.wordpress.org/Category:Design_and_Layout" title="Category:Design and Layout">Design and Layout</a></li><li><a href="/web/20170312040610/https://codex.wordpress.org/Category:UI_Link" title="Category:UI Link">UI Link</a></li></ul></div></div></div>  </div> <div class="col-2"> <ul class="submenu"> <li id="n-mainpage"><a href="/web/20170312040610/https://codex.wordpress.org/Main_Page">Home Page</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/WordPress_Lessons">WordPress Lessons</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/Getting_Started_with_WordPress">Getting Started</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/Working_with_WordPress">Working with WordPress</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/Blog_Design_and_Layout">Design and Layout</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/Advanced_Topics">Advanced Topics</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/Troubleshooting">Troubleshooting</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/Developer_Documentation">Developer Docs</a></li> <li><a href="/web/20170312040610/https://codex.wordpress.org/About_WordPress">About WordPress</a></li> </ul> <h3>Codex Resources</h3> <ul class="submenu"> <li id="n-portal"><a href="/web/20170312040610/https://codex.wordpress.org/Codex:Community_Portal">Community portal</a></li> <li id="n-currentevents"><a href="/web/20170312040610/https://codex.wordpress.org/Current_events">Current events</a></li> <li id="n-recentchanges"><a href="/web/20170312040610/https://codex.wordpress.org/Special:RecentChanges">Recent changes</a></li> <li id="n-randompage"><a href="/web/20170312040610/https://codex.wordpress.org/Special:Random">Random page</a></li> <li id="n-help"><a href="/web/20170312040610/https://codex.wordpress.org/Help:Contents">Help</a></li> </ul> </div> </div> </div> <div id="wporg-footer"> <div class="wrapper"> <ul> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/about/" title="An introduction to the WordPress project">About</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/news/" title="News and Updates">Blog</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/hosting/" title="Recommended web hosting providers">Hosting</a></li> <li><a href="https://web.archive.org/web/20170312040610/http://jobs.wordpress.net/" title="Find or post WordPress jobs">Jobs</a></li> </ul> <ul> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/support/" title="Forums, documentation, and other resources">Support</a></li> <li><a href="//web.archive.org/web/20170312040610/https://developer.wordpress.org/" title="Resources for WordPress developers">Developers</a></li> <li><a href="//web.archive.org/web/20170312040610/https://make.wordpress.org/" title="Give back to WordPress through code, support, translation and more">Get Involved</a></li> <li><a href="//web.archive.org/web/20170312040610/https://learn.wordpress.org/" title="Workshops and training materials">Learn</a></li> </ul> <ul> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/showcase/" title="Some of the best WordPress sites on the Web">Showcase</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/plugins/" title="Add extra functionality to WordPress">Plugins</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/themes/" title="Make your WordPress pretty">Themes</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/ideas/" title="Share your ideas for improving WordPress">Ideas</a></li> </ul> <ul> <li><a href="//web.archive.org/web/20170312040610/https://central.wordcamp.org/" title="Find a WordPress event near you">WordCamp</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.tv/" title="Videos, tutorials, and WordCamp sessions">WordPress.TV</a></li> <li><a href="//web.archive.org/web/20170312040610/https://buddypress.org/" title="A set of plugins to transform your WordPress into a social network">BuddyPress</a></li> <li><a href="//web.archive.org/web/20170312040610/https://bbpress.org/" title="Fast, slick forums built on WordPress">bbPress</a></li> </ul> <ul> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.com/?ref=wporg-footer" title="Hassle-free WordPress hosting">WordPress.com</a></li> <li><a href="//web.archive.org/web/20170312040610/https://ma.tt/" title="Co-founder of WordPress, an example of what WordPress can do">Matt</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/about/privacy/" title="WordPress.org Privacy Policy">Privacy</a></li> <li><a href="//web.archive.org/web/20170312040610/https://wordpress.org/about/license/" title="WordPress is open source software">License / GPLv2</a></li> </ul> <ul> <li> <iframe title="Follow @WordPress on Twitter" allowtransparency="true" frameborder="0" scrolling="no" src="//web.archive.org/web/20170312040610if_/https://platform.twitter.com/widgets/follow_button.html?screen_name=WordPress&show_count=false" style="width:135px; height:20px;"></iframe> </li> <li> <iframe title="Like WordPress on Facebook" src="//web.archive.org/web/20170312040610if_/https://www.facebook.com/plugins/like.php?app_id=121415197926116&href=http%3A%2F%2Fwww.facebook.com%2Fwordpress&send=false&layout=button_count&width=135&show_faces=false&action=like&colorscheme=light&font=lucida+grande&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:135px; height:21px;" allowtransparency="true"></iframe> </li> <li> <script src="https://web.archive.org/web/20170312040610js_/https://apis.google.com/js/platform.js" async defer></script> <div class="g-plusone" data-size="medium" data-href="https://plus.google.com/+WordPress"></div> </li> </ul> </div> <h6 class="aligncenter cip-image">Code is Poetry.</h6> </div> <script type="text/javascript"> var _qevents = _qevents || []; (function() { var elem = document.createElement('script'); elem.src = (document.location.protocol == "https:" ? "https://web.archive.org/web/20170312040610/https://secure" : "https://web.archive.org/web/20170312040610/http://edge") + ".quantserve.com/quant.js"; elem.async = true; elem.type = "text/javascript"; var scpt = document.getElementsByTagName('script')[0]; scpt.parentNode.insertBefore(elem, scpt); })(); </script> <script type="text/javascript">_qevents.push( { qacct:"p-18-mFEk4J448M"} );</script> <noscript><img src="//web.archive.org/web/20170312040610im_/https://pixel.quantserve.com/pixel/p-18-mFEk4J448M.gif" style="display: none;" border="0" height="1" width="1" alt=""/></noscript>  <script type="text/javascript" src="//web.archive.org/web/20170312040610js_/https://gravatar.com/js/gprofiles.js"></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>