Александр Ружевич

как и обещал выкладываю код, решение найдено в интернете с небольшими доработками, работает на бутстрап.
взято отсюда codepen.io/ajaypatelaj/pen/zIBjJ

разметка:

<div class="container">
    <div class="well well-sm">
        <strong>Display</strong>
        <div class="btn-group">
            <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list">
            </span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span
                class="glyphicon glyphicon-th"></span>Grid</a>
        </div>
    </div>
    <div id="products" class="row list-group">
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item  col-xs-6 col-sm-4 col-lg-4">
            <div class="thumbnail">
                <img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
                <div class="caption">
                    <h4 class="group inner list-group-item-heading">
                        Product title</h4>
                    <p class="group inner list-group-item-text">
                        Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <div class="row">
                        <div class="col-xs-12 col-md-6">
                            <p class="lead">
                                $21.000</p>
                        </div>
                        <div class="col-xs-12 col-md-6">
                            <a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

далее скрип который меняет классы и переключает с сетки на список и обратно. от себя добавил запись в куки при выборе пользователем отображения и проверку на php при последующих посещениях.

<script>
$(document).ready(function() {
	
	<?php 

	if (@$_COOKIE['cookie_list'] == 'list' ) {
		echo "$('#products .item').addClass('list-group-item');";
	
	}
	
	elseif (@$_COOKIE['cookie_list'] == 'grid') {
	echo "$('#products .item').addClass('grid-group-item');
		$('#products .item .thumbnail .caption').addClass('caption_none');";
	}
		else {
	echo "$('#products .item .thumbnail .caption').addClass('caption_none');";
}
	?>

    $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');
	$('#products .item .thumbnail .caption').removeClass('caption_none');
		$.cookie('cookie_list', 'list', {
		expires: 5,
		path: '/',
		});
	});
	
	
	
	
	
    $('#grid').click(function(event){
		event.preventDefault();
		$('#products .item').removeClass('list-group-item');
		$('#products .item').addClass('grid-group-item');
		$('#products .item .thumbnail .caption').addClass('caption_none');
			$.cookie('cookie_list', 'grid', {
		expires: 5,
		path: '/',
		});
		});
	
	
});

</script>

все протестировано и работает, будут вопросы - пишите

в таком случае, для того что бы подружить заказчика с админкой используйте плагин для дополнительных полей, к примеру вы создаете поле "цена" и "текст", в админке ниже основного окна редактирования появляются эти 2 поля, в шаблоне нужно просто прописать что бы информация выводилась с этих полей

<section>
  <div>
 <p>текст из поля "текст"</p>
    <div><p>текст из поля "цена"</p></div>
  </div>
</section>

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

ПРОДОЛЖЕНИЕ ОТВЕТА:
я в работе использую плагин Types по нескольким причинам: во первых уже выучены его api и подключения в разных местах шаблона, во вторых прост и ооочень понятен и дружелюбен к верстальщику, и так как я компетентен в нем, объясню принцип на его примере. Итак установите этот плагин, активируйте, слева внизу в меню админки будет пункт меню "Types", при нажатии откроется подменю, Вам нужен пункт "Индивидуальные поля", кликаете на "добавить новый", и создаете группу к примеру назовем её "price_text" в ней добавляете поля "текстовые поля" и выбираете где будут они выводиться (в данном случае на страницах), теперь перейдите на нужную страницу для редактирования и под основным окном контента будут ваши "тектовые поля" созданные выше, для вывода используйте:

<?php echo types_render_field( "ЗДЕСЬ_ИМЯ_ПОЛЯ") ?>

к примеру поле вы назвали "price" то получится:
<?php echo types_render_field( "price") ?>
то есть, все что вы напишете в поле выведется на том месте где был вставлен этот код.
в итоге получится должно

<section>
  <div>
 <p><?php echo types_render_field( "text") ?></p>
    <div><p><?php echo types_render_field( "price") ?></p></div>
  </div>
</section>

а при выводе уже html страницы выйдет

<section>
  <div>
 <p>то, что написано в поле текст</p>
    <div><p>то, что написано в поле цена</p></div>
  </div>
</section>

принцип ясен? создается поле, один! раз, и при редактировании уже пользователь смотрит, ага, это поле для цены, это для заголовка и код в админке не нужен, он практически в 99% случаев там не нужен, по этому принципу можно добавлять изображения, цветовую палитру и т.д.

если требуется редактирование через админку то через доп. поля, удобно очень, если нет то можно в хэдере проверять id страницы через if else

<body <?php if (is_page(здесь впишите id главной страницы)
 {echo "style='background-color: green); '";}

 else {echo "style='background-color: none;'";}
 
 ?> >

ну смотрите, ставте плагин Types, очень простой в освоении, далее создайте поле "палитра" и назначьте вывод поля на странице редактирования страниц, поле возвращает код цвета html, к примеру "#ffff" в итоге вместо if else получится

<body style='background-color: <?php echo types_render_field( "имя_поля") ?>;'>

в итоге должно получится что то типа
<body style='background-color: #ffff;'>
если цвет задан, он выведется, если нет то и ошибки не последует

смотрите, первое что нужно это создать нужный файлик в папке "templates" которая должна лежать в корне темы, если нет ее, то создайте. далее в папке создайте файлик к примеру "contacts.php" в нем должен быть код

<?php
/**
 * Template Name: contacts
 *
 
 */

get_header(); ?>

далее в админке создавая новую страницу укажите шаблон (справа селектор) вывода который в данном случае называется "contacts". после выбора шаблона вывода нажмите опубликовать.
далее по аналогии создавайте и другие страницы, вордпресс смотрит что написано после Template Name

/**
 * Template Name: имя шаблона
 *
 
 */

далее что бы перейти на страницу
http://имя сайта/contacts.php или в админке нажмите на ссылку перейти на страницу, если все сделаете правильно все заработает.

если я правильно понял вопрос то вам нужно вывести записи из разных категорий в разных местах?
к примеру нужен вывод категории с id 4 то получится

<?php if ( have_posts() ) : 
	query_posts('cat=4');
	
	while ( have_posts() ) : the_post(); 
	
	if ($post->post_content == ""){
	
	?>

<?php the_title() ?>

<?php the_content() ?>

<?php } 
 endwhile;
 endif;
 ?>

Решение было найдено! Несколько часовое лазание по плагину Age Verify дало свой результат. Настраивается все. Нужно просто было из файла "class-age-verify" удалить все что заключено в тег "style" в котором плагин прописывал стиль фона который закрывал всю страницу и фона окна в котором все вводится. Для того что бы добавлять свой контент в всплывающее окно нужно в том же файле "class-age-verify" найти блок #av-overlay и обычным способом все туда добавлять, настраивается все через стили из плагина, так что все удобно, любой внешний вид.