Por que muitos desenvolvedores ficam

quebrando a cabeça?
Existe uma grande demanda por Desenvolvedores WordPress,
porém poucos profissionais qualificados. Recebo muitos pedidos
de clientes, e sempre me dizem: “como é difícil encontrar bons
desenvolvedores WordPress”.

O que acontece é que a maioria das pessoas tem um

conhecimento muito raso sobre WordPress, apenas sabem como
criar sites usando templates prontos, e quando tem que
customizar um template ou criar algo do zero, ficam quebrando
a cabeça...

Existe uma grande demanda por desenvolvedores WordPress, e

poucos tem esse conhecimento. A verdade é que existe muita
informação desorganizada na internet sobre WordPress, o que
cria uma grande confusão na cabeça de quem quer aprender.

E além dessa informação estar desorganizada, existe muita

informação ERRADA. Não é porque está funcionando que está
correto. Existe código que pode deixar seu site lento e ter
brechas de segurança. Ou então as informações não são diretas
e te fazem perdem muito tempo com coisas que não são
necessárias.

Como criar um Template WordPress 2

do Zero
Mas então como fazer para aprender o que REALMENTE
importa para desenvolver templates WordPress como um
verdadeiro profissional?

Foi pensando nisso que eu criei esse ebook, ele vai servir como
um guia, onde vou te passar minha experiência. Tenho atuado
com desenvolvimento web desde 2009 e já cometi muitos erros
e aprendi muita coisa nesse tempo. Quero transmitir esse
conhecimento, e formar uma nova geração de profissionais
excepcionais.

Nesse ebook você vai aprender a criar um tema WordPress do

ZERO de forma simples e prática.

Ao finalizar esse ebook você vai estar pronto para começar a

desenvolver seus próprios templates e criar sites personalizados
com o WordPress.

Bora programar???

Como criar um Template WordPress 3

do Zero
Como instalar o WordPress
Para instalar o WordPress você vai precisar de um servidor
apache (PHP) e um banco de dados MySQL.

A seguir vou te mostrar como instalar o WordPress em ambiente

local (localhost), que é a forma mais recomendada para quem
quer fazer testes e trabalhar com desenvolvimento
WordPress.

Assim você não precisa contratar uma hospedagem toda vez

que quer trabalhar num projeto, pode começar localmente e
quando o projeto estiver concluído fazer o upload para a
hospedagem.

Você vai poder criar quantas instalações do WordPress você

quiser na sua própria máquina.

Como criar um Template WordPress 4

do Zero
Como instalar o WordPress em
localhost
Se você precisa desenvolver um site para um cliente, quer criar
um blog ou um tema WordPress, então você vai precisar instalar
o WordPress em um servidor local (localhost). Dessa maneira
você pode ficar mais a vontade para fazer testes e
desenvolvimento.

Passo 1: Instalação do XAMPP no seu

computador

Faça o download do XAMPP e a instalação. O XAMPP vai

configurar um servidor Apache e o banco de dados MySQL em
seu computador. Assim você vai pode executar seus projetos
WordPress no seu próprio computador, sem a necessidade de
contratar uma hospedagem.

A instalação é bem simples, basta avançar e confirmar. O

XAMPP só tem a versão 32 bits disponível, mesmo que seu
Windows seja 64 bits você pode usar a versão 32 bits
normalmente.

Como criar um Template WordPress 5

do Zero
Após finalizada a instalação, execute o XAMPP e inicie os
serviços Apache e MySQL.

Se você tiver problemas para executar o serviço do Apache no

XAMPP pode estar dando conflito de porta com algum software
que você utiliza, como por exemplo, o skype. Desablite o uso da
porta 80 nas configurações avançadas do seu skype, ou feche
todos os programas que possam estar utilizando essa porta.

Como criar um Template WordPress 6

do Zero
Passo 2: Arquivos de Instalação do WordPress

Faça o download dos arquivos de instalação do WordPress. Após

finalizar o download, extraia os arquivos do wordpress.zip que
você baixou no diretório:
c:/xampp/htdocs/nome da pasta que você criar.

Como criar um Template WordPress 7

do Zero
Passo 3: Banco de Dados

Acesse no seu navegador o endereço:

http://localhost/phpmyadmin para criar um novo banco de
dados.

Clique em “Base de Dados” depois digite o nome, por exemplo:

“meubanco” e clique em criar.

Após, acesse o seu navegador padrão como Chrome ou Internet

explorer no endereço:
http://localhost/nome da pasta que você criou para dar início a
instalação.

Como criar um Template WordPress 8

do Zero
Passo 4: Instalação do WordPress

Acesse no seu navegador o endereço: http://localhost/nome da

pasta que você criou. Para dar início a instalação do WordPress.

Como criar um Template WordPress 9

do Zero
Na tela de instalação você vai digitar o nome do banco MySQL
que você escolheu. Nome do usuário padrão do XAMPP é “root”,
e senha em branco. O servidor você vai deixar “localhost”. E o
prefixo eu aconselho sempre a mudar para “alguma coisa _” por
exemplo, “meuwp_” por questões de segurança.

