I am trying to get my head round the wp_add_inline_style() function in WordPress.
//setting inline css.
function my_styles_method() {
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
$color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
$custom_css = "
.mycolor{
background: {$color};
}";
wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
I understand most of it but I am not understanding this bit:
wp_enqueue_style(
'custom-style',
get_template_directory_uri() . '/css/custom_script.css'
);
Is this a dependency? or a blank css file so that code is written to it?
If its dependant then why? I just want to load custom css into the theme so it can be more customisable.
Thanks
Answer to my own question is, its a dependency :)
Related
this is driving me insane.
child theme .css is loaded, after the parent style, but the CSS is just not applied / doesn't override, I've searched around and I see several other people complaining about this.
Enqueing the style or even adding priority to it does not solve it.
Adding the same CSS via the theme customizer, the CSS is actually applied, so the CSS itself is not the problem here.
What can I do more?!
I finally found an enque setting that solves it,
function my_theme_enqueue_styles() {
wp_register_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array(),
filemtime( get_stylesheet_directory() . '/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') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
apparently what made a difference for me is the "array('parent-style')" value in the function atributes, must investigate it further but this was the only thing that solved it.
Have you included a dependency in the wp_enqueue_script()?
/**
* Proper way to enqueue scripts and styles
Example...
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style(
'stylesheet-name', // it will append '-css' in your source
get_template_directory_uri() . '/css/stylesheet-name.css',
array('parent-style'), // dependants (reliable on other stylesheet)
'null', // version, null or version number (1.0.1 etc)
'all' // media
);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Note: if you have a version number in your enqueue then the cache could stop it from loading. Some people use date() to change the value each time it refreshes...
I need to add sync or defer attribute in Stylesheets CSS file which are included by using wp_enqueue_style.
My Code is below.
function my_scripts() {
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.css', array(), '4.4.2');
wp_enqueue_style('my-style', get_stylesheet_uri());
wp_enqueue_style('about-page', get_template_directory_uri() . '/css/about-styles.css', array(), '4.4.3');
wp_enqueue_script('bootstrap-min', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '20151112', true);
wp_enqueue_script('jquery-scrollto', get_template_directory_uri() . '/js/jquery-scrollto.js', array(), '20112', true);
wp_enqueue_style('details-pages', get_template_directory_uri() . '/css/details-pages.css', array(), '4.4.3');
wp_enqueue_style('owl-carousel-css', get_template_directory_uri() . '/css/owl/owl.carousel.css', array(), '4.4.2');
wp_enqueue_script('owl-carousel-js', get_template_directory_uri() . '/css/owl/owl.carousel.min.js', array(), '202', true);
wp_enqueue_script('scripts-js', get_template_directory_uri() . '/js/scripts.js', array(), '20151112', true);
}
add_action('wp_enqueue_scripts', 'my_scripts');
Now I want to add sync or defer attribute in different CSS Style sheets. So please help me, how to add sync or defer attribute. I want to add attributes in just CSS files not in JavaScript files.
Any help will be appreciated.
Thanks.
Try this code
function add_custom_attr( $tag, $handle, $src ) {
$scriptArr = array('bootstrap','my-style','about-page','bootstrap-min','jquery-scrollto','details-pages','owl-carousel-css','owl-carousel-js','scripts-js');
if (in_array($handle, $scriptArr)) {
$tag = str_replace( 'src=', 'sync="false" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_custom_attr', 10, 3 );
Another solution using a different filter, which can be used to target a specific script handle:
function frontend_scripts(){
wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );
function make_script_async( $tag, $handle, $src ){
if ( 'my-unique-script-handle' != $handle ) {
return $tag;
}
return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );
I hope this will help you to solve your problems.
Thank you
This is the script I use to control style and script attributes:
enqueue script
This allows you to selectively add Defer, Async, and Lazy Load to stylesheets and scripts. A perfect way to make Google PageSpeed happy LOL.
Applying proper minification, caching and lazy loading of images, along with managing the styles and scripts with this script, changed our PageSpeed score from 60 mobile / 88 Desktop to 74 Mobile and 96 desktop.
I have this code which i am using for custom theme , but it is not linking css file, can someone let me know, what is wrong in it?
function delna_enqueue_style() {
wp_enqueue_style( 'style', get_stylesheet_directory_uri() . '/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'delna_enqueue_style' );
Use below code.
function load_parent_stylesheet() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'load_parent_stylesheet' );
Hope it will help for you.
I manually installed my WP child theme. The stylesheet works good for most things but I keep running against the odd thing or 2 where it reverts back to the parent theme stylesheet. Right now specifically I can't adjust my footer bottom margin.
Here's the Enqueque I have in my functions.php in the child theme:
<?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' );
}
Any idea why my child theme is acting this way? Thanks
Seems like you might need to enqueue the child theme's style.css as well. Doing it this way sets the parent style as a dependency for the child style and makes sure they get loaded in the correct order. Read more here.
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' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ), wp_get_theme()->get('Version') );
}
I have a page that I want to apply custom css file, but I am having difficulty loading the custom css file for my page 'homepage'. If anyone could help me out, it would be highly appreciated. thank you!
This part works:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
}
this part does not :(
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( '/stylehome.css', get_stylesheet_uri() );
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
You're misunderstanding how wp_enqueue_style should be used.
In the example below the first argument I pass in is a handle, 'style-home'. The second argument is the path to the file.
function wpse_load_scripts_styles() {
if ( is_page( 'homepage' ) ) {
wp_enqueue_style( 'style-home', get_stylesheet_directory_uri() . '/stylehome.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_load_scripts_styles' );
get_stylesheet_directory_uri() gets the URL to your child theme folder. get_template_directory_uri() which is used in the first block of code in your question gets the path to the parent theme directory. Select the correct function based on where the file is located.
My guess would be that you've set the page, homepage, as your front page therefore you may want to replace the conditional with is_front_page().
Replace:
if ( is_page( 'homepage' ) ) {
With:
if ( is_front_page() ) {
Finally get_stylesheet_uri() as used in the second block of code in your question will return the URL of the child theme's stylesheet (or the parent theme if you don't have a child theme setup).
Further reading: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Will this work for you?
function addcssAndScripts()
{
if ( is_page( 'homepage' ) )
{
wp_enqueue_style( 'child-home-style', get_stylesheet_directory_uri . '/stylehome.css');
}
}
add_action( 'wp_enqueue_scripts', 'addcssAndScripts');
http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri
http://codex.wordpress.org/Function_Reference/wp_enqueue_style