So I've been reading instructions on here and on Wordpress's official website and I'm still having an issue getting my child theme to work. I'm using the Agility theme and set up agility-child as the directory for my child theme. In there I have my style.css:
/*
Theme Name: Agility Child Theme
Theme URI: themeforest.net/item/agility-responsive-html5-wordpress-theme/2336028
Description: Agility Child Theme
Author: *****
Author URI: *****
Template: agility
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* =Theme customization starts here --------------- */
Then, inside another folder (stylesheets) I have layout.css:
/*
Theme Name: Agility Child Theme
Theme URI: themeforest.net/item/agility-responsive-html5-wordpress-theme/2336028
Description: Agility Child Theme
Author: *****
Author URI: *****
Template: agility
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* =Theme customization starts here --------------- */
#colophon {
background: #fff;
border-top: 2px solid #ddd;
}
Then, back in the main directory, functions.php:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'parent-style', get_template_directory_uri() . 'stylesheets/layout.css' );
}
?>
The child theme is active in WP but none of my CSS changes to layout.css (or the other CSS that the theme uses; style.css is basically used for nothing). Am I using functions.php incorrectly?
get_template_directory_uri() returns the directory of the template you are using (or in other words -- the parent theme). You can use get_bloginfo( 'stylesheet_directory' ) instead. This will get the stylesheet directory of the current theme.
Each of the enqueued files should also have different ids (you are using "parent-style" for both. Also, you are missing a slash on the second line. Your enqueues should probably looks something like this:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
// This will include the parent theme's stylesheet
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// This will include layouts.css from the child theme's "stylesheets" directory
wp_enqueue_style( 'layouts', get_bloginfo( 'stylesheet_directory' ) . '/stylesheets/layout.css' );
}
Reference:
http://codex.wordpress.org/Child_Themes
http://codex.wordpress.org/Function_Reference/get_bloginfo
http://codex.wordpress.org/Function_Reference/get_template_directory_uri
Related
I have been trying to fix this for two days, looking at the different answers on here.
Whenever I edit css in the 'Additional CSS' editor in WP, I get the desired results. However, I can't seem to do this from the style.css sheet. Not that I need to do it from there, but it indicates to me that my child theme is not set up properly.
My style.css file:
/*
Theme Name: Coblog-child
Template: coblog
Author: [name]
Description: Coblog Child
Version: 1.1.0.1588784301
Updated: 2020-05-06 16:58:21
*/
my functions.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' );
}
?>
any idea what is wrong within these two?
Thanks
You are only loading the parent-style in your functions.php.
So you do not load the style.css of your child theme.
To make it work, you will have enqueue your child theme's stylesheet as well:
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
For the template directory uri (parent theme)
get_template_directory_uri()
For the child theme directory uri
get_stylesheet_directory_uri()
I'm using a child theme with HTML5 Blank as the parent theme. I've used this before without any issue but for some reason I'm now getting the following error on my themes page -
Broken Themes
The following themes are installed but incomplete.
Name Description
HTML5 Blank Child Theme The parent theme is missing. Please install the "html5blank" parent theme.
This is what I have in my folder -
style.css
/*
Theme Name: HTML5 Blank Child Theme
Description: A child theme of the HTML5 Blank WordPress theme
Author: Mike Whitehead
Template: html5blank
Version: 1.0.0
*/
I've tried numerous different variations on this - also copying the official wordpress guide. The above wording worked for me on my last project so don't know why it won't work now.
This is my functions file -
functions.php
<?php
function my_theme_enqueue_styles() {
$parent_style = 'html5blank-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' );
?>
Not sure why this isn't working. Any assistance would be appreciated.
The child themes style.css 'Template' tag should match that of the parent themes folder name eg.
/*
Theme Name: HTML5 Blank Child Theme
Description: A child theme of the HTML5 Blank WordPress theme
Author: Mike Whitehead
Template: html5blank-stable
Version: 1.0.0
*/
As per the WordPress Codex page on Child Themes - https://codex.wordpress.org/Child_Themes
"The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly."
Get Your Parent Theme's Textdomain and put it as child theme's Template name. Let's say your Parent theme's Style.css header like this...
/*
Theme Name: HTML5 Parent Theme
Description: A HTML5 Blank Parent WordPress theme
Author: Mike Whitehead
Text domain: html5blank
Version: 1.0.0
*/
Then you can use this Text domain name into your child theme like this..
/*
Theme Name: HTML5 Blank Child Theme
Description: A child theme of the HTML5 Blank WordPress theme
Author: Mike Whitehead
Template: html5blank
Version: 1.0.0
*/
I'm having so much trouble setting up a child theme of the html5blank theme. To the point where I'm doing a fresh install of the parent theme and starting from scratch - and writing this post as I go through it! Basically upon creating the child them I now need to load my custom /css/main.css file - and it's not having it! Description of setup process follows:
I've dropped a freshly downloaded html5blank folder into /themes/ and activated it. After that I have created another folder within /themes/ called "html5blank-child". Within that I've created a new, blank style.css and functions.php.
Within style.css I have the following:
/*
Theme Name: HTML5 Blank Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: HTML5 Blank Child Theme
Author: My Name
Author URI: http://myportfolio.com
Template: html5blank
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: html5blank-child
*/
And within functions.php I have:
<?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' );
}
?>
With all that done, I active my child theme. With all that done, everything still appears to be working. As I've created static templates of the website, I drop my 'img', 'css', 'font' and 'js' folders into the html5blank-child.
Now my 'actual' CSS file has a path of: html5blank-child/css/main.css
I need to load this file in. I was told to adjust my functions.php CSS path to: /css/main.css ...but it won't load the file at all. I've also tried using get_stylesheet_directory_uri() instead of get_template_directory_uri() as was advised by someone else but no luck!
The reason I've documented the process like this is, last time I got to this point if I went to access the Wordpress admin using http://localhost:8888/websitename/admin it won't redirect to wp-admin like it normally does. Also when I went to save a post, I've get a blank page. Thankfully that isn't happening this time so I guess it's a good (better) start but now I need to get my files loaded in.
Hope someone can help! :)
You need to import the style.css from main theme first inside the style.css of the child theme.
Use #import to import the css file first.
Also remove the parent-style from functions.php of child theme and then include your html5blank-child/css/main.css like the following given,
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri() . '/css/main.css' );
}
Load the parent themes style.css first, then load your child themes CSS like this:
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' );
wp_enqueue_style( 'child-main', get_stylesheet_directory_uri() . '/css/main.css', array('parent-style') );
}
I followed a very simple tutorial on how to enqueue a child theme, but when I actually went to edit my style.css nothing transferred over. Did I use the given code wrong?
style.css
/*
Theme Name: Blank Slate Child
Theme URI: http://www.efficientmind.org/blankslate-child/
*/
Enqueue code in the functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Your child theme stylesheet header needs to contain the Template line (the parent theme name) in order to work.
codex | child themes
Example:
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Thirteen theme
Author: Your name here
Author URI: http://example.com/about/
Template: twentythirteen
Version: 0.1.0
*/
add following comment to your child theme's style.css file:
Template: BlankSlate
your new Style.css should then look like this:
/*
Theme Name: Blank Slate Child
Theme URI: http://www.efficientmind.org/blankslate-child/
Template: BlankSlate
*/
I am having the hardest time trying to modify the woocommerce layout for the storefont template. My directory is:
Location for woocommerce plugin: wp-content/plugins/woocommerce/templates
I copy everything in the templates folder above into: wp-content/themes/storefront_child/woocommerce/
Modify any file inside the woocommerce folder above such as writing
OMG anywhere on the page.
Nothing shows in my page.
I am a rookie in WordPress and I have no idea how to modify the files for a plugin/template. I have not activated my child template either (is that required?). When I duplicate the woocommerce files and try to install them, it says the template is missing.
open up functions.php
then copy below code on there:
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
and then check the result
I finally got it after much research. Most sites neglect to mention that what actually "activates" the child theme is the comment in the CSS. So the child theme MUST include the CSS with the information that links it to the parent child. In my case:
/*
Theme Name: storefront-child
Theme URI: http://example.com/
Description: StoreFront
Author: John Doe
Author URI: http://example.com
Template: storefront
Version: 1.3.1
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
*/
It seems your child theme has not configured properly. You please double check below points.
You activated Child Theme (Not the parent)
Your child theme has a style.css file with below code
/*
Theme Name: My Child Theme
Description: A Twenty Thirteen child theme
Author: My author
Template: twentythirteen
Version: 1.0.0
*/
You properly Enqueued the Styles and Scripts.
add_action( 'wp_enqueue_scripts', 'my_theme_add_stylesheet' );
function my_theme_add_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}