¿Cuál es la forma recomendada de añadir archivos javascript personalizados al sitio?

Para complementar la maravillosa ilustración de Mike sobre el uso de enqueues, solo deseo señalar que los scripts incluidos como dependencias no necesitan ser encolados...

Usaré el ejemplo bajo el encabezado Scripts en un Plugin de la respuesta de Mike.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

Esto se puede reducir a...

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

Cuando estableces dependencias, WordPress las encontrará y las encolará listas para tu script, por lo que no necesitas hacer llamadas independientes para estos scripts.

Además, algunos podrían preguntarse si establecer múltiples dependencias podría causar que los scripts se carguen en el orden incorrecto. Permíteme dar un ejemplo:

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

Si el script dos dependiera del script tres (es decir, el script tres debería cargarse primero), esto no importaría, WordPress determinará las prioridades de encolado para esos scripts y los cargará en el orden correcto. En resumen, WordPress lo resuelve todo mágicamente por ti.

Para pequeños fragmentos de scripts, que quizás no quieras incluir en un archivo separado, por ejemplo porque se generan dinámicamente, WordPress 4.5 y versiones posteriores ofrece la función wp_add_inline_script. Básicamente, esta función adjunta el script a otro script.

Digamos, por ejemplo, que estás desarrollando un tema y quieres que tu cliente pueda insertar sus propios scripts (como Google Analytics o AddThis) a través de la página de opciones. Entonces podrías usar wp_add_inline_script para adjuntar ese script a tu archivo js principal (digamos mainjs) de la siguiente manera:

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);

Mi forma preferida para lograr un buen rendimiento es, en lugar de usar wp_enqueue_script, utilizar HEREDOC con la Fetch API para cargar todo de manera asíncrona y en paralelo:

$jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
$jquery_dependent_script_paths = [
  get_theme_file_uri( '/assets/js/global.js' ),
  get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
  get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
  get_theme_file_uri( '/assets/js/navigation.js' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("`inputs` must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("`promise` must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
})();
</script>
EOD;

Y luego insertarlos en el head, a veces junto con estilos de esta manera:

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

Lo que resulta en una cascada de carga que se ve así, cargando todo a la vez pero controlando el orden de ejecución:

Nota: Esto requiere el uso de la Fetch API, que no está disponible en todos los navegadores.