Novo tema do site

Na semana passada me dei conta de que meu site estava usando o mesmo tema desde Abril de 2013, mês em que publiquei esse post falando sobre minha migração para o Ubuntu e sobre o lançamento do novo tema do meu site usando Zurb Foundation.

Menos 2 itens na lista

Então resolvi criar um novo tema para meu site e é claro que escolhi o Odin como meu starter theme.

Já falei algumas vezes sobre o Odin aqui em meu site.

A primeira vez foi em 2013 no post Odin: O sonho de todo desenvolvedor WordPress onde apresentei um tema que estava começando a ser desenvolvido e os recursos que ele teria.

Odin, o sonho de todo desenvolvedor WordPress

A segunda vez foi em 2014 no post Odin: Um framework que chuta bundas! mesmo título da palestra que apresentei no WordCamp Belo Horizonte daquele ano.

Odin: Um Framework que chuta bundas!

Desenvolvendo meu novo tema

Como você deve ter lido nos posts que publiquei acima, o Odin é mais do que um framework que chuta bundas possui diversos recursos para agilizar a sua vida. Ele possibilita que você (literalmente) entregue projetos em apenas um dia de desenvolvimento.

Sim, 1 dia foi o tempo necessário para:

• Instalar o Odin em meu ambiente local
• Criar as personalizações que eu queria
• Testar em alguns dispositivos
• Aplicar o novo tema em meu site

4 recursos que o Odin possui me ajudaram muito nesse processo:

1. Hierarquia de templates
2. Bootstrap
3. Sass/SCSS
4. Grunt

Hierarquia de templates

O Odin já possui todos os arquivos necessários para que um tema WordPress funcione corretamente.

Para quem ainda não conhece, essa é a hierarquia de templates utilizada atualmente pelo WordPress:

Sem o Odin, seria necessário criar cada um desses arquivos manualmente.

Bootstrap

O Odin tem a versão mais recente do Bootstrap presente em sua estrutura. Isso significa que, por exemplo, as classes para criar um grid responsivo em seu site já estão inseridas nos arquivos do tema.

Sass/SCSS

Além de ter as classes do Bootstrap já inseridas nos arquivos do tema, o Odin vai mais além e entrega todos os arquivos do Bootstrap separados por módulos e o melhor, usando Sass/SCSS para isso.

Isso é maravilhoso!

Usando Sass você pode criar variáveis em seu CSS e, ao invés de digitar uma mesma cor dezenas de vezes e (pior ainda) ter que sair procurando nos arquivos onde essa cor é usada e alterar tudo novamente todas as vezes que precisar mudá-la, você pode simplesmente alterar uma variável e pronto.

Grunt

Com o Grunt você pode automatizar as tarefas de seu projeto como, por exemplo, compilar todos os arquivos Sass/SCSS do seu tema todas as vezes que uma alteração for feita neles.

Você só precisa deixar o Grunt rodando em seu terminal com $ grunt watch, fazer as alterações que quiser nos arquivos .scss e, sempre que você salvar um dos arquivos, o Grunt gerará o CSS para você.

É possível ainda utilizar outras tarefas do Grunt para, inclusive, fazer deploy do seu tema.

Resumindo

Em apenas um único dia de trabalho consegui tirar as ideias de minha cabeça e publicar meu novo tema.

Obrigado por existir, Odin!