Basta avançar e depois escolher o nome do seu site, usuário e

senha de sua preferência.

Pronto! Agora você já pode acessar sua instalação do WordPress

no endereço http://localhost/nome da pasta que você criou.
Desenvolvimento WordPress 10
para Iniciantes
Configurando sua IDE para o
Desenvolvimento
IDE ou Ambiente de Desenvolvimento Integrado, é a ferramenta
que vai permitir criar os arquivos de código do seu tema, ou
editar o código fonte de arquivos já existentes. Vamos
recomendar 3 IDE’s nesse ebook, vamos lá:

1. Notepad++
O Notepad++ é uma IDE muito leve, rápida e fácil de ser
baixada. Para quem está começando é uma ótima pedida, por
ser fácil de instalar e já começar a criar suas páginas. Ele pode
ser baixado nesse link de forma gratuita.

2. PhpStorm
O PhpStorm é uma IDE mais robusta, com mais recursos que vão
facilitar o desenvolvimento, como por exemplo, o auto
completar do WordPress, que tem uma biblioteca de funções
que a medida que você digita o seu texto ele te dá opções de
possíveis comandos começados com as letras digitadas.O
PhpStorm é um software pago porém pode ser baixada uma
versão de testes nesse link.

3. Sublime text
O Sublime também é uma excelente IDE, bem leve e com muitas
funcionalidades que vão te ajudar. O sublime funciona também
no MAC. Acesse nesse link.

Como criar um Template WordPress 11

do Zero
Hierarquia de arquivos do WordPress
O WordPress trabalha com um padrão de nomes específicos
para cada arquivo de um tema, e cada um desses arquivos tem
um papel diferente dentro dessa hierarquia.

Nesse ebook por uma questão de tempo não vamos cobrir todos
os arquivos existentes, mas apenas os principais para criar nosso
template proposto.

Para visualizar a hierarquia completa acesse o WP Hierarchy.

Como criar um Template WordPress 12

do Zero
Criando seu tema WordPress do Zero
Agora chegou a hora de por a mão na massa! Vamos criar seu
primeiro tema simples em WordPress

Antes de começar a criar o tema é necessário que você já tenha

instalado o WordPress, se você ainda não instalou, volte ao
capítulo desse ebook sobre a instalação do WP.

Ao final do processo seu template deve ficar assim:

Como criar um Template WordPress 13

do Zero
Passo 1: Criar a pasta do tema e arquivos iniciais
Abra a pasta de instalação do seu WordPress, normalmente
c:/xampp/htdocs/pasta que você escolheu.
Abra a pasta wp-content/themes e crie uma nova pasta nesse
diretório chamada meutema.
Depois abra sua IDE e dentro da sua pasta meutema crie os
arquivos em branco: index.php , header.php, footer.php,
functions.php e style.css

Sua pasta deve ficar assim:

Como criar um Template WordPress 14

do Zero
Se você acessar agora sua área administrativo do WordPress:
http://localhost/pasta que você instalou/wp-admin e ir no menu
“aparência/temas” verifique que nosso novo tema já apareceu na
lista, porém ainda sem informações.

Como criar um Template WordPress 15

do Zero
Passo 2. Meta tags com as informações sobre o tema
Abra o arquivo style.css com seu IDE e digite o seguinte bloco de
código e salve o arquivo:

/*
Theme Name: Meu Tema
Description: Esse é meu primeiro tema
WordPress
Author: Digite seu nome
Autor URI: http://meusite.com.br
Version: 1.0

*/

Essas tags vão identificar para o WordPress o nome do seu tema,

descrição, o autor (quem criou o tema), o site do autor e a versão
do tema. Quando você lançar uma atualização do tema, você
pode subir a versão do tema para 1.1 por exemplo. Existem
outras tags de indentificação do WordPress que você pode ver
na documentação do WordPress.

Como criar um Template WordPress 16

do Zero
Passo 3. Screenshot do tema
Para imagem de exibição do tema, também, chamada de
screenshot. Vamos precisar de uma imagem de 880x660 largura
x altura. No formato .PNG
Você pode criar essa imagem no Photoshop, ou até mesmo no
Paint.

Salve essa imagem dentro da pasta do seu tema com o nome

screenshot.png e ela deve aparecer automaticamente na
imagem de exibição do seu tema no WordPress.

Como criar um Template WordPress 17

do Zero
Passo 4. Index.php e como carregar os posts no tema
Ative o nosso tema e vamos criar nossas linhas de código
WordPress! Abra o arquivo index.php com seu IDE e digite a
seguintes linhas de código. Repare que o index não vai ter as
tags de ínicio de arquivo do HTML, porque isso vai ficar no
header.php

<?php get_header(); ?>

<div class="container">
<div class="row">
<div class="col-sm-8">
<?php if(have_posts()):while(have_posts()):the_post(); ?>
<div>
<h2>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p>
<?php the_time("F jS, Y"); ?> by <?php
the_author_posts_link(); ?>
</p>
<p>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail("full",
array("class" => "img-fluid")); ?>
</a>
</p>
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

