Qual é a maneira preferida de adicionar arquivos javascript personalizados ao site?

Para complementar a maravilhosa ilustração do Mike de usar enfileiramentos, gostaria apenas de salientar que os scripts incluídos como dependências não precisam ser enfileirados ...

Vou usar o exemplo sob o cabeçalho Scripts em um Plugin na resposta 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);
}

Isso pode ser reduzido para ler ..

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);
}

Quando você configura dependências, o WordPress irá encontrá-las e enfileirá-las prontas para o seu script, para que você não precise fazer chamadas independentes para esses scripts.

Além disso, alguns de vocês podem estar se perguntando se a configuração de dependências múltiplas pode fazer com que os scripts sejam exibidos na ordem errada, aqui, deixe-me dar um exemplo

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

Se o script dois fosse dependente do script três (ou seja, o script três deve ser carregado primeiro), isso não importaria, o WordPress determinará as prioridades de enfileiramento desses scripts e os exibirá na ordem correta; em resumo, tudo será resolvido automaticamente para você pelo WordPress.

Para pequenos pedaços de scripts, que você pode não querer incluir em um arquivo separado, por exemplo, porque eles são gerados dinamicamente, o WordPress 4.5 e ofertas adicionais wp_add_inline_script . Esta função basicamente trava o script para outro script.

Digamos, por exemplo, que você esteja desenvolvendo um tema e queira que seu cliente possa inserir seus próprios scripts (como o Google Analytics ou o AddThis) na página de opções. Você poderia então usar wp_add_inline_script para pegar esse script no seu arquivo js principal (digamos mainjs) assim:

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

Minha maneira preferida é obter um bom desempenho, portanto, em vez de usar wp_enqueue_script, uso o HEREDOC com a API Fetch para carregar tudo de forma assíncrona em 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;

E, em seguida, inseri-los na cabeça, às vezes junto com estilos como este:

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

Resultando em uma cascata assim, carregando tudo de uma vez, mas controlando a ordem de execução:

Nota: Isso requer o uso da API de busca, que não está disponível em todos os navegadores.