Emmet1

Перед выводом ссылки вы можете проверять существуют ли посты, относящиеся к текущему году, но это породит много довольно лишних запросов в базу. Если такой задачи нет, то можно реализовать через простой счетчик

$year = 2008;
$current_year = date( 'Y' );

echo '<ul>';

while ( $year <= $current_year ) {
	echo '<li><a href="' . get_year_link( $year ) . '">' . $year . '</a></li>';
	$year++;
}

echo '</ul>';

Если все-таки нужно проверять существование постов, то можете запрашивать один, из каждого года таким образом:

$year = 2008;
$current_year = date( 'Y' );

echo '<ul>';

while ( $year <= $current_year ) {

	$args = array(
		'year'        => $year,
		'post_status' => 'publish, future, draft, pending',
		'posts_per_page' => 1,
		'fields' => 'ids'
	);

	$posts = get_posts( $args );

	if ( is_array( $posts ) && !empty( $posts ) ) {
		echo '<li><a href="' . get_year_link( $year ) . '">' . $year . '</a></li>';
	}

	$year++;
}
echo '</ul>';

Если вы заранее не знаете в котором году был опубликован первый пост, его можно получить с помощью сортировки ASC

$args = array(
	'posts_per_page' => 1,
	'order' => 'ASC'
);

$posts = get_posts( $args );

if ( $posts ) {
	$year = date( 'Y', strtotime( $posts[0]->post_date ) );
}

PS. Если у вас не посты, а другой тип записи, нужно указывать аргумент post_type

На css как-то так можно сделать https://codepen.io/viseko/pen/JjJZdBX
Думаю, что грамотнее было бы не изгаляться и использовать SVG.

поставить фоновую картинку на этот блок

Нужно добавить блок полосы, нулевой высоты добавить высоту в transition. При скролле в js добавлять к ней класс с нужной высотой, и убирать его через некоторое время setTimeout. Ещё нужно будет добавить метку, чтобы при нескольких последовательных скроллах не происходил сбой в работе.

layout / .masonry(). При добавлении нового контента просто запускаете метод, который вам все разложит по полочкам снова.

На примере изотопа и кнопки загрузить еще

jQuery(function($){
	$('#true_loadmore').on('click', function(){
		var button = $(this);
		var data = {
			'action': 'loadmore',
			'query': loadmore_params.posts, // that's how we get params from wp_localize_script() function
			'page' : loadmore_params.current_page
		};
		$.ajax({
			url : loadmore_params.ajaxurl,
			data : data,
			type : 'POST',
			beforeSend : function (xhr) {
				button.text(loadmoreBtnLoading);
			},
			success : function(data){
				if( data ) { 
					var $container = $('.portfolio-wrap');
					var	$el = $(data);
					// imagesLoaded фиксит косяки изотопа
					$el.imagesLoaded(function() {
						$container.append($el).isotope('appended', $el, true);
					});

					button.text(loadmoreBtnShowMore);

					loadmore_params.current_page++;

					if ( loadmore_params.current_page == loadmore_params.max_pages ) {
						button.remove();
					}
					// you can also fire the "post-load" event here if you use a plugin that requires it
					// $( document.body ).trigger( 'post-load' );
				} else {
					button.remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

Ваша регулярка работает https://regex101.com/r/hZhncC/1
Возможно у вас в разметке не все так просто, и есть дополнительные пробелы, атрибуты тегов или еще какие-то отличия, проверьте внимательно исходник.

Вообще регулярки плохо подходят для работы с HTML.

Используйте язык правильно:

<?php
$arr = [
    [
        'name' => 'Найк',
        'desc' => 'Кросовки',
    ],
    [
        'name' => 'Адидас',
        'desc' => 'Кеды',
    ],
    [
        'name' => 'Найк',
        'desc' => 'Тапки',
    ],
];
$result = [
    'mark' => array_unique(array_column($arr, 'name')),
    'type' => array_unique(array_column($arr, 'desc'))
];
?>

а что если «завернуть» карту в iframe?

Css Grid Layout отлично подойдет.
https://medium.com/@stasonmars/%D0%B2%D0%B5%CC%88%...
https://grid.layoutit.com/

Высчитываете размеры блоков, и через grid-template-areas крутите и выстраиваете блоки как угодно.

MC4WP
Форма настраивается, как вам нужно и можно вывести в любом месте с помощью шорткода

Кроме usort/uasort можно разбить ссылки на отдельные массивы, а затем собрать обратно в один, который и перебрать с помощью foreach:

$arr = [
	["small"=> "/images/0001_GOLD.jpg"],
  	["small"=> "/images/003_lux.jpg"],
  	["small"=> "/images/002_prod_3.jpg"],
  	["small"=> "/images/0002_GOLD.jpg"],
  	["small"=> "/images/002_prod_5.jpg"],
  	["small"=> "/images/002_lux.jpg"],
  	["small"=> "/images/002_prod_4.jpg"],
];

$lux = [];
$prod = [];
$gold = [];

foreach ($arr as $v) {
	if(strpos($v['small'], 'lux') !== false) {
		$lux[] = $v;
	}

	if(strpos($v['small'], 'prod_') !== false) {
		$prod[] = $v;
	}

	if(strpos($v['small'], 'GOLD') !== false) {
		$gold[] = $v;
	}
}

print_r(array_merge($lux, $prod, $gold));