Для начала было решено разбить код на части, на отдельные файлы, и каждый кусок функционала выносить в отдельный файл. Так же пригодился модульный подход при работе с JS. Полностью писать статью о том как это все делалось времени не хватит, ибо работы много. Вам лишь приведу в пример заготовку, шаблон, темплейт каждого отдельного JS файла.

Пример JS кода:

/**
 * =====================================================================================================================
 * App
 * =====================================================================================================================
 */
var App = (function (r, $) {
 "use strict";

 /**
  * private options
  * =================================================================================================================
  */
 var private_option_1;
 var private_option_2;

 /**
  * private method 1
  * =================================================================================================================
  */
 function private_method_1() {
 // code
 }

 /**
  * private method 2
  * =================================================================================================================
  */
 function private_method_2() {
 // code
 }

 /**
  * public options
  * =================================================================================================================
  */
 r.public_option_1 = 'public_option_1';
 r.public_option_2 = 'public_option_2';

 /**
  * public method 1
  * =================================================================================================================
  */
 r.public_method_1 = function() {
 // code
 };

 /**
  * public method 2
  * =================================================================================================================
  */
 r.public_method_2 = function() {
 // code
 };

 /**
  * return
  * =================================================================================================================
  */
 return r;

})(App || {}, jQuery);

console.log(App);

Если имеются дополнения пишите в комментариях, будем добавлять.

Сообщение Организация JavaScript файлов, модульный подход появились сначала на Wiki | PWODEV.

<?php
/*
Template Name: Home Page Template
*/
?>

<!-- Дальше пишем html/php код нашего шаблона -->

Сохраняем, и заходим в админку в редактирование или создание страницы и увидим что у нас появился пункт выбора шаблона к странице:

И еще одна приятная новость, с версии WordPress 4.7 кастомные шаблоны можно создавать не только для страниц! Чтобы создать свой шаблон, свой вид отображения поста, страницы или любого другого типа записи нужно дополнить код еще одной строкой. Вот весь код:

<?php
/*
Template Name: Custom template name
Template Post Type: post, page, product
*/
?>

Теперь как и в предыдущий раз со страницей возможность выбора шаблона появится во всех типах записей которые мы перечислили в Template Post Type.

Сообщение Custom Page Template for WordPress появились сначала на Wiki | PWODEV.