Control the order where the style.css is added in

  • Resolved arnabwahid

    (@arnabwahid)


    5 years, 5 months ago

    When using any theme in WordPress, the theme stylesheet is usually placed before the google fonts link, which is also usually the 6th or 7th link in the <head>. Something like – 

    
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="profile" href="https://gmpg.org/xfn/11">
  <title>Twenty Sixteen Child</title>
  <link rel="stylesheet" href="https://wordpress.dev/wp-includes/css/dist/block-library/style.min.css">
  <link rel="stylesheet" href="https://wordpress.dev/wp-includes/css/dist/block-library/theme.min.css">
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twentysixteen/style.css"><!-- Not Here -->
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twig/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C400italic%2C700italic%2C900italic%7CMontserrat%3A400%2C700%7CInconsolata%3A400&subset=latin%2Clatin-ext">
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twentysixteen/genericons/genericons.css">
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twentysixteen/css/blocks.css">
</head>

    I want to make the theme stylesheet the first linked item on in the <head>, right after the <title>. Just like (Theme style as the first css file in the head) – 

    
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="profile" href="https://gmpg.org/xfn/11">
  <title>Twenty Sixteen Child</title>
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twentysixteen/style.css"><!-- Here!!! -->
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twig/style.css">
  <link rel="stylesheet" href="https://wordpress.dev/wp-includes/css/dist/block-library/style.min.css">
  <link rel="stylesheet" href="https://wordpress.dev/wp-includes/css/dist/block-library/theme.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather%3A400%2C700%2C900%2C400italic%2C700italic%2C900italic%7CMontserrat%3A400%2C700%7CInconsolata%3A400&subset=latin%2Clatin-ext">
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twentysixteen/genericons/genericons.css">
  <link rel="stylesheet" href="https://wordpress.dev/wp-content/themes/twentysixteen/css/blocks.css">
</head>

    How can I control the order how where my enqueued stylesheet and scripts will be placed in the <head>? I have been searching online, couldn’t find any existing solution. If anyone can guide me in the right direction, I’d be very grateful. Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

  • There are two factors which affect the order: the execution order and the dependencies.
    The execution order can be changed a slight bit by adjusting the priority argument for the qp_enqueue_style call, but core code and plugins will always run before the theme is loaded, so you can’t actually get the theme style to come out first without removing all the ones ahead of it and re-enqueuing them, or using some hack to manipulate the data structure directly which is a bad idea.
    A style with no dependencies will come out in the order it was enqueued, but if it does depend on something, it will come out after that dependency.

    There might be some filters that would allow you to manipulate the order, but it is not advisable because of the dependency concern.

    Thread Starter arnabwahid

    (@arnabwahid)

    Thanks Joy. I have something specific in mind. As there won’t be anything other than the loop, WP won’t require any dependency on the front-end.

    >>There might be some filters that would allow you to manipulate the order, but it is not advisable because of the dependency concern.

    I checked the codex, and help forums, haven’t able to find a filter, or function to reorder the head links. As I am trying it out in a local environment, I am not worried about breaking it.

    Thread Starter arnabwahid

    (@arnabwahid)

    Figured it out myself. The solution lies in overriding the execution sequence, and removing cruft from the head.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Control the order where the style.css is added in’ is closed to new replies.