How to Create a #ChildTheme
Let us follow the steps to create a child theme in word press.
Step 1. Create a child theme folder
Create a new folder in your Themes directory located on the wp-content/theme. You must give your directories a name. Giving a child a theme name as a parent is nice, but at the end -sild is included. For example, if you create a child theme of a Creativemaker, the directory will be named Creativemaker-child.
2. Create a stylesheet: style.css
Now you need to create a stylesheet file named style.css which contains all the CSS rules and notices that control the look of your theme. Your stylesheet should have the desired title comment below the top of the file. It tells WordPress basic information about the theme, including whether it is a child theme with a specific parent.
/*
Theme Name: twentyfifteenchild Child Theme
URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author : John Doe
Author URI : http://example.com
Template : Creativemaker
Version : 1.0.0
License : GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
*/
The following information is required:
Theme Name – needs to be unique to your theme
Template – the name of the parent theme directory.
3. Enqueue stylesheet
If necessary, the final step is to deploy the parent and child theme stylesheets.
The best way to get stylesheets is to load both the parent theme (parent and child), but not all themes do this. So, you need to explore to see what the parent theme does and get the handle name that the parent theme uses. The handle is the first parameter of the wp_enqueue_style ().
The recommended way to embed stylesheets is to add a wp_enqueue_scripts function and use wp_enqueue_style () in your child’s theme functions. If you do not have one, create a functions.php in your child theme directory. The first line of your child’s theme activities will be a starting PHP tag (<? Php), after which you can write PHP code according to what your parent theme does.
If the parent theme loads both stylesheets, the child theme does not need to do anything.
If the parent theme loads its style using functionality that starts with get_template, such as Get_template_directory () and get_template_directory_uri (), only child styles should be loaded using the parent handle on the child theme pro parameter.
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(),
array( ‘parenthandle’ ),
wp_get_theme()->get(‘Version’) // this only works if you have Version in the style header
);
}
If the parent theme loads its style using functionality that starts with get_stylesheet, such as get_stylesheet_directory () and get_stylesheet_directory_uri (), the child theme should load both parent and child stylesheets. Don’t forget to use the same handle name that parents make for parenting styles.
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
$parenthandle = ‘parent-style’; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . ‘/style.css’,
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get(‘Version’)
);
wp_enqueue_style( ‘child-style’, get_stylesheet_uri(),
array( $parenthandle ),
$theme->get(‘Version’) // this only works if you have Version in the style header
);
}
4. Install child theme
For Child theme installation; This may be another theme. You can copy the folder to the site using FTP or create the zip file of the child theme folder, select the option to maintain the folder structure and click Appearance> Themes> New to upload the zip file.
5. Activate child theme
Your child theme is now ready to implement. Log in to your site’s admin screen and go to admin screen> Appearance> Themes. You need to have your child theme listed and ready for implementation. If your WordPress installation is enabled on multiple sites, you may need to switch to your network admin screen to activate the theme (within the Network Admin Themes screen tab). Then switch to your site-specific WordPress admin screen. Enable your child theme.
Note:After activating the child theme you may need to save your menu again from Appearance> Menus and theme options (including background and caption images).
(i) Adding Template Files
Except for the function.php file (as mentioned above), any file you add to your child theme will overwrite the same file as the parent theme.
In most cases, it is best to make a copy of the template files you want to transfer from the parent theme, then make your changes to the copied files and leave the parent files unchanged. For example, if you want to change the code of the parent theme’s header.php file, you can copy the file to your child theme folder and customize it there.
Note : There are many plug-ins that allow you to find out what specific template is being used on the page you are looking for.
(ii) Using functions.php
Unlike style.css, the functions.php of the child theme does not exceed its number from the parent. Instead, it is loaded in addition to parenting activities. Php. (Specifically, it will be loaded before the parent file.). Do not copy the entire contents of the parent theme to functions.php in the child theme to functions.php.
Function.php’s configuration is simple: a startup PHP tag at the top, and your PHP bits below it. You can put as many or as few functions as you want in it. The example below shows a basic functions.php file that does one simple thing: add a favicon link to the header element of HTML pages.
<?php // Opening PHP tag – nothing should be before this, not even whitespace
// Custom Function to Include
function my_favicon_link() {
echo <link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />’ . “\n”;
}
add_action( ‘wp_head’, ‘my_favicon_link’ );
Tip:The functions.php of a child theme is loaded first so that the user functions of your theme can be made plugable – that is, child-themed – by declaring them conditionally.
if ( ! function_exists( ‘theme_special_nav’ ) ) {
function theme_special_nav() {
// Do something.
}
}
That way, a child theme can be changed by notifying the parent’s PHP function in advance.
(iii) Referencing or Including Other Files
When you need to add files to your child’s thematic directory framework, you should use get_stylesheet_directory (). Since style.css is at the root of your child’s theme subdomain, get_stylesheet_directory () refers to your child theme directory (not the parent theme directory). You can use get_template_directory () instead to specify the parent theme directory.
Below is an example of how to use get_stylesheet_directory () when referring to a file stored in the child theme directory:
<?php require_once( get_stylesheet_directory(). ‘/my_included_file.php’ ); ?>
Meanwhile, this example uses get_stylesheet_directory_uri() to display an image that is stored within the /images folder in the child theme directory.
<img src=”<?php echo get_stylesheet_directory_uri(); ?>/images/my_picture.png” alt=”” />
Unlike get_stylesheet_directory(), which returns a file path, get_stylesheet_directory_uri() returns a URL, which is useful for front-end assets.
(iv) Enqueuing Styles and Scripts
Each of the scripts and styles must be combined with their own functionality, and then they must be closed into one function. For more information, read the page that includes CSS and JavaScript.
WordPress will not automatically load the front-end style sheet for your child theme. Below is an example of using the wp_enqueue_scripts () action hook to invoke a function that represents the child theme’s style sheet.
<?php
add_action( ‘wp_enqueue_scripts’, ‘my_plugin_add_stylesheet’ );
function my_plugin_add_stylesheet() {
wp_enqueue_style( ‘my-style’, get_stylesheet_directory_uri() . ‘/style.css’, false, ‘1.0’, ‘all’ );
}
Special Considerations
Post Formats
A child theme takes on post-forms as defined by the parent theme. But when creating child themes, be aware that the use of add_theme_support (‘post formats’) will overwrite the forms defined by the parent theme.
RTL Support #RTL Support
To support RTL languages, add a rtl.css file to your child theme, containing:
/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/
Even if the parent theme does not have the rtl.css file, it is recommended that you include the rtl.css file in your child theme. WordPress will load the rtl.css file automatically only if is_rtl () is true.
(v) Internationalization
Child themes can be translated into other languages using the WordPress Internationalization API. There are special comments on the internationalization of child themes.
To internationalize a child theme follow these steps:
1. Add a languages directory.
For example: twentyfifteen-child/languages/
2. Add language files.
Your filenames have to be he_IL.po & he_IL.mo (depending on your language), unlike plugin files which are domain-he_IL.xx.
3. Load a textdomain
Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.
4. Use GetText functions to add i18n support for your strings.
Example: textdomain
<?php
/**
* Set up My Child Theme’s textdomain.
*
* Declare textdomain for this child theme.
* Translations can be added to the /languages/ directory.
*/
function twentyfifteenchild_theme_setup() {
load_child_theme_textdomain( ‘twentyfifteenchild’, get_stylesheet_directory() . ‘/languages’ );
}
add_action( ‘after_setup_theme’, ‘twentyfifteenchild_theme_setup’ );
At this point, the strings in the child theme are ready for translation. To ensure that they are properly internationalized for translation, there should be a twenty-fifteen child text field for each string.
Example: gettext functions
Here is an example of echoing the phrase “Code is Poetry”:
<?php
esc_html_e( ‘Code is Poetry’, ‘twentyfifteenchild’ );
?>
The text domain defined in Load_child_theme_textdomain () should be used to translate all the strings in the child theme. If a template file is included from the parent theme, the text domain must be changed from one defined in the parent theme to one defined by the child theme.
