Вывод записей обычно есть сразу в нескольких местах:
index.php
archive.php
category.php
tag.php
taxonomy.php
search.php

И их производные с {id} или {slug}, например:
archive-news.php // slug
category-123.php // id
... и т.д.

Иерархию файлов темы в WP можно посмотреть тут: Wordpress Template Hierarchy. В разных нестандартных темах список записей может быть где угодно.

Способов масса. Вот один из:

HTML:

<button class="js-button" data-toggle-text="Close">Open</button>
<div class="js-container hidden">
Some text here.
</div>

CSS:

.hidden {
  display: none;
}

Если вы не используете jQuery в проекте, то посмотрите пример на чистом JavaScript:

JavaScript: (Демо: codepen.io/anon/pen/EjzYpy )

;(function($D){
    var $button    = $D.querySelector('.js-button'),
        $container = $D.querySelector('.js-container');
  
    $button.addEventListener('click', function(e){
      var data = e.target.dataset,
          toggleText = $button.innerHTML,
          isVisible = $container.style.display == 'block';
      
      $button.innerHTML = data.toggleText;
      data.toggleText = toggleText;
      
      $container.style.display = isVisible ? 'none' : 'block';
    });
})(document);

Если используете jQuery, посмотрите следующий пример:

jQuery: (Демо: codepen.io/anon/pen/MwdgEN )

$(function(){
  var $button    = $('.js-button'),
      $container = $('.js-container');
  
  $button.on('click', function(){
    var toggleText = $(this).data('toggle-text');
    
    $(this).data('toggle-text', $(this).text())
           .text(toggleText);
    
    $container.toggleClass('hidden');
  });
});

Кладете обычную фотографию на задний план и начинаете обводить используя инструменты иллюстратора: Pen Tool или Curvatore Tool и делаете еще несколько нехитрых, но рутинных действий.

Это кропотливая работа (если хотите получить хороший результат).