Enqueueing IE conditional stylesheets in WordPress the right way - css

I know this question has been asked before on stackoverflow, but for the life of me I cannot get my conditional stylesheet to load and work for all versions of IE. I appreciate any help given in advance, it's really been getting to me, and I'm not sure what to do from here. I also tried loading the IE stylesheet in the header but that didn't seem to work either. My theme is not a child theme.
Here's my functions code:
function theme_styles() {
global $wp_styles;
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'glyphicons_css', get_template_directory_uri() . '/css/glyphicons.css' );
wp_enqueue_style( 'glyphiconssocial_css', get_template_directory_uri() . '/css/social.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
/**
* Load our IE-only stylesheet for all versions of IE:
* <!--[if IE]> ... <![endif]-->
*
* NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before
* calling the wp_enqueue_style() function. If you are trying to load a stylesheet for all browsers
* EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to
* properly handle non-IE conditional comments.
*/
wp_enqueue_style( 'ie_css', get_template_directory_uri() . '/ie.css', array('bootstrap_css', 'main_css') );
$wp_styles->add_data( 'ie_css', 'conditional', 'IE' );
} add_action( 'wp_enqueue_scripts', 'theme_styles' );

That method works fine. Note that commented styles seem to be invisible in FF Firebug, in Chrome developer tools on the other hand they are displayed.
add_action( 'wp_enqueue_scripts', 'so27214782_wp_enqueue_scripts' );
function so27214782_wp_enqueue_scripts()
{
global $wp_styles;
wp_enqueue_style( 'so27214782_ie', get_template_directory_uri() . '/ie.css', array(), '27214782', 'all' );
$wp_styles->add_data( 'so27214782_ie', 'conditional', 'IE 6' );
}

I don't see anything that might hamper your function. Here is how twentyfourteen load the conditional stylesheet
// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style', 'genericons' ), '20131205' );
wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );

Related

Mysterious Divi child theme css being ignored

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...

WordPress Child Theme styling not always working

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') );
}

Wordpress enqueue CSS in child theme with version

I am trying, essentially, to add the ?ver=1.0 tag to the end of my stylesheet, which I have included in my child theme's function file (enqueued). I have read the documentation in the codex but it does not seem to be applying in the source code, and it is not updating/cache breaking as intended when I apply updates.
The stylesheet itself is being included, however, the version is not applying, so I'm somewhat at a loose end here.
This is my current code:
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , filemtime(get_stylesheet_directory() . '/style.css'));
N.B. It is the last line to which I am trying to apply the version. (kallyas-child). The previous line (kallyas-styles) does appear to have some form of version ZN_FW_VERSION, but that does not produce the desired effect.
filemtime(get_stylesheet_directory() . '/style.css') is intended to break cache and update the version number each time the file is saved. Edit: I do, now, believe that this code does in fact work, but the theme (as it is a pre-build) is preventing it from applying properly. I will update if and when I figure this out, hoping to get to talk to the theme developers.
The issue is that your are using filemtime which return an int and you should have a string. As you can read in the documentation :
$ver
(string|bool|null) (Optional) String specifying stylesheet
version number, if it has one, which is added to the URL as a query
string for cache busting purposes. If version is set to false, a
version number is automatically added equal to current installed
WordPress version. If set to null, no version is added. Default value:
false
so you may try this :
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , strval(filemtime(get_stylesheet_directory() . '/style.css')));
I added the strval that will convert the int to string
Use below code
define('ZN_FW_VERSION','1.0');
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_dequeue_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', array() , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , ZN_FW_VERSION);
}
in functions.php I added
wp_enqueue_style( 'kallyas-child',
get_stylesheet_directory_uri() . '/style.css',
array( 'kallyas-styles' ),
filemtime(__DIR__.'/style.css')
);
tested it at tmp.demos.rent-a-ninja.org
worked with divi theme

wp_enqueue_script - Additional Jquery Does Not Appear in Source Code

