hacks-guide-minimal-mistake.../docs/_docs/17-javascript.md

---
title: "JavaScript"
permalink: /docs/javascript/
excerpt: "Instructions for customizing and building the theme's scripts."
last_modified_at: 2019-05-02T08:55:27-04:00
---

The theme's `assets/js/main.min.js` script is built from several vendor, jQuery plugins, and other scripts found in [`assets/js/`](https://github.com/mmistakes/minimal-mistakes/tree/master/assets/js).

```bash
minimal mistakes
├── assets
|  ├── js
|  |  ├── plugins
|  |  |   ├── gumshoe.js                     # simple scrollspy
|  |  |   ├── jquery.ba-throttle-debounce.js # rate-limit functions
|  |  |   ├── jquery.fitvids.js              # fluid width video embeds
|  |  |   ├── jquery.greedy-navigation.js    # priority plus navigation
|  |  |   ├── jquery.magnific-popup.js       # responsive lightbox
|  |  |   └── smooth-scroll.js               # make same-page links scroll smoothly
|  |  ├── vendor
|  |  |   └── jquery
|  |  |       └── jquery-3.5.1.js
|  |  ├── _main.js                           # jQuery plugin settings and other scripts
|  |  └── main.min.js                        # concatenated and minified theme script
```

## Customizing

To modify or add your own scripts include them in [`assets/js/_main.js`](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/js/_main.js) and then rebuild using `npm run build:js`. See below for more details.

