How to add custom stylesheet or script?, never use gulp bower grunt before

1

Hi so i am new with sage here i have tried roots from an ebook unfortunately when i try to use sage some of the tutorial i learn could not work in sage. for your info i am never use bower gulp and grunt before, i dont know if this will effect or not with my problem. So i have place my css/js in here.

assets/css/csutom_style.css
assets/js/custom_script.js

and then in the assets.php i include this below the

wp_enqueue_style('sage_css', asset_path('styles/main.css'), false, null);

my code

wp_enqueue_style('style', asset_path('css/custom_style.css'), false, null);

i try refresh unfortunately and see my css link correct or not i try to click it and found that i redirected to “Page not found”

What should i do thanks…
Sage is my first framework with wordpress and its awesome :smiley:

2

The “my code”-part should point to your created css. ie.

wp_enqueue_style('style', asset_path('css/csutom_style.css'), false, null);

Also you have a typo in csutom_style.css assuming it should be ‘custom_style.css’ ?

Please verify that you have named your files the same name as you’re trying to include.

3

Hi stefan thanks for the reply, sorry the misstype in here, but not in my code because in my code i use style.css so this is just as an example…also fyi the default main.css from the sage also have this problem in my local development a.k.a page not found, do i need to touch manifest.json file on assets?

Here is my code on atom

and what it looks like on view source

and what i get is when click on the style link

The requested URL /hivemind/wp-content/themes/hivemind-theme/dist/css/style.css was not found on this server.

fyi the only stylesheets that linked correctly is
admin-bar.min.css, and dashicons.min.css

4

Ok I see. So it looks like you need to compile your css (and all other assets). This will generate a dist folder in the theme.

But you haven’t installed bower and npm dependencies yet. All of this is part of the install instructions if you look in the readme.

In short here it is:

  1. First you need node.js -> https://nodejs.org/download/
  2. Then install Bower and Gulp globally with npm install -g gulp bower
  3. Navigate to the theme folder and run npm install; bower install
    Open /assets/manifest.json and change
    "config": { "devUrl": "example.com" }
    To whatever your dev domain is.

After that you can run gulp to build the assets (from the theme directory) with gulp.

If you’re developing it could be helpful to run gulp watch and get live reloads of the assets.

Hope this helps and you can read it step by step here https://github.com/roots/sage

2 Likes
5

I have use node before but never bower gulp and grunt… i will try it and see how it goes thanks a lot.