One of the greatest strengths of WordPress is its ability to customize, something that also happens with WordPress themes. With them, users have a high degree of flexibility in creating and modifying the appearance of their site.
However, creating an entire theme from scratch can be a difficult and time-consuming task. This is why most people prefer to create child themes for their WordPress websites.
This tutorial will explain why this practice is necessary and walk you through creating and editing your first child theme.
Why should you use WordPress child themes?
Using a child theme is one of the most efficient ways to build on an existing one while keeping most of its features. This is because it uses the features and elements of its parent or original theme, so there is no need to code everything from scratch.
Since a child theme inherits the features of a parent theme, it is possible to customize its code without breaking the functionality of the original. That way, if a theme gets an update, all the changes you’ve made won’t be overwritten.
Building a child theme is also relatively easy, since you don’t have to dig too deep into the root files of your site. Tasks like transferring files and customizing CSS files can be done using your dashboard’s file manager and WordPress dashboard.
Child themes also allow you to maintain certain visual aspects of the parent theme and keep them consistent across domains.
Essentials like constant updates and security patches will be covered, especially if you choose a parent theme from a trusted developer.
Another reason to use a child theme is that it offers a fail-safe solution if you ever misconfigure it. In addition, it allows you to efficiently keep track of the parts you have changed, since the files of a child theme are separated from its parent.
How does a WordPress child theme work?
As mentioned before, a child theme is stored in a separate directory from the parent theme, each with its own files. style.css Y functions.php. You can add other files as needed, but those two are the minimum required for a child theme to work properly.
Using the files .css Y .php relevant, you can modify everything from styling, layout parameters to the actual coding and scripts used by a child theme, even if the attributes are not present in your parent theme.
Think of it as an overlay. When a visitor loads your website, WordPress first loads the sub-theme and then fills in the missing styles and features using parts of the master theme.
As a result, you get the best of your custom design without sacrificing the core functionality of the theme.
How to create a child theme or child theme in WordPress
Before you start creating a child theme, keep in mind that basic knowledge of HTML, CSS, and PHP is essential, as the process involves some coding. With the many parent themes available, it’s also important to choose one that suits your needs.
There are two common methods to create a WordPress theme. Users can use a plugin or create a child theme using custom code. Each option has its strengths and weaknesses. In this tutorial, we will focus on creating a basic child theme manually.
We recommend when developing a child theme. Doing so will allow you to make changes to your WordPress site without risk of damaging the live version. It also allows you to create a child theme without having to buy a domain name or a web hosting plan. The following instructions use as the parent theme, although if you prefer it is possible to use another. We are also going to use the File Manager to add and edit files, although it works with FTP as well.
Let’s see the step-by-step guide on how to create a child theme in WordPress:
- Access the control panel and select ‘File Manager‘.
- Navigate between the folders and click public_htm l-> wp-content -> themes. This is where the parent theme and child theme folder will be located.
- Create a child theme directory by clicking the icon New folder from the top menu. Enter a name for your child theme and click To create.
IMPORTANT: replaces spaces in a file name with hyphens (-) to avoid errors.
- create a file style.css in the child theme folder. Complete its content with the following code:
/* Theme Name: Twenty Seventeen Child Theme URI: http://yourdomain.com Description: Twenty Seventeen Child Theme Author: Your Name Author URI: http://yourdomain.com Template: twentyseventeen Version: 1.0.0 Text Domain: twentyseventeen -child License: GNU General Public License or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility- ready */
This code contains basic information about the child theme, such as its name and which theme is used as the parent. Additional details like author and description are mostly used as identifiers if you decide to post the topic.
- Change all values accordingly. The most important field is Template, as it tells WordPress which parent theme your child theme is based on. Once done, click Save and Close.
- In this step, you will enqueue the style sheets of the parent and child themes. Create a PHP file called functions.php in the child theme folder, but don’t fill it with the code from the parent theme file because it must remain separate
IMPORTANT! Skip this step if you use , as the child theme will inherit the global styles from the parent theme’s theme.json file.
Start the code with an opening PHP tag, and then include the functions that will enqueue the parent theme’s style sheet. Take a look at the following example:
Visit your website and access Appearance -> Theme. Activate the child theme you just created and you will notice that it looks the same as the parent theme.
How to customize your WordPress child theme
To customize your child theme, you need a basic knowledge and understanding of CSS rules and how to inspect elements to be able to locate their CSS code and the class they are assigned to.
There are a few methods to customize your child theme. You can change the layout of the page by adding template files to the child theme folder. It is also possible to change the style of the child theme by adding custom CSS code.
Finally, child themes can also have new features that override their parent theme.
Now, let’s walk through the basics of customizing a child theme. To do this, go to Appearance -> Themes and click Personalize in your active child theme. When the open Theme EditorChoose Additional CSS.
Changing the background color
Insert the following CSS rule if you want to change the background color of your WordPress child theme:
.site-content-contain { background-color: #DEF0F5; position:relative; }
The value next to background-color: corresponds to the color you choose. In this example, since we are changing it from white to light blue, the result looks like this:
Change sidebar color
You can create a nice display of your widgets by adding some color to the sidebar with the following CSS code:
.widget { background: #B9EBFA; padding: 25px; }
Again, don’t forget to edit the color code to the color you want. You should get a result like this:
Change font types, sizes, and colors
To change the font type, size, and color of your WordPress child theme, insert the following code:
p { color: teal; } p { font-family: Georgia; font-size: 18px; }
The label p means paragraph. As you can see below, the above rule changed the appearance of the fonts in the paragraph based on the specified values.
To change the font of other parts of the text, like the title or header, inspect the elements to see their CSS parameters first. For the sake of illustration, let’s try changing the font color of the title.
- First, do right click in the text and select To inspect. Locate the link to css-style and open it in a new tab.
- Find the exact part you are looking for using CTRL+F and copy the code in the tab Additional CSS. Change the values based on what you want.
You can do the same with any other element you want to change.
Changing the layout of posts and pages
Just like the custom CSS of a WordPress child theme overrides the styling of your parent theme, template files allow you to create your own layouts by overriding the default ones.
Every WordPress theme has a different layout and page structure, but most of them consist of sections like the header, content, footer, and sidebar.
These sections are controlled by template files that correspond to their function. For example, the header section is usually controlled by the file header.php.
The original template files are located in the main theme folder. If you want to make a WordPress page template, all you have to do is copy the template file to your child theme folder and modify it.
Note that your new template file must have the same name and be in the same folder as the original.
Twenty Seventeen also splits its templates into template parts (template-parts) referenced in the main template using the function get_template_part() from wordpress.
For example, if you want to edit page.php, you can start by locating the parts of the template to see if those are the bits you need to edit. In our example file, line 28 says:
get_template_part( ‘template-parts/page/content’, ‘page’ );
How do we read this? template-parts/page/ is the folder path. In the meantime, “contents” refers to the character in the filename before the hyphen and “page» after the hyphen.
Together they form the complete path wp-content/themes/twentyseventeen/template-parts/page/content-page.php.
Following the structure, if you want to change the layout of content-page.phpyou need to copy it to the child theme folder and place it in this location: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.
Change global styles in WordPress 5.9
Customizing a block-based child theme in WordPress 5.9 is easy. The global styles panel allows you to change the theme color palette and background color without coding
If you want to encode the default styles, create a file theme.json for the child…
Facebook Comments
Disqus