Why do you have to enqueue the parent theme stylesheet in a WordPress child theme? I've created style.css in the child theme and when I add a change to it, it works without the functions.php file that enqueues the parent stylesheet, such as changing the background color of an element. I've searched for and answer but can find nothing that tells my why. Everything just says that you have to.
When it comes to loading the styles in WordPress themes there are many ways to skin a cat.
Parent enqueues child style.css -
In some themes the parent style.css is enqueued with wp_enqueue_style() within the parent theme php code.
The 2015 default theme is an example of this method. In functions.php line 233 there is the line wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );. When the theme is standalone get_stylesheet_uri() returns the theme's own style.css. When a child theme is present get_stylesheet_uri() returns the child theme style.css.
The above is the likely case for your parent theme.
Child enqueues parent style.css -
From the child theme you can load the parent styles by by one of two methods.
enqueue_style() with parameters pointing to the parent theme. Some php similar to: wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );. This is the method you are talking about.
#import from within the child theme style.css file. A typical line of code for this would read: #import url( '../parent-theme-folder/style.css' );. This is not ideal as #import slows down your page load time.
Better Method - Don't use root style.css
It's not strictly necessary to use style.css in the root folder at all. The only thing WordPress strictly needs this file for is to read the theme information in the top comments. This very requirement means that the style.css can't be minimised, or at least is a pain to minimise. Minimising is the process of removing all the spaces in a file of code to reduce the file size. This reduces page load speed.
So now a lot of modern themes are enqueuing their main style from a different minimised css file in a theme subfolder. The main style.css simply consists of the informational comment section read by the core php code but not loaded on the front end.
Related
I am creating custom WordPress theme. I have a child theme and parent theme.
One issue is my child theme function.php file not adding bootstrap files, So I called it in parent theme, but now the issue I am getting is bootstrap CSS taking priority over my child style.css.
I have tried this code in my child theme function.php file but its not working.
Its not showing any custom.css in view source. I have both files in correct path
add_action('wp_enqueue_scripts', 'theme_enqueue_styles', 100);
function theme_enqueue_styles()
{ $parent_style = 'flambird-style';
$child_style = array('flambird-style');
wp_enqueue_style($parent_style, get_template_directory_uri() . '/bootstrap/custom.css', array());
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/css/custom.css', $child_style);
}
its not adding custom in both condition. I think my child theme function.php file is not working.
Please help me on this. I want to use child theme css file.
enter image description here
Add !important to your css formats when there is a conflict, or host your own copy of Bootstrap with compatible changes.
I'm creating a child theme for an active template. have this code in functions.php file at child folder.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
but some of js and css files of a plugin named lightgallery haven't loaded when child theme is active. and has 404 error at console. the url of 404 is like this:
wp-
content/themes/sampletheme-child/assets/plugins/LightGallery/assets/css/lightgalle
ry.css
I haven't such a folder in child theme and it is searching it in child theme.I don't know why it doesn't read it from parent theme.
what should I do to load this files?
--ps: another issue is when the child theme is activated the theme is ltr. and the style is not perfect, although the main styles of the themplate has been loaded and I didn't found any rtl style at parent theme. but in parent style every thing is fine and rtl.
I have a WP multi-site running on RunCloud/digital ocean. I've attempted four or five custom themes, but each one would disappear from my theme menu after an hour or two.
Today I've attempted child themes with the same result. This is what is in my twentytwenty-child/style.css:
/*Theme Name: level up child
*Description: child theme of 2020
*Template: twentytwenty
*/
#import url("../twentytwenty/style.css");
But as soon as I created a header.php (simply copying the parent header into the child folder) my child theme disappeared. I've since added a functions.php file into the child's folder and with the following...
function twentytwenty_child_enqueue_styles() {
// Parent theme style handle
$parent_style = 'twentytwenty-style';
// Enqueue parent and child theme style.css.
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', 'twentytwenty_child_enqueue_styles' );
...as per developer.wordpress.org, renamed the folder name twice (back to the original name), and no luck. The child theme will not appear in the admin menu.
The child folder (twentytwenty-child/) only has style.css, functions.php, and header.php. All available themes, including twentytwenty, are enabled on multi-site network.
Am I missing something obvious? I'm new to WP theme creation, forgive my ignorance. Thanks!
Ok I think I figured it out. Chris was on to something about it being caused by RunCloud. I 'chown'ed the new child folder and files to runcloud:runcloud (matching the existing theme folders and files ownership) and they reappeared!
As a confirmation, I also ran 'chown root:root' on a working theme folder (twentynineteen). That folder quickly disappeared from the wp-admin menu.
The permissions of default theme folders and my own created child theme were identical. So RunCloud must require ownership of WordPress files in order to read them.
I am putting together a wordpress child theme based on a parent theme that has multiple style sheets in it's directory. So for example this is the navigation to a few of the style sheets:
parent-theme/style.css
parent-theme/css/style.css
parent-theme/css/bootstrap.css
I created my child folder and created my style.css file as well as my function.php file but it seems that the child theme is only pulling the style sheet for the parent-theme/style.css file and not pulling all the .css files.
After doing some digging this is where my functions.php file is at currently:
<?php
/* v1.0.5
Date: 5/15/17
*/
function my_theme_enqueue_styles() {
$parent_style = 'wizard-style'; // This is 'wizard' for the Wizard theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . 'style.css' );
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/css/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' );
?>
My main objective is to have the child theme pull all needed stylesheets and utilize the one single style sheet under my child them folder (child-theme/style.css) for any changes I would like to make.
My questions are:
Is this possible?
If it is possible, what errors may be occurring that is causing my fucntion.php file not to pull all the stylesheets?
If it is not possible, what changes do I need to make to my function.php file and my directory to make this work?
I had an issue like this with ArileWP theme, after a lot of research I figured out that loading multiple style sheets was not the issue (using the enqueue function on wordpress.org forums and other forums did in fact load all stylesheets regardless of whether they were in the root level or lower directory levels of the parent theme).
The issue in my case ended up being that Arile requires you to install their "arile extra" plugin, and this plugin has an if statement that is conditional on what your child theme is named:
if( 'ArileWP' == $activate_theme || 'Business Street' == $activate_theme || 'StrangerWP' == $activate_theme || 'NewYork City' == $activate_theme || 'InteriorPress' == $activate_theme || 'Arile WP Child' == $activate_theme ){
require("inc/arilewp/arilewp.php");
Their plugin has a default name Arile WP Child that, if you are not using as the name of your child theme, the extra features included in the plugin will not execute.
The cleanest solution in my case was to simply change the name of my child theme to the one defaulted in their php file.
Might not be the same issue you are having but was a simple fix that just took me a long time to narrow down.
Check the page 'view source' to make sure the style sheets are being loaded from the parent. When you activate a child theme its still pulling everything from the parent unless you override the specific file (example: header.php).
The functions.php and style.css files are the only exception as they supplement their corresponding parent theme file.
So, in summary those stylesheets should be included on your websites. Your theme settings may be incorrect but if you're in a pinch and just need to get those style sheets loaded just add them manually via the functions.php file by
enqueuing them
EDIT:
Does the child theme stylesheet contain the following commented out information customized for your theme, of course?
/*
Theme Name: Twenty Fifteen Child
Theme URI: URI
Description: Twenty Fifteen Child Theme
Author: John Doe
Template: twentyfifteen
Version: 1.0.0
Text Domain: twenty-fifteen-child
*/
If it isn't overriding the parent the styles it could possibly be a cache issue. If you don't have any cache plugins it could be your hosting environment or Cloudflare. If you can clear the server cache then refresh your browser with a Cntrl+F5 and see if that helps.
Did you try adding !important to your child styles for troubleshooting purposes already? Does your theme have a custom style option that lets to save styles to the database that it loads with each page to override the parent theme? Its not ideal but works if youre in a pinch.
Sorry if I am telling you elementary things I am not sure what your experience level is.
I'm working on my first child theme and I'm running into a lot of confusion with directories and child themes.
I won't use my real website but I have made a directory in my cPanel dedicated to working on my theme which is at www.wp.example.com
Lets call the template testTemplate. I made a child template called testTemplate-child following the Wordpress codex meaning I registered the parent theme in the child theme's function.php
So wp.example.com loads the style from both the parent theme and the child theme which is desired. What it does not load is the javascript files I enqueued in my child theme's functions.php file.
The confusing part is this, if I navigate to www.wp.example.com/testTemplate-child/ my javascript loads up and works.
I'm wondering if anyone can clear this up for me, why does my child's function.php only work in wp.example.com/testTemplate-child.
It's because your child's theme function.php is added before parent's function.php, that's why you can't override some options, also keep in mind that you'll need to call get_stylesheet_directory() to get child's theme path, because if you do another function, it will load parent's path.
Example to load a javascript file located a /js folder:
$jsPath = get_stylesheet_directory() . '/js/yourScript.js';
wp_enqueue_script( 'child-js', $jsPath, array(), '1.0', true )
More info at: https://codex.wordpress.org/Child_Themes