Control the order where the style.css is added in the html head

  • Resolved arnabwahid

    (@arnabwahid)


    5 years, 5 months ago

    When using/developing 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, and 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.

    Note: I am not worried about the execution order and the dependencies; I’ll be taking care of them separately.

    • This topic was modified 5 years, 5 months ago by arnabwahid.
Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Control the order where the style.css is added in the html head’ is closed to new replies.