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.
Related
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 have coruscate premium theme and I am making a child theme for it. To modify the php file I copied the file and paste it in the child theme including directory path. But it doesn't work.
I copied framework/widget.php file from parent theme and paste it to child theme folder but it didn't work.
What is the correct method of overriding the parent theme files?
You need a style.css file set up in your child theme that tells wordpress it is the child etc... then you select your child theme within admin and then things will work. See https://codex.wordpress.org/Child_Themes for more information.
For creating a child theme, make a folder inside your 'themes' folder with you child theme name. Now the child theme should have a style sheet in it which is a must. So add a style sheet and the beginning of the child theme style sheet should be as follows:
/*
Theme Name: (theme name) Child
Theme URI: (give URL)
Description: (give description)
Version: (give your version)
Author: (author name)
Author URI: (give URL)
Template: (name of parent theme)
*/
Of these the very important thing is the 'Template' which is the parent theme name. To avoid confusion take the name of parent theme from the parent theme style sheet.
Now the second thing is the functions of your child theme. Just add a php file with the name functions.php and place the below code
<?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' );
}
?>
It worked for me :)
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.
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