I am able to put bootstrap.min.js with dependency on the native wordpress jquery, but Jquery 1.11.1 does not appear in the source code and Font Awesome also does not work correctly
I've tried some code from other questions in stackoverflow, but I still can not resolve my question
I put some comments in the code below:
UPDATED CODE
function enqueue_jquery() {
// deregister jquery ok
wp_deregister_script('jquery'); // unregister the WP-provided jQuery version
// tag is not added in code
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/js/jquery.js',
array(), // don't make jquery dependent on jquery...!
'1.11.1',
true
);
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');
function enqueue_styles_scripts() {
//its OK
wp_enqueue_style(
'style-theme',
get_stylesheet_uri(),
array('bootstrap-css')
);
//its OK
wp_enqueue_style(
'bootstrap-css',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
//its OK
wp_enqueue_style(
'stylish-portfolio',
get_template_directory_uri() . '/css/othercss.css'
);
//I changed the directory of the files to css and fonts folders and it worked correctly
wp_enqueue_style(
'font-awesome',
get_stylesheet_directory_uri() . '/css/font-awesome.css'
);
//Appears in header but is working correctly
wp_enqueue_script(
'bootstrap-js',
get_template_directory_uri() . '/js/bootstrap.min.js',null
);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_scripts');
//Its Ok
function wpse_ie_conditional_scripts() { ?>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php
}
add_action( 'wp_head', 'wpse_ie_conditional_scripts' );
?>
So the problem is that 'jquery' is already registered and queued by WP. What I have done in the past is first unregister the WP-provided jquery, and then enqueue my own version. WARNING: test this out thoroughly, because you will now be upgrading jQuery for the whole WP installation!
wp_deregister_script('jquery'); // unregister the WP-provided jQuery version
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/js/jquery.js',
array(), // don't make jquery dependent on jquery...!
'1.11.1',
true
);
Alternatively, you could load a second version of jQuery in no-conflicts mode, but that is not a really good idea...
Hope this helps!
I was able to resolve without using function to unregister the native wordpress jquery and register my theme jquery
//Without using function
wp_deregister_script('jquery');
wp_register_script('jquery', get_template_directory_uri() . '/js/jquery.js', false, '1.11.1');
wp_enqueue_script('jquery');
function enqueue_styles_scripts() {
//its OK
wp_enqueue_style(
'style-theme',
get_stylesheet_uri(),
array('bootstrap-css')
);
//its OK
wp_enqueue_style(
'bootstrap-css',
get_template_directory_uri() . '/css/bootstrap.min.css'
);
//its OK
wp_enqueue_style(
'stylish-portfolio',
get_template_directory_uri() . '/css/othercss.css'
);
//its OK
wp_enqueue_style(
'font-awesome',
get_stylesheet_directory_uri() . '/css/font-awesome.css'
);
//its OK
wp_enqueue_script(
'bootstrap-js',
get_template_directory_uri() . '/js/bootstrap.min.js',null
);
}
add_action('wp_enqueue_scripts', 'enqueue_styles_scripts');
//Its Ok
function wpse_ie_conditional_scripts() { ?>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<?php
}
add_action( 'wp_head', 'wpse_ie_conditional_scripts' );
?>

script not loading in functions.php

I am working on an underscores WordPress theme and I cannot seem to get any custom script to show results when I load the page. I have attempted to include a simple script 'test.js' in functions.php to test it out. All the other scripts work just fine. Any help would be appreciated:
function blake_eric_scripts() {
/**
* Enqeue bootstrap javascript
*/
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js', array('jquery'), '3.3.6', true);
/**
* Enqeue bootstrap styles
*/
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css', array(),
'3.3.6', 'all' );
wp_enqueue_script( 'blake-eric-test', get_template_directory_uri() . '/js/test.js', array('jquery'));
/**
* Enqeue styles.css
*/
wp_enqueue_style( 'blake-eric-style', get_stylesheet_uri() );
wp_enqueue_script( 'blake-eric-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'blake_eric_scripts' );
Here is the simple jQuery script "test.js":
$(function(){
$('#main').addClass('test-class');
});
Thanks!
replace your test.js with following set of codes :-
jQuery(function(){
jQuery('#demo').addClass('test-class');
});
This types of error generally occurs because of conflict with others js files.
By default Wordpress runs jQuery in no-conflict mode, so you can't use the $ sign and define a function like this
$(function(){
$('#main').addClass('test-class');
});
Instead what you can do is
jQuery(function($){
$('#main').addClass('test-class');
});
if you include the $ sign inside the parenthesis you can use it on the rest of the function.
for more details check here

Resources