Wp_Enqueue_Style and Rel Other Than Stylesheet

wp_enqueue_style and rel other than stylesheet?

While neither function will let you pass that value in, you do have access to the tag before it is rendered with the style_loader_tag filter. If you do something like this...

add_filter('style_loader_tag', 'my_style_loader_tag_function');

function my_style_loader_tag_function($tag){
  //do stuff here to find and replace the rel attribute

  return $tag;
}

...you should be able to replace the rel attribute with whatever you want. Keep in mind that this filter will pass in the whole tag as html, so you'll have to do a preg_replace() or something similar to replace the value with what you want. Also, this filter will run every time you enqueue a stylesheet, so make sure you test that you've got the right one (with a preg_match() or something) before you alter the rel attribute.

Wordpress - enqueue style after all others or after certain styles

You could enqueue your stylesheets by hooking into wp_head, which prints data in the head tag on the front end.

function enqueue_styles() {
  wp_enqueue_style( 'frontend-style', plugin_dir_url( __FILE__ ) . 'styles.css' );
}

add_action( 'wp_head', 'enqueue_styles' ); // default priority: 10

If you need to output your stylesheets later, you can lower the priority.

For example,

add_action( 'wp_head', 'enqueue_styles', 20 ); 

Alternatively, you could change your selectors to be more specific, so your CSS rules take precedence over vs_composer's.

div {}
div.my-class {} /* more specific */
body div.my-class {} /* even more specific */

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. […] Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element.

— MDN source

How to enqueue stylesheets for different WordPress pages

You can use this function. Insert this code in functions.php

add_action( 'wp_enqueue_scripts', 'styles_custom');
function styles_custom() {
    global $post;
    $post_slug=$post->post_name;

    if ( is_front_page() ) { //only homepage
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-home.css' );
    }

    if (!is_front_page() ) { //all page, not homepage
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-all.css' );
    }
    if($post_slug == 'contact'){ //only page contact
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style-contact.css' );
    }
    if($post_slug == '[.....]'){
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' , '/style.css' );
    }
}

You can use post_slug, (e.g. Contact Us -> contact-us)

How to use HTML link media attribute in Wordpress with wp_enqueue_style()?

wp_enqueue_style() accepts media as the final argument:

wp_enqueue_style(
    'custom-stylesheet',
    get_stylesheet_directory_uri() . '/stylesheets/style.css',
    array(),
    '1.0.0',
    'screen and (min-width: 140px) and (max-width: 380px)'
);

Read more in the docs.

How to force wp_enqueue_style to display CSS at the very bottom of the head tag to override all CSS rules?

Hey. There's an argument called $deps for wp_enqueue_style, you should give it a try. You might be able to mention that your stylesheet depends on all the rest, thus putting it below the others. Other than that, you can also go ahead with !important. More info on dependencies: http://codex.wordpress.org/Function_Reference/wp_enqueue_style

WordPress theme wp_enqueue_style() doesn't work after uploading it

Stylesheets and scripts must be registered and/or enqueued using the wp_enqueue_scripts hook, but you are trying to load them using the init hook which is too early in the order of the WP actions.

Therefore to change your code to ensure the conditional enqueueing is done using add_action('wp_enqueue_scripts'...)

There are a few ways to change this:

1. Register and conditionally enqueue the styles/scripts in the same function - As you seem to be calling both load_certain_stylesheet and enque_certain_stylesheet anyway, you could simply add the conditional enqueueing into the load_certain_stylesheet function (and similarly for the JS functions), e.g.

function load_certain_stylesheet() {

    /* register all your stylesheets, e.g.*/
    wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array(), 2, false, 'all'); 

    /* Now conditionally load your stylesheets after they are registered, e.g.: */
    if (is_page(array('who-we-are'))) {
        wp_enqueue_style('page');
    }
}
add_action('wp_enqueue_scripts', 'load_certain_stylesheet');

---

2. Call the separate functions in the wp_enqueue_scripts hook, and set the order to execture them - If there is a reason that you want to register and enqueue them in separate functions, then you can change add_action for load_certain_stylesheet and load_certain_js from this:

add_action('init', 'load_certain_stylesheet');
add_action('init', 'load_certain_js');

to this:

add_action('wp_enqueue_scripts', 'load_certain_stylesheet');
add_action('wp_enqueue_scripts', 'load_certain_js');

