A maioria dos tutoriais que se encontram pela rede partem de temas simples e de duas

colunas para WordPress. Basicamente, eles ensinam a recriar um tema existente.

isso pode ser interessante para aprender a mexer com o código básico, mas não ajuda
muito a quem quer um tema novo que vá ser realmente utilizado.

Pensando nisso, resolvi criar essa série. Ao final dela, você será capaz de criar um tema
exclusivo e personalizado para o seu blog.

Há três maneiras de fazer isso:

1. Criar todo o visual no Photoshop ou outro programa gráfico, depois codificar tudo
para transformar em um tema.

2. Transformar um template estático existente em um tema.

3. Criar um tema todo baseado em CSS, utilizando imagens em lugares estratégicos,

como o cabeçalho, área dos posts e barra lateral.

Nesse tutorial, vamos utilizar a terceira opção. Nem todo mundo tem habilidade ou
criatividade o suficiente para a primeira, e a segunda foge do nosso objetivo, que é criar
um tema único.

Dito isso, vamos começar.

Parte 1
- Preparando as Ferramentas Básicas
Para criar um tema para WordPress, você precisa de alguns programas básicos
instalados. Vamos ao checklist.

1. Editor de textos simples, o próprio bloco de notas do Windows, se for o caso, serve.

2. Uma instalação offline do WordPress. Mesmo que você não tenha problemas com
consumo de banda, fazer tudo online demanda mais tempo e você ainda fica sujeito a
quedas de conexão.

Para fazer a instalação, siga as instruções encontradas aqui.

- Criando o Tema
Agora que você está com tudo pronto para começar, vamos ao passo-a-passo.

Na instalação offline que você fez, vá até

C:\xampplite\htdocs\wordpress\wp-content\themes. Se você fez a instalação em
C:, basta copiar o endereço em vermelho e colar na barra de navegação de qualquer
pasta do Windows, clicar em ir ou enter e você chega direto lá.
Uma vez na pasta “themes”, crie uma nova pasta e dê o nome do seu tema. Se ainda não
pensou em um, use um nome qualquer, isso pode ser mudado depois. Eu vou chamar de
“Tema Tutorial” e utilizar esse nome onde for necessário.

1. Folha de Estilos ou style.css

Abra o bloco de notas, copie e cole o código abaixo, depois salve na pasta que você
criou com o nome style.css.

/*
Theme Name: Tutorial WordPress Theme
Theme URI: http://www.seudominio.com/
Description: Tema exclusivo do blog <a
href="http://seudominio.com/">Seu Blog</a>.
Version: 1.0
Author: Dono do Blog
Author URI: http://seudominio.com/
Tags: blue, fixed width, three columns, widgets*/

Esse código é fundamental em um tema para WordPress. É a ele que o sistema procura
para saber qual tema deve ser exibido ao carregar a página. Na falta dele no tema ativo,
o tema padrão será ativado.

Não custa lembrar que seudominio.com deve ser substituído pela url do seu blog.

As tags não são obrigatórias, mas devem ser incluídas se você pretende submeter seu
tema ao Diretório de Temas do WordPress. Substitua as que eu utilizei por tags que
descrevam o que você tem em mente. Utilize-se de tags em inglês, isso vai fazer com
que mais gente encontre seu tema, caso ele seja aprovado e exibido no diretório.

2. Criando a Estrutura do Tema

Antes de entrarmos em mais detalhes, precisamos definir alguns detalhes do tema, como
largura total, número e largura das colunas.

Eu decidi utilizar o Yahoo Grids, que facilita a criação do layout básico. Baixe o
arquivo nesse link.

Uma ferramenta online facilita em muito essa parte do processo. O Grid Builder gera a
base em html que vai ser utilizada no nosso tema.

A Toolbox à esquerda pode ser arrastada para qualquer lugar na página. Eu defini 974px
de largura, que garante uma boa exibição em resoluções a partir de 1024×768, sidebar
left 160px e o restante do conteúdo dividido na razão 66/33. Clique na imagem que
ilustra isso para vê-la em tamanho maior.
Você pode definir os valores que quiser. A configuração que eu utilizei resulta em uma
área de um pouco mais de 500 px de largura para os posts e uma barra lateral direita que
tem a largura ideal para exibir postagens e comentários recentes, caixas para assinatura
de feed por email e outros fru-frus que ficam melhor em larguras maiores.

