Hyubert

Оу, вы кажется не разработчик? PHP не знаете? Тогда у вас впереди очень долгий и тернистый путь. Учить придется много чего. Если кратко по вопросам:

1. Изменения записываются аяксом, который триггерит PHP-функционал на бекенде и сохраняет данные (настройки) в БД. Впрочем, сейчас наступила эра Customizer, поэтому все эти кастомные панельки начали уходить в прошлое (и слава богам). Подробнее: Customizer API
2. Это custom templates, пользователь либо на вот этом фронтенде выбирает, либо в админке в метабоксе. Сами шаблоны должен сделать разработчик. Подробнее тут.
3. Как удобно, но есть определенные best practices + нативная вордпресовская Template Hierarchy от которой никуда не денешься.
4. Theme Developer Handbook.

Должен уметь пользоваться гуглом. Он выдаёт не один десяток вопросов, полностью идентичных вашему, в том числе и на этом ресурсе, и все возможные ответы на них уже неоднократно даны.

Чтобы уметь играть на пианино,нужно играть на пианино,больше верстайте и будет вам счастье)
Видишь задачу - решаешь,очень помогает подсматривать исходный код других страниц)

и там ставиться задача вывести в консоль решетку 8 на 8 вида .... то я впадаю в ступор, и бьюсь над задачей пару часов

я тоже впал в ступор, прикинь? а я проф программист.

просто не надо решать откровенно идиотские задачи, не real-life задачи. любые алгоритмы ты начнешь понимать и реализовывать в процессе обучения, с опытом. А сейчас, будь добр, начни писать на ЯП реальные задачи, а не идиотские типа той, что ты привел.

Выучи основные конструкции управления, которые есть во всех современных ЯП. Учи сам язык. Пиши на нем. И рано или поздно все получится, поверь.

Но не надо обучаться, НИКОГДА не надо обучаться на задачах, которые не имеют мотивации и смысла. Вот эти задачи с выводом треугольника в консоль - они действительно отобьют всю любовь к программированию.
Хочешь научиться писать на JS? Молодец, JS надо знать в любом случае.
Напиши на нем галерею, объект для валидации форм, что угодно пиши. Главное задача должна быть обоснована. А пока ты занимаешься чем-то вроде покраски травы - вроде и опыт, а нахрена оно нужно - не понятно.

Точный промежуток времени вам даст только захват системного таймера, но это вам уже модуль ядерный делать надо.

codepen.io/anon/pen/wMLbaa
попробуй ставить текст после иконки а дальше разберешься

codepen.io/aliencash/pen/JGQqoZ

codepen.io/anon/pen/adYQZB

Ну во первых: как это должно работать? При любом скролле(mouse wheel/scrollbar) Добавлять ещё 1000? оО А может нужно отрубить нативный скролл для начала и забиндить на мышиные собития например? То, что вы написали, работать не будет впринципе.
Во вторых в jQ для этого есть анимируемое свойство scrollTop
В третьих jQ - отстой. Писать надо через requestAnimationFrame
Исправленный ваш вариант, но это справедливо только для мышиного колеса.

$(document).ready(function(){
  var pos = 0;
    $(document).on('mousewheel DOMMouseScroll', function (e) {
      pos += 1000;
      e.preventDefault();
        $('html, body').animate({
            scrollTop: pos
        }, 1000, function() { });
    });
});

Кнопка не работала из-за того, что ее бинд на событие "клик" находился вне document ready, то есть элемента dom модели в тот момент, когда вы произвели бинд, не существовало. Небольшой и на скорую руку рефактор кода чуть ниже. Учитесь делать ваш код модульным и читабельным, если не можете построить архитектуру в соответствии с ООП - хотя бы группируйте код, оборачивайте в функции, как показано ниже. Ну и не забывайте о простом правиле: привязку событий (bind events) проводить в document ready. Клон кода на codepen

$(document).ready(function() {
  slider();
  mobileMenu();
  scrollToId();
  showContentOnScroll();
  contentMenu()
});

function slider() {
  $('.sm_slider').smSlider({
    duration: 1500,
    autoPlay: true,
    delay: 20000,
    hoverPause: false
  });
}

function mobileMenu() {

  var touch = $('.menu-bar li:first-child  a');
  var menu = $('.sub-menu-bar-1');

  touch.on('click', function(e) {
    /*    У вас было:  $(touch).on('click', function(e) {
      touch - уже объект jquery, его не нужно оборачивать в конструкцию $()
     если touch - строка, тогда его нужно обернуть в $(), если вы хотите применять функции jquery
     Пример:
     var touch = '.menu-bar li:first-child  a';
     $(touch) - объект jquery
     
     Хорошая практика  - называть переменные, которые являются объектами jquery, по принципу $var, так легче читать код вам и вашим коллегам
     $touch = $('.menu-bar li:first-child  a');  // объект
     touch = '.menu-bar li:first-child  a'; // строка
     $(touch) // объект jquery
     
    */
    e.preventDefault();
    menu.slideToggle();
  });
}

function scrollToId() {
  $('a[href*=#]').click(function() {
    $("html:not(:animated),body:not(:animated)")
      // что значит псевдокласс :animated ?  я такого не знаю
      .animate({
        scrollTop: $($(this).attr("href")).offset().top
      }, 2000);
    return false;
  });
}

function showContentOnScroll() {
  $(window).scroll(function() {
    var bo = $("body").scrollTop();
    if (bo > 990) {
      $(".cont").css("display", "block");
    } else {
      $(".cont").css("display", "none");
    };
  });
}

function contentMenu() {
  $('.cont').click(function() {
    $(".cont").toggleClass('rotate-m');
    $(".menu-link").toggleClass('close');
    $(".menu").toggleClass('rigth-m');
  });
}

Такой контейнер точно существует? Попробуйте так:

$(document).ready(function() {
    $('.cont').click(function() {
        $(".cont").toggleClass('rotate-m');
        $(".menu-link").toggleClass('close');
        $(".menu").toggleClass('rigth-m');
    });
});