I'm having trouble calling my stylesheets using the enqueueing method on my functions.php file. I'm using the following
<?php
function load_stylesheets()
{
wp_register_style('style', get_template_directory_uri() .
'/style.css', array(), false, 'all');
wp_enqueue_syle('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
?>
I'm guessing that this is a hierarchy problem as I don't see any problem code wise. I have a theme folder with all of my php files which also contains the css file I'm attempting to reference
Spelling mistake
wp_enqueue_syle('style');
should be
wp_enqueue_style('style');
Forgot the 't' :)
Also while I am here...if you are registering then immediately enqueuing (with defaults) you can just do this as they can accept the same args:
wp_enqueue_style('main-style', get_template_directory_uri() . '/style.css');
If you are working on Child Theme you should use, get_stylesheet_directory_uri() instead of get_stylesheet_directory_uri()
// This will point to style.css in child theme
wp_enqueue_style( 'my_child_styles', get_stylesheet_directory_uri().'/style.css' );
// This will point to style.css in the parent theme
wp_enqueue_style( 'my_parent_styles', get_template_directory_uri().'/style.css' );
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()
Actually my problem is that I already had a functional Child theme with a functions.php and many others filesname.php and also a style.css which work properly, but when I try to add an other stylesheet like for instance modules.min.css The theme is only reading it in the parent folder so I can't change stylesheets in my website and this is annoying
Some data:
File in the parent folder I want to override: \wp-content\themes\startit\assets\css\modules.min.css
File in the child folder I want to be readable: \wp-content\themes\startit-child\assets\css\modules.min.css
I also tryed to put the modules.min.css right here in my child theme next to the styles.css but I can't override the parent folder \wp-content\themes\startit-child\modules.min.css
This is what look like my functions.php :
<?php
function startit_enqueue_styles() {
$parent_style = 'startit-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', 'startit_enqueue_styles' );
?>
Thank you !
There are couple of ways to do that and the simplest one is:
Remove/Dequeue Parent CSS file
Add/Enqueue new CSS file
function PREFIX_remove_scripts() {
wp_dequeue_style( 'put_modules_file_handler_here' );
wp_deregister_style( 'put_modules_file_handler_here' );
// Now register your child CSS here, using wp_enqueue_style
}
add_action( 'wp_enqueue_scripts', 'PREFIX_remove_scripts', 20 );
Some Common Confusions
Should you enqueue child styles as well as parent styles? Is it necessary? This is where a lot of confusion exists regarding enqueueing stylesheets in child themes. The answer depends on how the parent styles are included in the parent theme. For example, if the parent theme is using get_stylesheet_uri() to enqueue styles,
for example as in Twenty Sixteen:
wp_enqueue_style('twentysixteen-style', get_stylesheet_uri());
then you don't need to enqueue the child styles. This is because get_stylesheet_uri() returns the URL of the current active theme, which in this case is the child theme.
This is how URLs are returned, when working with child themes
get_stylesheet_uri() = http://example.com/wp-content/themes/example-child/style.css
get_template_directory_uri() = http://example.com/wp-content/themes/example-parent
get_stylesheet_directory_uri() = http://example.com/wp-content/themes/example-child
So, I would recommend you to check your parent functions.php and see, how the style is enqueued so you can handle it properly.
// Add css file or js file
function activate_css() {
wp_enqueue_style('min_style_css', get_template_directory_uri() .'assets/css/modules.min.css'));
));
}
//add css
add_action( 'init','activate_css');
How can I enqueue more css files from the parent theme in the child theme and in which order?
Note: the previous method was to import the parent theme stylesheet using #import, but this is no longer best practice, because it uploads the stylesheet twice.
The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in the child theme's functions.php.
So, this is the correct PHP code to use:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
But this uploads only style.css and all themes have multiple css files, so how can I enqueue all of them? And how can I keep the proper order of uploading files?
For example, how can I enqueue the file main.css from the path theme_parent_directory/css/main.css in addition to style.css?
I hope that my English is clear. :)
Thank you in advance!
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles',999 );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/css/main.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
?>
I have a website not running on Wordpress, but have installed Wordpress in the /blog sub directory. I'm trying to modify the chosen Wordpress theme to match the header of my website. I've managed to come relatively close, but by placing duplicate .css and .js files within the child theme.
What I want to do is give the proper path while enqueueing from functions.php - I'm just unfamiliar with .php and how to do so. Here's what I have:
<?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( 'freelance-main', get_stylesheet_directory_uri() . '../../../freelancer.css' );
wp_enqueue_style( 'bootstrap-min', get_stylesheet_directory_uri() . '../../../bootstrap.min.css' );
wp_enqueue_style( 'bootstrap-main', get_stylesheet_directory_uri() . '../../../bootstrap.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
?>
From viewing the page source it's actually trying to load the "../" in the url so I know this isn't right, I just don't know how to type it properly. Here's the structure:
root
-mywebsite
--blog
---wp-content
----themes
-----child-theme
--css
---needed files
--js
---needed files
Like I said, if I duplicate the files and put them in the child-theme it works, but I don't think this is best practice.
I have a child theme setup in wordpress and the style.css and functions.php in the child theme are working correctly. I now want to overwrite other template .php files with the versions in the child theme. I can't seem to make these files overwrite the parent theme however.
child theme functions.php:
<?php
//enqueue styles
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 'overwrite' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
//overwrite template pages
function overwrite() {
wp_enqueue_script( get_template_directory_uri() . '/inc/structure/hooks.php' );
wp_enqueue_script( get_template_directory_uri() . '/inc/structure/header.php' );
}
I have a hooks.php and header.php in /child-theme/inc/structure/
For a child-theme you do not need to enqueue any template (PHP) files, simply add a PHP file to your child-theme with exactly the same name and path as the one you are trying to overwrite in your parent theme and it will naturally replace it.