I am creating a wordpress theme and my styles queue is not working.
This is the queue in functions.php
function style_script_enqueue(){
wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/main.css' );
wp_enqueue_style('responsive-styles', get_template_directory_uri() .
'/css/responsive.css' );
wp_enqueue_script('custom_script', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'style_script_enqueue');
I have also called wp_head(); , wp_footer(); , and checked the directory.
Do you want to enqueue your CSS/JS in a child theme derived from another existing theme? Unless you build your own theme from scratch, child themes are the preferred practice to extend existing themes (update safe).
If you are in a child theme, there are two functions you might want to consider:
get_template_directory() or get_template_directory_uri() to refer to the parent theme path
get_stylesheet_directory or get_stylesheet_directory_uri() to refer to the child theme path
PS.: You might want to check if there are multiple functions registered for wp_enqueue_scripts, which try to enqueue CSS/JS with the identical name. If so, try to alter main-styles, responsive-styles, custom_script or the optional priority parameter for add_action as described in the function documentation.
Its work for me.
function add_css_js(){
// Load css
wp_enqueue_style('style',get_template_directory_uri().'/assets/css/style.css',array(),'1.0.0','all');
//load JS
wp_enqueue_script('bootstrap',get_template_directory_uri().'/assets/js/bootstrap.min.js',array('jquery'),'1.0.0',true);
}add_action('wp_enqueue_scripts','add_css_js');
Related
I used a plugin to auto-generate a child theme and necessary files, and it did a good job...my new style.css loads after the parent and works great. the problem is that I have a plugin that requires heavy modification to it's injected divs, and it is a nightmare to overwrite anything because they !important the entire sheet, so I have to work around it.
I'm trying to enqueue my child-theme style.css after the plugin using a priority 99 thing I found on another thread here, and it isn't doing anything. All I did was append to the end of my child functions.php.
Potential issue 1: I did not remove the previous code to enquee this css file...do I need to do that? I thought maybe it would just re-enqueue it if it got to this new code at the end of the file. But maybe it does it once and ignores my code since it's already done.
Potential issue 2: Code error on my part. If my style.css is in the same folder as my functions.php I refer to the file as just 'style.css' right? I assume so because of relative locations because I was not sure if PHP required something that I am unaware of.
Here is my code that is not working.
wp_enqueue_style( 'child-css', get_template_directory_uri() . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );
I also saw this in my functions.php...it's weird because it looks like it's trying to enqueue a parent theme css file, but the relative location points to the child theme. Very confusing. it already had the same add_action priority thing in it from the thing I posted above, so I just change the number to 99, but it also didn't work. It was set to 10.
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'font-awesome-5-free','saasland-dark-support','bootstrap','themify-icon','saasland-elementor','saasland-remove-animation','magnific-popup','eleganticons','saasland-wpd','saasland-main','saasland-elements','saasland-comments','saasland-footer','saasland-gutenberg' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 99 );
Any tips? Thanks
get_template_directory_uri will always refer to the parent theme folder for assets.
get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).
If you are enqueueing style.css file for the child theme then,
wp_enqueue_style( 'child-css', get_stylesheet_directory_uri() . '/style.css' );
I made a child theme for 'Square Theme' in Wordpress and my 'functions.php' code in my child theme looks like this:
<?php
function square_child_enqueue_styles() {
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', 'square_child_enqueue_styles' );
?>
The thing is, I also want to edit another css file, that its path in the parent theme is "/css/owl.carousel.css".
So, should I create an "owl.carousel.css" file in my child theme too? And also, which code should I add to my child-theme's "functions.php"?
Depends whether that owl css is loaded in the child theme too and what you mean by 'edit'. Child theme normally inherits all the parent php template files, and the parent functions.php but not the base css. So normally one has to enqueue the parent css if one wants to use it. I imagine in this case if it's not the main css it might be being loaded anyway? (View source to check)
1) If you don't want it at all, you could use wp_dequeue_style to get rid of it.
or
2) if by 'edit' you mean you just want to make minor modifications, you could add those minor mods to override the owl css in your own stylesheet.
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');
I am trying to link my stylesheet to another page in Wordpress. The actual Wordpress installation is within a folder, within the actual site. It's set up this way because I only want to use WP for a specific section of the site (it was an afterthought, I know this is isn't necessarily the "correct" way to do things...)
I have the front page set up and the styles are all working fine. But when a create a new page and try to use get_header to pull in the styles, they don't work. The browser is looking for a page called styles.css, not a stylesheet.
I've tried to use "enqueue" in the functions.php file, but it still won't work. I have a copy of my style sheet in the theme folder and also one inside a css folder.
Example of using enqueue for the copy inside the css folder:
wp_enqueue_script( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
*I am using get_header in my page template file, (same header as the front page which is working fine), and it is linked this way:
<link rel="stylesheet" type="text/css" href="../css/styles2.css">
I'm pretty sure the issue is the "../" but when I substitute echo get_stylesheet_directory_uri()....... instead of the ../, it doesn't work as it should.
Any help would be great as I'm newer to WP development.
Thanks everyone
You have to write like this for linking template style sheet ...
wp_enqueue_script( 'styles', get_template_directory_uri(). 'css/styles2.css', array(), '0.0.1' );
Add Style sheet like this:
wp_enqueue_style( 'styles', bloginfo('template_url').'/css/styles2.css' );
You can view more detail at here
You need to hook the css:
If you are using child theme then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_template_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If you are using parent theme (no child theme) then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_stylesheet_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If want to enqueue in admin side then just change hook name "wp_enqueue_scripts" to "admin_enqueue_scripts".
Try now.
You have used wp_enqueue_script() instead of wp_enqueue_style()
wp_enqueue_style used for Enqueue Style
wp_enqueue_script used for Enqueue Script
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
Here is the full example for the same.
add_action( 'wp_enqueue_scripts', 'enqueue_custom_style');
function enqueue_custom_style()
{
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
}
This is probably easy but I just want to make sure I'm doing it correctly. Basically I've been making a bunch of Wordpress sites using child themes and usually the style.css is in the root folder of the theme and I've been using this in my functions.php file
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
While this file exists in the parent theme I'm using, it's blank and I realized the CSS file being used was a different file name and nested in
\THEME-NAME\framework\css\site\stacks\THEME-CSS.css as opposed to just
THEME-NAME\style.css
So for the child theme do I have to recreate that folder structure and place a same named THEME-CSS.css in the same folder or do I just call it style.css and put it in the child themes root folder like it normally would be? Any other advice would be helpful. Thanks.
To add a stylesheet when in a child theme, these are the two options/behaviors:
// 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' );
As you said, when using get_template_directory_uri() the path will always point to the parent theme folder. Use get_stylesheet_directory_uri() to point to the current / child theme folder, if applicable.