A barra lateral esquerda comporta anúncios no formato padrão 160×600, porque ganhar
dinheiro é uma boa . Além disso, é uma largura boa para exibir listas de categorias e
páginas fixas.

Depois de definir os valores, clique em show code, na janela que se abrirá, marque a
caixa include lorem ipsun e clique em view plain. Copie o código que vai ser gerado,
cole no bloco de notas e salve como index.php, na mesma pasta onde já se encontra o
style.css.
Criado o index.php, hoje vamos deixá-lo pronto para entrar em ação.

Se você fez tudo certo, ao acessar a administração do WordPress offline, em “Design >
Themes”, você deverá encontrar um link para ativar o tema, com o thumbnail em
branco.

Clique para ativar e depois visualize o blog. Você deverá ver algo parecido com o
mostrado na imagem abaixo. Clique para ampliar.

Antes de continuar, vamos definir e identificar algumas áreas do index.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Base Page</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/
2.5.1/build/reset-fonts-grids/
reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc4" class="yui-t1">
<div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
<div id="bd">
<div id="yui-main">

<!--header-->

<!--main-->

<div class="yui-b"><div class="yui-gc">

<div class="yui-u first">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas sit amet metus.

</div>

<!--main-->

<!--rsidebar-->

<div class="yui-u">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Maecenas sit amet metus.

</div>

<!--rsidebar-->
</div>

</div>
</div>

<!--lsidebar-->

<div class="yui-b">

Navigation Pane

</div>

<!--lsidebar-->

</div>

<!--footer-->

<div id="ft">Footer is here.</div>

</div>
</body>
</html>

Conforme o layout que você escolheu, a posição das barras laterais pode mudar, mas é
fácil identificar por alguns detalhes. “Navigation Pane” sempre identifica a barra
esquerda. A direita é a que contém “lorem ipsum”.

Se ficar na dúvida, coloque uma palavra diferente no início de cada trecho com lorem
ipsum e visualize a página.

O index que você criou não passa de uma página em html, por enquanto.

Para que ele possa exibir seus posts, é necessário incluir os códigos em php que
chamam os dados para que sejam exibidos pelo navegador.

Você pode pegar esses códigos no Codex do Wordpress, mas para quem não tem muita
prática, pode ser muita informação para juntar e colocar em uso.

Para facilitar, vamos utilizar uma versão modificada dos códigos encontrados no tema
padrão do WordPress.

Eu prefiro usar esses códigos, já que estão sempre de acordo com a versão mais recente
do sistema.

1. Header
Localize o código abaixo na área do index que você demarcou como header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Base Page</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/
2.5.1/build/reset-fonts-grids/
reset-fonts-grids.css" type="text/css">
</head>

Substitua por esse:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="
<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />

<title><?php if ( is_home() ) { bloginfo('name') ?> |

<?php bloginfo('description'); } else { wp_title(''); ?> |

<?php bloginfo('name'); } ?></title>

<link rel="stylesheet" href="<?php bloginfo

('template_directory'); ?>
/reset-fonts-grids.css" type="text/css"
media="screen, projection" />

<link rel="stylesheet" href="<?php bloginfo

('stylesheet_url'); ?>"
type="text/css" media="screen,projection" />

<link rel="alternate" type="application/rss+xml"

title="<?php bloginfo('name'); ?> RSS Feed" href="
<?php bloginfo('rss2_url'); ?>" />

<link rel="pingback" href="<?php bloginfo

('pingback_url'); ?>" />

<?php wp_head(); ?>

</head>

Logo abaixo, localize esse código:

<body>
<div id="doc4" class="yui-t1">
<div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
<div id="bd">
<div id="yui-main">

Substitua por esse:

<body>
<div id="doc4" class="yui-t1">
<div id="hd"><div id="blogname"><a href="
<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?>

</a> </div>
<div id="desc">
<?php bloginfo('description'); ?></div>
</div>

<div id="bd">
<div id="yui-main">

Clique em update e visualize o blog, se você fez tudo certo, deve aparecer uma página
como a mostrada na imagem abaixo.

Para concluir o header, precisamos da css que vai dar forma ao blog. Como ela fica
linkada no header.php, é bom incluí-la já no tema, para evitar esquecimentos futuros.

Descompacte o arquivo que você baixou do Yahoo Grids, se não baixou ainda, baixe
nesse link.

