Including additional JS files

sage
1

Hi all,

As this is my first post here, let me start by introducing myself;
My name is Steven, I’m a graphic designer and photographer from Belgium and once in a while I need to create a small business or personal website.

In the past I have created a couple of websites based on the good old Roots version 7.
I am starting a new personal web project as we speak and I am moving to Sage for the very first time…
I’ve bought the “Theme Development With Sage” book to get me started.

So,… I am new to Sage, Gulp and Bower but I’ve been reading and exploring for a few days now and I am pretty close to get it all working. Except for enqueuing additional JS files…

My Sage project is running on a MAMP environment (I know some of you guys don’t like MAMP, but that’s already complicated and challenging enough for me :smile: )

This is what I’ve got so far:

  1. Installed Node.js

  2. Ran the NPM, Bower & Gulp commands (Gulp created the dist/ directory)

  3. Restored the Bootstrap Nav (thanks @smutek)

  4. Added custom CSS to the component files

  5. I need to add an additional JS file. This is a JS file I’ve been using for an older project and it will be useful in this project too. I created a new file in assets/scripts called custom.js and changed assets/manifest.json accordingly:

    Screen Shot 2015-12-19 at 19.27.59.png386×564 32.4 KB
    <

  6. I have tried adding a new enqueue for the custom.js file by adding the following to setup.php:
    wp_enqueue_script('customjs', \asset_path('scripts/custom.js'), ['jquery'], null, true);

Unfortunately this doesn’t work for me.
If I am putting this enqueue on the bottom of setup.php, I get a blank screen and Firebug gives me : "NetworkError: 500 Internal Server Error.

Could someone please tell me what I am doing wrong?
Thank you in advance!
Steven

1 Like
2

Howdy! Looking good so far, if you look in your dist directory after running gulp, you should notice dist/scripts/custom.js in there.

The last thing you need to do is enqueue the new JS file. Open up lib/setup.php and at the bottom with the other enqueues, add:

wp_enqueue_script('sage/custom_js', Assets\asset_path('scripts/custom.js'), ['sage/js'], null, true);

PS. Hopefully we can convert you from MAMP to Trellis soon :wink:

5 Likes
3

Hi @ben! Thank you for your swift reply!

I am running gulp watch all the time while developing.
Do I have to run gulp again because I just created this new file? Doesn’t gulp watch takes creation of new files into account?

I have used your enqueue code above and custom.js does appear in my dist/ directory now indeed!

Trellis will be the next big challenge for me :sweat_smile:

Thank you again!

4

Just chiming in - yes, when adding new things to your build, eg. Bower components etc., you should stop your watch task and run Gulp.

3 Likes
5

Thank you both for helping me out. I’m all set :wink:

6

Hi guys,
I want to thank you again for your amazing work and support!
Thanks to the Roots theme, thanks to all contributors! Thank you @ben, @smutek, @kalenjohnson @Foxaii for your help with different topics!

My first Sage website is now online: http://www.ciclostudio.com and I am very proud of it since I basically started from scratch, without theme development skills and limited PHP skills :wink:

I’d appreciate your feedback!

Regards,
Steven

4 Likes
7

Congrats dude, looks great! Now, build another! :sunglasses:

8

Thanks @smutek! Adaptive images is the last thing I’d like to add to this project.
I’m looking into this approach: https://github.com/verlok/picturePolyfill
After that, I will definitely make another :wink:

9

Looks really nice! Only thing I would suggest is making your menu fixed to the top.
I can also recommend respimage as responsive picture polyfill!

10

Hi @Twansparant, thanks for your constructive feedback!
I have tested and weighed the pros and cons of a “navbar-fixed” and decided not to go for it.
I do see the advantage of a fixed menu in terms of usability (ease of access) but the primary focus for this website is the actual content and photo’s. Providing high quality (large-size) images to our visitors. A fixed menu took up too much space accrding to my test experience. This is also why I have decided to add the menu to the footer.
I guess this could be a never-ending debate, but I do appreciate your feedback :slightly_smiling:

Thanks for mentioning respimage! I’ll do some more research on this.

11

I’m new using Gulp and it took me a while to figure this out… Maybe something to add to the Theme Development With Sage book :bulb:

Best

1 Like
12

Thanks so much for this contribution, i’ve been stuck for days with this.

1 Like
13

Can you add it to the main.js file instead of enqeueing it as a separate script?

1 Like