Денис

Извините коллеги...
Я сегодня редкостный затупок...
Выводим также, я в названии переменной напутал.
Вот вывод если пригодится:

$rooms = get_post_meta( $_product->id, 'rooms', true);
echo $rooms;

Первый
Второй
Третий

в файле по пути $routesPath
будет код типа

<?php
return array(
   'abc' => 123 ...
);

в $this->routes будет помещен этот массив

В переменной $routesPath содержится имя файла (видимо) с массивом маршрутов. Фактически это присвоение значение переменной, содержимое которой содержится в отдельном файле.

Самый простой - php скриптом, например вот таким

<?php
if ( have_posts() ) : // если имеются записи в блоге.
  query_posts('cat=55,66');   // указываем ID рубрик, которые необходимо вывести.
  while (have_posts()) : the_post();  // запускаем цикл обхода материалов блога
?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<?php the_content();
  endwhile;  // завершаем цикл.
endif;
/* Сбрасываем настройки цикла. Если ниже по коду будет идти еще один цикл, чтобы не было сбоя. */
wp_reset_query();                
?>

Каким образом Вы вывели посты?

В общем случае это выглядит примерно так:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
<?php endwhile; endif; ?>

Corel, illustrator, photoshop.
Главное в CMYK и 300 dpi.

Adobe illustrator- векторная графика

noUiSlider

Это Slider

Валом примеров:
codepen.io/search/pens?q=curved+text&limit=all&typ...
tympanus.net/Development/Arctext/#sub4
Как крутнуть и добавить opacity надеюсь знаете.

upd. И вот еще, тут некоторые даже крутнули за вас)
codepen.io/search/pens/?limit=all&page=2&q=Arctext

Тут только на jQuery
CodePen

Если макет имеет разрешение более 1280px, то дизайнер, купивший неделю назад макбук для трушности, идиот, потому что не позаботился о совместимости его работы с нормальными мониторами. Чтобы сверстать такой макет, необходимо в фотошопе уменьшить размер изображения (с пропорциями) до стандартной ширины. Например, 960 пикселов. Можно и побольше, ориентируясь на макс. ширину Тостера или вашего собственного монитора, например.

Но как правило, корректно дропать размер сразу в 2 раза - зачастую, именно это и требуется. Если есть сомнения, можно уточнить у заказчика.

Если все же нужно, чтобы на 1900px выглядело именно так, лучший выход - дропнуть размер под комфортный для работы, а на более высокие разрешения просто увеличивать размер контента, пропорционально. Само собой, верстку нужно будет построить на основе процентов \ viewport units, и em.

После того как сверстаете десктопную версию страницы сравните макет с помощью плагина для хрома Pixel Perfect. Получится не 1в1, но результат будет максимально приближен)

Используйте Masonry grid. Вот ваш ответ
masonry.desandro.com

Практика, практика, и только практика.
Вы выучили основы html и css, и вроде бы можете что-то сверстать.
На одном вроде бы, и с такими знаниями сразу подобное (svg анимации и т.д.) сверстать вы не сможете.
Начните с малого, развивайте скилл, после того как разберетесь с типографией / сетками, и сможете верстать настоящие проекты - читайте и вникайте в примеры на codyhouse.co, там вся реализация разложена по полочкам.

Еще как вариант с помощью Flexbox codepen.io/anon/pen/XXRobj
Подробнее про Flexbox: frontender.info/a-guide-to-flexbox
Справочник CSS: htmlbook.ru/css
Интересные ссылки:
https://css-tricks.com/
css.yoksel.ru
frontender.info