WordPress Logo

Criando um tema para WordPress – Parte 1

Opa opa! Estou de volta, e dessa vez vou fazer algo que meu amigo Thiago Gonzalez já está pedindo a bastante tempo: mostrar o passo-a-passo da criação de um tema de WordPress.

Como eu não gosto de reinventar a roda nem de fazer coisas muito genéricas, vou documentar um caso de uso do mundo real: a reformulação do tema do meu blog, este que você está lendo agora.

Irei mostrar pra vocês o passo-a-passo de todo o processo: Desde a criação da pasta vazia do tema, criação do HTML voltado pra WordPress (o CSS eu vou pular) e – por fim – alguns recursos do WordPress pra finalizar o tema… Vão ser vários posts ao longo de – provavelmente – uma semana.

Se tudo der certo, o último post da série vai ao ar junto com o lançamento do novo layout do blog. :)

Quem quiser acompanhar o projeto está no GitHub: https://github.com/TiuTalk/blog.thiagobelem.net

Recomendo à todos uma leitura por alto do artigo Theme Development no Codex… É de lá que eu tiro a maior parte das dúvidas sobre o processo de criação de temas.

Passo 1 – Estrutura inicial do tema

Iremos criar um tema totalmente do zero, sem herdar ou usar códigos de outros temas.

Pra começar, criamos uma pasta – dentro de /wp-content/themes/ – para o nosso tema com os seguintes arquivos dentro:

  • style.css – Onde definimos o título, autor e outros dados do tema
  • index.php – Onde iremos criar o HTML do tema

Passo 2 – Informações sobre o tema (style.css)

Agora precisamos abrir o style.css e colocar um bloco de comentário CSS com as informações sobre o tema:

Com isso o tema já aparece na nossa lista de temas dentro do Painel de Controle do WordPress:

Tema disponível

Nosso tema já pode ser habilitado, e quando você acessar o blog já estará vendo o conteúdo do arquivo index.php que você criou antes: uma tela em branco! :)

No próximo artigo vamos começar a criar o HTML da página inicial..

Até a próxima!

10 thoughts on “Criando um tema para WordPress – Parte 1

  1. Pingback: PHP News 6ª Ed. | PHPMS

  2. Pingback: Criando um tema para WordPress – Parte 4 | Thiago Belem / Blog

  3. Mauro Junior

    Não sei se é o lugar certo… mas poderia me dizer… estou procrando uma maneira de aparecer os dois checkbox que vc tem abaixo no form de comentario… de notificação… eles são plugins ou do tema em si ???… plugin, poderia me dizer qual…

  4. João Lindoso

    Fiquei um tempo sem visitar seu blog, mas como eu gostaria de visitar o Rio de Janeiro só para lhe conhecer. Aqui em São Luís do Maranhão é extremamente difícil encontrar treinamentos em PHP, o que dirá encontrar alguém para apresentar algumas dicas e truques… Mais uma vez parabéns.

  5. Thiago Gonzalez

    Primeiramente, muito obrigado pela menção no post, fico honrado.

    Belem, você disse que não gosta de reinventar a roda, por isso nunca quis escrever um post que já existe em muitos outros blogs, mas eu não concordo. Como o Jack disse, existem sim muitos posts sobre isso, mas nenhum tão bem explicado quanto seus posts.

    Agora você vira pra mim e fala que estou babando seu ovo falando isso, mas pergunte a qualquer um de seus alunos. Você tem uma habilidade linda para fazer o que faz. Não venho aqui agradecer apenas essa série de posts sobre WP que você fará, mas por tudo.

    Você me incentivou, me ensinou HTML/CSS, correu atrás de uma vaga em sua equipe, o que me fez evoluir ainda mais. Se suas explicações e posts fossem ruins, não estaria aqui, e nem seus alunos, que só tem a agradecer pelas aulas maravilhosas que eles têm/tiveram.
    Você ensina muito bem, porque ama ensinar e ama o que faz.

    Tenho certeza que a sequência de posts será muito boa e, com certeza, esperarei ansioso :)

    Beijo na bunda :*

  6. Arruda

    Poxa! Esperou eu ter mudado meu tema pra poder ensinar como faz? Que droga, mas mesmo assim, muito bacana da sua parte =D
    Quem sabe daqui a alguns anos eu tome coragem e faça um tema do zero xD

  7. Jack

    ótima iniciativa, cara. Existe vários tutoriais ai pela web e conto nos dedos aqueles que realmente ensinam de verdade sobre esses primeiros passos no WP.. que venha o segundo post!

Comments are closed.