wp

Se você chegou até esse post pela busca, provavelmente este não é o primeiro tutorial sobre criar temas no wordpress que vc está lendo. Então, vou pular algumas coisas que sei que já falaram nos outros links.

É apenas um site

WordPress é apenas uma camada do site. Só o CMS que vai ser colocado para seu cliente administrar via painel os posts e páginas.

Se você sabe fazer sites, então vc está muito perto de conseguir fazer um tema wordpress.

Comece como vc começaria qualquer outro site: do recorte html.

Sim, estou falando para você fazer isoladamente. Se esquecendo que no final, usará o wordpress. Faça o seu recorte css tableless da melhor forma possível, como vc faria normalmente.

Usando as funções

Creio que as 3 funções mais básicas são: get_header(), get_footer() e get_sidebar(). Basicamente o que elas fazem é apenas um include dos arquivos: header.php, footer.php e sidebar.php respectivamente.

Então os seus arquivos: index.php, 404.php, page.php, single.php, archive.php e search.php, terão uma anatomia muito próxima disso:

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * For example, it puts together the home page when no home.php file exists.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage wbruno
 * @since wbruno 0.0.1
 */

get_header(); ?>

  <main id="content" class="fleft" role="main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

      <?php get_template_part( 'content' ); ?>

    <?php endwhile; else: ?>

      <article class="not-found">
        <p><?php _e('Desculpe, nenhum post corresponde aos seus crit&eacute;rios.', 'wbruno'); ?></p>
      </article>

    <?php endif; ?>

    <div class="fright">
      <?php posts_nav_link(' &#8212; ', __('&laquo; Anterior', 'wbruno'), __('Pr&oacute;xima &raquo;', 'wbruno')); ?>
    </div>

  </main><!-- /content -->

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

Onde vemos claramente os includes do topo, sidebar e rodapé.

Codex

O WP é bem documentado. Tendo alguma dúvida: pesquise no codex.

Por exemplo, não faz sentido eu explicar o que é e o que faz cada um dos arquivos básicos de um tema, se o codex já tem um link falando tudo isso: http://codex.wordpress.org/pt-br:Hierarquia_de_Modelos_Wordpress. Dá uma lida lá.

Theme Check

Esse plugin é essencial para desenvolver um tema de qualidade. Ele vai te apontar alguns erros como encoding, funções deprecated e algumas boas práticas.

Use: http://wordpress.org/plugins/theme-check/.

Validador w3c

Eu não disse que um wordpress é apenas um site ?

Então todas as boas práticas de um site também valem para um tema wordpress. Portanto, valide sempre o html e css do seu tema: http://validator.w3.org/.

functions.php

É nesse arquivos que vc fará todas as intervenções que quiser no core do wordpress, como por exemplo mudar a forma com que o cms lista as categorias.

É importante saber que a única pasta que te pertence quando vc está desenvolvendo um tema, é a própria pasta do tema, localizada em: wp-content/themes/nome_do_seu_tema/, e nada mais.

Não edite de forma nenhuma os outros arquivos do wordpress, afinal uma atualização do core acabaria quebrando as suas modificações.

Mas ele não é obrigatório, e vc pode ter um functions.php em branco e mesmo assim o seu tema funcionará.

Arquivos básicos e obrigatórios

Você sempre vai precisar ter esses, na raiz do seu tema:

  • screenshot.png – screenshot em 600×450 de como o tema ficará, para vc visualizar no painel de escolha de temas um “preview”
  • style.css – independente se vc usará outros arquivos .css externos, o css base do tema, deve ser esse arquivo na raiz do tema. Os comentários iniciais dele, é que informarão ao painel do wp o que o seu tema é. 
      Theme Name: wbruno
  Theme URI: http://wbruno.com.br
  Description: Tema do blog wbruno
  Author: William Bruno
  Author URI: http://wbruno.com.br
  Version: 0.0.3
  Tags: light, two-columns, fixed-width, left-sidebar, flexible-width, sticky-post
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
  • editor-style.css – é um arquivos .css opcional que vc pode criar, que se existir será usado para formatar o editor dentro do painel do wordpress.
  • single.php – Quando vc estiver visualizando um post aberto, é esse arquivo que está sendo mostrado.
  • page.php – Este aqui é para uma página.

Algumas coisa obrigatórias do style.css e do functions.php o plugin Theme Check que eu indiquei, lhe dirá para fazer.

White Themes

Eu comecei assim. Pegando um tema padrão do wordpress e estilizando ele, até chegar no resultado que eu queria. Também é um caminho, mas não é a bala de prata. Talvez o seu tema seja tão específico que você não encontre nenhum white theme parecido para personalizar.

Porém, ainda assim vale a pena dar uma estudada em alguns para aprender como o author fez aquilo que vc quer, ou entender melhor como desenvolver o seu próprio do zero.

No meu github, há o tema que utilizo aqui no blog: https://github.com/wbruno/blog-dev. Ele é bem minimalista, e sempre será um “white theme”. Então pode clonar o projeto e dar uma estudada lá.

Fique a vontade para mandar um pull request do seu fork caso você tenha feito alguma implementação legal no projeto. =)