Scribd
Upload
311 views11 pages

How To Create A WordPress Theme

This document provides a step-by-step guide for beginners to start using WordPress. It outlines the basic steps to read documentation, plan the site, install WordPress, configure settings like themes and plugins, and get additional help. The guide also lists WordPress template files and their purposes.

Uploaded by

jgrlivein
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
311 views11 pages

How To Create A WordPress Theme

This document provides a step-by-step guide for beginners to start using WordPress. It outlines the basic steps to read documentation, plan the site, install WordPress, configure settings like themes and plugins, and get additional help. The guide also lists WordPress template files and their purposes.

Uploaded by

jgrlivein
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 11

How to create a WordPress theme?

This tutorial will show you how to create a simple WordPress theme. When building your own theme,
you can use our Free WordPress themes for reference.

How to create a basic WordPress theme?


To start building your theme, first create a sub-folder in the wp-content/themes directory in your
WordPress folder. For the purpose of this tutorial, we will call the folder "tutorial_theme". The name of
the folder should correspond to the name of the theme you want to create. To do this you can use either
your favorite FTP clientor the File Manager tool in your cPanel.
Before you start creating the theme, you should decide how the layout of your website will look like. In
this tutorial we will build a WordPress theme that consist of a header, sidebar, content area and a footer
,as shown below:

To do this we will have to create the following files into the tutorial_theme directory:
header.php - This file will contain the code for the header section of the theme;
index.php - This is the main file for the theme. It will contain the code for the Main Area and will
specify where the other files will be included;
sidebar.php - This file will contain the information about the sidebar;
footer.php - This file will handle your footer;
style.css - This file will handle the styling of your new theme;
You can either create those files locally with a simple text editor(like notepad for example) and upload
them via FTP or you can use the File Manager tool in your cPanel to create the files directly on your hosting
account.
Now let's take a closer look at each file and what it should contain:

The header.php file


In this file you should add the following code:
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>

Basically, this is simple HTML code with a single line containing a php code and a standard WordPress
function. In this file you can specify your meta tags such as the title of your website, meta description
and the keywords for your page.
Right after the title the line we add
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

tells WordPress to load the style.css file. It will handle the styling of your website.
The
<?php bloginfo('stylesheet_url'); ?>

part of the line is a WordPress function that actually loads the stylesheet file.
Next, we have added the beginning of a "div" with class wrapper which will be the main container of the
website. We have set class for it so we can modify it via the style.css file.
After that we have added a simple label HEADER wrapped in a "div" with class "header" which will be
later specified in the stylesheet file.

The index.php file


<?php get_header(); ?>
<div id="main">

<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

The code in this file begins with


<?php get_header(); ?>

which will include the header.php file and the code in it in the main page. It uses an internal WordPress
function to do this. We will explain this in details later in this tutorial. Then we have placed a Main Area
text to indicate which section of your theme is displayed in this area.
The next few lines consist of a PHP code and standard WordPress functions. This code checks whether
you have posts in your blog created through the WordPress administrative area and displays them.
Next, we include the sidebar.php file with this line
<?php get_sidebar(); ?>

In this file you can display your post categories, archives etc.
After this line, we insert an empty "div" that will separate the Main Area and the Sidebar from the footer.
Finally, we add one last line
<?php get_footer(); ?>

which will include the footer.php file in your page.

The sidebar.php file


In the sidebar.php we will add the following code:
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

In this file we use internal WordPress functions to display the Categories and Archives of posts. The
WordPress function returns them as list items, therefore we have wrapped the actual functions in
unsorted lists (the <ul> tags).

The footer.php file


You should add these lines to the footer.php file:
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
With this code we add a simple FOOTER lable. Instead of this code you can add links, additional text,
the copyright information for your theme and additional objects.

The style.css file


Add the following lines to the style.css file:
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }

#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }


#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }

This simple css file sets the basic looks of your theme. Those lines set the background of your page
and surround the main parts of your site with borders for convenience.
At this point your website should look like this:

As we have previously mentioned, internal WordPress functions are often used in the code of the
theme. You can take a look at the complete Function Reference at the official website of WordPress for
more information about each function.
From now on you can modify the CSS file, add images, animations and other content to your theme in
order to achieve the looks you want for your blog!

Template Files List


Here is the list of the Theme files recognized by WordPress. Of course, your Theme can contain
any other stylesheets, images, or files. Just keep in mind that the following have special
meaning to WordPress -- see Template Hierarchy for more information.

style.css
The main stylesheet. This must be included with your Theme, and it must contain the
information header for your Theme.

rtl.css
The rtl stylesheet. This will be included automatically if the website's text direction is right-toleft. This can be generated using the RTLer plugin.

index.php
The main template. If your Theme provides its own templates, index.php must be present.

comments.php
The comments template.

front-page.php
The front page template.

home.php
The home page template, which is the front page by default. If you use a static front page this is
the template for the page with the latest posts.

single.php
The single post template. Used when a single post is queried. For this and all other query
templates, index.php is used if the query template is not present.

single-{post-type}.php
The single post template used when a single post from a custom post type is queried. For
example, single-book.php would be used for displaying single posts from the custom post type
named "book". index.php is used if the query template for the custom post type is not present.

page.php
The page template. Used when an individual Page is queried.

category.php
The category template. Used when a category is queried.

tag.php
The tag template. Used when a tag is queried.

taxonomy.php
The term template. Used when a term in a custom taxonomy is queried.

author.php
The author template. Used when an author is queried.

date.php
The date/time template. Used when a date or time is queried. Year, month, day, hour, minute,
second.

archive.php
The archive template. Used when a category, author, or date is queried. Note that this
template will be overridden by category.php,author.php, and date.php for their respective
query types.

search.php
The search results template. Used when a search is performed.

attachment.php
Attachment template. Used when viewing a single attachment.

image.php
Image attachment template. Used when viewing a single image attachment. If not present,
attachment.php will be used.

404.php
The 404 Not Found template. Used when WordPress cannot find a post or page that matches the
query.
These files have a special meaning with regard to WordPress because they are used as a
replacement for index.php, when available, according to the Template Hierarchy, and when the
corresponding Conditional Tag returns true. For example, if only a single post is being displayed,
the is_single() function returns 'true', and, if there is a single.php file in the active Theme,
that template is used to generate the page.

http://codex.wordpress.org/Theme_Development

Novo no WordPress - por onde comear


Frum de Suporte WordPress.org Brasil
Este artigo relacionado ao Frum WordPress.org Brasil
REGRAS DO FRUM - USANDO O FORUM - SEJA UM VOLUNTRIOS - FAQ DO FRUM

Se voc novo em WordPress e voc est preocupado por onde comear, voc veio ao lugar
certo! Aqui est um passo-a-passo muito simples para os iniciantes do WordPress. Lembre-se,
caso voc precise de ajuda ao longo do caminho, mais opes de suporte so listadas neste artigo.
Bem-vindo ao empolgante mundo do WordPress!

Contents
1 Primeiro Passo - Leia
2 Segundo Passo - Planeje
3 Terceiro Passo - Instale
4 Quarto Passo - Configure
4.1 Aparncia e Temas
4.2 Adicionando Plugins
5 Uso Avanado do WordPress
6 Mais Ajuda
7 E Finalmente
Primeiro Passo - Leia
Antes de investir seu precioso tempo e energia para instalar o WordPress, existem alguns
documentos que voc precisa ler. O WordPress um timo produto, fcil de usar, muito
poderoso, mas no necessariamente o software certo para todos. Assim como a construo
de uma casa, voc tem que usar a ferramenta certa para o lugar certo. Considerecriar um arquivo
PDF para ler em suas horas de lazer.

O que Blog
O que o WordPress?
Caractersticas WordPress
Antes de Instalar o WordPress
Segundo Passo - Planeje
Com base nas informaes que voc acabou de ler, incluindo instrues sobre a instalao do
WordPress, voc deve ter uma lista das coisas que voc precisa, e as coisas que voc precisa
fazer. Se no, faa essa lista agora - tenha certeza de que ele inclui as seguintes informaes:

Requerimentos da hospedagem do site checados e verificados


Verses do PHP e MySQL checados e verificados
Compatibilidade da hospedagem com as novas verses do WordPress
Usurio e Senha de seu site
Software de Edio de Texto
Um Software de FTP
Um navegador de sua escolha
Os documentos seguintes iro ajud-lo a entender mais sobre como WordPress funciona e
como fazer um plano para seu site:
Caractersticas do WordPress
Primeiros Passos com o WordPress
importante planejar sobre a forma como pretende utilizar o WordPress em seu site. Aqui
esto algumas perguntas para voc fazer consigo mesmo. Faa uma lista das respostas de
modo que voc pode adicionar ao seu plano.
Se voc vai instalar o WordPress no diretrio principal, em um sub-diretrio, ou
simplesmente deseja testar, para se certificar se deseja ou no utiliz-lo?
Voc fez uma lista de Categorias para seu site? Entenda porque o WordPress s classifica as
categorias por nomes ou por IDs
Voc fez uma lista das pginas que voc pode querer adicionar ao seu site,
como Sobre, Contato ou Eventos?

Terceiro Passo - Instale


Com seu plano e estas informaes em mos, hora de instalar o WordPress.

Antes de instalar o WordPress


Instalando o WordPress
Hospedando o WordPress
Editando o arquivo wp-config.php
FAQ de Instalao do WordPress
Usando Softwares FTP
Mudando as Permisses dos Arquivos
Atualizando o WordPress
Quarto Passo - Configure
Com a instalao concluda, hora de configurar o WordPress para que ele funcione da
maneira que voc quer trabalhar. Como voc alterar vrias definies, recomendado que

voc entenda como essas mudanas podem afetar seu site, clicando no linkVisitar Site no topo
da tela do painel de Administrao. Embora voc possa escolher fazer esses passos em qualquer
ordem, o site ir lhe causar menos problemas se proceda na seguinte ordem:
Administrando o seu blog
Painel > Seu Perfil - definir as suas informaes de usurio que voc deseja publicar em seu
site.
Painel > Adicionar Novo - acrescente autores e os usurios que iro utilizar o seu site, se
aplicvel
Painel > Configuraes > Geral - defina o nome e outras informaes do seu site.
Painel > Configuraes > Escrita - defina as configuraes da sua tela de escrita/edio de
posts.
Painel > Configuraes > Leitura - defina quantos posts voc ir mostrar na pgina inicial, em
categorias e suas caracteristicas de listagem de artigos (feed).
Painel > Configuraes > Discusso - ative ou desative os comentrios e defina como lidar
com eles.
Painel > Posts > Categorias - adicione algumas categorias a partir de sua lista de categorias.
Painel > Posts > Adicionar Novo - depois de ter escrito alguns posts, aqui que voc vai editlos ou apag-los.
Painel > Aparncia> Temas - talvez voc queira mudar o visual do site?
Painel > Pginas > Pginas - adicionar uma ou duas pginas, como "Sobre" ou "Fale conosco".
Escrevendo Postagens - passo-a-passo com instrues sobre como escrever postagens.
Tome tempo para explorar o WordPress Codex, a documentao oficial do site do WordPress.
Voc encontrar informaes teis lendo sobre:

Combatendo Spam em Comentrios


Moderao de Comentrios
Importando Contedo
O WordPress em outros Idiomas
Aparncia e Temas
Com o lanamento da verso 1.5 do WordPress, possvel mudar o visual do site com apenas
alguns cliques. Aqui est uma lista de recursos e informaes sobre como mudar o visual do
seu site com os temas para WordPress.

O que so Temas
Usando Temas do WordPress
Adicionando Plugins
H muitos "add-on" e programas para WordPress chamados plugins que adicionam mais
capacidades, escolhas e opes para o seu site. Os plugins WordPress fazem muitas coisas,
inclusive, personalizar os resultados e as informaes de seu site, acrescentando dados
meteorolgicos, verificao ortogrfica e apresentar listas, posts e siglas personalizadas. Para
mais informaes sobre como trabalhar com plugins e onde encontrar os mesmos para seu

site, leia os documentos abaixo:


O que so Plugins WordPress
Gerenciando Plugins
WP-Plugins.org (em ingls)
WP-Plugins.net(em ingls)

Uso Avanado do WordPress


Agora que voc est familiarizado com as caractersticas e funes bsicas de como funciona o
WordPress, pode ser hora para mergulhar mais fundo no poder do WordPress. Os links abaixo
iro expandir sua familiaridade com PHP, HTML, XHTML e CSS:
Usando Links Permanentes
Tags de Modelos
Referncia de Funo
Documentao de Desenvolvimento(em ingls)

Mais Ajuda
Mesmo que seja simples e fcil a utilizao do WordPress, podem ocorrerar problemas,
algumas coisas confusas, ou no funcionarem como voc quer. No se desespere, porque a
ajuda est disponvel! Todavia o WordPress gratuito e de cdigo aberto, existem literalmente
centenas de voluntrios ansiosos para ajud-lo. Aqui esto alguns recursos teis para ajud-lo
com o WordPress:

Frum Oficial do WordPress Brasil


E Finalmente
Agora que voc um verdadeiro utilizador do WordPress, considere contribuir para o WordPress
Codex Brasil, Frum de Suporte, Desenvolvimento, e outros esforos voluntrios que vo
manter o WordPress funcionando. O WordPress gratuito e totalmente apoiado por voluntrios
e sua ajuda necessria.
Ajuda na Traduo - Ajude a traduzir os artigos mais importantes para usurios iniciantes.
Participe do Frum - Seja ajudando outros usurios ou informando sobre erros e problemas.
Participe da Traduo Oficial - No s do WordPress, como tambm de temas, plugins etc.

You might also like