Олег

var book = {
  author__1: {
    name: 'John',
    surname: 'Smith'
  },
  author__2: {
    name: 'John',
    surname: 'Smith'
  }
};
var max = Object.keys(book).length;

for (var i = 1; i <= max; i++) {
  console.log(book['author__' + i].name);
}

mainObject.author = author;
learn.javascript.ru/object

jQuery(function ($) {
    $('#button').on('click', function() {
        $('.popup').text($(this).attr('title'));
    });
});

Или так (без jQuery, скрипт должен быть размещен перед закрывающим тегом body):

document.getElementById('button').onclick = function() {
        var elements = document.getElementsByClassName('popup');
        for(var index in elements) {
            elements[index].innerText = this.title;
        }
    }

1. Знание css свойств для svg элементов
   
2. Знание атрибутов svg элементов
   
3. умение создания анимации на свг
   

php.net/manual/ru/function.serialize.php

1) Самый простой и элегантный - css clip-path: polygon. Сделано за 2 минуты - codepen.io/suez/pen/2a2b9d90bd00d671181906de5311bc8d
Из очевидных минусов - ограниченная поддержка браузерами. Но если вам пофиг на древнее инвалидное говно, то юзайте не раздумывая.
2) Svg clipPath. По сути дела это более геморройная версия первого варианта с некоторыми недостатками (например нельзя юзать %), но зато браузерная поддержка намного шире + можно юзать для каких угодно форм, ибо в основе лежит svg path.
3) Стандартные хаки с помощью :before/:after. Например создаете блок, который сверху имеет прямые углы. Затем :before элемент делаете треугольником слева (ксс трегольники легко гуглятся и даже есть сайт генератор - apps.eky.hk/css-triangle-generator ). А :after блоком справа с закругленным верхним правым углом.
4) Что-нибудь еще.

А если ошибка какая? Лучше JSON и XML (именно ОБЕ версии - и JSON приоритетнее).
Но можно оставить и такой вариант - как еще одна версия.
А в идеале, еще и четвертый вариант добавить - возвращать сразу HTML, это не для приложений, а для аякса в браузере, - чтобы не нагружать клиент (браузер) лишним парсингом JSON/XML/цифры.
А может еще и пятый, шестой, седьмой)) смотря что за сервис

Зависит от того, какую цель вы преследуете.
Если чисто образовательную, то я бы не тратил время прямо сейчас - актуальность jQuery неуклонно снижается, сейчас в браузерах нет того хаоса, что был пять лет назад. Новые проекты для современных браузеров спокойно можно делать нативно.

Да, можете, это очень легко (гораздо легче, чем в других CMS). Wordpress очень дружелюбен к разработчикам. Главное, понять, как там все работает и пробежаться по документации.

полностью набросать код вручную и потом интегрировать его в тему wordpress

Если под редактором вы имеете в виду визуальный редактор WP, то там так не делается - все отличающиеся шаблоны создаются в виде отдельных файлов, а в редактор вносится непосредственно контент.