This could now cause a problem with the order in which the functions get called in the wp_enqueue_scripts hook, e.g. we need to ensure that the load_certain_stylesheetis executed beforeenque_certain_stylesheet`.

We can do this by using the priority argument to the add_action function. This determines the order in which the different calls to add_action get executed, with the higher the number the lower the priority, so the later it gets called.

This means you can keep your functions exactly as they are, you just need to change the calls to add_action as follows:

add_action('wp_enqueue_scripts', 'load_main_stylesheet'); // default priority is 10

// Use a lower priority (i.e. a higher number) than the default which is 10, e.g.
add_action('wp_enqueue_scripts', 'load_certain_stylesheet', 15);  

// Use a lower priority (a higher number) than load_certain_stylesheet to call this after, e.g.
add_action('wp_enqueue_scripts', 'enque_certain_stylesheet', 20);

And similarly for the JS scripts

// Use a lower priority (i.e. a higher number) than the default which is 10, e.g.
add_action('wp_enqueue_scripts', 'load_certain_js');

// Use a lower priority (a higher number) than load_certain_js to call this after it, e.g.
add_action('wp_enqueue_scripts', 'enque_certain_js');

---

3. Call the separate functions in the wp_enqueue_scripts hook and use the dependencies parameter when registering/enqueueing scripts and styles - this makes sure that the style/script doesn't get loaded until after the dependencies.

For example if we take the following 2 stylesheets as an example (it doesn't matter that they are in separate functions, I've just put them together here to make it easier to explain)

//We register & enqueue your main stylesheet using the handle "style"
wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 12, false, 'all');

// Now we can use that handle as a dependency when registering pages.css, 
//which tells WP to only load this css AFTER loading style.css
wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array('style'), 2, false, 'all');

You have to add the dependency (or list of dependencies) to each individual call to wp_register_style, wp_enqueue_style, wp_register_script and wp_enqueue_script if that style/script cannot be loaded before another.

I'm not sure this is necessary in your situation - either of the above options should work - but you can find out more about using dependencies in this answer here:
Should you specify dependencies in both wp_register_script/style and wp_enqueue_script/style?

Wordpress enqueue function is not being called from functions.php; stylesheet not added

After some digging, I learned that I did not include wp_head() in the header of my header.php file. This is how Wordpress adds the stylesheet to the header and enqueue can't without it (also wp_footer in footer.php).

In header.php:

<head>

     <?php wp_head() ?>

</head>

In functions.php also used get_template_directory_uri() instead of get_stylesheet_uri() so that I could call a stylesheet with a unique name other than the default style.css.

  <?php

    function addExternalStuff(){
        wp_enqueue_style('style',get_template_directory_uri().'css/new_stylesheet.css');

    }  
    add_action('wp_enqueue_scripts','addExternalStuff'); 

How to use wp_enqueue_style() in my WordPress theme?

Not quite, but almost. What you want to do is place a function in functions.php that queues your script.

So:

function addMyScript() {
    wp_enqueue_style('mytheme', get_bloginfo('template_directory').'/style.less', array('blueprint'), '', 'screen, projection');
}
add_action('wp_head', 'addMyScript');

Then make sure you have do_action('wp_head'); in your header.php file and it should work just fine.

Put style.css below other css in wordpress

Can you try this code instead of yours in the question. Also search and remove any other wp_enqueue_style, I think the default one is being loading somewhere else before. Also check if it's hardcoded in header.php

function site_script(){
    wp_enqueue_style('normalize',get_template_directory_uri().'/inc/css/normalize.css');
    wp_enqueue_style('bootstrap',get_template_directory_uri().'/inc/css/bootstrap.css');
    wp_enqueue_style('theme_name',get_template_directory_uri().'/style.css');

    //jquery script
    wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
    wp_enqueue_script('jquery');

    //angular script
    wp_register_script('angular',get_template_directory_uri().'/inc/js/angular.js');
    wp_enqueue_script('angular');

    //bootstrap script
    wp_register_script('bootstrap',get_template_directory_uri().'/inc/js/bootstrap.min.js',array('jquery'));
    wp_enqueue_script('bootstrap');

}
add_action('wp_enqueue_scripts','site_script');

You might also need to update the jQuery part like this:

if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery',get_template_directory_uri().'/inc/js/jquery.js');
    wp_enqueue_script('jquery');
}

FYI: http://codex.wordpress.org/Function_Reference/wp_register_script

---

Related Topics