Q: Как можно сократить код js     $('.cat-parent:nth-child(1').hover(function() {
    // навели мышь на элемент
    $('header').css('box-shadow', '0 14px 24px rgba(82,56,115, 0.3)');
}, function() {
    // убрали мышь с элемента
    $('header').css('box-shadow', '');
});
    $('.cat-parent:nth-child(2)').hover(function() {
    // навели мышь на элемент
    $('header').css('box-shadow', '0 14px 24px rgba(120, 134, 38, 0.3)');
}, function() {
    // убрали мышь с элемента
    $('header').css('box-shadow', '');
});
    $('.cat-parent:nth-child(3)').hover(function() {
    // навели мышь на элемент
    $('header').css('box-shadow', '0 14px 24px rgba(218, 113, 0, 0.3)');
}, function() {
    // убрали мышь с элемента
    $('header').css('box-shadow', '');
});
    $('.cat-parent:nth-child(4)').hover(function() {
    // навели мышь на элемент
    $('header').css('box-shadow', '0 14px 24px rgba(2, 84, 184, 0.3)');
}, function() {
    // убрали мышь с элемента
    $('header').css('box-shadow', '');
});
    $('.cat-parent:nth-child(5)').hover(function() {
    // навели мышь на элемент
    $('header').css('box-shadow', '0 14px 24px rgba(73, 89, 21, 0.3)');
}, function() {
    // убрали мышь с элемента
    $('header').css('box-shadow', '');
});


});

Когда наводишься на пункт меню, меняется тень в шапки, сделано через nth-child потому что привязка в wordrpess

A: Вот, вроде максимально сократил:
var cb=val=>{
    return function(){
        $('header').css('box-shadow',val)
    }
}
$('.cat-parent:lt(6)').hover(
    cb('0 14px 24px rgba(120, 134, 38, 0.3)'),
    cb('')
);

Упс, не заметил, что цвета меняются, тогда так:
var cb=val=>{
    return function(){
        $('header').css('box-shadow',val)
    }
}
['82, 56, 115','120, 134, 38','218, 113, 0','2, 84, 184','73, 89, 21'].forEach((v,k)=>{
    $(`.cat-parent:nth-child(${k+1})`).hover(
        cb(`0 14px 24px rgba(${v}, 0.3)`),
        cb('')
    )
})

И для пущего перфекционизма с моими новыми знаниями:
var cb=val=>function(){
    $('header').css('box-shadow',val)
}
['82, 56, 115','120, 134, 38','218, 113, 0','2, 84, 184','73, 89, 21'].forEach((v,k)=>{
    $(`.cat-parent:nth-child(${k+1})`).hover(
        cb(`0 14px 24px rgba(${v}, 0.3)`),
        cb('')
    )
})


A: Наверное лучше вынести определение цвета в data-attr, что бы упростить логику и повысить читаемость кода:


/*
* Вариант с использованием data-attr*
*/
//$('.cat-parent').on('mouseover mouseout', e => {
//  $('header').css({
//    boxShadow: e.type === 'mouseover' ? `0 14px 24px ${$(e.target).data('color')}` : ''
//  });
//});

/*
* Вариант с массивом цветов
*/
const $catParent = $('.cat-parent');
const colors = [
  'rgba(82,56,115, 0.3)',
  'rgba(120, 134, 38, 0.3)',
  'rgba(218, 113, 0, 0.3)',
  'rgba(2, 84, 184, 0.3)',
  'rgba(73, 89, 21, 0.3)'
];

$catParent.on('mouseover mouseout', e => {
  $('header').css({
    boxShadow: e.type === 'mouseover' ? `0 14px 24px ${colors[$catParent.index($(e.target))]}` : ''
  });
});
header {
  display: block;
  height: 100px;
}

.cat-parent{
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<div class="cat-parent" data-color="rgba(82,56,115, 0.3)"></div>
<div class="cat-parent" data-color="rgba(120, 134, 38, 0.3)"></div>
<div class="cat-parent" data-color="rgba(218, 113, 0, 0.3)"></div>
<div class="cat-parent" data-color="rgba(2, 84, 184, 0.3)"></div>
<div class="cat-parent" data-color="rgba(73, 89, 21, 0.3)"></div>



A: Не используйте js, если можно решить проблему с помощью css. Предлагаю следующий вариант решения вашего вопроса
<div class="item-box">
  <div class="item-box__item">Блок1</div>
  <div class="item-box__item">Блок2</div>
  <div class="item-box__item">Блок3</div>
  <div class="item-box__item">Блок4</div>
  <div class="item-box__item">Блок5</div>
</div>


.item-box {

  &__item {
    max-width: 150px;
    padding: 10px;
    margin: 30px 0;
    border: 1px solid #000;

    &:nth-child(1):hover {
      box-shadow: 0 14px 24px rgba(82,56,115, 0.3);
    }

     &:nth-child(2):hover {
      box-shadow: 0 14px 24px rgba(120, 134, 38, 0.3);
    }

     &:nth-child(3):hover {
      box-shadow: 0 14px 24px rgba(218, 113, 0, 0.3);
    }

     &:nth-child(4):hover {
      box-shadow: 0 14px 24px rgba(2, 84, 184, 0.3);
    }

     &:nth-child(5):hover {
      box-shadow: 0 14px 24px rgba(73, 89, 21, 0.3);
    }
  }
}

