Владислав Бойченко

Есть метод customPaging, через него можно все точки заменить на картинки слайдов. Ну и в зависимости от того, куда их потом нужно поместить, можно воспользоваться методом appendDots.

$(slider).slick({
  dots: true,
  fade: true,
  arrows: false, 
  customPaging: function (slider, i) {
    let imageSrc = $(slider.$slides[i]).find('img').attr('src');
    return `<img src="${imageSrc}" alt="slide here" data-index="${i}">`;
  }

Каждому товару в ссылке "Заказать", которая вызывает модалку, добавить дата-атрибут:

<a href="#" class="open-modal" data-value="Название товара">Заказать</a>

При клике на эту ссылку берете значение этого атрибута (именно у этой ссылки, по которой клик) и переносите в value этого скрытого инпута. Таким образом при каждом вызове формы значение скрытого поля будет обновляться.

Додумался сам!
Решение простое, нужно просто итерацию провести:

$('.tournir-rating-item').each(function(){
		var ratingVal = $(this).find('.rating-value').attr('data-value');
		if(ratingVal <= 50){
			$(this).find('.rating-value').css('color', '#f4284a');
		} else if(ratingVal > 50 && ratingVal <= 75){
			$(this).find('.rating-value').css('color', '#1889d9');
		} else if(ratingVal > 75 && ratingVal <= 100){
			$(this).find('.rating-value').css('color', '#29ae61');
		} else {
			$(this).find('.rating-value').css('color', '#252525');
		}
	});

Принцип примерно такой: codepen.io/anon/pen/xgPRKZ

Ширина макета в любом случае 1920рх -- для фоновых изображения, а вот сетка сайта -- по центру сколько в приоритете. В большинстве случаев 960рх будет отображаться хорошо везде, но уже как бы по сетке бутстрапа надо (можно) рисовать, и там 1170рх.

codepen.io/anon/pen/OWpodL

Делайте, как и хотели, просто в аргументах укажите другой id или class. То есть верхнее меню:

<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>

Нижнее меню:

<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'footer-menu' ) ); ?>