Виталий

напишите на js функцию которая будет каждое слово заворачивать в span и задайте для всех этих спанов бекграунд (ну и другие стили).

Отличный макет, чтобы оценить кандидата. И с возможностью применить анимацию, и с повторяющимися элементами, чтобы посмотреть как вы будете разбивать элементы на отдельные блоки и простенький js + работа с API карт.

Насколько я знаю это есть по умолчанию в wp не надо никаких фильтров. Просто заходите в настройки меню в админке, выбираете настройка отображения (сверху есть кнопка), там выбираете показать css класс.

и далее уже добавляете класс к нужному вам пункту,

я недавно так делал выпадающее меню в несколько колонок, добавлял к элементу который содержит sub меню класс col-2, col-3 и уже исходя из этих классов разбивал под меню по колонкам.

плагин ACF в помощь.

Greensock - js фреймворк для анимации.

Псевдоэлемент (after, before) с беграунд.

.entry-header::before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 150rem;
    top: 0;
    left: 100%;
    background-color: inherit;
}

if ( $column == 1 ) echo "<div class='content-block-row' id='name_id_'.$post->ID ";

Нужно отрицательным маржином отступать, от верха (или низа в зависимости от вашей структуры), тогда max-width будет работать, а побокам маржин auto (margin:-50px auto 0 auto).

Может вместо height() нужно использовать outerHeight()

У меня это будет:
1-й: 6.
2-й 8 ч.
3-й 12-14ч.
4-й 8ч.
Но бывает по разному иногда быстрее, а бывает и дольше (чем думал), точно никто не скажет.