Depois de descompactado, localize o arquivo reset-font-grids.css, ele fica na pasta

reset-font-grids, que por sua vez se localiza na pasta grids.

O caminho é esse, para facilitar a localização: yui_2.5.2\yui\build\reset-fonts-grids

Arraste o arquivo reset-fonts-grids.css para a mesma pasta onde se encontra o

index.php e o style.css do seu tema. Ele ja está linkado no header e não é necessário
fazer mais nada.

A função desse arquivo de css é limpar toda e qualquer formatação que possa ser
definida por navegadores, garantindo que nada vai interferir na exibição.

Ele também traz todas as informações sobre o posicionamento de todas as seções da

página.

Clique em update e visualize a página. Agora você deve ver tudo no lugar, como na
imagem. Clique para ampliar.

Agora, vá até a pasta base, no caminho abaixo, também na pasta do Yahoo Grids:

yui_2.5.2\yui\build\base
Nessa pasta, você vai encontrar o arquivo base.css, ele traz uma formatação básica para
a tipografia do blog.

Abra-o com um editor de html, até o Frontpage serve. O bloco de notas não é
recomendado nessa parte, já que aqui, pelo menos, ele incluiu caracteres estranhos.

Copie tudo que se encontra no arquivo, desde:

h1 {
/*18px via YUI Fonts CSS foundation*/
font-size:138.5%;
}

até:

p,fieldset,table,pre {
/*so things don't run into each other*/
margin-bottom:1em;
}

Vá até seu arquivo style.css e cole, logo abaixo das tags.

Amanhã, incluiremos os códigos para gerar a página principal. Para adiantar, aproveite
e crie vários posts no seu blog offline. Isso vai ser importante na próxima parte do
tutorial.

Não é necessário ficar escrevendo, use um gerador de lorem ipsum para isso. Não
esqueça de colar no bloco de notas e copiar novamente dali antes de utilizar, para
remover possíveis formatações que o site inclua.

Gerador de lorem ipsum

Se você fez tudo corretamente, tem um arquivo index.php pronto, gerando uma página
semelhante a essa:

Compare com o seu para ver o que está errado.

Você pode até usá-lo diretamente, caso queira utilizar o mesmo formato, mas eu não
aconselho, já que a idéia aqui é aprender a fazer um tema, não copiá-lo.

Fatiando o Index
Agora é a hora de criar os arquivos individuais que fazem um tema.

É possível rodar um blog com apenas o index.php, mas não é sábio, já que isso torna
muito mais difícil modificar áreas específicas ou mesmo personalizá-las.

Header
Copie todo o código marcado como header, desde <!–header–> até o topo da página,
clique com o botão direito do mouse e escolha “recortar”. No lugar onde ficava o código
recortado, escreva “header”, apenas para não correr o risco de se perder.

Cole o arquivo recortado no bloco de notas e salve como header.php, na mesma pasta
onde está o index.

Onde você escreveu “header”, substitua por <?php get_header()?> e clique em

“update”.

Visualize seu blog, tudo deve ser exibido exatamente como antes.

Footer
Repita o processo anterior, dessa vez copiando tudo desde <!–footer–> até o final da
página. Recorte, cole no bloco de notas e salve como footer.php, sempre na mesma
pasta utilizada para o tema.

No lugar do código recortado, coloque <?php get_footer()?>.

Clique em “update” e visualize o blog para ter certeza que tudo foi feito corretamente.

Sidebars
Agora é a vez das barras laterais.

Copie todo o código identificado como <!–rsidebar–>, recorte, escreva “rsidebar” no

lugar onde o código estava, cole no bloco de notas e salve como rsidebar.php.
Substitua “rsidebar” pelo código abaixo:

<?php include (TEMPLATEPATH . "/rsidebar.php"); ?>

Repita o processo para o código marcado como <!–lsidebar–>.

Substitua “lsidebar” pelo código abaixo:

<?php include (TEMPLATEPATH . "/lsidebar.php"); ?>

Clique em “update” e visalize o blog para conferir o resultado.

O que restou é o seu index.php, que será utilizado mais tarde para criar os templates
secundários.

Validando o XHTML
Antes de continuar, vamos ver se o código que temos até agora valida como XHTML.

Ter um tema com XHTML válido é muito útil, já que reduz as chances de você ter
problemas de exibição em diferentes navegadores.

