So I have this Child Theme and when I try to enqueue the styles and the javascript I run into an error:
wp_enqueue_script is working fine
wp_enqueue_style doesn't work at all
wp_head() is included in the header and it worked before, but after updating Avast theme and wordpress the problem started to occurre.
functions.php
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css'); //not working
wp_enqueue_style( 'fancy', get_stylesheet_directory_uri() . '/css/jquery.fancybox.min.css'); //not working
wp_enqueue_script( 'devtools', get_stylesheet_directory_uri() . '/js/main.min.js' ); //working
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Check out the wordpress child themes documentation.
There you can find this line
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
);
}
Related
I have been struggling with diagnosing a bug on a project for hours now. I have currently narrowed it down to what is happening, I'm just not sure why:
I have a template partial called "testimonials.php" which enqueues styles at the top of the file:
<?php
add_action("wp_enqueue_scripts", function() {
wp_enqueue_style("testimonials-style", get_stylesheet_directory_uri() . "/partials/testimonials.css");
});
?>
However, when I try to render this as a partial in a parent template, using get_template_part('partials/testimonials') the partial is rendered, but the CSS is not enqueued. Same for enqueueing JS files. I have verified that the pathways are correct, etc.
If I enqueue the style in the parent Template, then the styles show up.
Do I really need to enqueue the styles into every parent template in which I wish to include this partial?? I must be missing something, because this doesn't seem modular at all!
Can someone please help?
Try this
CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
JS
function wpdocs_scripts_method() {
wp_enqueue_script( 'form-script', get_template_directory_uri() . '/js/form.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
<?php
add_action( 'wp_enqueue_scripts', 'my_stylesheet' );
function my_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/partials/testimonials.css', false, '1.0', 'all' );
}
For more understanding you can see following doc
https://developer.wordpress.org/reference/functions/wp_enqueue_style/
function mytheme_scripts_styles() {
wp_enqueue_script( 'app-script', get_template_directory_uri() . '/assets/js/app.6e31112b.js', array('jquery'), 1.0, true);
wp_enqueue_style('app-css', get_stylesheet_directory_uri() . "/assets/css/build.css",false,'','all');
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts_styles' );
My child-theme stylesheet doesnt seem to be working. I think the script needs to change to load it last but I'm not sure how to change the priority.
Website url
This the functions.php file:
<?php
function thim_child_enqueue_styles() {
// Enqueue parent style
wp_enqueue_style( 'thim-parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'thim_child_enqueue_styles', 100);
You should enqueue also 'parent-style' and set it as a dependency of 'child-style'. It will ensure that the child theme stylesheet loads after it. So rewrite your enqueue function accordingly:
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
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' );
Take a look at the documentation.
I have created a file structure in the same format as my parent theme. My parent theme is called Alpine and within Alpine there is a functions.php and style.css file. There do not appear to be any additional style.css files.
I have created a directory called Alpine-child and within that I have created a functions.php and style.css file.
I can't work out why any changes I make to the child style.css are not implemented but they are when I make the same changes in parent style.css
This is my child style.css:
/*
Theme Name: Alpine Child
Theme URI: http://www.creative-ispiration.com/wp/alpine/
Description: My first child theme, based on Alpine
Author: MilkshakeThemes
Author URI: http://themeforest.net/user/milkshakethemes
Template: Alpine
Version: 1.0.0
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, editor-style, featured-images, post-formats, rtl$
Text Domain: alpine-child
*/
This is my child functions.php file:
<?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' );
}
?>
Take a look at your <head> tag. More importantly look at the order of your stylesheets.
The styles from your child theme are being added first and then all the styles from your parent theme. This will cause the styles from the parent theme to override your child theme styles.
You can change the priority of your my_theme_enqueue_styles function to run after the parent by using the third parameter of add_action. This will enqueue your child theme styles last and allow the CSS to work as expected.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
This worked for me:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'twentyseventeen-style';
$child_style = 'twentyseventeen-child-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $child_style, get_stylesheet_uri() );
}
?>
and none of the other answers did.
After updating from Divi 4.4.1 to Divi 4.10.8 the Child theme parent CSS was not working. I did some research om my website and realized that Divi style.css file was empty with only header info (after the update) and that the code needed to show the CSS was now in a different file (style-static.min.css) I changed the file name in my Child Theme functions.php file from style.css to style-static.min.css. This solved my problem and the CSS is working.
See underneath the code I used:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style-static.min.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
You need to enqueue the child theme style.css so your function should be:
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
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' );
Take a look at the documentation.
Craig Hick's answer worked for me and I also realize why my default code from the Wordpress documentation wasn't working.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
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')
); }
In my case, the line wp_get_theme()->get('Version') returned 1.0.0 which was the same version number as the parent theme.
So I just changed the child theme css version number to 1.0.1 and it worked.
My child theme currently has the following code:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
//load child theme custom CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
Previously, the code I used only had the first part before //load child theme custom CSS part, and it was unable to get the custom CSS. I have added the code #jrod suggested above and it worked. I need to confirm with you guys that my child theme code is complete, and I don't have to add anything else. I am not sure if this also fetches the custom JS files I have in the child theme JS files.
<?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' );
}
?>
Just remove version from comment in child them style.css it's working for me in wordpress 6.1
I am using this theme:https://dessign.net/sold-responsive-woocommerce-free/
and I have created a child theme. I set it up by adding
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .
/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
but certain things are not being applied like the sticky headeror mobile menu. Is there anything else I need to include?
Your child theme's stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. See here a more detailed discussion :
<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
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 )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>
https://codex.wordpress.org/Child_Themes
I'm making a custom wordpress theme, but for some reason the enqueue style is not working.
I've added:
<?php get_header(); ?>
to the index.php
And i've added
<?php wp_head();?>
Inside the
head tag.
The following code is inside my functions.php:
function pompier_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '1.0.0', false );
//wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'pompier_scripts' );
What am i missing here?
I don't know if this helps, but I just created my first child theme, and because It's based on a parent theme, I had to enqueue my custom stylesheet like this in order to make it work:
wp_enqueue_style( 'my-style', get_stylesheet_uri() . '/style.css' );