How to Create a Child Theme in WordPress, Step by Step
- Step 1: Create a child theme folder.
- Step 2: Create a stylesheet for your child theme.
- Step 3: Enqueue the parent and child themes’ stylesheets.
- Step 4: Install and activate your child theme.
- Step 5: Customize your child theme.
- 1 How do you create a child theme?
- 2 What is a child theme in WordPress and how we can create it?
- 3 What is a child theme?
- 4 What is the purpose of using a child theme in WordPress?
- 5 How do you update a child theme in WordPress?
- 6 Do I need child Theme?
- 7 How do you make a Neve child Theme?
- 8 Where is the child theme in WordPress?
- 9 What is the difference between WordPress theme and child theme?
- 10 Which of these are the minimum files required to make a child theme?
- 11 How do I customize my WordPress Theme?
- 12 How do you add a custom CSS to a child Theme?
- 13 How to Create a WordPress Child Theme (Beginner’s Guide)
- 14 Child Themes
- 15 What is a Parent Theme?What is a Parent Theme?
- 16 What is a Child Theme?What is a Child Theme?
- 17 How to Create a Child ThemeHow to Create a Child Theme
- 18 Adding Template FilesAdding Template Files
- 19 Using functions.phpUsing functions.php
- 20 Referencing or Including Other FilesReferencing or Including Other Files
- 21 Enqueueing Styles and ScriptsEnqueueing Styles and Scripts
- 22 Special ConsiderationsSpecial Considerations
- 23 How to Create a WordPress Child Theme: A Step-by-Step Guide
- 24 What is a parent theme in WordPress?
- 25 What is a child theme in WordPress?
- 26 How to Create a Child Theme in WordPress, Step by Step
- 27 WordPress Child Theme Not Working
- 28 Create Your WordPress Child Theme
- 29 How to Create and Customize a WordPress Child Theme
- 30 Why You Should Use WordPress Child Themes
- 31 How WordPress Child Themes Work
- 32 Creating a Child Theme in WordPress
- 33 Customizing Your Child Theme
- 34 Conclusion
How do you create a child theme?
Navigate to public_html -> wp-content -> themes folder. Create a New Folder by clicking its icon on the upper menu. Enter your child theme’s name and click Create. It’s recommended to use the parent theme’s name followed by a -child suffix.
What is a child theme in WordPress and how we can create it?
A child theme is a WordPress theme that inherits the functionality, features, and style of another WordPress theme, the parent theme. You can then customize the child theme without making any changes to the parent theme. Child themes are the best way to customize a WordPress theme because they save time and effort.
What is a child theme?
A child theme, as defined by the WordPress Codex, is a theme that “inherits the functionality and styling of another theme, called the parent theme.” Child themes are recommended to modify existing themes while still maintaining their design and code.
What is the purpose of using a child theme in WordPress?
What is: Child Theme. A child theme in WordPress is a sub theme that inherits all the functionality, features, and style of its parent theme. Child themes are a safe way to modify a WordPress theme without actually making any changes to the parent theme’s files.
How do you update a child theme in WordPress?
CUSTOMIZING & UPDATING YOUR CHILD THEME
- Go to Appearance > Editor and select the child theme you want to edit and click on the Style.
- Copy the code snippet you wish to edit.
- Go to Divi > Theme Options and add the code snippet to the Custom CSS box.
- Go back to the child theme stylesheet and delete the code snippet.
Do I need child Theme?
You need a child theme if you want to change files of your theme. If you have to make a lot of CSS adjustments, there’s no better way than having a decent editor right in the style. css. It is equal if you constantly have to insert new code for your functions.
How do you make a Neve child Theme?
1. Locate the views folder inside Neve (from the root of the folder go to../wp-content/themes ) and make a copy and pop it inside the child theme’s folder. 2. Make any changes you need in the views folder of the child theme located in../wp-content/themes/neve-child-master.
Where is the child theme in WordPress?
To use your child theme, return to your WordPress dashboard and go to the Appearance > Themes tab. Inside, there should be one theme without a featured image — your child theme. Click on the Activate button next to the theme’s name and open your website as you normally would.
What is the difference between WordPress theme and child theme?
A child theme is a WordPress theme that inherits the functionality, features, and style of another WordPress theme, the parent theme. You can then customize the child theme without making any changes to the parent theme. You can use any WordPress theme as a parent theme, but some themes are more suitable than others.
Which of these are the minimum files required to make a child theme?
Every WordPress child theme must have two files as a minimum: a stylesheet and a functions file. The stylesheet will contain commented out text at the top telling WordPress that this is a child theme and what the parent theme is.
How do I customize my WordPress Theme?
To start customizing your WordPress theme, go to Appearance > Themes. On this page, locate the active theme (Twenty Nineteen in our case) and click on Customize next to its title. On the page that opens, you can modify your WordPress theme in real time.
How do you add a custom CSS to a child Theme?
- Open your WordPress site via FTP. We would recommend you to use FileZilla.
- Navigate to wp-content > themes > astra-child.
- Right-click style.css and select View/Edit.
- Add your code at the bottom of the file and save it.
How to Create a WordPress Child Theme (Beginner’s Guide)
You may choose option 1 and utilize the official Google AdSense plugin to add the advertisements to your WordPress site if the preceding code is too complex to understand. You will find it much easier to use, and you will not have to make any changes to your website files. It is possible to utilize the code templates above to have greater control over your advertisements if you are comfortable altering yourfunctions.phpfile. However, it’s always a good idea to employ RESPONSIVE AD UNITS to ensure that your advertisements appear correctly on both your desktop and mobile websites.
Why Do You Need a Child Theme?
A WordPress theme that inherits the functionality, features, and aesthetic of another WordPress theme, known as the parent theme, is known as a child theme. This allows you to adjust the child theme without having to make any modifications to the parent theme. Due to the fact that they save both time and effort, child themes are the most effective approach to alter a WordPress theme. Because the parent theme already has a great deal of formatting and functionality, you won’t have to spend time coding everything from the ground up.
Because you made changes to the child theme rather than the parent theme, you will not lose any customizations when the parent theme is updated.
Before You Start Creating a Child Theme
It is important to understand that you will be working with code while creating a child theme. You’ll need a fundamental grasp of HTML and CSS in order to determine what modifications you’ll need to make to the code in order to achieve your objectives. A working understanding of PHP is also advantageous. You should be familiar with the process of copying and pasting code snippets from various sources. We propose that you practice in your own local development environment before moving on. A live WordPress site may be moved to a local server for testing reasons, and fake content can be used to design a theme on the fly.
You should select a parent theme that is visually and functionally comparable to your ultimate aim.
We’ll be using the Twenty Twenty-One theme, which is one of the basic WordPress themes, for the purposes of this post.
Creating Your First Child Theme
Manually developing a child theme involves generating the necessary folders and files in your WordPress installation. Alternatively, you may use a plugin to build a child theme. You will benefit from using the manual way since it will allow you to become more familiar with the files you will be working with later in the training.
If you are having difficulty producing those files, the plugin technique might be utilized. There is just one way that must be used, and you may skip to the approach that you like by clicking on the buttons below.
- Method 1: Using code to create a child theme
- 2nd method: Using a plugin, you may create a child theme.
Method 1: Creating a Theme for a Child Making Use of Code To begin, navigate to /wp-content/themes/ in your WordPress installation folder and create a new folder for your child theme in the directory you just created. You have complete freedom to name this folder whatever you wish. We will refer to this lesson as wpbdemo for the time being. You must next generate the first two files for your child theme, which are described further on in this section. Open a text editor, such as Notepad, to get started.
- Description:A Twenty Twenty-One child theme for WordPress.
- It is permissible to modify this code in order to match your specific demands because it provides information about the child theme.
- This is the primary stylesheet for your child theme.
- This may be accomplished by creating a new document in your text editor and pasting the following code into it.
- Using a different parent theme requires you to utilize different code, which is explained in the WordPress Theme Handbook.
- Save this file as functions.php in the child theme folder where it belongs.
- Note: In the past, the parent theme was imported into the child theme’s style.css file using the @import command.
When you go to Appearance » Themes, you should see the WPB Child Theme, which is a very simple child theme you built before.
Because you haven’t made any changes to your child theme yet, your site will continue to use the functionality and appearance of its parent theme until you do.
Method 2: Creating a Child Theme for Your Website Using a Plugin is a good idea.
The first step is to install and activate theChild Theme Configuratorplugin, which is available for download here.
After activating the theme, you must go to Tools » Child Themes in your WordPress dashboard to see it in action.
We’re going to go with the Twenty Twenty-One motif.
Twenty-two is a wonderful number.
We’ll stick with the default configuration.
Once again, we’ll stick with the default configuration.
After that, you may customize your child theme by entering the necessary information.
A duplicate of them may be copied from the parent theme to the child theme with the help of the Child Theme Configurator.
Finally, click the button to begin the process of creating your new children theme.
These are the css and functions.php files that you’ll be using to personalize your theme later on.
If everything appears to be working properly, click the ActivatePublish button, and your child theme will be activated and made available for use. At this point, the child theme will be identical in appearance and behavior to the parent theme. After that, we’ll start working on customizing it.
Customizing Your Child Theme
Now we’ll alter the child theme so that it seems to be a bit different from the parent theme in appearance. This is accomplished by the addition of code to the style.css file, which necessitates some experience with CSS. Copying and editing the current code from the parent theme may make the process much quicker and more efficient. If you don’t know where to look, you can copy the code straight from the style.css file of the parent theme or by using the Chrome or Firefox Inspector. Using the Inspector in Chrome or Firefox to copy code is Method 1.
- These tools enable you to examine the HTML and CSS code that is hidden behind any element of a web page.
- This will divide the screen of your browser into two sections.
- In some cases, depending on your browser’s preferences, the HTML and CSS may show on the right-hand side of the screen.
- As an added bonus, it will display the CSS rules that are associated with the highlighted element.
- Let’s try altering the background color of the body tofdf8ef to see if it makes a difference.
- This CSS rule must be copied and pasted into the style.css file of your child theme in order for it to be permanently applied.
- You may go on to repeat the procedure for any other changes you wish to make to your theme’s stylesheet as well.
- Feel free to play with it and make changes to it.
*/.site-title color:7d7b77;.site-description color:aba8a2; */.site-description color:aba8a2; */.site-description color:aba8a2; */.site-description color:aba8a2; */.site-description color:aba8a2; */.site-description color:aba8a2; */ body background-color:fdf8ef;color:7d7b77; body> .entry-footer.color:aba8a2;.entry-footer.color:aba8a2;.entry-footer.entry-footer.entry-footer.entry-footer.entry-footer.entry-footer.entry-footer.entry-footer.entry-footer.entry-footer.entry-footer.entry .entry-title color:aba8a2;font-weight: bold;.widget-area color:7d7b77;.widget-area-color:7d7b77; Method 2: Copying Code from the style.css file of the parent theme You may also copy some code directly from the style.css file of the parent theme if necessary.
- You may then copy and paste it into the style.css file of the child theme and make changes to it.
- To give an example, when we changed the background color of the page above, the original code was:background-color: var(-global-color-background); for more information, see the section on Background Colors.
- The variable can be utilized in a number of different places during the theme’s development.
- The style.css file must be opened in your text editor once you have navigated to the /wp-content/themes/twentytwentyone directory within your WordPress installation folder.
- var(-global-color-green); -global-color-background: var(-global-color-green); We learn that the variable is defined by still another variable, which is somewhat surprising!
- Colors used in the Twenty Twenty-One theme are represented by the following color palette.
- You just copy and paste the code from the style.css file into the style.css file of your child theme.
- Those colors will subsequently be utilized in many locations across your child theme as a result of the automated placement feature.
- Take a chance and try something new.
- You may repeat the process for any other variables.
The fashion sense of Twenty Twenty-One. CSS defines variables for font families and sizes, headers, line spacing, and other aspects of a website’s design. You can use any of these as inspiration for your new look. You may alter them by editing the css file.
Editing the Template Files
Each WordPress theme has a unique design and a varied layout. Taking the Twenty-One theme as an example, it features a header section, a content loop section, a footer widget area, and a footer section. A distinct file in the twentytwentyone folder is responsible for handling each element of the project. Templates are the files that contain this information. Templates are often given names based on the region in which they are employed. Footer sections, for example, are handled by the footer.php file, while the header and navigation regions are handled by the header.php file, among other things.
- If you want to make changes to a template, you must first locate the template file in the parent theme folder and copy it to the child theme folder before proceeding.
- As part of this lesson, we’ll move the footer.php file from the parent theme folder to the child theme folder and back again.
- As an example, we’ll remove the ‘Proudly powered by WordPress’ link from the footer area of the website and replace it with a message about copyright violations.
- div class=”powered-by”?phpprintf(/* translators: div class=”powered-by”?phpprintf(/* translators: esc html (‘Proudly driven by percent s.’, ‘twentytwentyone’),’ a href=”‘.
- ‘” WordPress /a ‘);?/div!
- -.made possible by – Then you’ll need to copy and paste the code that appears below those tags in the following example.
- All intellectual property rights are retained.
Adding New Functionality to Your Child Theme
The functions.php file in a theme makes use of PHPcode to add functionality to a WordPress site or to tweak the default functionalities. It works similarly to a plugin for your WordPress site, except that it is automatically enabled in conjunction with your current theme. Many WordPress tutorials will instruct you to copy and paste code snippets into functions.php, which you should avoid doing. However, if you include it in the parent theme, it will be overridden anytime a new update to the theme is installed.
- In this article, we’ll show you how to add a new widget section to your WordPress theme.
- ?php / Sidebars are registered using the Register Sidebars function.
- Aside from the class=”widget-title” and “after title” attributes, the following attributes are also present: /h3 and “before widget” attributes.
- More information on adding widget areas can be found in our tutorial on how to add dynamic widget ready sections and sidebars to your WordPress website.
There are a plethora of other elements that you may incorporate into your theme by utilizing customized code snippets. See these 25+ really helpful hacks for the WordPress functions file, which you can find on this page.
If you’ve never developed a child theme before, there’s a strong possibility you’ll make a few blunders during the process. Just make sure you don’t quit up too soon. Check out our list of the most frequent WordPress issues to see if you can discover a solution. The most frequent problems you’ll most likely encounter are syntax errors, which are caused by anything you overlooked when writing the code. You’ll find assistance in resolving these difficulties in our short instruction on how to identify and correct the syntax mistake in WordPress.
For example, if you unintentionally removed a file that was required by your parent theme, you may simply erase the file from your child theme and begin the process again.
You may also be interested in learning how to select the finest website builder or reviewing our list of must-have plugins to help your site develop.
On top of that, you can follow us on Twitter and Facebook.
A child theme allows you to make minor changes to the design of your site while still maintaining the overall look and functionality of your theme. First and foremost, it is necessary to comprehend the link between parent and child themes in order to comprehend how child themes function.
What is a Parent Theme?What is a Parent Theme?
A parent theme is a full theme that includes all of the WordPress template files and assets that are necessary for the theme to function properly. All themes, with the exception of child themes, are referred to as parent themes. a b c d
What is a Child Theme?What is a Child Theme?
Similarly to what was described in the overview, a child theme inherits the appearance and feel of the parent theme as well as all of its functionality, but it also has the capability of making changes to any element of the theme. Customizations are maintained separate from the files that make up the parent theme in this manner. Utilizing child themes allows you to change the parent theme without having to worry about your own modifications to your website. Themes for children:
- Provide portability and reproducibility for your modifications
- Keep customization separate from parent theme functions
- Allow parent themes to be updated without destroying your modifications
- Allow you to take advantage of the effort and testing put into the parent theme
- Reduce development time by not having to reinvent the wheel
- They are an excellent method to begin learning about theme creation
Note: If you are making major adjustments – that go beyond styles and a few theme files – developing a parent theme may be a better alternative than using a child theme to accomplish your goals. Creating a parent theme enables you to avoid future difficulties with deprecated code by separating them from the child theme. This must be determined on an individual case-by-case basis. a b c d
How to Create a Child ThemeHow to Create a Child Theme
To begin, create a new folder in your themes directory, which can be found atwp-content/themes/default.php.
A name for the directory is required. Using the same name as the parent theme, but adding the prefix with-childappended, is considered best practice. Using the example above, if you were creating a child theme for thetwentyfifteen theme, the directory would be namedtwentyfifteen-child. a b c d
2. Create a stylesheet: style.css2. Create a stylesheet: style.css
In order to control the appearance of your theme, you’ll need to create a stylesheet file named style.css, which will contain all of the CSS rules and declarations that are necessary. Your stylesheet must include the required header comment, which is listed below, at the very top of the file. This provides WordPress with some basic information about the theme, such as the fact that it is a child theme of a specific parent theme. /* Twenty-fifth Child is the theme for this year. Theme URI (Unique Resource Identifier): The Twenty-Fifteenth Child Theme is described as follows: John Doe is the author of this piece.
License URI:Tags:light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain:twentyfifteenchild */ Expand complete source code Collapse complete source code The following information is required:
- The name of your theme must be distinct from any other themes
- Template – the name of the theme directory that contains the template. The Twenty Fifteen theme is the parent theme in our example, and the Template will be named betwentyfifteen to reflect this. You could be working with a different theme, so make the necessary adjustments.
Fill in the blanks with the remaining information, if appropriate. However, in order for styles to be properly enqueued, the functions.php file must also be included in the child theme folder (below). a b c d
3. Enqueue stylesheet3. Enqueue stylesheet
After that, if necessary, enqueue the stylesheets for both the parent theme and the child theme. Note:In the past, it was usual practice to import the parent theme’s stylesheet by calling @importinsidestyle.css from inside the child theme. The use of this technique is no longer encouraged since it increases the amount of time it takes for style sheets to be loaded. Furthermore, it is possible for the parent stylesheet to be loaded more than once. When enqueuing stylesheets, the ideal situation is for the parent theme to load both (the parent’s and the child’s), however this is not always the case.
It is the first argument of wp enqueue style that specifies the handle ().
- The child theme is loaded before the parent theme
- Everything is tied to an action with a priority (the default is 10) but the actions with the same priority are executed in the order in which they were loaded
- And everything is linked to a function with a priority (the default is 10) Only the first call towp enqueue style() is significant for each handle (all subsequent calls are discarded)
- The dependency argument ofwp enqueue style() has an effect on the sequence in which styles are loaded
- In the absence of a version number, site users will receive whatever their browser has cached, rather than the most recent version
- Using a function to get the theme’s version will return the active theme’s version (or the child theme’s version if there is a child)
- The functions namedget stylesheet * look for a child theme first and then the parent theme
The recommended method for enqueuing stylesheets is to include the methods awp enqueue scriptsaction and usewp enqueue style() in your child theme’s functions.php file. If you do not already have one, create afunctions.php in the directory containing your child theme. The first line of your child theme’sfunctions.php will have an opening PHP tag (?php), following which you may add the PHP code that corresponds to the functionality of your parent theme’s functions.php. Unless both stylesheets are loaded by the parent theme, there is nothing the child theme can do to help.
- addition of an action to the wp enqueue scripts and my theme enqueue styles functions.
- Make careful to use the same handle name that the parent does for the child styles in order to avoid confusion.
- $theme = wp get theme(); wp enqueue style($parenthandle, get template directory uri().
- ‘/style.css’,array); (), / If the parent theme code contains a dependence, transfer that dependency to this location.
Obtain the whole source code Full source code should be collapsed. a b c d
4. Install child theme4. Install child theme
Install the child theme in the same way you would any other theme. The folder may be copied to the site via FTP, but it is also possible to make a zip file of the child theme folder, selecting the option to keep folder structure, and then upload the zip file using the AppearanceThemesAdd New button. a b c d
5. Activate child theme5. Activate child theme
Your child theme is now complete and ready to be used. Go to the Administration Screen of your website and select Administration ScreenAppearanceThemes from the drop-down menu. Your child theme should be listed and ready to be activated at this point. It may be necessary to move to your network Administration Screen in order to enable the theme if your WordPress installation has multi-site functionality enabled (within the Network Admin Themes Screen tab). To activate your child theme, you may then return to your website’s WordPress Administration Screen.) Note: After activating the child theme, you may need to re-save your menu from AppearanceMenusand theme parameters (including background and header images) in order for them to take effect.
Adding Template FilesAdding Template Files
Any file you add to your child theme, with the exception of the functions.php file (as previously mentioned), will overwrite the identical file in the parent theme. To make changes to template files from a parent theme, it’s usually better to make a duplicate of them and then make your changes to the copied files while keeping the original files unaltered. For example, if you wanted to make changes to the code in the header.php file of the parent theme, you would transfer the file to your child theme folder and make the modifications there.
For example, you could wish to develop a template that is more specialized than the one that is included in your parent theme, such as a template for a certain page or category archive (e.g.
Check out theTemplate Hierarchypage for additional details on how WordPress decides which template to use in each situation.
Using functions.phpUsing functions.php
In contrast to the style.css of a parent theme, the functions.php of a child theme does not override the equivalent from the parent theme. Instead, it is loaded in addition to the functions.php file of the parent. (More specifically, it is loaded immediately before the parent’s file.) Using the functions.php file in the functions.php of the child theme gives a convenient and trouble-free approach to adjust the functionality of a parent theme. Consider the following scenario: you wish to include a PHP function in your theme.
- However, doing so is not a good idea because your function will be removed the next time your theme is updated.
- The function will perform exactly the same functions from that location as well, with the added benefit of not being impacted by future revisions to the parent theme.
- This is a common mistake.
- You are free to include as many or as few functionalities as you like in it.
- ?php / This is the beginning of the PHP tag; nothing, not even whitespace, should come before it.
“n”;’add action(‘wp head’,’my favicon link’);’add action(‘wp head’,’my favicon link’);’add action(‘wp head’,’my favicon link’); Because the functions.php file of a child theme is loaded first, you may make the user functions of your theme pluggable — that is, replaceable by a child theme— by defining them conditionally.
In this method, a child theme may simply declare a PHP function that is used by the parent theme, and the child theme can then replace it. More information regarding what should be included in your child theme’s functions.phpfile may be found on theTheme Functionspage of this website. a b c d
Referencing or Including Other FilesReferencing or Including Other Files
When you need to include files that are located within the directory structure of your child theme, you will need to utilize the get stylesheet directory function (). Because thestyle.css is located at the root of your child theme’s subfolder, get stylesheet directory() returns the directory containing your child theme’s stylesheets (rather than the directory containing the parent theme’s stylesheets). Instead of using get template directory(), you would use get template directory() to refer to the parent theme directory.
/images/my picture.png” alt=”” /Unlikeget stylesheet directory(), which returns a file path,get stylesheet directory uri() returns a URL, which is useful for front a b c d
Enqueueing Styles and ScriptsEnqueueing Styles and Scripts
‘/style.css’, false, ‘1.0’, “php wp enqueue scripts”); “php wp a b c d
Special ConsiderationsSpecial Considerations
The post formats established by the parent theme are passed down to the child theme. However, while developing child themes, keep in mind that using add theme support(‘post-formats’) will overwrite the post formats provided by the parent theme rather than adding to them. a b c d
RTL SupportRTL Support
Add the following to your child theme’s artl.css file to enable support for RTL languages:/ * Theme Name: Twenty Fifteen Child Template: twentyfifteen */ Theme Description: Twenty Fifteen No matter whether the parent theme does not have a rtl.cssfile, it is advised that you include the thertl.ccssfile in your child theme. WordPress will only auto-load thertl.cssfile if the is rtl() function returns true. a b c d
Child themes may be prepared for translation into other languages by including the WordPressInternationalization API into their design. When it comes to the globalization of children’s themes, there are several unique issues. The following procedures should be followed in order to internationalize a child theme: 1. Create a language directory in your project. 2. Include language files in your project.
- Instead of domain-he IL.xx, your filenames must behe IL.pohe IL.mo (depending on your language), whereas plugin files aredomain-he IL.xx
3. Load a textdomain into memory
- During the after setup theme operation, make use of the load child theme textdomain() method in functions.php. The text domain given in load child theme textdomain() should be used to translate all strings in the child theme
- Otherwise, the parent theme should be utilized.
4. To add internationalization support to your strings, use the GetText methods. a b c d
Example: textdomainExample: textdomain
?php /** * Configure the textdomain for My Child Theme. * * Declare the textdomain for this child theme. * * Translations can be added to the /languages/ directory in the /languages/ directory. */ a procedure twentyfifteenchild theme setup() load child theme textdomain(‘twentyfifteenchild’, get stylesheet directory(). ‘/languages’); add action(‘after setup theme’, ‘twentyfifteenchild theme setup’); twentyfifteenchild theme setup() load child theme textdomain(‘twentyfifteenchild At this stage, the strings in the child theme are ready to be translated into another language.
a b c d
Example: gettext functionsExample: gettext functions
Here’s an example of how to use the phrase “Code is Poetry” in your code: Code is Poetry is defined as: esc html e(“Code is Poetry”, ‘twentyfifteenchild”); The text domain supplied in load child theme textdomain() should be used to translate all strings in the child theme, unless another text domain has been specified. A template file from the parent theme should be included if one exists. The textdomain should be updated from the one defined in the parent theme to the one defined by the child theme in this case.
How to Create a WordPress Child Theme: A Step-by-Step Guide
Using the statement “Code is Poetry” as an example, consider the following: Code is Poetry is defined as: esc html e(“Code is Poetry,” “twentyfifteenchild”); All strings in the child theme should be translated using the text domain set in load child theme textdomain(). In the case that a template file from the parent theme has been included, the textdomain should be changed from the one set in the parent theme to the one declared by the child theme to avoid conflicts.
What is a parent theme in WordPress?
What is a child theme in WordPress?
Child themes are sub-themes that inherit the appearance and feel as well as the functionality of their parent themes (also known as parent themes). When you make changes to the child theme, those changes are maintained separate from the parent theme’s files so that they are not overwritten.
Benefits of Creating a Child Theme
For starters, and perhaps most crucially, establishing a child theme allows you to update the parent theme without losing any of your customized settings. Unless you were using a child theme, you’d have to alter your theme files directly, and every time you updated the theme, your adjustments would be lost. As a consequence, you’d be forced to make an untenable choice: either you don’t maintain your theme up to date, which poses a significant security risk, or you lose your modifications and the work you put into them.
- This makes it much easier to copy or transfer these customizations between sites if they are kept in a different folder from your theme.
- Whenever you begin customizing your child theme, you may simply disable the child theme if something goes wrong or if you are not satisfied with the results.
- Creating a child theme, on the other hand, is not always the ideal solution.
- However, if you’re going to be making major changes to the theme’s functionality, it’s best to either create a parent theme from scratch or choose an option that already includes a child theme that you can alter instantly.
Let’s walk through the process of developing and modifying a child theme now that we’ve learned about the advantages of doing so and the perfect use cases for doing so.
How to Create a Child Theme in WordPress, Step by Step
Creating a child theme in WordPress is a simple process that only requires a few steps. To make it easier for you to follow along, we’ll go through each one in detail below. As an example, this demo will make use of the Twenty Twenty-One WordPress theme, which is the default theme.
Step 1: Create a child theme folder.
First and foremost, you’ll want to establish a folder in which you can store all of the template files and other elements associated with your child theme. To create this folder, you’ll need to go into the control panel of your WordPress hosting provider and navigate to File Manager. Image courtesy of Shutterstock After you’ve launched File Manager, navigate to the public html directory. Then navigate to the wp-content directory. Image courtesy of Shutterstock Navigate to the “themes” folder in your computer’s file system.
Image courtesy of Shutterstock The name of this folder should be the same as the parent theme’s name, with the suffix “-child” added at the end.
Step 2: Create a stylesheet for your child theme.
In order to use your child theme, you’ll need to build a stylesheet file that contains all of the CSS rules and declarations for it. Create a new text file with the name “style.css” in order to do this. In order for the CSS to function properly, you’ll need to include a mandatory header comment at the very beginning of the file. This remark offers the most basic information about the child theme, such as the fact that it is a child theme of a certain parent theme. There are basically just two things you need to include: the theme name and the template (which is the same as the parent theme’s name).
- If you plan to publish or sell your child theme, it is critical that you include these additional facts.
- Author URI:Template: twentytwentyoneVersion: 1.0.0License: GNU General Public License version 2 or later Author URI:Template: twentytwentyone License URI (Uniform Resource Locator): two-column, responsive-layout are some of the terms used.
- Keep an eye out for the slashes and asterisks.
- When you’re ready to start modifying your child theme, you may add custom CSS to the top of the page.
Step 3: Enqueue the parent and child themes’ stylesheets.
You will then need to build a stylesheet file that will include all of the CSS rules and declarations for your child theme. Create a new text file with the name “style.css” and save it to your computer. The CSS will not function properly unless you include a mandatory header comment at the very beginning of the file. A brief description of the kid theme is provided in this comment, which includes the fact that it is a child theme of a certain parent theme. Two items are absolutely necessary: the theme name and the template (i.e.
Other information, such as a description, the author’s name, the version number, and tags, can be included.
For the sake of illustration, below is an example of a whole header comment for a Twenty Twenty-One child theme: Two hundred and twenty-one (221)Theme Twenty Twenty-One Child Theme (URI:Description) Anna Fitzgerald is the author of this story.
Keep an eye out for the slashes and asterisks in this sentence.
As a result, WordPress won’t attempt to run this code since it will be “commented out” in CSS. When you’re ready to start modifying your child theme, you may go back and apply custom CSS. To store this stylesheet in your child theme’s directory for the time being, click Save.
Step 4: Install and activate your child theme.
A child theme is installed in the same way that any other theme is installed. You have two options: you can either copy the folder to the site using FTP or you can create and upload a zip file containing the child theme folder to the site using FTP. To upload the file, navigate to your WordPress dashboard and select AppearanceThemesUpload from the drop-down menu. Then navigate to the directory containing your child theme. Once the file has been uploaded, click Activate. The good news is that your child theme is now operational!
It’s time to get creative with your design.
Step 5: Customize your child theme.
It is the same process as installing any other theme to install a child theme. Alternatively, you may build and upload a zip file containing the child theme folder, or you can transfer the folder to your website using FTP. Click on AppearanceThemesUpload from within your WordPress dashboard to begin the upload process. Afterwards, navigate to the directory containing your child theme Once the file has been uploaded, click Activate to begin using it. We have some exciting news: your kid theme is now available!
We have reached the point of personalization.
WordPress Child Theme Not Working
Is your child theme not functioning properly? Here are some things to keep an eye out for.
1. Double-check your functions.php file.
Check to see that the stylesheet for your child theme has been enqueued in your functions.php file. You won’t be able to use your child theme until you have enqueued it. Your site will continue to use the parent theme, so it will appear to be in good shape; the problem is that any changes you make to the child theme will not be shown on the front end. Refer to step 3 above for instructions on how to include the enqueuing code in your PHP file.
2. Ensure you named the sheet “style.css.”
Check to see that your CSS sheet is titled “style.css” rather than “stylesheet.css,” and that you haven’t named it anything else. Because “style.css” is the WordPress standard naming convention, identifying your stylesheet with that name will allow your functions.php file to recognize that it is your stylesheet without any further effort. Otherwise, the functions.php file will be unable to locate and render the stylesheet for the end-user if you name it anything else than stylesheet1.
3. Clear your cache.
Try emptying your WordPress cache—your browser may be seeing an outdated version of your site because of this. Alternatively, you may access your website in an incognito window to check on the modifications that have been made. For the time being, remove any caching plugins you’ve installed to speed up your website’s performance while developing your child theme.
4. Add!important to your CSS code.
To prevent your child theme’s CSS code from being overwritten by the parent theme, add the qualifier!important to the elements that you modified. This will force anything is stated in the CSS sheet of the parent theme to be overridden by the child theme. You’d put the exclamation point!important right before the semicolon, like in: Identification, CSS classes, as well as common HTML elements like paragraphs, tables, headers, and more may all be utilized with the!important rule.
For more information on this property, see How to Use the!important Property in CSS for more information.
5. Contact your theme’s support or check the theme forum.
You should contact the support team for your theme or look into the theme’s discussion forum on WordPress.org if after following all of these procedures the CSS still does not appear to be loading. While this should only be used as a last option, it has the advantage of providing you with responses that are particular to your subject. Your WordPress theme’s developer may have used custom code or implemented a different naming scheme for the theme files than what was provided by the WordPress framework.
Create Your WordPress Child Theme
Installing a WordPress theme is a fantastic initial step in the process of developing a WordPress website from scratch. You may change it by using the built-in Gutenberg editor or your theme builder, whichever you choose (if it comes with one). In order to go even farther and personalize not only the appearance of the theme but also its functionality, you will need to develop a child theme. Note from the editor: This piece was initially published in October 2020 and has been revised to ensure it is as complete as possible.
How to Create and Customize a WordPress Child Theme
The ninth of March in the year 2021 Domantas G.Read for 5 minutes If you like your existing theme but wish to change some of its features or the way it looks, the correct method to do it is by customizing a child theme that is based on it. We’ll go over why this technique is vital, and we’ll walk you through the process of creating and editing a WordPress child theme, regardless of your technical ability.
Why You Should Use WordPress Child Themes
Because a child theme inherits the attributes of a master or parent theme, you may make changes to its code without affecting the operation of the original theme’s code. This way, if a theme is updated, all of the customizations you’ve made will remain intact. Another advantage of using a child theme is that it provides a fail-safe option in the event that you make a mistake with your adjustments. Furthermore, because the files for a child theme are separate from those for its parent theme, it makes it easier to keep track of the elements that have been modified.
How WordPress Child Themes Work
As previously mentioned, a child theme is placed in a different directory from the parent theme, with its own style.css and functions.php files, as opposed to the parent theme’s. Nonetheless, you may choose to include more files if necessary; however, those two files are the absolute least required for a child theme to operate effectively. You may edit everything from style and layout settings to actual code and scripts utilized by a child theme using the relevant.css and.php files, even if the characteristics aren’t included in the parent theme.
When a visitor accesses your website, WordPress first loads the sub-theme and then fills in the gaps with styles and functionalities from the master theme, if needed.
Creating a Child Theme in WordPress
The following instructions make use of the number Twenty Seventeen as a starting point.
If you like, you can switch to a different theme. FTPworks will also be used to upload and modify the files, as will Hostinger’sFile Manager to manage the entire process. The following steps will show you how to build a child theme in WordPress, so read on!
- Navigate to your hPanel and choose File Manager. Navigate to the public html-wp-content-themesfolder and click on it. Create a New Folder by selecting it from the top menu’s icon bar. Create a new child theme by entering the name of the theme you want to use. It is advised that you use the name of the parent theme followed by the suffix a-childsuffix. Twenty-seventeen-child is the name we gave to the folder in this example. IMPORTANT: In order to avoid problems, hyphens (-) should be used to replace any spaces in a folder or file name. Create the astyle.css file at the root of the folder. Fill in the blanks with the following snippet of code: /* Twenty Seventeen Child is the theme for this year. Twenty Seventeen Child is the theme’s URL and description. Author of the theme: Your Name Template: twentyseventeen Author URL: twentyseventeen 1.0.0 is the current version. Twenty-seventeen-child*/ is the text domain. Make the necessary adjustments to all of the values. Because it tells WordPress which parent theme your child theme is based on, the most critical field to fill out is Template. Once you’ve finished, click Save and Close. Create a new file titled functions.php in the same folder, but do not overwrite any of the code from the parent theme’s file since it has to be kept distinct from the parent theme. Replace it with the following code, which should be copied and pasted into a blank file and saved: ?php add action(‘wp enqueue scripts’, ‘enqueue parent styles’)
- Function enqueue parent styles()
- Wp enqueue style(‘parent-style’, get template directory uri().’/style.css’)
- Wp enqueue style(‘parent-style’, get template directory uri(). AccessAppearance-Theme on your website by going to it. When you activate the child theme you just created, you will notice that it appears just like the parent theme
In this example, you can see that building a WordPress child theme is no more difficult than working with a master theme.
Customizing Your Child Theme
When it comes to customizing your child theme, you’ll need a basic comprehension of CSS principles as well as knowledge of how to examine components in order to identify their CSS code and the class that they’ve been allocated to. Let’s take a look at the fundamentals of personalizing one right now. To do so, go to Customize-Additional CSS in your active child theme and select the appropriate option.
Changing Background Color
If you want to alter the background color of your WordPress child theme, you should include the following CSS rule in your code: .site-content-contain: DEF0F5 as the background color, and relative positioning as the location of the content on the site. This is the value that appears next to background-color: and corresponds to the hex code of the color you select. Because we are altering the color from white to light blue in this example, the end result looks like this:
Changing Sidebar Color
You may make your widgets look more appealing by adding some color to the sidebar using the CSS code provided below:. widget with a background color of B9EBFA and padding of 25px; Again, don’t forget to make the necessary changes to the color code. You should receive something like this as a result:
Changing Font Types, Sizes, and Colors
Insert the following code into your WordPress child theme to alter the font type, size, and color of your theme. teal is the color of the p; p p font-family: Georgia; font-size: 18px; p p font-family: Georgia; p font-size: 18px Theptag is an abbreviation for paragraph. Using the values supplied in the previous rule, the typefaces in the paragraph were modified in appearance, as seen in the example below. For other text components, such as the title or the header, first check the elements to find their CSS parameters, and then make the desired changes.
- The first step is to right-click on the text and chooseInspect. Find the CSS style link and click on it to open it in a new tab. Using the CTRL+F keyboard shortcut, locate the precise area you are searching for and copy the code to theAdditional CSS tab. Make the necessary adjustments to the values
If there are any additional aspects you would like to update, you may do the same thing.
Changing the Layout of Posts and Pages
Just like custom CSS changes the style of a WordPress child theme’s parent theme, template files allow you to design your own layouts by overriding the default ones. Your replacement template must have the same file name as the original and must be located in the same directories as the original. You should copy the master template file into your WordPress child theme directory and start working from there to avoid confusion. Within the theme’s main folder, you will find the primary template files.
Besides that, Twenty Seventeen divides its templates into template-parts that are referenced in the core template by the WordPress function get template part, which stands for get template part ().
Line 28 of our sample file reads: get template part(‘template-parts/page/content’, ‘page’); get template part(‘template-parts/page/content’, ‘page’); What are we supposed to make of this?
Meanwhile, “content” refers to the character in the file name that appears before the hyphen, while “page” refers to the character that appears after the hyphen.
To modify content-page.php’s layout, you must first copy it to your child theme folder and then paste it in the following location:wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php That’s all there is to it; happy editing!
Adding and Removing Features
Additionally, building a WordPress child theme provides the opportunity to have a separatefunctions.phpfile, which may be used to add (or remove) certain functionality by utilizing PHP code, similar to the way plugins are used to do the same thing. Using the following example, you may disable the right-click functionality in your theme: function your function() If you have any questions, please contact us at [email protected] or [phone number] (document). bind(“contextmenu”,function(e) return false;);/script?php bind(“contextmenu”,function(e) return false;);/script?php bind(“contextmenu”,function(e) return false;);/script?php bind(“contextmenu”,function(e) return false;);/script?php adding a new action to the wp footer and a new function to the ‘your function’
WordPress child themes provide a great approach to develop a completely new project based on the features of an existing master theme without interfering with the theme’s fundamental functionality. With a little easy scripting and directory management, you can customize the child theme to your liking, changing it as little or as much as you like while still giving a broad range of design options. More WordPress development tutorials may be found in our WordPress tutorials area, which can be found here.
Using innovative ideas and out-of-the-box tactics, Domantas drives the content and search engine optimization teams ahead.
Domantas enjoys spending his spare time honing his web development abilities and traveling to interesting locations.