Como criar um Template WordPress 18

do Zero
Passo5 header.php
Agora vamos criar o cabeçalho do nosso template, e vai estar
presente em todas as páginas.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo("charset"); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>

<body>

<header>
<div class="container">
<h1>
<a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?>
</a>
</h1>
<p><?php bloginfo('description'); ?></p>
</div>
</header>

Passo6 footer.php
O footer vai ser o rodapé do nosso template e também vai estar
presente em todas as páginas, por isso não precisamos repetir o
código em cada página, o WordPress vai se encarregar disso.

<footer>
<div class="container">
<p>© <?php bloginfo('name'); ?>. All rights reserved.
<?php echo date('Y'); ?>.
</div>
</footer>

<?php wp_footer(); ?>

</body>
</html>

Como criar um Template WordPress 19

do Zero
Passo 7 functions.php
No arquivo functions vai ficar toda parte de backend do nosso
template. Funções e hooks que vão permitir que tudo funcione.
Por questões de segurançã os estilos e arquos javascript também
devem ser carregados no functions ao invés de embutidos no
header. Copie e cole esse código no seu functions.php

<?php
function dollar_theme_styles(){
wp_enqueue_style('bootstrap_css',
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'
);
wp_enqueue_style('main_css', get_template_directory_uri() .
'/style.css');
}
add_action('wp_enqueue_scripts', 'dollar_theme_styles');

function dollar_widgets_init() {

register_sidebar( array(
'name' => 'Home right sidebar',
'id' => 'home_right_1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
) );

}
add_action( 'widgets_init', 'dollar_widgets_init' );

add_theme_support( 'title-tag' );
add_theme_support('post-thumbnails');

?>

*Note que estamos carregando o framework Boostrap para criar

um template responsivo.
Como criar um Template WordPress 20
do Zero
Passo 8 sidebar.php
A Sidebar vai ser a barra lateral do nosso tema, que vai permitir
que sejam carregados os widgets. Cole esse trecho no
sidebar.php

<div class="col-sm-3 col-sm-offset-1">

<?php dynamic_sidebar( 'home_right_1' ); ?>
</div>

Passo 9 Estilizando o tema

Agora podemos estilizar o tema e deixá-lo com a aparência que
desejamos. Abra o style. css e adicione as seguintes linhas, no
final ele deve ficar assim:
/*
Theme Name: Meu Tema
Description: Esse é meu primeiro tema WordPress
Author: Estudar TI
Author URI: http://www.estudarti.com.br
Version: 1.0
*/

header{
display: block;
width: 100%;
background-color: #999;
margin-bottom: 20px;
}
header h1 a{
color: #FFF;
font-size: 32px;
text-transform: uppercase;
}
footer{
text-align: center;
margin-top: 60px;
}

*Fique a vontade para personalizar ainda mais o seu template

WordPress.
Como criar um Template WordPress 21
do Zero
Passo 10: Populando seu template
Chegou a hora de adicionar texto e imagens em destaque aos
seus posts. Fique a vontade para brincar um pouco.

Pronto! Acesse a URL do seu blog http://localhost/pasta que

você instalou para testar
Agora você deve ter seu primeiro tema WordPress, funcionando
da maneira como na imagem a seguir. Se ocorreu algum erro,
verifique se o código está 100% idêntico ao passado.

Como criar um Template WordPress 22

do Zero
Explicando os principais comandos e funções

<?php indica início de código PHP

?> indica fechamento de código PH
get_header() Carrega o cabeçalho do WordPress
; encerramento de linha de código PHP
if( have_posts() ) função que verifica se existem posts no
WordPress
while( have_posts() ) Cria uma repetição enquanto houver
posts no WordPress
the_post() Carrega as informações do post atual do WordPress
the_permalink() exibe o hyperlink do post atual carregado
the_title() exibe o título do post atual carregado
the_content() exibe o conteúdo do post atual carregado
endwhile encerra a repetição iniciada no while
endif encerra a condição se houver posts existentes
get_footer() carrega o rodapé do WordPress
wp_enqueue_style() adiciona folha de estilos ao cabeçalho do
WordPress
add_action() adiciona sua função a um hook do WordPress
add_theme_support() Habilita suporte a funcionalidades do
WordPress
dynamic_sidebar() diz ao WP onde deve ser carregada uma sidebar
bloginfo()carrega informações do blog WP
The_post_thumbnail() carrega imagem em destaque
get_sidebar() carrega barra lateral

Como criar um Template WordPress 23

do Zero
Seu próximo passo

Você sabia que você pode transformar

qualquer site estático HTML em dinâmico
com WordPress?

Isso mesmo! Você não precisa desenvolver

o site todo do ZERO.
Assista esse vídeo e descubra como....

CLIQUE AQUI PARA

CONTINUAR

Como criar um Template WordPress 24

do Zero