{"id":37506,"date":"2024-05-02T10:42:50","date_gmt":"2024-05-02T10:42:50","guid":{"rendered":"https:\/\/10web.io\/blog\/?p=37506"},"modified":"2025-04-21T14:10:05","modified_gmt":"2025-04-21T14:10:05","slug":"how-to-create-a-child-theme-in-wordpress","status":"publish","type":"post","link":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/","title":{"rendered":"How to Create a Child Theme in WordPress (Step-by-Step Guide)"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Want to customize your WordPress site without worrying about updates breaking everything? Then it\u2019s time to learn how to create a child theme in WordPress &#8211; the safe, update-proof way to make changes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A child theme lets you adjust styles, add functions, or edit templates without touching your original theme files. That means your customizations stay intact, no matter how often your parent theme gets updated. In this guide, we\u2019ll see how to create a WordPress child theme step by step, what to do if you already made changes without a child theme, and more.<\/span><\/p>\n<h2><b>What are WordPress child themes?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">One of the most common frustrations WordPress users face is adding <\/span><a href=\"https:\/\/10web.io\/wordpress-glossary\/what-is-custom-css-in-wordpress\/\"><span style=\"font-weight: 400;\">custom CSS<\/span><\/a><span style=\"font-weight: 400;\"> or editing theme\u2019s files, only to have everything disappear after a theme update. A <\/span><a href=\"https:\/\/10web.io\/wordpress-glossary\/what-is-child-theme-in-wordpress\/\"><span style=\"font-weight: 400;\">child theme<\/span><\/a><span style=\"font-weight: 400;\"> is designed to prevent exactly that.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead of editing the original (or <\/span><a href=\"https:\/\/10web.io\/wordpress-glossary\/what-is-a-parent-page-in-wordpress\/\"><span style=\"font-weight: 400;\">parent<\/span><\/a><span style=\"font-weight: 400;\">) theme directly, with a WordPress child theme you can make changes safely. Your customizations live in their own folder, separate from the main theme. So even when your parent theme is updated, your edits stay intact.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Parent theme<\/b><span style=\"font-weight: 400;\">: This is the main theme your site is built on. It provides all the base styles and functionality.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Child theme<\/b><span style=\"font-weight: 400;\">: A theme that inherits the parent\u2019s design and features but lets you safely customize things on top of it.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This is the <\/span><b>recommended way<\/b><span style=\"font-weight: 400;\"> to modify a WordPress theme. You might just want to update a few colors or create new layouts. This way your site is stable, updatable, and easier to manage.<\/span><\/p>\n<h2><b>Before you start: What you\u2019ll need<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Before creating your child theme, let\u2019s make sure you\u2019re set up for success with this quick checklist:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Make sure your WordPress site is live and working<\/span><\/li>\n<li><span style=\"font-weight: 400;\">You have admin access to <\/span><a href=\"https:\/\/10web.io\/blog\/how-to-install-a-wordpress-theme\/\"><span style=\"font-weight: 400;\">install themes<\/span><\/a><span style=\"font-weight: 400;\"> and upload files<\/span><\/li>\n<li><span style=\"font-weight: 400;\">You know the name of your current theme (aka the parent theme)<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Bonus: You\u2019ve <\/span><a href=\"https:\/\/10web.io\/wordpress-backup-service\/\"><span style=\"font-weight: 400;\">backed up your site<\/span><\/a><span style=\"font-weight: 400;\"> or created a staging version to test safely<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Taking time to prepare these basics will make the rest of the process, especially the steps for how to create a child theme in WordPress, much smoother. If you already made changes using the Customizer, jump to <\/span><a href=\"https:\/\/accounts.google.com\/v3\/signin\/identifier?continue=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1Ybk8wUdn43QdPhXJmpWMbFdKS0bukPa7coWHc9AWvpc%2Fedit%3Ftab%3Dt.l724uc5zash6&amp;followup=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1Ybk8wUdn43QdPhXJmpWMbFdKS0bukPa7coWHc9AWvpc%2Fedit%3Ftab%3Dt.l724uc5zash6&amp;ifkv=AXH0vVv1l8Su0OSrsstyfK0MR_UudHKUk01LdhkjfC8rH9WylMu5_ULdlozMYtXPonalkh6e7wRVVw&amp;ltmpl=docs&amp;osid=1&amp;passive=1209600&amp;service=wise&amp;flowName=WebLiteSignIn&amp;flowEntry=ServiceLogin&amp;dsh=S-384851843%3A1745546994814156#heading=h.rykngctbbnwp\"><span style=\"font-weight: 400;\">this section<\/span><\/a><span style=\"font-weight: 400;\"> to learn how to save and transfer your settings first.<\/span><\/p>\n<h3><b>Choose the right parent theme<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Your child theme will inherit everything &#8211; styles, structure, and functionality &#8211; from its parent theme. So it\u2019s worth choosing a solid one to build on. When selecting a parent theme, look for:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Popularity &amp; support<\/b><span style=\"font-weight: 400;\">: Well-maintained themes are more likely to be compatible.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Customization options<\/b><span style=\"font-weight: 400;\">: The more flexible the theme, the more you can extend it.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Performance<\/b><span style=\"font-weight: 400;\">: Speed matters, especially if you&#8217;re planning custom tweaks.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">If you\u2019re not sure about your theme, some WordPress child theme plugins (like <\/span><a href=\"https:\/\/wordpress.com\/plugins\/child-theme-configurator\"><span style=\"font-weight: 400;\">Child Theme Configurator<\/span><\/a><span style=\"font-weight: 400;\">) include a built-in <\/span><b>Analyze<\/b><span style=\"font-weight: 400;\"> tool to check compatibility. You can also review the parent theme\u2019s documentation for specific instructions.<\/span><\/p>\n<h2><b>How to create a child theme in WordPress manually<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Creating a child theme manually gives you full control, and once you\u2019ve done it once, you\u2019ll see it\u2019s not as scary as it sounds. Just follow these steps carefully, and you\u2019ll have a working child theme in minutes.<\/span><\/p>\n<h3><b>1. Create a folder for your Child theme<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">First, open your WordPress directory and navigate to: <\/span><span style=\"font-weight: 400;\"><strong>wp-content\/themes<\/strong>. <\/span><span style=\"font-weight: 400;\">Inside that folder, create a <\/span><b>new folder<\/b><span style=\"font-weight: 400;\"> for your child theme. Give it a simple, lowercase name with hyphens instead of spaces, for example: <\/span><span style=\"font-weight: 400;\">grand-sunrise<\/span><span style=\"font-weight: 400;\">. This will be your child theme\u2019s home.<\/span><\/p>\n<h3><b>2. Create the <\/b><b>style.css<\/b><b> File<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Inside your new folder, create a file named: <\/span><strong>style.css<\/strong><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">At the top of this file, add the following code:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\/*\r\n\r\n<\/span><span style=\"font-weight: 400;\">Theme Name: Grand Sunrise\r\n\r\n<\/span><span style=\"font-weight: 400;\">Template: twentytwentyone\r\n\r\n<\/span><span style=\"font-weight: 400;\">*\/<\/span><\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Theme Name<\/strong><span style=\"font-weight: 400;\"> is your WordPress child theme\u2019s name (can be anything)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Template<\/strong><span style=\"font-weight: 400;\"> must exactly match the folder name of your parent theme<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This header tells WordPress which parent theme your child theme is based on. If the name is incorrect, WordPress won\u2019t know what to inherit, and your theme won\u2019t work. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Below that, you can <\/span><a href=\"https:\/\/10web.io\/blog\/how-to-edit-css-in-wordpress\/\"><span style=\"font-weight: 400;\">add your own CSS rules<\/span><\/a><span style=\"font-weight: 400;\">. For example:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">body {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0font-family: \"Open Sans\", sans-serif;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b>3. Create the <\/b><b>functions.php<\/b><b> file<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Now, in the same folder, create a file named: <\/span><strong>functions.php<\/strong><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">Add the following PHP code to it:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;?php<\/span>\r\n\r\n<span style=\"font-weight: 400;\">function my_child_theme_styles() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( 'parent-style', get_template_directory_uri() . '\/style.css' );<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">add_action( 'wp_enqueue_scripts', 'my_child_theme_styles' );<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">What this code does:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>wp_enqueue_style()<\/strong><span style=\"font-weight: 400;\">: Safely loads a stylesheet<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>get_template_directory_uri()<\/strong><span style=\"font-weight: 400;\">: Gets the URL of the parent theme<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>get_stylesheet_uri()<\/strong><span style=\"font-weight: 400;\">: Gets the URL of the child theme\u2019s <strong>style.css<\/strong><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>array(&#8216;parent-style&#8217;)<\/strong><span style=\"font-weight: 400;\">: Ensures the child styles load after the parent\u2019s<\/span><\/li>\n<\/ul>\n<p><b>Important:<\/b><span style=\"font-weight: 400;\"> If you skip this step, your child theme might load without any styles. WordPress doesn\u2019t automatically inherit styles, you have to enqueue (load) them. Enqueue is WordPress\u2019s official method for adding styles\/scripts to your site safely.<\/span><\/p>\n<p><b>Tip<\/b><span style=\"font-weight: 400;\">: Avoid using <\/span><strong>@import<\/strong><span style=\"font-weight: 400;\"> in your <\/span><strong>style.css<\/strong><span style=\"font-weight: 400;\">. It\u2019s outdated and can slow down your site.<\/span><\/p>\n<h3><b>4. Activate your child theme<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Once your WordPress child theme files are in place, you need to activate them before you can make any changes. For that, <\/span><\/p>\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Log into your WordPress dashboard,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go to <\/span><b>Appearance &gt; Themes,<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">You\u2019ll see your child theme listed alongside other installed themes,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Hover over it and click <\/span><b>Activate<\/b><span style=\"font-weight: 400;\">, and that\u2019s it, your child theme is now active!<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">If you see your site working as expected, your child theme is set up correctly and loading styles from the parent theme. If something looks off, like missing styles or layout issues, double-check that your <\/span><strong>functions.php<\/strong><span style=\"font-weight: 400;\"> is properly enqueueing the parent stylesheet.<\/span><\/p>\n<h2><b>What you can customize with a WordPress child theme<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Now that your child theme is active, you&#8217;re probably asking what exactly you can do with it. It can be small changes like adjusting the colors, or even adding some bit features. If you\u2019ve followed the steps for how to create a child theme in WordPress, here are the most common ways you can start customizing.<\/span><\/p>\n<h3><b>1. Adjust fonts, colors, and layout (CSS)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Let\u2019s say you want to change the font size on blog posts, adjust the spacing between elements, or customize link colors or button hover states. You can do all that directly in your WordPress child theme\u2019s <\/span><strong>style.css<\/strong><span style=\"font-weight: 400;\">. Example:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\/* Make blog post text larger *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.single-post p {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0font-size: 18px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0line-height: 1.7;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\/* Change link hover color *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\">a:hover {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0color: #ff5e5e;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h3><b>2. Override template files (like <\/b><b>footer.php<\/b><b>)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">If you want to remove a theme credit in the footer, add an extra widget area, rearrange post metadata, just copy the file from the parent theme into your child theme folder and edit it.<\/span><\/p>\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Find <\/span><strong>footer.php<\/strong><span style=\"font-weight: 400;\"> in the parent theme<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Copy it to your child theme folder<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Edit your new version, WordPress will use it instead of the original<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Keep the folder structure identical. If the file is in a subfolder, mirror that in the child theme.<\/span><\/p>\n<h3><b>3. Add custom functions (without breaking anything)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Your child theme\u2019s <\/span><strong>functions.php<\/strong><span style=\"font-weight: 400;\"> is the perfect place to add new features without relying on plugins. <\/span><b>Examples:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add support for featured images:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">add_theme_support( 'post-thumbnails' );<\/span><\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Remove the WordPress version number from your site\u2019s source code:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">remove_action('wp_head', 'wp_generator');<\/span><\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Register a new widget area:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">function my_custom_sidebar() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> register_sidebar(array(<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> 'name' =&gt; 'Custom Sidebar',<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> 'id' =&gt; 'custom_sidebar',<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> 'before_widget' =&gt; '&lt;div&gt;',<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> 'after_widget' =&gt; '&lt;\/div&gt;',<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> ));<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">add_action('widgets_init', 'my_custom_sidebar');<\/span><\/pre>\n<h3><b>4. Customize block themes with <\/b><b>theme.json<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">If you\u2019re using a block theme like <\/span><b>Twenty Twenty-Three<\/b><span style=\"font-weight: 400;\">, styles are controlled by a file called <\/span><span style=\"font-weight: 400;\">theme.json<\/span><span style=\"font-weight: 400;\"> instead of just CSS. To override it:<\/span><\/p>\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Copy the parent theme\u2019s <\/span><strong>theme.json<\/strong><span style=\"font-weight: 400;\"> file into your child theme folder<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Edit your version (JSON syntax required)<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Example snippet (This lets you control spacing, fonts, and color palettes across your site\u2014all in one file.):<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">\"typography\": {<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \"fontSize\": \"18px\",<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \"lineHeight\": \"1.6\"<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<h2><b>What if you already customized your theme without a child theme?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019ve already made changes to your WordPress theme without using a child theme, you\u2019re in good company. A lot of people do this early on. You can still move those changes safely into a child theme. This section walks you through how to do that, step by step.<\/span><\/p>\n<h3><b>1. Figure out what you changed<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Start by listing out where and how you made customizations. <\/span><span style=\"font-weight: 400;\">Did you:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Change styles in <\/span><b>Appearance &gt; Customize<\/b><span style=\"font-weight: 400;\">?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add CSS under <\/span><b>Additional CSS<\/b><span style=\"font-weight: 400;\">?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Edit files like <\/span><strong>style.css<\/strong><span style=\"font-weight: 400;\">, <\/span><strong>footer.php<\/strong><span style=\"font-weight: 400;\">, or <\/span><strong>functions.php<\/strong><span style=\"font-weight: 400;\"> in the theme editor?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use a plugin that injected code into your active theme?<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This helps you understand what to keep, what to copy, and what to double-check. This process is especially important if you\u2019ve already made changes and now want to switch safely, without losing your work or starting over. It pairs well with learning how to create a child theme in WordPress, even if you didn\u2019t begin with one.<\/span><\/p>\n<h3><b>2. Export your Customizer settings (if you used them)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/wordpress.org\/documentation\/article\/customizer\/\">Customizer<\/a> changes won\u2019t carry over automatically. That includes colors, fonts, header layout, and homepage settings. To preserve them, you can export and re-import:<\/span><\/p>\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Install the <\/span><a href=\"https:\/\/wordpress.org\/plugins\/customizer-export-import\/\"><span style=\"font-weight: 400;\">Customizer Export\/Import<\/span><\/a><span style=\"font-weight: 400;\"> plugin<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Go to <\/span><b>Appearance &gt; Customize<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Click <\/span><b>Export<\/b><span style=\"font-weight: 400;\"> to save your settings<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">After switching to your child theme, go back and <\/span><b>Import<\/b><span style=\"font-weight: 400;\"> them<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">This step protects all your visual settings.<\/span><\/p>\n<h3><b>3. Move any custom CSS to the right place<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">If you wrote CSS directly in the parent theme\u2019s <\/span><strong>style.css<\/strong><span style=\"font-weight: 400;\"> or inside the Customizer, copy that code into your WordPress child theme\u2019s <\/span><strong>style.css<\/strong><span style=\"font-weight: 400;\">. This keeps your design changes safe during future updates. Don\u2019t keep editing the parent theme, it\u2019ll reset when it updates.<\/span><\/p>\n<h3><b>4. Copy over template or PHP file edits<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">If you modified PHP files (like <\/span><strong>single.php<\/strong><span style=\"font-weight: 400;\"> or <\/span><strong>header.php<\/strong><span style=\"font-weight: 400;\">), here\u2019s what to do:<\/span><\/p>\n<ol class=\"black\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open your <\/span><b>parent theme folder<\/b><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Find the file you changed<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Copy it into your child theme folder (use the exact same structure)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Make sure it includes your edits<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">For example:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">Parent: \/twentytwentyone\/footer.php <\/span>\r\n\r\n<span style=\"font-weight: 400;\">Child: \/your-child-theme\/footer.php<\/span><\/pre>\n<h3><b>5. Test on a staging site (highly recommended)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Don\u2019t risk anything breaking. Test your new WordPress child theme setup on a staging site before going live. Hosting providers like <\/span><a href=\"https:\/\/10web.io\/\"><span style=\"font-weight: 400;\">10Web<\/span><\/a><span style=\"font-weight: 400;\"> offer one-click staging. Or, you can use tools like<\/span><a href=\"https:\/\/localwp.com\/\"> <span style=\"font-weight: 400;\">LocalWP<\/span><\/a><span style=\"font-weight: 400;\"> to test changes on your own computer. This gives you a no-pressure way to spot issues before your visitors do.<\/span><\/p>\n<h3><b>Final tip: Don\u2019t rush it<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">It\u2019s normal to feel nervous about switching mid-way, but you\u2019re doing the right thing. Moving your changes into a child theme makes your site more reliable and easier to update. Take it one step at a time, back up before switching, and trust the process.<\/span><\/p>\n<h2><b>Common problems (and how to fix them)<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Even when you follow every step carefully, things can still go sideways. That\u2019s normal, and fixable. Below are the most common child theme issues people run into, plus how to solve them fast.<\/span><\/p>\n<h3><b>1. My styles aren\u2019t showing<\/b><\/h3>\n<p><b>What\u2019s likely wrong:<\/b><span style=\"font-weight: 400;\"> Your child theme is active, but your site looks unstyled or broken.<\/span><\/p>\n<p><b>Fix it:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Open your <\/span><strong>functions.php<\/strong><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Make sure you\u2019re enqueuing both the <\/span><b>parent<\/b><span style=\"font-weight: 400;\"> and <\/span><b>child<\/b><span style=\"font-weight: 400;\"> stylesheets<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Your code should look like this. Double-check for typos in function names or file paths:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">function my_child_theme_enqueue_styles() {<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> wp_enqueue_style('parent-style', get_template_directory_uri() . '\/style.css');<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');<\/span><\/pre>\n<h3><b>2. My header or footer disappeared<\/b><\/h3>\n<p><b>What\u2019s likely wrong:<\/b><span style=\"font-weight: 400;\"> You copied a template file (like <\/span><strong>header.php<\/strong><span style=\"font-weight: 400;\">) into your WordPress child theme, but something\u2019s missing.<\/span><\/p>\n<p><b>Fix it:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Compare the version in your child theme with the original in the parent<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Make sure nothing important was deleted or misplaced during the copy<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If you\u2019re using a block theme, check whether your layout is controlled by <\/span><span style=\"font-weight: 400;\">theme.json<\/span><span style=\"font-weight: 400;\"> or the Site Editor instead.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Keep in mind that block themes like Twenty Twenty-Three work differently. They don\u2019t use <\/span><strong>header.php<\/strong><span style=\"font-weight: 400;\"> the same way classic themes do.<\/span><\/p>\n<h3><b>3. Customizer settings are gone<\/b><\/h3>\n<p><b>What\u2019s likely wrong:<\/b><span style=\"font-weight: 400;\"> Customizer settings don\u2019t transfer automatically when you switch to a child theme.<\/span><\/p>\n<p><b>Fix it:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use the Customizer Export\/Import plugin<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Export your settings before switching<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Import them back in after activating the child theme<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This only works if your parent and child theme support the same Customizer options.<\/span><\/p>\n<h3><b>4. Changes aren\u2019t showing up<\/b><\/h3>\n<p><b>What\u2019s likely wrong:<\/b><span style=\"font-weight: 400;\"> You updated code or CSS, but nothing\u2019s changing on the front end.<\/span><\/p>\n<p><b>Fix it:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/support.google.com\/accounts\/answer\/32050?hl=en&amp;co=GENIE.Platform%3DDesktop\"><span style=\"font-weight: 400;\">Clear your browser cache<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If you&#8217;re using a <\/span><a href=\"https:\/\/10web.io\/blog\/what-is-the-best-cache-plugin-for-wordpress\/\"><span style=\"font-weight: 400;\">caching plugin<\/span><\/a><span style=\"font-weight: 400;\">, purge the site cache<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add a version number to your enqueued styles. This forces browsers to re-load the file, not rely on the cached version. Example:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'), '1.0');<\/span><\/pre>\n<h3><b>5. I made a change and the site broke<\/b><\/h3>\n<p><b>What\u2019s likely wrong:<\/b><span style=\"font-weight: 400;\"> There\u2019s a small syntax error in one of your files.<\/span><\/p>\n<p><b>Fix it:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Turn on debugging in your <\/span><strong>wp-config.php<\/strong><span style=\"font-weight: 400;\">:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">define( 'WP_DEBUG', true );<\/span><\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Check the error message for the exact line and file<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Fix the typo or invalid code<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">If you&#8217;re locked out of your dashboard, use <\/span><a href=\"https:\/\/10web.io\/glossary\/ftp-sftp\/\"><span style=\"font-weight: 400;\">FTP<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/10web.io\/glossary\/file-manager\/\"><span style=\"font-weight: 400;\">File Manager<\/span><\/a><span style=\"font-weight: 400;\"> in your hosting panel to revert the change<\/span><\/li>\n<\/ul>\n<h2><b>Tools and plugins that will help you<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019re not comfortable editing theme files or just want to save time, there are a few tools that can help you create and manage child themes with confidence. We\u2019ve already mentioned the Customizer Export\/Import plugin and how it helps you avoid redoing all your visual settings. There are three more tools worth knowing. Let\u2019s see how they work and what to watch out for.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">These tools are especially useful if you want to skip the manual steps for how to create a child theme in WordPress but still end up with a stable, update-safe setup.<\/span><\/p>\n<h3><b>Child Theme Configurator (best for classic themes)<\/b><\/h3>\n<p><a href=\"https:\/\/wordpress.com\/plugins\/child-theme-configurator\"><span style=\"font-weight: 400;\">This plugin<\/span><\/a><span style=\"font-weight: 400;\"> helps you create a WordPress child theme without touching code. It scans your parent theme for compatibility issues, lets you pick what to copy (styles, menus, templates), and generates all required files with one click. So, it can save you a lot of time and manual coding. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">But watch out. Although it works with most classic themes, it doesn\u2019t always explain <\/span><i><span style=\"font-weight: 400;\">why<\/span><\/i><span style=\"font-weight: 400;\"> something breaks. If you edited files directly before using the plugin, you\u2019ll still need to move those changes manually.<\/span><\/p>\n<h3><b>Create Block Theme (best for block themes)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">If you&#8217;re using a <\/span><b>block theme<\/b><span style=\"font-weight: 400;\"> like Twenty Twenty-Three, <\/span><a href=\"https:\/\/wordpress.org\/plugins\/create-block-theme\/\"><span style=\"font-weight: 400;\">this official plugin<\/span><\/a><span style=\"font-weight: 400;\"> from WordPress helps you generate a child theme based on your current customizations. It exports changes from the <\/span><a href=\"https:\/\/wordpress.org\/documentation\/article\/site-editor\/\"><span style=\"font-weight: 400;\">Site Editor<\/span><\/a><span style=\"font-weight: 400;\"> (including <\/span><span style=\"font-weight: 400;\">theme.json<\/span><span style=\"font-weight: 400;\"> and templates), helps you save your design as a child theme, and keeps your block-based layout intact.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep in mind that it only works with block themes and its generated child themes can include a lot of files, so it\u2019s best to clean them up afterward. <\/span><\/p>\n<h3><b>Online child theme generators (manual alternative)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">If you are not the biggest fan of manual setups, you can opt for trusted child theme generators like <\/span><a href=\"https:\/\/wordpress.org\/plugins\/wp-child-theme-generator\/\"><span style=\"font-weight: 400;\">WP Child Theme Generator<\/span><\/a><span style=\"font-weight: 400;\"> or others.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You just fill out a short form with your:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Parent theme name<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Child theme name<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Author, version, description (optional)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Then download a ready-to-use ZIP file you can upload via <\/span><b>Appearance &gt; Themes &gt; Add New<\/b><span style=\"font-weight: 400;\">. This works well for classic themes, but still requires you to enqueue styles and test everything manually.<\/span><\/p>\n<h2><b>Final thoughts<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019ve made it this far, you\u2019re already doing something many WordPress users skip &#8211; you know how to create a child theme in WordPress and even some ways to customize your site the right way.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">WordPress child themes might seem technical at first, but now you know exactly why it matters, when to use one, and how to do it safely. You can do it manually or with a plugin. The result\u2019s the same: protected website updates. If something breaks, you know how to fix it. That\u2019s progress. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you need to review the steps again, <\/span><a href=\"https:\/\/accounts.google.com\/v3\/signin\/identifier?continue=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1Ybk8wUdn43QdPhXJmpWMbFdKS0bukPa7coWHc9AWvpc%2Fedit%3Ftab%3Dt.l724uc5zash6&amp;followup=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1Ybk8wUdn43QdPhXJmpWMbFdKS0bukPa7coWHc9AWvpc%2Fedit%3Ftab%3Dt.l724uc5zash6&amp;ifkv=AXH0vVujAl1gGbK8upzRtQM2Ala-nkEzVBA9MSaZ8N-90lhNst0cxZb25vBPUidUlm8FRcv7HWPdeQ&amp;ltmpl=docs&amp;osid=1&amp;passive=1209600&amp;service=wise&amp;flowName=WebLiteSignIn&amp;flowEntry=ServiceLogin&amp;dsh=S-1606950636%3A1745546960911355#heading=h.mcmqcf6odzup\"><span style=\"font-weight: 400;\">jump back to the manual setup steps<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/accounts.google.com\/v3\/signin\/identifier?continue=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1Ybk8wUdn43QdPhXJmpWMbFdKS0bukPa7coWHc9AWvpc%2Fedit%3Ftab%3Dt.l724uc5zash6&amp;followup=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2F1Ybk8wUdn43QdPhXJmpWMbFdKS0bukPa7coWHc9AWvpc%2Fedit%3Ftab%3Dt.l724uc5zash6&amp;ifkv=AXH0vVtk6bhOpMrttPWUERzWEx_ssDAh3UjR-H2biPx6LaIKH-2ZHuPC3uhu5tiqq8ApSItvtXH-9w&amp;ltmpl=docs&amp;osid=1&amp;passive=1209600&amp;service=wise&amp;flowName=WebLiteSignIn&amp;flowEntry=ServiceLogin&amp;dsh=S607563222%3A1745546989470534#heading=h.1n6njonaa4c5\"><span style=\"font-weight: 400;\">common problems<\/span><\/a><span style=\"font-weight: 400;\"> any time. Now go make your site your own, without the fear of updates wiping it all out.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\r\n<style>\r\n  #ctablocks_inline_92{\r\n          background-color: #000000;\r\n        color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_inline_92 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_inline_92 .button{\r\n        background-color: rgb(51,57,241);\r\n      color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_inline_92 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n        #ctablocks_inline_92 .ctablocks_content_info p {\r\n        padding-left: 36px;\r\n      }\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px;\r\n      }\r\n  @media screen and (min-width: 768px) and (max-width: 1260px) {\r\n      #ctablocks_inline_92 .ctablocks_content_button {\r\n          margin-left: 37px !important;\r\n      }\r\n  }\r\n  ;\r\n<\/style>\r\n<div id=\"ctablocks_inline_92\" class=\"ctablocks_container inline_type\r\n        \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n      \r\n            <div class=\"title-wrap\">\r\n\t\t\t\t\t                  <img decoding=\"async\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/info-icon-cta.png\" alt=\"Simplify WordPress with 10Web\" title=\"Simplify WordPress with 10Web\">\r\n\t\t\t\t\t            <h4>Simplify WordPress with 10Web<\/h4>\r\n        <\/div>\r\n              <p>Automate manual work with 10Web Managed WordPress Hosting and 10Web AI Website Builder. Optimize your WordPress website effortlessly. <\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-92\" data-buttontype=\"cta-inline\"\r\n\t        >Learn How<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <\/div>\r\n<\/span><\/p>\n<h2><b>FAQ<\/b><\/h2>\n<p><span style=\"font-weight: 400;\"><div class=\"faq-shortcode\">\n    <p class=\"faq_title\">How do I create a child theme in WordPress?<\/p>\n    <div class=\"faq_content\">To create a child theme in WordPress, you\u2019ll need to make a new folder inside your<\/span> <span style=\"font-weight: 400;\">wp-content\/themes<\/span> <span style=\"font-weight: 400;\">directory, add a <\/span><strong>style.css<\/strong> <span style=\"font-weight: 400;\">file with the required header, and load the parent theme\u2019s styles using a <\/span><strong>functions.php<\/strong> <span style=\"font-weight: 400;\">file. If you don\u2019t feel comfortable with code, plugins like Child Theme Configurator or Create Block Theme can help automate the process. We explain both methods step by step in this guide.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">Why should I create a child theme in WordPress?<\/p>\n    <div class=\"faq_content\">WordPress child themes lets you customize your site safely without touching the original theme files. When you update the parent theme, your changes won\u2019t be lost. This is especially important if you&#8217;re editing templates, adding code, or planning long-term updates. Learning how to create a child theme in WordPress is one of the best things you can do to protect your site and work confidently.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">Can I create a child theme after I\u2019ve already customized my site?<\/p>\n    <div class=\"faq_content\">Yes, and if you\u2019ve already customized your site, it\u2019s even more important to switch to a child theme now. You\u2019ll need to manually move your custom CSS, template files, or other edits into the WordPress child theme folder, and export Customizer settings if you used them. We walk through the full process here.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">Will I lose my layout or settings when I switch to a child theme?<\/p>\n    <div class=\"faq_content\">You won\u2019t lose anything\u2014as long as you move your settings and edits properly. WordPress doesn\u2019t automatically carry over things like Customizer settings or file changes, so you\u2019ll need to export\/import those settings or copy files into your child theme manually. Once done, your site will look and behave just like before\u2014but now with all the benefits of using WordPress child themes.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">What\u2019s the difference between a child theme and a block theme?<\/p>\n    <div class=\"faq_content\">A child theme is a secondary theme that inherits the design and functionality of another theme (the parent). A block theme is a newer kind of WordPress theme that uses the Site Editor and a file called <\/span><span style=\"font-weight: 400;\">theme.json<\/span><span style=\"font-weight: 400;\"> for layout and style management. You can still create child themes for block themes, but the structure and customization process are a bit different.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">How do I create a child page in WordPress?<\/p>\n    <div class=\"faq_content\">This question comes up a lot, but it\u2019s different from creating a WordPress child theme. A child page is simply a subpage in your site hierarchy. When editing or creating a page in WordPress, look for the Page Attributes panel, and choose a parent page from the dropdown. It\u2019s a way to organize your content\u2014not a theme customization tool.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">Why aren\u2019t my styles loading in the child theme?<\/p>\n    <div class=\"faq_content\">If your child theme looks broken or unstyled, it\u2019s probably because your stylesheets weren\u2019t loaded properly. WordPress child themes need to load the parent theme\u2019s styles explicitly, usually through a small code snippet in <\/span><strong>functions.php<\/strong><span style=\"font-weight: 400;\">. It\u2019s also a good idea to clear your site and browser cache after updating styles.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">What happens if I mess something up in my child theme?<\/p>\n    <div class=\"faq_content\">Don\u2019t worry. One of the best parts of using a WordPress child theme is that WordPress will fall back to the parent theme if something breaks. And if the issue crashes your site, you can fix it by accessing your site via FTP or your hosting control panel. That built-in safety net is why so many developers recommend using child themes from the start.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">Do I always need a child theme?<\/p>\n    <div class=\"faq_content\">Not necessarily. If you&#8217;re only making small style tweaks in the Customizer or using a plugin for minor changes, you might not need to create a child theme. But if you plan to override templates, add functions, or make deeper changes to your site, using WordPress child themes is the safest and most future-proof approach.<\/div>\n<\/div>\n<div class=\"faq-shortcode\">\n    <p class=\"faq_title\">How do I create a GeneratePress child theme?<\/p>\n    <div class=\"faq_content\">GeneratePress provides a downloadable child theme on their website that you can start with right away. You can also learn how to create a child theme in WordPress manually by following the steps in this guide &#8211; just be sure to use \u201cgeneratepress\u201d as the parent theme name when setting it up. Whether you use their starter or build your own, a GeneratePress child theme is a smart way to customize safely.<\/div>\n<\/div>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\r\n<style>\r\n  #ctablocks_scrollbox-with-icon_91{\r\n            color: #ffffff;\r\n    border-radius: 6px;\r\n  }\r\n\r\n  #ctablocks_scrollbox-with-icon_91 p{\r\n    color: #ffffff;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .button{\r\n          background-color: rgb(51,57,241);\r\n        color: #ffffff;\r\n    border-color: #3339f1 !important;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .button:hover{\r\n    background: rgba(51,57,241,0.8);\r\n    color: #ffffff;\r\n    opacity: 1;\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91.ctablocks_container {\r\n    left: 100%;\r\n  }\r\n  @media screen and (max-width: 1300px) {\r\n      #ctablocks_scrollbox-with-icon_91.ctablocks_container {\r\n          left: 0;\r\n          margin: 0 auto;\r\n      }\r\n  }\r\n  #ctablocks_scrollbox-with-icon_91 .ctablocks_content {\r\n      background-color: #000000;\r\n  }\r\n<\/style>\r\n<div id=\"ctablocks_scrollbox-with-icon_91\" class=\"ctablocks_container scrollbox-with-icon_type\r\n      \">\r\n\r\n  <div class=\"ctablocks_content clear\">\r\n    <div class=\"ctablocks_content_info\">\r\n              <h4>Simplify WordPress with 10Web<\/h4>\r\n        <h4 class=\"mobile-title\">Simplify WordPress with 10Web<\/h4>\r\n              <p>Skip and automate manual work with 10Web Managed WordPress Hosting and the 10Web AI Website Builder.<\/p>\r\n          <\/div>\r\n    <div class=\"ctablocks_content_button\">\r\n              <a href=\"https:\/\/10web.io\/ai-website-builder\/\" class=\"button\" data-gtag=\"sign-up-blog\" data-buttontype=\"sign-up\" data-gtag=\"cta-91\" data-buttontype=\"cta-scrollbox-with-icon\"\r\n\t        >Learn How<\/a>\r\n            \r\n    <\/div>\r\n  <\/div>\r\n    <span class=\"close_ctablocks\">\r\n      <img decoding=\"async\" class=\"close-icon\" src=\"https:\/\/10web.io\/blog\/wp-content\/plugins\/cta-blocks\/assets\/images\/close_w.svg\" class=\"close\">\r\n      <img decoding=\"async\" class=\"floating-icon\" src=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/Info-icon_Blog.png\" alt=\"Simplify WordPress with 10Web\" title=\"Simplify WordPress with 10Web\">\r\n<!--      <img decoding=\"async\" class=\"arrow-icon white\" src=\"\/cta-blocks\/assets\/images\/arrow-icon.svg\" class=\"close\">\r\n-->      <img decoding=\"async\" class=\"arrow-icon purple\" src=\"https:\/\/10web.io\/blog\/wp-content\/plugins\/cta-blocks\/assets\/images\/arrow-icon-purple.svg\" class=\"close\">\r\n  <\/span>\r\n<\/div>\r\n<\/span><span style=\"font-weight: 400;\"><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Want to customize your WordPress site without worrying about updates breaking everything? Then it\u2019s time to learn how to create a child theme in WordPress &#8211; the safe, update-proof way to make changes. A child theme lets you adjust styles, add functions, or edit templates without touching your original theme files. That means your customizations stay intact, no matter how&#8230;<\/p>\n","protected":false},"author":11,"featured_media":34895,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"two_page_speed":[],"footnotes":"","tenweb_blog_toc":"<ul>\r\n\t<li>\r\n\t\t<a href=\"#what-are-wordpress-child-themes\">What are WordPress child themes?<\/a>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#before-you-start-what-youll-need\">Before you start: What you\u2019ll need<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#choose-the-right-parent-theme\">Choose the right parent theme<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#how-to-create-a-child-theme-in-wordpress-manually\">How to create a child theme in WordPress manually<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#1-create-a-folder-for-your-child-theme\">1. Create a folder for your Child theme<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#2-create-the-style-css-file\">2. Create the style.css File<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#3-create-the-functions-php-file\">3. Create the functions.php file<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#4-activate-your-child-theme\">4. Activate your child theme<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#what-you-can-customize-with-a-wordpress-child-theme\">What you can customize with a WordPress child theme<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#1-adjust-fonts-colors-and-layout-css\">1. Adjust fonts, colors, and layout (CSS)<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#2-override-template-files-like-footer-php\">2. Override template files (like footer.php)<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#3-add-custom-functions-without-breaking-anything\">3. Add custom functions (without breaking anything)<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#4-customize-block-themes-with-theme-json\">4. Customize block themes with theme.json<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#what-if-you-already-customized-your-theme-without-a-child-theme\">What if you already customized your theme without a child theme?<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#1-figure-out-what-you-changed\">1. Figure out what you changed<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#2-export-your-customizer-settings-if-you-used-them\">2. Export your Customizer settings (if you used them)<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#3-move-any-custom-css-to-the-right-place\">3. Move any custom CSS to the right place<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#4-copy-over-template-or-php-file-edits\">4. Copy over template or PHP file edits<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#5-test-on-a-staging-site-highly-recommended\">5. Test on a staging site (highly recommended)<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#final-tip-dont-rush-it\">Final tip: Don\u2019t rush it<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#common-problems-and-how-to-fix-them\">Common problems (and how to fix them)<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#1-my-styles-arent-showing\">1. My styles aren\u2019t showing<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#2-my-header-or-footer-disappeared\">2. My header or footer disappeared<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#3-customizer-settings-are-gone\">3. Customizer settings are gone<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#4-changes-arent-showing-up\">4. Changes aren\u2019t showing up<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#5-i-made-a-change-and-the-site-broke\">5. I made a change and the site broke<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#tools-and-plugins-that-will-help-you\">Tools and plugins that will help you<\/a>\r\n\t\t<ul>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#child-theme-configurator-best-for-classic-themes\">Child Theme Configurator (best for classic themes)<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#create-block-theme-best-for-block-themes\">Create Block Theme (best for block themes)<\/a>\r\n\t\t\t<\/li>\r\n\t\t\t<li>\r\n\t\t\t\t<a href=\"#online-child-theme-generators-manual-alternative\">Online child theme generators (manual alternative)<\/a>\r\n\t\t\t<\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#final-thoughts\">Final thoughts<\/a>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<a href=\"#faq\">FAQ<\/a>\r\n\t<\/li>\r\n<\/ul>\r\n","tenweb_blog_competitor_type":"","tenweb_blog_competitor_names":"","tenweb_blog_twb_version":0,"tenweb_blog_type":""},"categories":[463],"tags":[],"class_list":["post-37506","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Child Theme in WordPress - 10Web<\/title>\n<meta name=\"description\" content=\"Keep your customizations safe during updates. Learn how to create a child theme in WordPress the right way.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Child Theme in WordPress (Step-by-Step Guide)\" \/>\n<meta property=\"og:description\" content=\"Keep your customizations safe during updates. Learn how to create a child theme in WordPress the right way.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"10Web - Build &amp; Host Your WordPress Website\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/10Web.io\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-02T10:42:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-21T14:10:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/create_a_child_theme_in_wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1569\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tigran Nazaryan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@10Web_io\" \/>\n<meta name=\"twitter:site\" content=\"@10Web_io\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tigran Nazaryan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Child Theme in WordPress - 10Web","description":"Keep your customizations safe during updates. Learn how to create a child theme in WordPress the right way.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Child Theme in WordPress (Step-by-Step Guide)","og_description":"Keep your customizations safe during updates. Learn how to create a child theme in WordPress the right way.","og_url":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/","og_site_name":"10Web - Build &amp; Host Your WordPress Website","article_publisher":"https:\/\/www.facebook.com\/10Web.io\/","article_published_time":"2024-05-02T10:42:50+00:00","article_modified_time":"2025-04-21T14:10:05+00:00","og_image":[{"width":1569,"height":880,"url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/create_a_child_theme_in_wordpress.jpg","type":"image\/jpeg"}],"author":"Tigran Nazaryan","twitter_card":"summary_large_image","twitter_creator":"@10Web_io","twitter_site":"@10Web_io","twitter_misc":{"Written by":"Tigran Nazaryan","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/"},"author":{"name":"Tigran Nazaryan","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/9466e64f67fc213397b384bbe3af3bd0"},"headline":"How to Create a Child Theme in WordPress (Step-by-Step Guide)","datePublished":"2024-05-02T10:42:50+00:00","dateModified":"2025-04-21T14:10:05+00:00","mainEntityOfPage":{"@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/"},"wordCount":3346,"commentCount":0,"publisher":{"@id":"https:\/\/10web.io\/blog\/#organization"},"image":{"@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/create_a_child_theme_in_wordpress.jpg","articleSection":["Guides"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/","url":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/","name":"How to Create a Child Theme in WordPress - 10Web","isPartOf":{"@id":"https:\/\/10web.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/create_a_child_theme_in_wordpress.jpg","datePublished":"2024-05-02T10:42:50+00:00","dateModified":"2025-04-21T14:10:05+00:00","description":"Keep your customizations safe during updates. Learn how to create a child theme in WordPress the right way.","breadcrumb":{"@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#primaryimage","url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/create_a_child_theme_in_wordpress.jpg","contentUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2024\/04\/create_a_child_theme_in_wordpress.jpg","width":1569,"height":880,"caption":"how to create a child theme in wordpress"},{"@type":"BreadcrumbList","@id":"https:\/\/10web.io\/blog\/how-to-create-a-child-theme-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/10web.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Child Theme in WordPress (Step-by-Step Guide)"}]},{"@type":"WebSite","@id":"https:\/\/10web.io\/blog\/#website","url":"https:\/\/10web.io\/blog\/","name":"10Web Blog - Build & Host Your WordPress Website","description":"10Web is an All-in-One Website Building Platform, offering Managed WordPress Hosting on Google Cloud, Beautiful Templates, Premium Plugins and Services.","publisher":{"@id":"https:\/\/10web.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/10web.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/10web.io\/blog\/#organization","name":"10Web","url":"https:\/\/10web.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/Logo-768x686-1.png","contentUrl":"https:\/\/10web.io\/blog\/wp-content\/uploads\/sites\/2\/2025\/04\/Logo-768x686-1.png","width":768,"height":686,"caption":"10Web"},"image":{"@id":"https:\/\/10web.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/10Web.io\/","https:\/\/x.com\/10Web_io","https:\/\/www.instagram.com\/10web.io\/","https:\/\/www.linkedin.com\/company\/10web\/mycompany\/","https:\/\/www.youtube.com\/c\/10Web"]},{"@type":"Person","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/9466e64f67fc213397b384bbe3af3bd0","name":"Tigran Nazaryan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/10web.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ce2393558e7591a237212f11acac58fb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ce2393558e7591a237212f11acac58fb?s=96&d=mm&r=g","caption":"Tigran Nazaryan"},"description":"Tigran Nazaryan is an experienced science and technology professional. After seeing great potential in the automation of web development, he co-founded and became CInO of 10Web. Tigran is passionate about creating solutions to bring AI automation into web development and turning great ideas into powerful technological achievements.","sameAs":["https:\/\/www.linkedin.com\/in\/tnazaryan\/"],"url":"https:\/\/10web.io\/blog\/author\/tigran\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts\/37506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/comments?post=37506"}],"version-history":[{"count":0,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/posts\/37506\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/media\/34895"}],"wp:attachment":[{"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/media?parent=37506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/categories?post=37506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/10web.io\/blog\/wp-json\/wp\/v2\/tags?post=37506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}