If you add additional scripts to `assets/js/plugins/` and would like them concatenated with the others, be sure to update the `uglify` script in [`package.json`](https://github.com/mmistakes/minimal-mistakes/blob/master/package.json). Same goes for scripts that you remove.

You can also add scripts to the `<head>` or closing `</body>` elements by adding paths to following arrays in `_config.yml`.

**Example:**

```yaml
head_scripts:
  - https://code.jquery.com/jquery-3.3.1.min.js
  - /assets/js/your-custom-head-script.js
footer_scripts:
  - /assets/js/your-custom-footer-script.js
after_footer_scripts:
  - /assets/js/custom-script-loads-after-footer.js
```

**Note:** If you assign `footer_scripts` the theme's `/assets/js/main.min.js` file will be deactivated. This script includes jQuery and various other plugins that you'll need to find replacements for and include separately.
{: .notice--warning}

---

## Build process

In an effort to reduce dependencies a set of [**npm scripts**](https://css-tricks.com/why-npm-scripts/) are used to build `main.min.js` instead of task runners like [Gulp](http://gulpjs.com/) or [Grunt](http://gruntjs.com/). If those tools are more your style then by all means use them instead :wink:.

To get started:

1. Install [Node.js](http://nodejs.org/).
2. `cd` to the root of your project.
3. Install all of the dependencies by running `npm install`.

**Note:** If you upgraded from a previous version of the theme be sure you copied over [`package.json`](https://github.com/{{ site.repository }}/blob/master/package.json) prior to running `npm install`.
{: .notice--warning}

If all goes well, running `npm run build:js` will compress/concatenate `_main.js` and all plugin scripts into `main.min.js`.
Move `gh-pages` branch files into `/docs` and add test files - Jekyll ignore `/docs` and `/test` folders when using from root - Update Staticman config to point to correct branch and data file location - Replace `{{ base_path }}` references with `absolute_url` filter - Update documentation 2016-11-03 16:52:04 +01:00			`---`
			`title: "JavaScript"`
			`permalink: /docs/javascript/`
			`excerpt: "Instructions for customizing and building the theme's scripts."`
Update JavaScript listing 2019-05-02 14:58:17 +02:00			`last_modified_at: 2019-05-02T08:55:27-04:00`
Move `gh-pages` branch files into `/docs` and add test files - Jekyll ignore `/docs` and `/test` folders when using from root - Update Staticman config to point to correct branch and data file location - Replace `{{ base_path }}` references with `absolute_url` filter - Update documentation 2016-11-03 16:52:04 +01:00			`---`

Remove brackets 2018-01-04 01:12:51 +01:00			The theme's `assets/js/main.min.js` script is built from several vendor, jQuery plugins, and other scripts found in [`assets/js/`](https://github.com/mmistakes/minimal-mistakes/tree/master/assets/js).
Move `gh-pages` branch files into `/docs` and add test files - Jekyll ignore `/docs` and `/test` folders when using from root - Update Staticman config to point to correct branch and data file location - Replace `{{ base_path }}` references with `absolute_url` filter - Update documentation 2016-11-03 16:52:04 +01:00
			```bash
			`minimal mistakes`
			`├── assets`
			`\| ├── js`
			`\| \| ├── plugins`
Update JavaScript listing 2019-05-02 14:58:17 +02:00			`\| \| \| ├── gumshoe.js # simple scrollspy`
			`\| \| \| ├── jquery.ba-throttle-debounce.js # rate-limit functions`
			`\| \| \| ├── jquery.fitvids.js # fluid width video embeds`
			`\| \| \| ├── jquery.greedy-navigation.js # priority plus navigation`
			`\| \| \| ├── jquery.magnific-popup.js # responsive lightbox`
			`\| \| \| └── smooth-scroll.js # make same-page links scroll smoothly`
Move `gh-pages` branch files into `/docs` and add test files - Jekyll ignore `/docs` and `/test` folders when using from root - Update Staticman config to point to correct branch and data file location - Replace `{{ base_path }}` references with `absolute_url` filter - Update documentation 2016-11-03 16:52:04 +01:00			`\| \| ├── vendor`
			`\| \| \| └── jquery`
Update jQuery to 3.5.1 (#2713) * Update jQuery to 3.5.1 Closes #2712 * Build NodeJS Run using `npm run build:js` 2020-11-02 17:25:10 +01:00			`\| \| \| └── jquery-3.5.1.js`
Update jQuery to v3.4.1 ref #2137 2019-05-02 14:57:57 +02:00			`\| \| ├── _main.js # jQuery plugin settings and other scripts`
			`\| \| └── main.min.js # concatenated and minified theme script`
Move `gh-pages` branch files into `/docs` and add test files - Jekyll ignore `/docs` and `/test` folders when using from root - Update Staticman config to point to correct branch and data file location - Replace `{{ base_path }}` references with `absolute_url` filter - Update documentation 2016-11-03 16:52:04 +01:00			```

			`## Customizing`

			To modify or add your own scripts include them in [`assets/js/_main.js`](https://github.com/mmistakes/minimal-mistakes/blob/master/assets/js/_main.js) and then rebuild using `npm run build:js`. See below for more details.

			If you add additional scripts to `assets/js/plugins/` and would like them concatenated with the others, be sure to update the `uglify` script in [`package.json`](https://github.com/mmistakes/minimal-mistakes/blob/master/package.json). Same goes for scripts that you remove.

Allow `<head>` and footer scripts to be changed via config (#1241) * Allow `<head>` and footer scripts to be changed via config * Update JavaScript documentation Close #1238 2017-09-12 18:27:36 +02:00			You can also add scripts to the `<head>` or closing `</body>` elements by adding paths to following arrays in `_config.yml`.

			`Example:`

			```yaml
			`head_scripts:`
update to jquery 3.3.1 (#1540) 2018-02-21 13:41:28 +01:00			`- https://code.jquery.com/jquery-3.3.1.min.js`
Allow `<head>` and footer scripts to be changed via config (#1241) * Allow `<head>` and footer scripts to be changed via config * Update JavaScript documentation Close #1238 2017-09-12 18:27:36 +02:00			`- /assets/js/your-custom-head-script.js`
			`footer_scripts:`
			`- /assets/js/your-custom-footer-script.js`
Allow adding JavaScript files after the theme's (#2116) Allow adding JavaScript files after those bundled in the theme Close #2110 2019-04-09 03:03:52 +02:00			`after_footer_scripts:`
			`- /assets/js/custom-script-loads-after-footer.js`
Allow `<head>` and footer scripts to be changed via config (#1241) * Allow `<head>` and footer scripts to be changed via config * Update JavaScript documentation Close #1238 2017-09-12 18:27:36 +02:00			```

			Note: If you assign `footer_scripts` the theme's `/assets/js/main.min.js` file will be deactivated. This script includes jQuery and various other plugins that you'll need to find replacements for and include separately.
			`{: .notice--warning}`

Move `gh-pages` branch files into `/docs` and add test files - Jekyll ignore `/docs` and `/test` folders when using from root - Update Staticman config to point to correct branch and data file location - Replace `{{ base_path }}` references with `absolute_url` filter - Update documentation 2016-11-03 16:52:04 +01:00			`---`

Update theme documentation 2018-11-26 01:48:19 +01:00			`## Build process`
Move `gh-pages` branch files into `/docs` and add test files - Jekyll ignore `/docs` and `/test` folders when using from root - Update Staticman config to point to correct branch and data file location - Replace `{{ base_path }}` references with `absolute_url` filter - Update documentation 2016-11-03 16:52:04 +01:00
			In an effort to reduce dependencies a set of [npm scripts](https://css-tricks.com/why-npm-scripts/) are used to build `main.min.js` instead of task runners like [Gulp](http://gulpjs.com/) or [Grunt](http://gruntjs.com/). If those tools are more your style then by all means use them instead :wink:.

			`To get started:`

			`1. Install [Node.js](http://nodejs.org/).`
			2. `cd` to the root of your project.
			3. Install all of the dependencies by running `npm install`.

			Note: If you upgraded from a previous version of the theme be sure you copied over [`package.json`](https://github.com/{{ site.repository }}/blob/master/package.json) prior to running `npm install`.
			`{: .notice--warning}`

Remove brackets 2018-01-04 01:12:51 +01:00			If all goes well, running `npm run build:js` will compress/concatenate `_main.js` and all plugin scripts into `main.min.js`.