Connecting our stylesheet

We want to update Roots to use our main.css stylesheet. For this, perform the following steps:

  1. If you view source on your WordPress site and look for the stylesheet link, you'll see that our path is correct, but that the Roots stylesheet was named main.min.css with a version number added. Thus, the path in my locally installed version of WordPress looks like the following path:
    <link rel="stylesheet" href="http://localhost:8888/bootstrappin-portfolio/assets/css/main.min.css?ver=9a2dd99b82ca338b034e8730b94139d2">

    Note

    The Roots Gruntfile generates the version number using an MD5 hash. (See the documentation on this at http://roots.io/using-grunt-for-wordpress-theme-development/.) This workflow, while a great one, is beyond the scope of this book. We won't be generating a version number for our file.

  2. We simply need to update this link to point to our main.css file.
  3. Roots manages links to stylesheets and scripts using a file in its lib folder called scripts.php.
  4. Open scripts.php in your editor.
  5. Edit the enqueue script lines early in the file. Initially, it reads as the following line of code:
    wp_enqueue_style('roots_main', get_template_directory_uri() . '/assets/css/main.min.css', false, '9a2dd99b82ca338b034e8730b94139d2'),

    When done, our updated line should read as the following line of code:

    wp_enqueue_style('roots_main', get_template_directory_uri() . '/assets/css/main.css', false, null);
  6. Save the changes. Refresh to see if the changes took effect. You should see our custom styles back in place as well as our Font Awesome icons as shown in the following screenshot:
    Connecting our stylesheet

Pause. Enjoy!

But, you may notice that the carousel isn't running. Nor does the responsive navigation button work. We need to connect our JavaScript files.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset