I have already started working on a wordpress theme and need to make it a child theme to prevent updates from changing my site and customisation.
Is there any wat that I could do this?
You just need to follow these 3 steps:
1) Create a folder for your theme in /wp-content/themes/:
"It is recommended (though not required, especially if you're creating a theme for public use) that the name of your child theme directory is appended with '-child'.".
Every file you create here will overwrite files in your parent theme. You can, for instance, create new Page templates: https://developer.wordpress.org/themes/template-files-section/page-template-files/ or overwrite the existing ones.
2) Create am a style.css file and begin it with:
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
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: twenty-fifteen-child
*/
Add here your custom styles. More info: https://codex.wordpress.org/Theme_Development#Theme_Stylesheet
3) Create a functions.php
Inside this file, you can add new functionality your child theme or modify the existing one.
You will also have to enqueue here the CSS and JS of your parent theme, as well as the new CSS and JS that you create on your child theme. Something like that will do the most of the times:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
Now you can add custom shortcodes (https://codex.wordpress.org/Shortcode_API) , widgets areas (https://codex.wordpress.org/Widgetizing_Themes), etc..
More documentation about child themes: https://codex.wordpress.org/Child_Themes
Related
I have just created a new child theme and here is my source code which I followed the official WordPress Child Themes document.
style.css
/*
Theme Name: Astra Child Theme
Theme URI: http://example.com/twenty-fifteen-child/
Description: Astra Child Theme
Author: xxx
Author URI: https://...
Template: astra
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: astra
*/
funtions.php
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
);
}
I have tried different declarations for functions.php I can't find a reason why customise page, Elementor page, etc. they can be loaded correctly as customise page will be just auto-reloading which can be observed from the network and Elementor will just be loading like this.
Therefore, I am here asking for help and thank you so much in advance.
Astra actually has its own child theme for use. Though most of the issues you are experience are related to JS. Make sure WordPress and Plugins are updated. With all the changes and with WordPress pushing for updated jQuery if you are using outdated plugins it could cause issues.
<?php
/**
* Astra Child Theme functions and definitions
*
* #link https://developer.wordpress.org/themes/basics/theme-functions/
*
* #package Astra Child
* #since 1.0.0
*/
/**
* Define Constants
*/
define( 'CHILD_THEME_ASTRA_CHILD_VERSION', '1.0.0' );
/**
* Enqueue styles
*/
function child_enqueue_styles() {
wp_enqueue_style( 'astra-child-theme-css', get_stylesheet_directory_uri() . '/style.css', array('astra-theme-css'), CHILD_THEME_ASTRA_CHILD_VERSION, 'all' );
}
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 15 );
i've created a child theme from the nightingale theme but when I try to change a propetry in nigthingale-child/style.css it doesn't apply. For instance I've tried to change background-color of the body or display none for h1 markup just to see whether my child theme style.css works but nothing happens.
I've followed all steps for creating a child theme:
-new folder nightingale-child
-inside this foder I've added two files : function.php & style.css
here is my style.css :
/*
Theme Name: nightingale-child
Theme URI: http://example.com/twenty-fifteen-child/
Description: nightingale Child Theme
Author: John Doe
Author URI: http://example.com
Template: nightingale
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: nightingalechild
*/
a {
color: red;
}
and here is my function.php:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
Does anybody know what's wrong with my nightingale-child theme ?
Your function is loading the PARENT theme CSS. You need to change a couple things to load the CHILD CSS:
<?php
// Let's change this to `enqueue_child_styles` so it's clearer.
add_action( 'wp_enqueue_scripts', 'enqueue_child_styles' );
// Now the function
function enqueue_child_styles() {
// Rename the hook to child-style
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/style.css' );
}
In this instance, you want to use get_stylesheet_directory_uri() since get_template_directory_uri() always points to the PARENT theme, where as get_stylesheet_directory_uri() points to the CHILD theme.
I'm trying to create a child theme and functions.php seems to be working but for some reason, the child theme isn't loading. I added the following in my functions.php and it does work, except it loads up the parent theme's style.css and not the child.
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});
Here's the top of my style.css in the child:
/*
Theme Name: Chaplin Child
Theme URI: https://my-site.com/
description: Child Theme
Template: Chaplin
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: stack-child
*/
Try this (in functions.php), this is from a working child theme of mine and also enqueues the child theme stylesheet:
add_action('wp_enqueue_scripts', 'register_my_scripts');
function register_my_scripts() {
wp_enqueue_style( 'parent_style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
Changes in .php files within a child theme are not applied on my front-end site.
I've activated a WordPress Child Theme called "Grow Child" from parent "Grow".
I want to change the footer text and links on my site, so, following the instructions, I've copied footer.php file (actually named 04.footer.php) from parent directory to the child-theme folder. I made the corrections but they are not applied to my site.
What is wrong?
When I've made the same corrections directly in the parent directory, they were well applied to my site.
I use the following code in the functions.php of the child theme:
<?php
add_action( 'wp_enqueue_scripts', 'grow_child_enqueue_styles' );
function grow_child_enqueue_styles() {
$parent_style = 'grow'; // This is 'grow-style' for the grow theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'grow-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
I'd like to make changes of parent theme files in my child theme folder so that when the theme is updated not to lose the changes.
Im trying to create a child theme in wordpress but im getting this error
Broken Themes
The following themes are installed but incomplete.
Name Description
Rife child Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.
What am i doing wrong?
Here is the files
Style.css
/*
Theme Name: Rife child
Description: Made by Apollo13.<br/> Get support from Forum.
Author: Apollo13
Author URI: https://apollo13themes.com/
Theme URI: https://apollo13themes.com/themes
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: theme-options, post-formats, two-columns, translation-ready
Text Domain: rife
Version: 1.0
*/
Functions.php
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Actually, there's only two files required in child theme: the style.css and the functions.php.
I simply think that your style.css is missing the header. Here's an example of the mandatory header of a child theme.
/*
Theme Name: My Child Theme
Theme URI: https://www.example.com/themes
Description: My Child Theme
Author: John Deo
Author URI: https://www.example.com/
Template: parent_theme_name
Version: 1.0
Text Domain: my-child-theme
*/
Also, you need to enqueue the parent style sheet by including this in your child theme function.php:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>