Adding extra JS files

Sometimes you need to add an extra jQuery plugin or library, for example, Moment.js, Waypoints.js, etc.

Normally you would add it by creating a script tag and setting the src to the URL of the script (from a CDN for example).

But Hummingbird Lite includes a script manager, similar to the one in WordPress, that allows you to register and later enqueue scripts.

To do so, you'll add an entry in your functions.inc.php file, for example, to add Moment.js you would add:

$site->registerScript('moment.js', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js', true);
$site->enqueueScript('moment.js');

So basically you register the script and then enqueue it, so it gets included on the page.

The script manager also supports specifying an array of depencies, so the scripts get loaded in the correct order everytime, for example:

$site->registerScript('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js', true);
$site->registerScript('jquery.cycle2', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js', true, array('jquery'));
$site->enqueueScript('jquery.cycle2');

In the example above we registered jQuery as jquery, then jQuery Cycle 2 as jquery.cycle2 with a dependency on jquery and finally we enqueued just jquery.cycle2 which in order will include all its dependencies, in this case jquery.

You may be wondering what the third parameter true means. That indicates that the script should be treated as external, that is, it is not placed inside the assets/scripts folder.

If you want to host your own scripts, you must place the file(s) inside the folder assets/scripts, for example if you want to serve the jquery.min.js from your server you would do it this way:

$site->registerScript('jquery', 'jquery.min.js', false);
$site->enqueueScript('jquery');

Setting the third parameter to false marks the script as an internal script.

You may even mix internal and external scripts:

$site->registerScript('jquery', 'jquery.min.js', false);
$site->registerScript('jquery.cycle2', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js', true, array('jquery'));
$site->enqueueScript('jquery.cycle2');

Now you that you have added your scripts, checkout the JavaScript tutorial to start building awesome things.

Adding stylesheets

Hummingbird includes a simple reset (from [html5doctor.com](http: //html5doctor.com/html-5-reset-stylesheet/)) and a default stylesheet.

However, you may want to add extra styleesheets and even remove the ones included (for example, you may add Bootstrap, which comes with its own reset).

To remove a stylesheet, just go to the functions.inc.php file and remove the corresponding calls to registerStyle or enqueueStyle, for example

// Comment or remove so no reset is included
// $site->registerStyle('reset', 'reset.css', false );
// Remove the 'reset' dependency from the array
$site->registerStyle('site', 'site.css', false, array('google-fonts') );
$site->enqueueStyle('site');

And if you want to add extra sheets, just register them and then enqueue 'em or add 'em as depenencies to your main stylesheet:

// Register Bootstrap as an external resource
$site->registerStyle('twitter-bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css', true);
// Add 'twitter-bootstrap' dependency to the array
$site->registerStyle('site', 'site.css', false, array('twitter-bootstrap', 'google-fonts') );
$site->enqueueStyle('site');

Take notice of the third parameter on the registerStyle call: as you are linking to a file from cdnjs.com, you must set that param to true so Hummingbird knows it is an external resource (not served from your server).

You may add internal resources too, for example of you want to serve your own customized copy of Bootstrap, in that case set the third parameter to false:

// Register Bootstrap as an internal resource
$site->registerStyle('twitter-bootstrap', 'bootstrap.min.css', false);
// Add 'twitter-bootstrap' dependency to the array
$site->registerStyle('site', 'site.css', false, array('twitter-bootstrap', 'google-fonts') );
$site->enqueueStyle('site');

You can mix internal and external resources if you want or need to.

Go back to previous page