Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange
31

According to WordPress Codex (here): admin_enqueue_scripts is the first action hooked into the admin scripts actions. Example Loading a CSS or JS files for all admin area: <?php //from functions.php //First solution : one file //If you're using a child theme you could use: // get_stylesheet_directory_uri() instead of ...


22

WordPress knows what it is doing here. Honest. When rendering an ampersand in HTML, you should always use &amp; or &#038;. The browser then converts it to & before actually firing the HTTP request. See for yourself by inspecting the network calls in a web inspector tool. You're not actually losing your non-latin subsets. Notice the &#038;?...


19

You don't have to use @import. It's best not to, actually. Using an enqueued approach is probably better all around. Here's the relevant part of twentythirteen's code: function twentythirteen_scripts_styles() { ... // Loads our main stylesheet. wp_enqueue_style( 'twentythirteen-style', get_stylesheet_uri(), array(), '2013-07-18' ); ... } add_action(...


18

Just FYI, this question probably borders on too localized, as it is specific to the Oenology Theme. That said, here's where I think you're having a problem: Oenology enqueues two style sheets: style.css, directly in the document head (thus before wp_head() is fired) {varietal}.css, at wp_enqueue_scripts, with priority 11, in functions/dynamic-css.php: /** ...


17

It's important to enqueue the stylesheet because it will allow child themes the flexibility of dequeueing it as well as allowing it to be listed for dependencies and a multitude of other things. It just generally allows greater flexibility, both for you and for any other developers who interact with your code. It's also important to note that using the ...


16

As an addition to the other answer by @m0r7if3r: You can use current_theme_supports() to only load the parent themes stylesheet if there's theme support. function add_supported_stylesheets() { if ( current_theme_supports( 'parent-stylesheet' ) ) wp_enqueue_style( 'main', get_stylesheet_directory_uri().'/style.css', array(), filemtime( ...


14

I would say: you should not use the style.css for the actual production CSS. The reason is simple: minification. You cannot minify the content of the file completely, because WordPress has to read it. In my themes, I use style.css just for the headers, and I add a comment, explaining where to find the real CSS, so other developers don’t have to search too ...


12

Version number is a parameter of wp_enqueue_style(). As per the Codex, here are all the parameters that wp_enqueue_style accepts. wp_enqueue_style( $handle, $src, $deps, $ver, $media ); So for example to load a stylesheet with a version number you'd do the following: function wpa_90820() { wp_enqueue_style('my-styles', get_stylesheet_directory_uri() ....


12

Enqueue the style.css too, and set normalize as dependency: if ( ! is_admin() ) { // Register early, so no on else can reserve that handle add_action( 'wp_loaded', function() { wp_register_style( 'normalize', // parent theme get_template_directory_uri() . '/css/normalize.css' ); ...


12

style_loader_tag style_loader_tag is an official WordPress API, see the documentation: https://developer.wordpress.org/reference/hooks/style_loader_tag/ apply_filters( 'style_loader_tag', $html, $handle, $href, $media )Filters the HTML link tag of an enqueued style. First enqueue your stylesheet, see documentation: https://developer.wordpress.org/...


10

You can just register another stylesheet instead of style.css: add_action( 'wp_enqueue_scripts', 'enqueue_theme_css' ); function enqueue_theme_css() { wp_enqueue_style( 'default', get_template_directory_uri() . '/css/default.css' ); } This is, in my opinion, better than using style.css.


9

The problem is that your actions are being run in the order you perceive but the styles are just being collected by WordPress and included in a random order. The order of your add_actions will not be important. I would do this: function add_all_stylesheets() { // you omitted this from your question, see below } add_action('wp_enqueue_scripts', '...


9

Loading Scripts and Styles Dynamically Using Shortcode Advantages Does not search through all the posts every time the shortcode is called. Able to add styles as well as scripts dynamically only when shortcode is on the page. Does not use regexes since they tend to be slower than strstr() or strpos(). You could switch to regex if you need to accept args. ...


9

I think the best way to do this is to leave the child theme stylesheet (style.css) empty with only the necessary comments (like theme name, description etc, so can wordpress recognize your theme) and then make another css file in your-theme-name-folder/css/main.css After that on function.php you can have a new "version" every time you change your file : ...


8

Stylesheet Printing Order WordPress does not load themes' alternative rtl.css files using wp_register_style() or wp_enqueue_style(). As such, the stylesheet does not get added to WordPress's style queue, and cannot be specified as a dependency when registering or enqueueing additional stylesheets. Instead, this stylesheet's <link> element is added ...


8

My previous answer is overly complicated and potentially doesn't respect the parent theme's dependency chain (see note in other answer). Here's another much simpler take that should work much better: function use_parent_theme_stylesheet() { // Use the parent theme's stylesheet return get_template_directory_uri() . '/style.css'; } function ...


8

You can remove specific styles and java scripts for specific page template like below. Add the code into the functions.php file of your current theme. To see the list of all JS and CSS you may want to use a plugin like this: https://wordpress.org/plugins/debug-bar-list-dependencies/ /** * Remove specific java scripts. */ function se_remove_script() { ...


6

That would be because get_stylesheet_directory_uri only returns a value. If you want to echo it to to the screen you have to include echo or print. <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.jpg" /> bloginfo works fine as well, but when you do stylesheet_directory it's just a wrapper for get_stylesheet_directory_uri &...


6

What you need to do is de-register the main style by handle and then re-register with your version number. In this case the handle is style-css. You can determine the handle that you need to use by looking at the rendered stylesheet link: <link rel='stylesheet' id='style-css-css' href='http://site-url/wp-content/themes/child-theme/style.css?ver=4.6.1' ...


5

Well, it is the same form, but it is moved to another place in the DOM tree. So you could create one style for just .comments #respond, and one for .comments .comment #respond for the moved reply form.


5

Scribu has an excellent article on loading scripts in WordPress. Basically, if you need a script to load on every page, use the following code (blatantly copied from said article): add_action('template_redirect', 'add_my_script'); function add_my_script() { wp_enqueue_script('my-script', plugins_url('my-script.js', __FILE__), '1.0', true); } (I ...


5

There are a couple of options. One is to wrap the enqueue in a check to see if it is the admin. if(!is_admin()) wp_enqueue_style(....); The other is wait to enqueue the style until template_redirect. function my_enqueue_styles() { wp_enqueue_style(....); } add_action( 'template_redirect', 'my_enqueue_styles' );


5

Note that cForms is hooking into wp_head, and you're attempting to hook into wp_enqueue_scripts. The wp_enqueue_scripts hook is fired inside the wp_head hook (at priority 0, IIRC). So, your stylesheet is being enqueued at wp_head, priority 0, and the cForms stylesheet is being enqueued at wp_head, priority 10. Since it outputs later, it is taking precedence ...


5

get_stylesheet_directory_uri() returns a value, it doesn’t print anything. So you have to use: echo get_stylesheet_directory_uri(); get_template_part() is just a wrapper for locate_template(). But the latter has one advantage: It returns the path of the file it has found. Try the following: $path = locate_template( 'sidebar-front.php', TRUE ); echo $path;


5

Try this (will also handle HTTP vs HTTPS): function wpse_google_webfonts() { $protocol = is_ssl() ? 'https' : 'http'; $query_args = array( 'family' => 'Ubuntu+Condensed|Open+Sans:400italic,700italic,400,700', 'subset' => 'latin,latin-ext', ); wp_enqueue_style('google-webfonts', add_query_arg($query_args, "$...


5

I don't think you want get_stylesheet_uri, which will return the complete stylesheet URL including style.css. You want get_stylesheet_directory_uri, which will give you the path up to the child/parent theme stylesheet directory but not the trailing style.css, and which is the function used by the Roots theme per the code you posted. wp_enqueue_style('fsc', ...


5

Use wp_enqueue_style to add a print stylesheet, note the media parameter that lets you make it a print-specific stylesheet: function wpa_print_styles(){ wp_enqueue_style( 'wpa-print-style', get_stylesheet_directory_uri() . '/print-style.css', array(), '20130821', 'print' // print styles only ); } ...


5

Using wp_deregister_style( 'login' ) to remove the login styles will still result in a 404'd request for the login CSS file. However, if you re-register the login style after deregistering it you can prevent the unwanted request. add_action( 'login_init', function() { wp_deregister_style( 'login' ); wp_register_style( 'login' ); } ); This will ...


5

I don't know what your exact reason is for this, but you should scrap the idea of moving styles to the footer. If you though of a gain in speed, you might gain a unnoticable amount, if any, but that will be at the cost of other bigger things. Styles should always be added inside the <head></head> tag. The reason is that <style> tags ...


5

As @pieter-goosen and @birgire in other answer and comments, W3C specs do not allow css in footer, quote from specs page linked: A link element must have a rel attribute. If the rel attribute is used, the element is restricted to the head element. Aside from that, you should note that when you add css in footer, when someone opens your page it ...


Only top voted, non community-wiki answers of a minimum length are eligible