Антон Литвиненко

<div class="main">
  <div>
    <?php $query = new WP_Query('cat=8'); ?>

    <?php if ( $query->have_posts() ) : ?>

      <?php while ( $query->have_posts() ) : $query->the_post(); ?>

      <div class="panel">
        <div class="panel-heading">
          <a href="#1"><i class="fa fa-trophy"></i><?php the_title() ?></a>
        </div>
        <div class="panel-collapse">
          <?php the_excerpt() ?>
          <div class="button"><a href="<?php the_permalink() ?>">Read more</a></div>
        </div>
      </div>

      <?php endwhile; ?>
      <?php wp_reset_postdata(); ?>

    <?php endif; ?>

  </div>
</div>

https://drive.google.com/file/d/1VMyZ_DCGH3aqCheZb...

.wrapper {
  margin-left: calc(50% - 1200px/2);
  padding: 0 15px;
}

function someFunction() {
	if($(window).width() > 1100) {
		// do something
	}
}

someFunction();

$(window).resize(function () {
	someFunction();
});

Используя css анимации и активный слайд
Допустим есть такой слайдер, он имеет hero-title и hero-list

@keyframes fadeInUpSD {
    0% {
        opacity: 0;
        transform: translate3d(0,15%,0)
    }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

.hero-slider .slick-active .hero-title.ajat-animated {
    animation: fadeInUpSD 1s both 1s
}

.hero-slider .slick-active .hero-list.ajat-animated {
    animation: fadeInUpSD 1s both 1.5s
}

Привязываем к классу активного слайдера, делаем задержки и что там нужно, все.
У меня еще есть класс ajat-animated, он позволяет из админки включать и отключать анимацию

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

.page-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 20px 0;
	background-color: #292929;
	transition: padding .25s;
	z-index: 100;
}

.page-header.scroll {
	padding: 10px 0;
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,.05);
}

.page-header.scroll .main-menu a {
	color: #292929;
}

.page-header.scroll .main-menu a:hover {
	color: #06bbc7;
}

.main-menu a {
	color: #e5e5e5;
}

.main-menu a:hover {
	color: #06bbc7;
}

$('.item').wrap('<div></div>');

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

$('.overlay').on('click', function(){
    $(this).fadeOut(250);
    menu.removeClass('active-menu');
  });

Обертке слайдера даешь слева маргин, который расчитывается от твоей сетки, паддинг справа для slick-list, выводить слайдов 2:

.slider-wrapper {
	margin-left: calc(50% - 1200px/2);
	padding-left: 15px;
	padding-right: 15px;
}
.slick-list {
	padding-right: 10%;
}

на 1200 медиа убираешь маргин слева

Свойство display не анимируется. Использую так

.elem {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
} 

.elem.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

Плюс транзишн и трансформ если нужно

Вы бутстрап не используете, просто посмотрите как там сделана модалка. Там очень хорошо сделано. В двух словах
Модалка идёт вместе с оверлеем, то есть класс модал при открытии имеет позишн фиксед, и на весь экран. При этом overflow-y: auto. Это оверлей. А в нем уже лежит сама модалка, и если идёт переполнение контентом то у оверлея появляется скролл. При открытии у боди оверфлоу хидден

В зависимости от разметки. Например если блок с текстом идет сразу под заголовком:

$(function () {
 $('.answers_toggle').click(function() {  
     $(this).toggleClass('active').next('.answers_text').slideToggle();
 });
});

Ну и айдишник текста на класс поменять

$('.all-cats-btn').on('click', function(e) {
	e.preventDefault();
	$('.catalog-main').slick('unslick');
});

$(window).scroll(function(){
    if ($(window).scrollTop() > 100){
       $('.header').addClass('scroll');
    } else {
       $('.header').removeClass('scroll');
    }
 });

Соответственно у класса scroll даёте box-shadow
А так чтобы пропадал стоя на месте это думаю добавлять класс только на событие скролла

Ну с цифрами просто

var $pagingInfo = $('.paging-info');
var $heroSlider = $('.hero-slider');

$heroSlider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
	var i = (currentSlide ? currentSlide : 0) + 1;
	var prefix = i < 10 ? '0' : '';
	var prefixAll = slick.slideCount < 10 ? '0' : '';
	$pagingInfo.html('<span class="current">' + prefix + i + '</span>' + '/' + prefixAll + slick.slideCount);
});

$( ".menuForm" ).on(
"click", ".add_menu_item", function() {
    alert("AAAAAAAAAAAAAA");

    $(".AJAX-menu-loading").fadeIn(100);
    $(".menu-item").clone().appendTo(".menuForm");
    $(".AJAX-menu-loading").fadeOut(100);

});

Каждому слайдеру свой класс и 3 инициализации