Como Criar um Tema WordPress Simples do Zero

Criar um tema WordPress do zero é um excelente exercício para entender a base da plataforma e criar algo totalmente personalizado.

Neste guia, vamos aprender como estruturar um tema básico, entender os arquivos principais e os templates comuns necessários para um tema funcional no WordPress.

1. Introdução

O WordPress é uma plataforma flexível, que separa conteúdo (armazenado no banco de dados) de apresentação (controlada pelo tema).

Um tema define como o site será exibido, e para criar um do zero, você precisa entender a estrutura básica exigida pela plataforma.

Ao final deste guia, você terá criado um tema funcional que pode ser usado em qualquer site WordPress.

2. Estruturando o Tema

2.1. Criando a Pasta do Tema

Acesse a pasta de instalação do WordPress no seu servidor ou ambiente local (preferencialmente):

/wp-content/themes/

Crie uma nova pasta para o tema, por exemplo:

/wp-content/themes/meu-tema-simples/

2.2. Arquivos Essenciais do Tema

Para que o WordPress reconheça um tema, ele precisa de dois arquivos obrigatórios:

1. style.css

O style.css não apenas contém os estilos do tema, mas também informações sobre o tema para o WordPress.

Estrutura do style.css:

/*
Theme Name: Meu Tema Simples
Author: Seu Nome
Description: Um tema WordPress básico criado do zero.
Version: 1.0
*/
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

2. index.php

O index.php é o arquivo principal que o WordPress usa como fallback para todas as páginas.

Estrutura básica do index.php:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php bloginfo('name'); ?></title>
</head>
<body>
    <h1><?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>
</body>
</html>

Após criar esses dois arquivos, seu tema será reconhecido no painel do WordPress em Aparência > Temas. Ative-o para ver o resultado.

3. Adicionando Templates Comuns

Para criar um tema mais funcional, precisamos adicionar arquivos que controlam a exibição de diferentes partes do site.

Esses arquivos são chamados de templates comuns.

3.1. Header (header.php)

O arquivo header.php contém a estrutura de cabeçalho, como o logotipo e o menu.

Exemplo básico do header.php:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <h1><?php bloginfo('name'); ?></h1>
        <nav>
            <?php wp_nav_menu(array('theme_location' => 'menu-principal')); ?>
        </nav>
    </header>

3.2. Footer (footer.php)

O footer.php contém o rodapé do site, incluindo informações de copyright e scripts adicionais.

Exemplo básico do footer.php:

<footer>
    <p>&copy; <?php echo date('Y'); ?> - <?php bloginfo('name'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

3.3. Página Inicial (home.php)

O arquivo home.php é usado para exibir a lista de posts no WordPress.

Exemplo do home.php:

<?php get_header(); ?>
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <p><?php the_excerpt(); ?></p>
        </article>
    <?php endwhile; else : ?>
        <p>Nenhum post encontrado.</p>
    <?php endif; ?>
</main>
<?php get_footer(); ?>

3.4. Template de Página (page.php)

O arquivo page.php é usado para exibir páginas estáticas.

Exemplo do page.php:

<?php get_header(); ?>
<main>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>

3.5. Template de Post Individual (single.php)

O arquivo single.php exibe o conteúdo de um post individual.

Exemplo do single.php:

<?php get_header(); ?>
<main>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>

4. Configurando o functions.php

O arquivo functions.php permite adicionar funcionalidades ao tema, como suporte a menus, widgets e imagens destacadas.

Criando o functions.php

Crie um arquivo chamado functions.php e adicione o seguinte código:

<?php
// Suporte a Menus
function meu_tema_config() {
    register_nav_menus(array(
        'menu-principal' => __('Menu Principal', 'meu-tema'),
    ));
    add_theme_support('post-thumbnails'); // Suporte a imagens destacadas
}
add_action('after_setup_theme', 'meu_tema_config');

5. Hierarquia de Templates: Como o WordPress Escolhe os Arquivos

Entender a hierarquia de templates ajuda a criar páginas personalizadas.

Principais Arquivos na Hierarquia

• Página Inicial: home.php → index.php.
• Página Estática: page.php → index.php.
• Post Individual: single.php → index.php.
• 404 (Erro): 404.php.

Conclusão

Criar um tema WordPress do zero é uma jornada que começa com uma estrutura básica e evolui com a adição de templates e funcionalidades.

Agora que você tem os conhecimentos básicos, pode expandir esse tema adicionando mais templates e personalizações.

Quer dominar a criação de temas WordPress do básico ao avançado? Inscreva-se no Curso Avançado de WordPress e leve suas habilidades ao próximo nível!