Структура шаблона страницы темы WordPress

Разделяем HTML-страницу на составляющие и начинаем создание универсальной темы WordPress с использованием семантической разметки Schema.org.
Минимизируем код в файлах русской темы для конкретного сайта.

В русской теме для своего сайта (в отличие от универсальной темы с поддержкой перевода на разные языки и с другими опциями) будем использовать минимум функций WordPress.

Структура исходной HTML-страницы темы WordPress

Рассмотрим структуру исходной HTML-страницы как основу для файла шаблона темы WordPress index.php.
Для содержимого внутри тега body - div wrapper задаем класс hfeed. Элемент микроданных hfeed сообщает поисковым роботам, что на сайте публикуется синдицированный контент (syndicated content) - RSS-потоки или фиды (feed). (о микроданных и schema.org см., например, в Яндекс.Помощи)
Имена классов и ID используем семантические, говорящие о содержимом элементов разметки, а не о том, где они расположены или как выглядят (class="widget-area" - область виджетов вместо class="sidebar-left" - боковое меню).

<html>
<head>
</head>

<body>
<div id="wrapper" class="hfeed">
    <div id="header">
        <div id="masthead">

            <div id="branding">
            </div><!-- #branding -->

            <div id="access">
            </div><!-- #access -->

        </div><!-- #masthead -->
    </div><!-- #header -->

    <div id="main">
        <div id="container">

            <div id="content">
            </div><!-- #content -->

        </div><!-- #container -->

        <div id="primary" class="widget-area">
        </div><!-- #primary widget-area -->

        <div id="secondary" class="widget-area">
        </div><!-- #secondary widget-area -->
    </div><!-- #main -->

    <div id="footer">
        <div id="colophon">

            <div id="site-info">
            </div><!-- #site-info -->

        </div><!-- #colophon -->
    </div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Все содержимое тега body находится внутри контейнерного div, а в основной (main) части страницы две области виджетов (widget-area) добавлены после содержимого (content).
Это два ключевых момента разметки страницы, благодаря которым можно создавать разметку с 1, 2 или 3 колонками с помощью нескольких строк в CSS-файле.

Файлы темы

Сначала наша базовая тема будет включать 6 файлов. Создаем папку темы внутри папки wp-content/themes/ и создаем в ней файлы:

1. Обязательный файл стилей style.css, в начале которого должно быть задано название темы

/*
Theme Name: Моя тема
...
*/

Подробнее см. в Справочнике: Тема WordPress и ее составляющие

2. Файл функций темы functions.php
3. Файл index.php (обязательный) и еще 3 файла, в которые мы поместим код вывода отдельных блоков-составляющих веб-страницы:

header.php
sidebar.php
footer.php

В файл header.php вставляем код из начала исходной HTML-страницы, включая тег

<div id="main">

а в файл footer.php - код из нижней части исходной HTML-страницы, включая закрывающий тег

</div><!-- #main -->

Области виджетов будут находиться в боковом меню - переносим их в файл sidebar.php:

<div id="primary" class="widget-area">
</div><!-- #primary -->

<div id="secondary" class="widget-area">
</div><!-- #secondary -->

Получаем такой файл index.php

<?php get_header(); ?>
<div id="container">

    <div id="content">
    </div><!-- #content -->

</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Немного подробнее на английском см. Creating a Theme HTML Structure

Интересно, что файл темы footer.php еще не создан, а функция WordPress
<?php get_footer(); ?>
(которая должна его подключать) выводит текст со ссылками на сайт wordpress.org и страницы RSS записей и комментариев блога:

Сайт «Название сайта» работает на WordPress
Записи (RSS) и комментарии (RSS)