WordPress Child Themes.
Why and how Child WordPress Themes are required!
WordPress Child themes
A child theme in WordPress is a theme that allows extra code to be implemented within an existing parent theme. This allows the parent theme to provide the basis of the theme and can save a lot of development work and time. If you have a well-supported theme but need to edit the theme, then a child theme may help! Changes can be made the theme files such as the functions.php file or the style.css. This can help to make your website appear and function as you want. It is possible to edit a theme within WordPress through the default editor or a code editor plugin. But if the theme is updated you may lose these modifications! Hence the need for a permanent solution!
When you need a child theme
A child theme is used when you need to permanently edit a theme via html or css editor. For many themes, once updated via the WordPress dashboard etc. edited code is written over. This means that any customized code is deleted. Some WordPress themes allow extra code to be added and saved but if your doesn’t then a child theme is a good option. If using an unsupported theme or a custom theme then having a child theme can be used to ensure changes made don’t impact the working theme. Using a child theme is great to style WordPress plugins to match the style of your site. Plugins such as Contact Form 7 can be styled to match your theme. Or perhaps changing the theme itself, such as changing the theme mobile menu drop-down style or to add more than one contact phone number in the header.
Security of WordPress themes
Quite often even the best of purchased or developed themes have security flaws. That is why it is important to update your theme, WordPress platform and other plugins. Updating helps ensure any weakness or exploit is strengthened against attack. When a parent theme is updated, some files can be changed such as the functions.php etc. are written over. Without a child theme, theme styling can be lost. Another benefit of a child theme is that the exact name and version of the parent is not shown. Website details can be easily viewed via a web browser such as Firefox or Chrome.
Using a good parent theme
It is essential to use a good parent WordPress theme! Some themes have very limited functionality. So the child theme may end up containing more code than the parent theme. The child theme should be considered as a tweaking tool, and not a major overhaul of the chosen parent theme. Selecting a fully functional theme is better than a theme with the correct initial look. The ideal theme only requires very few tweaks. Tweaks which are not available through the parent theme options. We build our sites on an excellent proven parent theme. A theme that continues to be developed with added functionality and great support. This allows Fat Dog SEO to produce high-quality reliable sites.
Advantages of WordPress Child Theme
- Great staring point to build a WordPress theme without having to do all the development and build on top of the parent theme.
- Some parent themes have sophisticated frameworks and are ideal candidates to build upon.
- Updating the parent theme is possible without losing modifications which is good for new functionality and features, fixes and security updates through the parent theme.
- Can revert changes of child theme easily if issues occur, keeping the site active using the parent theme.
Dis-advantages of WordPress Child Theme
- Some knowledge of the parent theme is required, but for popular themes there is usually lots of information online or on the support pages to help.
Find out more about our services
How to make a WordPress child theme
There are a couple of things that need to be created and some optional components, here is a brief list:
- Theme folder (required) which includes the following:
- functions.php file (required)
- style.css. file (required)
- screenshot.png – (optional WordPress Themes options > Theme image )
Theme folder
Method 1 – Cpanel
- Access cPanel and click File Manager or create a folder through FTP client.
- Navigate to public_html -> wp-content -> themes folder.
It’s advised to give this folder the name of either your custom theme or name it the parent theme and ‘-child’ example; ‘twentytwenty-child’.
Tip: Use a hyphen (-) instead of spaces in the folder name to avoid potential issues.
Method 2 – FTP
- Create a folder with the correct name and add inside the folder the functions.php, style.css and image (optional) files as shown below.
- Upload to public_html -> wp-content -> themes folder.
It’s advised to give this folder the name of either your custom theme or name it the parent theme and ‘-child’ example; ‘twentytwenty-child’.
Tip: Use a hyphen (-) instead of spaces in the folder name to avoid potential issues.
Functions.php file
Create a file using a text editor such as notepad and copy the following code:
<?php
function my_theme_enqueue_styles(){
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
Save the file as functions.txt. Now in the file explorer change the extension of the file from functions.txt to functions.php.
Style.css File
Create a file using a text editor such as notepad and copy the following code:
/*
Theme Name: Twentytwenty Child
Theme URI: http://yourdomain.com
Description: What ever you want to call your theme
Author: Your company name or website developer name
Author URI: http://yourdomain.com
Template: Twentytwenty
Version: Assign a version number to help with tracking changes example 1.0
*/
/* =Theme customization starts here
——————————————————- */
Save the file as style.txt. Now in the file explorer change the extension of the file from style.css to style.css.
Theme Image
To have a nice image displayed in the themes folder within WordPress you can add a screenshot of the website. Although not essential it is a nice touch and visually displays the theme in use!
WordPress recommends an image size of 1200px wide by 900px tall. If needed the image can be re-sized online or by using a program such as ‘IfranView’. Once the image is of an acceptable size the file must be saved. It is important to save the image with the WordPress default theme image name: ‘screenshot.png‘.
So, That’s the basics, what else!
It’s not just the functions.php and style.css files that can be modified other files such as the template files, this may include items such as the navigation.php etc. However these files require copying from the parent theme in whole and then editing (do not delete the parent copy, as if you need to revert the site won’t work). But for now, the style sheet and functions file combined with a good template theme such as Divi, from Elegant Themes should get you going.
Switching WordPress Themes
Now withing side WordPress, go to the Dashboard > Appearance > Themes > Activate on your newly created child theme. To verify it is working add the required new style or function. If using Divi Theme, then the existing additional CSS code from Divi > Theme Customizer > Additional CSS, can be cut and paste into the child theme style.css file at the bottom of the code.
Whats next?
It is important to remember that CSS, PHP, HTML etc are evolving and over time some code may become depreciated (phased out). If this happens when the parent theme is updated it may require the child theme to be tweaked to take these changes into account.