Шаг №1. Создать папку с названием темы в директории /wp-content/themes/ вашего сайта.
Я, обычно, создаю эту папку через visual studio code на локальном сервере и потом работаю с этой папкой в vscode. В качестве локального сервера использую openserver.

Видеоуроки по установке локального сервера и по установке wordpress на локальный сервер можно найти на ютубе.
Шаг №2. Создание файлов темы.
Для того, чтобы тема появилась в списке тем, достаточно в папке с темой создать файл index.php.


Для того, чтобы отобразить информацию о теме надо в файле style.css прописать следующий код:
/* Theme Name: My Theme Description: My First Theme Author: Sergey Deleu */

Полный список параметров файла style.css можно посмотреть здесь…
Шаг 3. Превью темы. Чтобы установить превью темы надо картинку с названием Screenshot.png поместить в папку с темой.

Шаг 4. Прописывем мнимальный код в файле index.php. Чтобы быстро создать минимальный код в файле index.php нужно поставить восклицательный знак и нажать кнопку таб. Редактор сразу отобразит следующий код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Шаг 5. Обычно структура сайта разбивается на части, записывается в отдельные файлы, которые подключаются в файле index.php.
Создадим основные файлы темы: header.php, sidebar.php, footer.php, style.css и functions.php.

Шаг 6. Перенесем часть кода из файла index.php в файл header.php:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
Отавшийся код перенесем в файл footer.php:
</body> </html>
Шаг 7. Подключим стили к нашей теме. Для этого пропишем между тегами <head> следующий код:
<link rel="stylesheet" href="<? php bloginfo('stylesheet_url');?>">
Этот код подключает к нашей теме файл style.css.
Теперь код в файле header.php выглядит так:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="<? php bloginfo('stylesheet_url');?>"> </head> <body>
Шаг 8. Создадим слой <wrapper> для основного контента после тега <body>:
<div class="wrapper"> <header> <h1>Header</h1> </header>
Шаг 9. В файле index.php подключим файлы header.php, sidebar.php, footer.php и виведем посты:
<php get_header(); ?> <main> <div class="content"> <h1>Main Content</h1> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <h4>Posted on <?php the_time('F jS, Y') ?></h4> <p><?php the_content(__('more...)')); ?></p> <hr><?php endwhile;else: ?> <p><?php _e('Sorry, no posts'); ?></p> <?php endif; ?> </div> <?php get_sidebar(); ?> </main> <div class="delimetr"></div> <?php get_footer(); ?>
Шаг 10. В файле sidebar.php выведем категории и архивы:
<div class="sidebar"> <h2><?php _e('Categories'); ?></h2> <ul> <?php wp_list_cats(' sort_column=name&optioncount=1&hirarchial=0'); ?> </ul> <h2><?php _e('Archives'); ?></h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </div>
В файле footer.php создадим слой footer и закроем wrapper:
<footer> <h1>Footer</h1> </footer> </div> </body> </html>
Шаг 11. Зададим стили страницы:
*{ margin: 0; padding: 0; } header{ width: 100%; background: green; padding: 40px; } main{ display: flex; justify-content: center; height: 60vh; } footer{ background: red; padding: 40px; }
В итоге, наш сайт будет выглядеть так:

Здесь предствлена вестка простого макета для общего понимания, как строится тема сайта на WP.