Adicione esse link para o W3C Markup Validator, ja que vamos utilizá-lo
freqüentemente.

Visualize seu blog e, na barra superior do navegador, clique em arquivo > código fonte.
Selecione todo o código que será exibido e copie.

Vá até o W3C Validator e escolha a aba “validate by direct input”, clique em “more
options” e marque a caixa “show source”.

Cole o código que você copiou na caixa de texto e clique em “check”.

Se você fez tudo certo, serão reportados 4 erros de XHTML.

Na verdade, é apenas um pequeno trecho de código que gera esses 4 erros. Erros em
XHTML costuma ter efeito cascata.

Tente você mesmo encontrar o erro e corrigi-lo, guiando-se pelo código fonte que será
exibido.

Antes de continuar, você deve estar lembrado que havia um erro de XHTL no código
para corrigir.

Se você não encontrou, aqui vai a dica. No footer.php, antes da tag </body>,
acrescente </div>.

Nem sempre uma tag faltando vai quebrar o template de um blog, mas vai, sim, fazer
com que o código deixe de validar.
Corrigida a lição de casa, vamos à aula de hoje. Prepare um café porque hoje a coisa vai
longe .

Antes de estilizar o CSS do nosso tema, vamos criar os subtemplates, que personalizam
a exibição das páginas fixas, arquivos, categorias etc.

Páginas Fixas
O subtemplate page.php é responsável pela exibição das páginas fixas, como páginas
de contato, sobre, política de privacidade e outras. São páginas que não entram na
cronologia de publicação do blog, daí o termo “fixas”.

Por sua característica informativa, normalmente dispensam comentários e não são

categorizadas. Por isso, são um pouco diferentes do template index.php.

Vá até o seu index.php, copie todo o código e cole no bloco de notas ou no editor de
texto de sua preferência.

Localize o trecho abaixo:

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent

Link to <?php the_title_attribute(); ?>"><?php the_title();
?></a></h2>

Substitua por esse:

<h1><?php the_title(); ?></h1>

Localize os códigos abaixo e delete todos eles:

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?>

--></small>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?>

Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit',
'', ' | '); ?> <?php comments_popup_link('No Comments &#187;', '1
Comment &#187;', '% Comments &#187;'); ?></p>

<div class="navigation">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries')
?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries
&raquo;') ?></div>
</div>

Salve como page.php, junto dos outros templates do seu tema.

Arquivos
Copie o código do seu index.php, cole no editor de textos e insira o código abaixo logo
após <?php if (have_posts()) : ?>.
<?php $post = $posts[0]; // Hack. Set $post so that the_date() works.
?>
<?php /* If this is a category archive */ if (is_category()) { ?>
<h2 class="pagetitle">Archive for the &#8216;<?php single_cat_title();
?>&#8217; Category</h2>
<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
<h2 class="pagetitle">Posts Tagged &#8216;<?php single_tag_title();
?>&#8217;</h2>
<?php /* If this is a daily archive */ } elseif (is_day()) { ?>
<h2 class="pagetitle">Archive for <?php the_time('F jS, Y'); ?></h2>
<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<h2 class="pagetitle">Archive for <?php the_time('F, Y'); ?></h2>
<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<h2 class="pagetitle">Archive for <?php the_time('Y'); ?></h2>
<?php /* If this is an author archive */ } elseif (is_author()) { ?>
<h2 class="pagetitle">Author Archive</h2>
<?php /* If this is a paged archive */ } elseif (isset($_GET['paged'])
&& !empty($_GET['paged'])) { ?>
<h2 class="pagetitle">Blog Archives</h2>
<?php } ?>

Para evitar a geração de conteúdo duplicado, o que não vai ajudá-lo em nada na
indexação junto aos mecanismos de busca em geral e Google em particular, vamos
substituir o código responsável pela exibição dos posts.

Localize <?php the_content('Read the rest of this entry &raquo;'); ?> e

substitua por <?php the_excerpt() ?>.

Salve como archive.php.

Comentários
Os comentários que serão exibidos junto aos posts são gerados pelo arquivo
comments.php. para criá-lo, copie o código abaixo, cole no editor de textos e salve-o
como comments.php.

O código é uma versão ligeiramente modificada do encontrado no tema padrão do

WordPress. Ele exibe os comentários separados dos trackbacks, que vem abaixo dos
comentários normais.