I have created a child theme in wordpress off of a parent theme called bigpont. I am also using woocommerce as well on the site. I had enqued my child theme style sheet and have noticed it loads twice and I'm not sure why. I am also wondering how I can get it to load so it overrides the woocommerce style sheet. Here is the code I'm currently using in my functions.php file:
function my_theme_enqueue_styles() {
$parent_style = 'bigpoint-css';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/base.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');
and here is how the stylesheets are being loaded on my site
It seems to load as 'bigpoint-default-css' and then again as I added it "child-style-css'
****UPDATE: I found the answer to my css being loaded twice, in my parent theme's functions.php file it being called in with :
wp_register_style('bigpoint-default', get_stylesheet_uri(), '1.0');
so I used this to undo that:
function unhook_parent_style() {
wp_dequeue_style( 'bigpoint-default' );
wp_deregister_style( 'bigpoint-default' );
}
add_action( 'wp_enqueue_scripts', 'unhook_parent_style', 20 );
From looking at the file class-wc-frontend-scripts.php it looks like WooCommerce enqueues it scripts/styles with the default priority of 10.
public static function init() {
add_action( 'wp_enqueue_scripts', array( __CLASS__, 'load_scripts' ) );
add_action( 'wp_print_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
add_action( 'wp_print_footer_scripts', array( __CLASS__, 'localize_printed_scripts' ), 5 );
}
So if you enqueue your scripts with a lower priority they it will load after the WooCommerce style and overwrite that stylesheet as the file will be loaded after the WooCommerce one lower down the HTML document.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
I would need more information to debug what is happening with the duplicate stylesheets though.
Related
I'm trying to make a child theme off the html5blank theme. I've managed to get my child theme CSS working using the following:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
}
?>
But the styles from the parent are still inherited. These are style.css and normalize.css. I have no need for these files at all.
So I've been told I need to use wp_dequeue_style(). to "remove parent enqueued files with wp_dequeue_style()" and add your hook with a later priority than the default 10. This is a third, optional parameter for add_action(). Something like 100.
Unfortunately I'm really struggling with this basic task, I've tried but I can't get it working. I tried the following but obviously it's totally wrong!
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'parent-style-css', get_template_directory_uri() . '/style.css', 100 );
wp_dequeue_style( 'parent-normalize-css', get_template_directory_uri() . '/normalize.css', 100 );
}
?>
Can anyone help with this? I'm sure it's straight forward but I don't have a clue!
Also, I'm guessing if I don't need the JS from the parent either as I'll use that in my child them, I guess I'd use the methods to enqueue/dequeue them?
EDIT
Is this more like it...
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'main-css', get_stylesheet_directory_uri() . '/css/main.css' );
wp_dequeue_style( 'normalize');
wp_dequeue_style( 'html5blank');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts', 100 );
function my_theme_enqueue_scripts() {
wp_deregister_script( 'conditionizr');
wp_deregister_script( 'modernizr');
wp_deregister_script( 'html5blankscripts');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.12.0.min.js', array('jquery'), '1.12.0'); // Custom scripts
wp_enqueue_script('jquery'); // Enqueue it!
wp_register_script('responsive-nav', get_template_directory_uri() . '/js/responsive-nav.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('responsive-nav'); // Enqueue it!
wp_register_script('uniform-js', get_template_directory_uri() . '/js/jquery.uniform.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('uniform-js'); // Enqueue it!
wp_register_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('main-js'); // Enqueue it!
}
?>
The instructions were simply telling you to change this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
into this...
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );
The full method call is...
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
Only the first two are required, the others have defaults they will use in case you leave them blank.
Also, to dequeue, you only need the name of the parent identifier, not all of the file details.
wp_dequeue_style( 'name-of-identifier-in-parent-theme' );
It looks like you put the priority on the wrong function call.
And Yes, you can dequeue javascript files as well using this method.
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 trying to create a child theme but I think that there is something wrong with my functions.php.
(<?php)add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'sydney', get_template_directory_uri() . '/style.css' );
}function theme_enqueue_styles() {
$parent_style = 'sydney';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'sydney-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
May Be this problem is due to function.php file in your child theme.
Child theme’s functions.php is loaded first implies that you can create the user functions of your theme pluggable - that are replaceable by a child theme - by mentioning them restrictively. E.g.:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}
In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.
for further reference please visit : Wordpress Child Theme
If you find my answer helpful please mark it, So others can take the benefits of it.
I'm trying to create a child theme. The parent theme has a style.css and all, and I was looking at wp_enqueue_style() function, and it says that you can inlude dependencies. So that means that the themes own style.css can be active, and in my child theme if I specify the same rule in my style.css, it should overwrite it.
But the dependency is an array of handles. How do I find those handles?
wp_enqueue_style( 'mytheme-style', get_stylesheet_directory_uri().'/style.css', array('main_css') );
I tried with the above, but it only loads the style.css from child theme, not the parent.
Where can I find these handles?
EDIT:
I found the code for reproducing the handles and scripts:
function wpa54064_inspect_scripts() {
global $wp_scripts;
foreach( $wp_scripts->queue as $handle ) :
echo $handle,' ';
endforeach;
}
add_action( 'wp_print_scripts', 'wpa54064_inspect_scripts' );
function wpa54064_inspect_style() {
global $wp_styles;
foreach( $wp_styles->queue as $handle ) :
echo $handle,' ';
endforeach;
}
add_action( 'wp_print_scripts', 'wpa54064_inspect_style' );
But it still doesn't work the way I thought it does.
get_stylesheet_directory_uri() will return the child themes URL if active.
Since you're trying to load the style.css file inside your parent theme you can use get_template_directory_uri() instead.
E.g:
wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/style.css', array('main_css') );
My suggestion would be to load your stylesheets like this (code goes inside your child theme's functions.php):
function wpse_load_styles() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'mytheme', get_stylesheet_uri(), array( 'parent-styles' ) );
}
add_action( 'wp_enqueue_scripts', 'wpse_load_styles' );
I am making my first custom wordpress theme and am running into problems with functions.php
I am using bootstrap too so i want to include bootstrap stylesheets to wp i currently do it this way-:
style.css
#import url('css/bootstrap.css');
#import url('css/font-awesome.css');
I understand that i can use functions.php to do the same, so i wrote a custom function and tried to do it like this-:
functions.php
<?php
/* Theme setup */
require_once('wp_bootstrap_navwalker.php');
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri().'/css/font-awesome.css' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri().'/js/bootstrap.js', array(), '3.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
?>
This does not seem to work. Neither does functions.php load the wp jquery or the bootstrap.js
Can anyone shed some light onto this matter for me? I would be ever grateful. This is not a child theme its a custom theme.
Try registering your scripts before you enqueue them. For example:
function my_enqueue_scripts() {
// Register Bootstrap JS.
wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), NULL, true );
// Enqueue Bootstrap JS.
wp_enqueue_script( 'bootstrap-js' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );