Create a WordPress Theme Step-by-Step

Crearea unei teme Word Press
Lectia 1.
1. Creezi un folder pe care-l denumesti tutorial in htdocs/wordpress/themes
2. In folderul tutorial creezi fisierele index.php si style.css cu ajutorul unui editor de text
3. In index.php copiezi :
<!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">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php
bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php
bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php
bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>
</body>
</html>
4. Salvezi fisierul cu numele index.php
5. Fisierul style.css ramane pana una alta gol.
Explicatii in legatura cu fiserul index.php
<?php bloginfo('stylesheet_url'); ?> - este o functie PHP care invoca locatia lui style.css in
fiecare pagina a site-ului.
6. Copiezi in style.css urmatorul fisier:
1
/*
Theme Name: Tutorial
Theme URI: http://www.wpdesigner.com
Description: This is my theme for a tutorial.
Version: 1.0
Author: Small Potato
Author URI: http://www.wpdesigner.com/
*/
7.Salvezi fisierul cu numele style.css si il inchizi
Setarea temei
Deschizi un browser in care scrii http://localhost/wordpress/wp-login.php. Mergi in zona de
administrare unde activezi tema tutorial. Tine minte ca nu ai niciun thumbnail, deci ceea ce se
deschide este o pagina complet goala. Tema a fost setata.
Lectia 2 (Header template)

In lectia de astazi aflam cum se invoca site-ul.
1.
Deschizi browser-ul si mergi la adresa http://localhost/wordpress unde vei gasi pagina alba
de mai inainte (tema goala).
2.
Te intorci in folderul tutorial si deschizi cu editorul de text, index.php
3.
Intre <body> si </body> adaugi:
<?php bloginfo('name'); ?> si apoi salvezi.
4.
Mergi la browser si dai refresh. Ar trebui sa iti apara titlul blogului tau. Al meu este Demo
Theme Development. Ce s-a intamplat? Ai adaugat o linie de cod php in index.php inauntrul
corpului paginii tale. Acea linie invoca informatiile despre site (blog): bloginfo(). In mod specific,
el invoca numele blogului tau. Este numele pe care l-ai pus in weblog Title, la optiuni.
Explicatii:
<?php porneste PHP
bloginfo('name') invoca informatiile despre blog, in mod special titlul
; - opreste invocarea
?> - inchide PHP
5.
De fiecare data cand adaugi sau schimbi ceva in fisierul index.php, salvezi si apoi dai
refresh ca sa vezi schimbarea.
6.
Sa punem un link catre titlul site-ului. Acest lucru reclama un tag xhtml. Ne intoarcem la
index.php
7.
Adaugam: <a href=#> si </a> pe aceiasi linie. Noua linie de cod ar trebui sa arate asa:
<a href=#><?php bloginfo('name'); ?></a>
8.
Te intrci la browser, dai refresh si ar trebui sa ai deja titlul sub forma de link. Acuma, exista
un link dar care nu are nicio legatura. Pentru ca este titlul site-ului, ai vrea sa-l legi de prima pagina
(front page). Ca sa faci asta, scrii:
<?php bloginfo('url'); ?>
intre ghilimele de citare ale lui href=.
9.
Ar trebui sa ai:
2
<a href=<?php bloginfo('url');>><?php bloginfo('name'); ?></a>

10.
Mergi la browser si dai refresh. Cand apesi link-ul, bara de sus a browserului ar trebui sa-ti
arate: http://localhost/wordpress. Cand dai clik pe link ar trebui sa te trimita pe prima pagina.
Primesti aceiasi pagina, dar ai adresa http://localhost/wordpress. Ce s-a intamplat? Ai schimbat titlul
paginii intr-un link spre front page.
Explicatii:
bloginfo('url') invoca informatiile despre blog, in special adresa URL, paginile principale
<a> - este tagul xhtml care deschide un link
</a> - inchide un link
href = - este prescurtarea valorii hypertext. Ceea ce se gaseste intre ghilimele si reprezinta
valoarea.
Spus in cuvinte, codul de mai sus inseamna ca am pornit un link. Valoarea link-ului meu este url-ul
site-ului; am utilizat functia PHP bloginfo('url') ca sa invoc adresa URL. Numel link-ului este
numele site-ului. Am utilizat apoi functia PHP bloginfo('name') ca sa invoc titlul site-ului. Am
inchis link-ul.
11.
Adaugi tagurile <h1> si </h1> in jurul liniei de cod de mai devreme:
<h1><a href= <?php bloginfo('url'); ?> > <?php bloginfo('name') ?> </a> </h1>
Salvezi si mergi din nou in browser, dai refresh.
12.
Invoci descrierea blogului scriind chiar sub codul link-ului linia:
<?php bloginfo('description'); ?>
deci vei avea:
<h1><a href= <?php bloginfo('url'); ?> > <?php bloginfo('name') ?> </a> </h1>
13.
Salvezi si dai refresh in browser ca sa vezi daca descrierea apare sub link. Poti schimba
descrierea site-ului mai tarziu.
14.
In pasul care urmeaza introducem un nou tag si anume DIV. Scrie deci <div> si </div> in
jurul a tot ceea ce ai scris pana acuma:
<div>
<h1><a href=<?php bloginfo('url'); ?> ><?php bloginfo('name'); ?></a></h1>
</div>
Salvezi si dai refresh in browser. Nu vei observa nicio schimbare. Gandeste-te la DIV ca la o cutie
invizibila. El este aici ca sa separe titlul blogului si descrierea de orice altceva. Pentru ca nu ai inca
style, nu ai continut separat. Mai tarziu, vei utiliza style.css pentru stilizarea cutiei invizibile. Poti sa
dai etichetei DIV borders, paddings, margins, background color, background images etc.
15.
Adauga id=header etichetei DIV astfel:
<div id=header>
16.
Salveaza si apoi da refresh in browser. Aceasta schimbare nu inseamna inca nimic. Atribuim
un id etichetei DIV pentru ca vor fi mai multe cutii goale (div-uri), deci ai nevoie sa separi o cutie
invizibila de alta, nu-i asa?
Lectia numarul 3
Buclele (The Loops)
Buclele invoca intrarile site-ului tau. Este cel mai important set de cod PHP. Deschizi fisierul
index.php si adaugi o eticheta DIV sub zona header. Dai numele container pentru id:
<div id=container>
</div>
Va veti intreba pentru ce este acest DIV? El este pentru a separa continutul site-ului de orice altceva
3
care vine dupa, ca de exemplu sidebar-ul sau footer-ul.

17.
Adauga urmatorul cod intre tagurile DIV Container:
<?php if(have_posts()): ?><?php while(have_posts()): the_post() ?>
<?php endwhile; ?>
<?php endif; ?>
Din acest punct este usor sa recunosti fiecare parte de cod, ce este si cum lucreaza. Ceea ce tocmai
ai scris este numit Bucla (loop) in Word Press.
Inainte de a explica ce face fiecare cod, ar trebui sa ai asta:
<body>
<div id =header>
<h1><a href=<?php bloginfo('url'); ?> ><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description');?>
</div>
<div id=container>
<?php if (have_posts()): ?><?php while(have_posts()): the_post; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</body>
</html>
Observi ca am indentat liniile continutului. Aceasta este pentru organizare. Nu este indeajuns sa
scrii cod; este necesar sa-l organizezi ca sa vezi ce este si de cine este legat.
Dar sa vedem cum functioneaza.
if(have_posts()) - verifica sa vezi daca ai (have) un post
while(have_post()) - daca ai un post, pana cand (while) ai orice post, executa the_post()
the_post() - invoca postul pentru a fi aratat pe ecran
endwhile; - inchide comanda while()
endif; - inchide comanda if()
In lectia anterioara ai invatat sa invoci titlul blogului utilizand bloginfo('name'). Acuma vei invata
cum sa invoci titlul postarii (post) intre bucle (loop).
18. Scrie <? php the_title(); ?> dupa the_post();?> dar inainte de <?php endwhile; ?>.
Salveaza index.php si da refresh la browser. Ar trebui sa vezi Hello World dedesubt de descrierea
blogului. Implicit, blogul tau are o singura postare. Pentru mine, blogul de test are mai multe
postari, asa ca am mai multe titluri.
19 . Intoarce-te la post titles si tranforma-le in link-uri. Salveaza index.php si da refresh. Acuma
titurile tale sunt link-uri dar nu duc nicaieri. Pentru a rezolva problema ai nevoie sa inclocuiesti
semnul # cu the_permalink(). Hai s-o facem!
<a href=<?php the_permalink(); ?> ><?php the_title(); ?> </a>
Permalink-ul (the_permalink()) este o functie PHP care invoca locatia sau adresa fiecarei postari..
Salvezi si dai refresh. Daca ai un singur titlu Hello World, da click pe acel link; privesti in bara de
sus din browser si observi ca nu mai este http://localhost/wordpress# .Daca ai mai multe titluri-link
vei vedea fiecare link pe o alta pagina. Dar titurile noastre sunt toate pe aceiasi linie. Ca sa le
separam adaugam sub-header-ul <h2> si </h2> in jurul fiecarui link:
<h2><a href=<?php the_permalink(); ?> ><?php the_title(); ?></a></h2>
4
Sa ne amintim ca H1(header) se foloseste la titlu si H2 (sub-header) la subtitlu. Salvam index.php

si dam refresh in browser pentru a vedea schimbarile.
20. La final ar trebui sa avem codul urmator:
<body>
<div id=header>
<h1><a href=<?php bloginfo('url'); ?>><?php bloginfo('name'); ?></a></h1>
</div>
<div id=container>
<?php if(have_posts()): ?><?php while(have_posts()): the_post(); ?>
<h2><a href=<?php the_permalink(); ?>><?php the_title(); ?></a></h2>
<?php endwhile; ?>
<?php endif; ?>
</div>
</body>
</html>
Lectia numarul 4 Continutul (The Content)

Astazi vom vorbi despre ceea ce chiar conteaza. Cum faci sa adaugi continut in blog si sa-l afisezi?
Deschidem fisierul index.php din folderul tutorial'. Scriem sub codul titlului postarii urmatoarea
linie de cod: <?php the_content(); ?> deci vom avea:
------------------<h2><a href=<?php the_permalink(); ?>>---------<?php the_content; ?>
<?php endwhile; ?>
<?php endif; ?>
Salvam si dam refresh in browser. Ce s-a intamplat? Folosim functia PHP the_content() ca sa
invocam postarile. In acest moment, continutul este doar o linie lunga de text asezata in partea
dreapta a ferestrei pentru ca nu i-au fost aplicate stiluri. Sa ne amintim de style.css. Mai tarziu il
vom folosi pentru a controla cum arata totul.
Mergi in browser, dai click pe View source. Se deschide o fereastra de cod. Observi diferenta
dintre codul tau si codul sursa? Tot ceea ce este in codul sursa este invocat de functia the_content().
Destul de folositor, nu? Fara softwear-ul de bloguri, ar trebui sa codifici tot textul si imaginile
aferente.
Ma trebuie spus ca in codul sursa apare tagul html P. El nu este prezent in index.php dar este de
gasit in codul sursa.
Tagul P. Ce si cum?
In timp ce scrii o postare, schimbi linia la un paragraf. Ai nevoie de o cale pentru asta. Fiecare text
se imparte in paragrafe.
Invelesti cu un tag invizibil (DIV) the_content si ii dai clasa entry astfel:
<div class=entry>
</div>
5
Ar trebui sa ai cam asa ceva:

<div id=container>
<?php if(have_posts()): ?><?php while ------<h2><a href =<?php the_permalink>>----<div class=entry>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
-----------Salveaza si da refresh in browser. Daca mergi la codul sursa vei vedea DIV-ul class=entry
inconjurand fiecare postare. De ce? Primul motiv ar fi ca poti sa spui unde incep titlul postarilor si
intrarile. Al doilea motiv este acela ca poti stiliza cu style.css. Daca vrei poti sa stilizezi intrarile
fara sa afectezi nimic altceva.
Care este diferenta dintre id si class? Pentru fiecare cutie invizibila DIV folosesti id ca s-o
denumesti. Iti amintesti id=header? Deci care e diferenta?
id este unic, in timp ce class
nu este. Daca privesti codul sursa ai doar un singur id=header si un singur id=container dar
sunt multiple class=entry. Pot fi header si container in schimb id-uri? Desigur.

Deci tine minte acest lucru: nu poti repeta niciun id! De exemplu nu poti avea doua id-uri header pe
aceiasi pagina. Cand vrei sa folosesti si sa refolosesti ceva ca de exemplu post entries, utilizezi
class.
Pasul urmator: Pune un DIV in jurul titlului postarii si al intrarii posturilor. Numeste-l
class=posts. Vei avea deci:
<div class=posts>
</div>
(Numele claselor si id-urilor pot fi oricare pe care le doresti. Le poti denumi dupa mancarea ta
favorita dar post si entry sunt scurte si lesne de memorat, nu?).
Deci acuma vei avea:
<div id=container>
<?php if(have_posts()): ?><?php while()------<div class=post>
<h2><a href=<?php the_permalink>---<div class=entry>
</div>
</div>
<?php endwhile; ?>
Salveaza fisierul index.php si da refresh in browser ca sa vezi schimbarile din codul sursa.
De ce am adaugat inca un DIV la post title si post entry? Am adaugat div-ul class=entry pentru a
seapara titlul postarii de intrarea postarii. Div-ul class=post este pentru separarea unei postari de
alta.
Lectia numarul 5
Postmetadata
Astazi vom vorbi despre date, categorii, autor, numarul comentariilor si diverse alte informatii
specifice postarilor.
Deschidem index.php.
Paul 1. Copiem codul postmetadata.txt (aflat pe site-ul lui small potato la lectia postmetadata)
sub <?php the_content(); ?> (Pentru aceasta parte doar copiezi. Cand am pus temele Wordpress
impreuna, am copiat de asemenea si aceasta parte. Nu este inca nevoie sa intelegi totul. )
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php
the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '%
Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
Acest screen-shot a fost impartit. Acorda atentie organizarii si amplasarii codului postmetadata. Nu
taia codul la 1Comment # ca mai jos:
<div class=entry>
<p class = postmetadata>
<?php_e('Filed under:'); ?><?php the_category(',') ?><?php
<?php comments_popup_link('No Comments» ',' 1Comment&#
</p>
</div>
Salveaza si da refresh in browser si vei vedea schimbarile. Te poti uita si in codul sursa al paginii ca
sa vezi cum arata postmetadata.
Explicatii:
<p class=postmetadata> si </p> - toate aceste informatii postmetadata stau intre un set de
paragrafe numite class=postmetadata pentru ca vrem sa separam postmetadata de continut si
intrarile postarilor. Fara tagurile de paragraf <p>, metadatele continua acolo unde ai terminat
continutul fara spatii si diferente intre continut si postmetadata.
<?php_e('Filed under &#58'); ?> - &amp#58; este codul pentru invocarea a doua puncte (:).
<?php the_category(','); ?> - the_category() este o functie PHP care invoca categoriile cu care
etichetezi postarile. Daca pui Filed under: si the_category() impreuna vei avea: Numele categoriei
1, numele categoriei 2; virgula inauntrul categoriei the_category() este o cale de separare a numelor
categoriilor.
<?php_e('by'); ?> - la fel ca Filed under: daca creezi o tema de uz personal, inconjoara _e( ) in
jurul cuvantului by daca este necesar. _e( ) face asta ca sa poti crea teme translatabile, un lucru
f. important atunci cand creezi teme folosite de oameni de pe tot globul.
<?php the_author(); ?> - printeaza (arata) numele tau sau cine publica postarea
7
<?php comments_popup_link('No Comments» ',' % Comments»'); ?> invoca o fereastra pop-up , atunci cand este activata
<?php edit_post_link('Edit',|',);?> - este vizibil doar cand te loghezi ca administrator
Lectia numarul 6
Else, Post ID, Link title
Else, Post ID si Link title sunt cele trei optiuni pe care le poti adauga la fiecare postare. Ele sunt
optionale.
Pasul 1. Scrii urmatorul cod sub <?php endwhile; ?> :
<?php else : ?>
<div class=post>
<h2><?php_e('Not Found'); ?></h2>
</div>
Salvezi dar nu vei vedea nicio diferenta.
Explicatii:
Ne intoarcem la lectia Bucla (the loop) ca sa intelegem ce se intampla.
Aici avem bucla:
<?php if(have_posts()):?><?php while(have_posts()): the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
Prima data, if(have_posts()) verifica daca ai vreun post pe blog. Al doilea, while(have_posts())
executa the_post() care invoca postarile tale. Else este ceea ce trebuie sa scrii atunci cand nu ai
alte alternative. Imagineaza-ti while() si endwhile; cuibarite intre if () si else: . Din acest motiv
<?php else :?> vine dupa <?php endwhile; ?>
Acuma sa aflam ce este else, ce ii spune lui WP sa faca atunci cand nu exista nicio postare sau nu
gaseste vreuna. Ii spui lui WP sa arate un mesaj de eroare NOT FOUND. Acest mesaj poate fi orice.
Uita-te la fisierul index.php de mai sus spre exemplu. In acest exemplu, mesajul Not Found sta
inauntrul linie de cod <?php_e(' '); ?>.
Mai departe, intreg mesajul si codul Not found este inconjurat de tagurile <h2> si </h2>. Nu sunt
neaparat necesare. Poti sa scrii pur si simplu:
<div class=post>
Not Found
</div>
Dar folosind tagurile <h2> pentru mesajul de eroare este evident pentru vizitatori ca nu exista nimic
pe acea pagina.
Pasul 2.
Adauga id=post-<?php the_ID(); ?> la <div class=post>,
adica vei avea:
<div class=post id=post - <?php the_ID(); ?>>
Salvezi index.php si dai refresh in browser. Mergi la sursa paginii si vei vedea ca fiecare postare
are un id atasat. the_ID( ) invoca id-ul fiecarei postari. Il folosim ca sa customizeze imaginea
fiecarei postari in parte. Mai tarziu, cand vom folosi style.css vom spune temei ca fiecare post sa
8
arate la fel. Cu un ID unic atasat fiecarei postari poti face ca ea sa arate diferit de celelalte. Fara IDuri nu va exista nicio diferenta in interiorul style.css.
Cum poti atribui ambele valori class si id aceluiasi DIV ? DIV este un tag, class este un atribut si id
este tot atribut. Fiecare tag (eticheta) poate avea mai multe atribute. (id este un atribut xhtml.
the_ID() este o functie PHP. Ele sunt diferite!!).
Pasul 3.
Adauga title=<?php the_title(); ?> linkului titlu al postarii, adica:
<h2><a href=<?php the_permalink(); ?>title=<?php the_title(); ?>></a></h2>
Salveaza si da refresh in browser. Mergi din nou la codul sursa si uita-te dupa orice post title link.
Daca el este Hello World, atunci la stanga el ar trebui sa fie title=Hello World.
Title= este un alt atribut xhtml pentru tagul (link) <a>. In acest caz titlul fiecarei postari este de
asemenea linkul descrierii. Este motivul pentru care utilizam din nou functia PHP the_title().
Daca nu folosesti functia the_title() ca o valoare pentru title= , atunci fiecare titlu link al
postarilor vor avea aceiasi descriere. De exemplu, daca in loc de the_title() folosesti title= ,
fiecare postare va avea ca descriere Click me.
Lectia numarul 7
Posts Nav Link
In josul fiecarui blog WP exista Next Page sau Previous Pagelink. Poti invoca aceste linkuri
folosind posts_nav_link() din sistemul de sabloane WP.
Deschidem index.php.
Pasul 1.
Adaugam urmatorul cod intre <?php endwhile; ?> si <?php else : ?> astfel ca vom avea:
<?php endwhile; ?>
<div class=navigation>
<?php posts_nav_link(); ?>
</div>
<?php else : ?>
Explicatii
<div class=navigation> porneste o cutie invizibila numita navigare si care inconjoara zona de
linkuri Next si Previous.
post_nav_link invoca linkurile Next si Previous
</div> - inchide cutia invizibila numita navigare (navigation)
Salvam fisierul index.php si apoi dam refresh in browser sa vedem linkurile Next si Previous.
Implicit daca nu este decat un post, nu va aparea nimic.
Cum imbunatatim functia php posts_nav_link() : ? La fel ca la postmetadata poti sa-i dai acestei
functii un set de trei valori care poate fi orice doresti sa fie afisat intre, dupa si inainte de Next si
Previous. Va arata cam asa:
<?php posts_nav_link('in between', 'before', 'after'); ?>
Sidebar-ul
Pentru inceput, sidebar-ul arata destul de infricosator, dar nu este deloc asa. Odata ce i-ai inteles si
utilizat structura, esti gata sa-l codifici foarte repede. Inainte de a incepe, sa revedem index.php:
9
<?php wp_head(); ?>
</head>
<body>
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?
php the_title(); ?></a></h2>
<div class="entry">
</p>
10
</div>
</div>
<?php endwhile; ?>
<div class="navigation">
</div>
<?php else : ?>
<div class="post">
<h2><?php _e('Not Found'); ?></h2>
</div>
<?php endif; ?>
</div>
</body>
</html>
Pasul 1
Scriem urmatorul cod sub container, in apropiere de tagul </body>:
<div class=sidebar>
</div>
adica va rezulta:
</div>
(inchide tagul container)
</div class=sidebar>
</div>
</body>
</html>
Pasul 2
Deschidem o lista neordonata in cutia sidebar:
<ul> - deschide o lista neordonata
</ul> - inchide o lista neordonata
Prin urmare vom avea urmatorul segment de cod:
<div class=sidebar>
<ul>
</ul>
</div>
Pasul 3
Adaugam o lista de itemi (LI) inauntrul listei neordonate (UL) si punem un sub-heading (h2)
inauntrul listei de itemi (LI) :
<ul>
<li> <h2> <?php_e('Categories'); ?> </h2>
</li>
</ul>
11
Explicatii:
<li> - deschide lista de itemi
<h2> - deschide sub-heading
<?php_e('Categories'); ?> - afiseaza cuvantul Categories
</h2> - inchide sub- heading
</li> - inchide lista de itemi
Salveaza index.php si da refresh in browser. Ar trebui sa vezi sub-headingul Categories.
Pasul 4
Adauga urmatorul cod in lista itemilor:
<ul>
<li> <h2> <?php_e('Categories'); ?></h2>
</ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
</ul>
Explicatii:
<?php wp_list_cats(); ?> - invoca lista de linkuri ale categoriilor
Salveaza si da refresh.
Categoria ta implicita este Uncategorized.
Alte explicatii:
sort_column=name lista alfabetica a categoriilor
optioncount=1 arata numarul de postari din fiecare categorieshierarchical=0 nu adauga
subcategorii
& - de fiecare data cand adaugi un nou atribut trebuie sa scrii semnul & inainte de a-l separa de alte
atribute. Spre exemplu & sta intre sort_column si optioncount.
Cand ne raportam la sidebar, liste neorodonate si itemi, trebuie sa tinem cont de regula care spune
ca trebuie sa inchidem toate tagurile in ordinea in care le-am deschis.
Lectia numarul 8
Page Link Listing
Vom continua sa lucram cu Sidebar. Sa vedem cum putem adauga widget-uri in Sidebar.
Pasul 1
Adaugam urmatorul cod in varful (top) blocului Categories:
<?php wp_list_pages(); ?> adica va rezulta:
<ul>
<?php wp_list_pages(); ?>
<li><h2><?php_e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('---=----</ul>
12
</li>
</ul>
Implicit, ai doar o singura pagina link. Eu am adaugat mai multe pagini si pagini-copil blogului
meu offline. Din acesta cauza am pastrat nivelurile la page linkuri. In screen-shot-ul alaturat, Pages
title pentru lista nu se potriveste cu dimensiunea Categories title din lista categories-link. Ca sa o
potrivesc adaug 'title_li=<h2>Pages</h2>' la wp_list_pages().
Voi avea:
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>
Salvam si dam refresh sa vedem schimbarile.
title_li este un atribut folosit la imbunatatirea aspectului listei de Page-link.
Imbunatatiri
In exemplul meu am patru niveluri de Page link-uri. Unele sabloane nu pot manipula atat de multe
niveluri de link-uri in sidebar. Ca sa limitam numarul de link-uri in lista, adaugam atributul depth
la wp_list_pages() si il setam la 3. Astfel, va rezulta urmatorul segment de cod:
<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>
Semnul & este aici ca sa separe depth de title_li.
Lectia numarul 9
Get Archives and Links
Pasul 1
Adaugarea linkului arhiva
Scriem urmatorul cod in zona Sidebar, sub lista Categories:
<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly');?>
</ul>
</li>
Salvam fisierul index.php si dam refresh in browser.
Explicatii:
Utilizam functia PHP wp_get_archives() cu atributul type si valoarea monthly pentru a invoca
link-ul de arhiva lunara.
Pasul 2
Adaugam link-ul blogroll:
Scriem urmatorul cod sub lista de linkuri Archives:
<?php get_links_list(); ?>
adica vom avea:
<ul>
<?php wp_get_archives('type=monthly'); ?>---</ul>
</li>
Salvam si dam refresh.
13
Lectia numarul 10
Search Form and Calendar
Pasul 1 Adaugarea search

Deschidem un nou fisier pe care-l lasam gol dar il salvam cu numele searchform.php in acelasi
folder tutorial in care se gaseste si index.php. Copiem in el codul urmator:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div>
<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" name="s"
id="s" size="15" /><br />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
Dupa ce am copiat, salvam fisierul cu numele searchform.php. Asta e tot!
In index.php scriem urmatorul cod in varful (top) listei din interiorul Sidebar:
<li id=search>
<?php include(TEMPLATEPATH.'/searchform.php'); ?>
</li>
Deci vom avea:
<ul>
<li id=search>
</li>
-----------------------------Salvezi si dai refresh.
Explicatii:
<li id=search> - porneste o lista de itemi si un id numit search
include include orice fisier pe care-l vrei. In acest caz este codul continut in fisierul
searchform.php.
TEMPLATEPATH locatia foderului temei tale, wp-content/themes/tutorial
'/searchform.php' locatia si numele fisierului (searchform.php)
Punctul . Dintre TEMPLATEPATH si '/searchform.php' conecteaza tema cu wpcontent/themes/tutorial/searchform.php
Pasul 2 Adaugare calendar
Scriem urmatorul cod sub Search form sau Page-listing block:
<li id=calendar><h2><?php _e('Calendar'); ?></h2>
<?php get_calendar(); ?>
</li>
Prin urmare vom avea ceva de forma:
<li id=search>
14

</li>
<li id=calendar><h2><?php _e('Calendar'); ?></h2>
</li>
Explicatii:
<li id=calendar> - deschide o lista de itemi cu id-ul numit calendar
<?php _e('Calendar'); ?> - afiseaza cuvantul Calendar
get_calendar() - invoca calendarul utilizand functia PHP get_calendar()
Pasul 3 Adaugarea meta
Scriem urmatorul cod sub get_links_list() :
<li><h2><?php _e('Meta'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?> </li>
<?php wp_meta(); ?>
</ul>
</li>
Salvam si dam refresh.
Lectia numarul 11: Widgetarea sidebar-ului

Widgetarea inseamna simplu sa faci Sidebarul gata pentru plug-in-uri. Acestea te ajuta sa rearanjezi
sidebarul.
Pasul1: Crearea fisierului functions.php
Deschizi un nou fisier, il lasi gol initial, dar il salvezi cu numele functions.php. Copiezi in el fisierul
functions.txt care este:
<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>
Salvezi fisierul in acelasi director cu index.php (din tema tutorial).
Pasul 2 Widgetizarea sidebarului
Scrie urmatorul cod dupa primul tag <ul> din zona sidebar:
<?php if(function_exists('dynamic_sidebar')&&dynamic_sidebar()):else: ?>
deci vei avea:
<ul>
<?php if(function_exists('dynamic_sidebar')&& dynamic_sidebar()): else ?>
<li id = search>
</li>
15
---------------Apoi scrie <?php endif; ?> imediat inainte de tagul </ul> :

deci vei avea:
<?php endif; ?>
</ul>
</div>
</body>
</html>
Pasul 3 Salvezi index.php. Nu vei vedea nicio schimbare in pagina web pana cand nu vei instala
pluginurile Widget. O vom face mai tarziu.
Lectia numarul 12 Footer

Aceasta lectie e usoara. Vom adauga un DIV sub div-ul Sidebar unde vom scrie copyright-ul.
Pasul1 Adaugarea DIV-ului
Scrie urmatorul cod sub div-ul Sidebar:
<div id=footer>
</div>
adica vei avea:
</div> (sfarsitul sidebarului)
<div id=footer>
</div>
</body>
</html>
Pasul 2 Adauga textul footer inauntrul tagului paragraf. Pentru asta poti sa scrii orice vrei. Mai jos
e mesaju meu:
<p>
Copyright© 2007<?php bloginfo('name'); ?>
</p>
adica vei avea:
<div id=footer>
<p>
Copyright © 2007 <?php bloginfo('name'); ?>
</p>
</div>
Explicatii:
© - codul pentru copyright
Aminteste-ti ca functia bloginfo() se utilizeaza cand pui impreuna header-ul. O folosim si pentru
footer.
'name' invoca titlul blogului
16
Lectia numarul 13 Style.css

Cea mai buna cale sa inveti css este sa sapi direct in fisier. Invers decat la xhtml si PHP, in CSS
nu ai nevoie sa te atingi de miezul fisierului sablonului. Nu trebuie sa intelegi niciun concept de
baza. Trebuie doar sa te scufunzi in el.
Pasul 1
Deschizi MAMP, theme folder, browser-ul Firefox, browser-ul Opera si style.css
Pune ambele browsere la adresa http://localhost/wordpress. Aici este locul unde ai cu adevarat
nevoie de ambele browsere ca sa iti testezi tema pentru ca browsere diferite interpreteaza codul CSS
diferit. E bine sa testezi tema cu cat mai multe browsere si sisteme de operare.
Pasul 2
Scrie urmatorul cod in style.css :
body {
margin:0;
font-family: Arial, Helvetica, gerogia, Sans-serif;
font-size: 12px;
text-align: left;
vetical-align: top;
background: #ffffff;
color: #000000;
}
Salveaza style.css si da refresh in ambele browsere.
Explicatii:
body { } - eticheta si orice se afla intre cele doua acolade sunt valori si atribute
: - doua puncte inseamna pornirea iar punct si virgula inseamna oprirea
Inainte de a merge mai departe, motivul pentru care folosim body{} (este un selector CSS) este
acela ca vom lucra la stiluri in body. Nu stilizam <header> pentru ca aici nu avem ce stiliza.
margin: 0; - este spatiul de margine (implicit este zero). Daca vrei ca marginea sa fie mai mare
schimbi valoarea in 10px, 20px etc
font family: Arial, Helvetica, Georgia, Sans-serif; - selecteaza fontul utilizat in pagina
web. Primul font este Arial. Daca utilizatorul siteului tau nu are Arial, trece la Helvetica si tot asa.
font-size: 12px; dimensiunea fontului
text-align: left; - alinierea textului
vertical-align: top; - asigura-te ca totul incepe de la varf
background: #ffffff; - inseamna culoarea alb a fondului
color: # 000000; - inseamna culoarea neagra a textului
Lectia numarul 14 Hex Codes si Styling links

17
Codul hexadecimal
precedat de semnul diez (#) fiecare cod de culori are sase numere. Acestea merg de la #ffffff
(alb) pana la #oooooo (negru).
Pasul 1 Scrie urmatorul cod sub selectorul body{ } :
a : link, a : visited {
text-decoration: underline;
color: #336699;
}
Ce iseamna asta? Te asiguri ca toate linkurile sunt subliniate (text-decoration: underline;) si
albastre (color: #336699;)
a: link este pentru stilizarea linkului; cand transformi un cuvant in link folosesti taguriele <a> si
</a> deci A in a: link
a: visited este pentru stilizarea linkurilor apsate, deci visted este a: visited
Pasul 2 Scrie urmatorul cod sub a: link, a:visited} :
a: hover {
text-decoration: none;
}
Acest lucru te asigura ca linkul subliniat dispare cand treci peste el. Daca vrei ca linkul sa apara
colorat scrii:
a: hover {
color: #ffoooo;
}
Lectia numarul 15 Widths si Floats

Primul lucru pe care-l ai de pus la punct este sa stabilesti ce vrei sa faci cu tema ta. Folosesti 750px
(fiecare 100 pixeli are un inch). Tema ta depinde de spatiul de vizitare al fiecarui utilizator. Este
interzis sa folosesti o tema de 900 px pentru o audienta care foloseste o rezolutie de 800x600 pixeli;
asta inseamna ca tema depaseste cu 100 de pixeli ecranul!
Cum limitezi la 750 de pixeli latimea? Pentru asta ai nevoie ca tot ceea ce se afla in site sa aiba
750px in DIV. Totul, incluzand aici header, contents, sidebar si footer.
Pasul 1
Adauga: <div id=wrapper> dupa <body>
Adauga: </div> inainte de </body>
Scrie urmatoarele in style.css:
#wrapper {
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
In css, in special in style.css, semnul # arata cum te adresezi unui DIV si id. Punctul arata cum
18
adresezi un DIV cu o clasa. Pentru o clasa de exemplu, daca codul este <div class=wrapper>
atunci folosesti .wrapper in loc de #wrapper DIV.
Salveaza-le pe ambele, index.php si style.css. Da refresh in ambele browsere.
Pasul 2
Mergi in style.css si schimba text-align: left; inauntrul lui body{} cu text-align:center;
Pasul 3
Fa headerul la stanga cu o latime de 750 pixeli astfel:
#header {
float: left;
width:750px;
}
Pasul 4
Fa containerul la stanga cu o latime de 500px:
#container{
float: left;
width: 500px;
}
Pasul 5
Fa sidebarul la stanga cu o latime de 240px pe fundal gri:
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
(Tine minte ca nu am folosit semnul # pentru adresa DIV-ului sidebar ci un punct . )
Pasul 6
Fa footer-ul la stanga de 750 pixeli latime:
#footer{
clear: both;
float: left;
width: 750px;
}
Care e diferenta dintre stilizarea header si footer? Raspunsul este prezenta lui clear: both; in
footer{}. Acesta este pentru a fi siguri ca footer nu are nimic pe langa el precum sidebar sau
container.
Slaveaza style.css si da refresh.
Pasul 7
Adauga cei 10 pixeli ramasi la sidebar folosind marginea. Codul sidebar style va arata asa:
19
.sidebar{
float: left;
width: 240px;
margin: 0 0 0 10px;
}
Specificare: margin:0 0 0 10px; inseamna 0 top, 0 right, 0 bottom si 10-x left.
Pasul 8
Acest pas este in cazul in care pui o margine de 20 pixeli in loc de 10. O margine de 20 de pixeli iti
sparge sablonul si iti arunca sidebarul in partea de jos a paginii pentru ca o margine de 20 pixeli
face cat suma latimilor Containerului si Sidebarului egala cu 760 si nu 750. Acesta este ceea ce se
cheama un bug in I.E.
Pentru a fixa bug-ul adauga display: inline; la sidebar. Sidebarul ar trebui sa arate astfel:
.sidebar{
float: left;
width: 240px;
margin: 0 0 0 10px;
display: inline;
}
Si iata cum ar trebui sa arate in acest moment fisierul index.php:
20

<?php wp_head(); ?>
</head>
<body><div id="wrapper">
<div id="header">
</div>
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php
the_title(); ?></a></h2>
<div class="entry">
</p>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="navigation">
</div>
<?php else : ?>
<div class="post">
<h2><?php _e('Not Found'); ?></h2>
</div>
<?php endif; ?>
<div class="sidebar">
<ul>
21
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

<li id="search">
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
</li>
<li id="calendar"><h2><?php _e('Calendar'); ?></h2>
</li>
<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php
wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li><h2><?php _e('Meta'); ?></h2>
<ul>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
<div id="footer">
<p>
Copyright © 2007 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?
></a>
</p>
</div>
</div></body>
</html>
si style.css:
/*
22
Theme Name: Tutorial

Theme URI: http://www.wpdesigner.com
Description: This is my theme for a tutorial.
Version: 1.0
Author: Small Potato
Author URI: http://www.wpdesigner.com/
*/
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #ffffff;
color: #000000;
}
a:link, a:visited{
text-decoration: underline;
color: #336699;
}
a:hover{
}
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
#header{
float: left;
width: 750px;
}
#container{
float: left;
width: 500px;
}
.sidebar{
float: left;
width: 240px;
margin: 0 0 0 10px;
23
display: inline;
}
#footer{
clear: both;
float: left;
width: 750px;
}
Lectia numarul 16
Formatarea postarilor si Miscellaneous
Deschidem style.css
Pasul 1
Curatam marginile si padding-urile ( umplutura) scriind urmatorul cod mai sus de body{} in
style.css:
body, h1, h2, h3, h4, h5, h6, blocquote, p {
margin: 0;
padding: 0;
}
Am notat margin:0; in loc de margin: 0 0 0 0; pentru ca atunci cand valoarea e aceiasi peste tot
folosesti o singura cifra.
Salvezi si dai refresh.
Pasul 2
Stilizezi cu h1. Scrii urmatorul cod sub body{} :
h1{
font-family: Georgia, sans-serfi;
font-size: 24px;
padding: 0 0 10px 0;
}
Explicatii:
font-family: Georgia, sans-serif; schimbi titlul H1 din Arial in Georgia
font-size: 24px; - trebuie notat ca atunci cand setezi dimensiunea de la 12px la 24px inauntrul
body{}, tagurile H1 si H2 nu mai au valabilitate. Aceasta pentru ca tagurile heading isi urmeaza
propriile reguli. Ca sa le controlezi trebuie sa le stilizezi special pe ele.
padding: 0 0 10px 0; - inseamna 10 pixeli in josul padding-ului. Aceasta este pentru a adauga
sptiu intre titlul blogului si descriere.
Pasul 3
Scrie urmatorul cod sub #container{} :
.post{
padding: 10px 0 10px 0; (adaugi 10px sus si jos la paddingul fiecarui DIV)
}
24
.post h2 {
font-family: Georgia, Sans-serif;
font-size: 18px;
}
.entry{
lin-height: 18px; (cresti dimensiunea intre linii inauntrul intrarilor DIV)
}
Pasul 4
Scrie urmatorul cod sub a:hover{} :
p{
padding: 10px 0 0 0 ;
}
Pasul 5
Scrie sub .entry{} :
p.postemetadata {
border-top: 1px solid#ccc; (poti aplica stilizare la postmetadata)
margin: 10px 0 0 0 ;
}
Pasul 6
Scrie sub p.postmetadata{} :
.navigation{
padding: 10px 0 0 0 ;
font-size: 14px;
font-weight: bold;
line-height: 16px;
}
Lectia numarul 17 Stilizarea sidebarului

Pasul 1 Scrii urmatorul cod sub .sidebar{} :
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}
Ceea ce ai stilizat este lista neordonata parinte (UL) in sidebar. Toti copiii mostenesc acelasi stil.
Spre exemplu:
<ul>
<li>
<ul>
25
<li></li>
</ul>
</li>
</ul>
Al doilea nivel (sau nested) UL mosteneste stilul primului UL. Daca aplici o margine primului UL,
al doilea UL va avea de asemenea o margine. Salveaza si da refresh.
Pasul 2
Scrie sub .sidebar ul{} :
.sidebar ul li{
padding: 10px 0 10px 0;
}
De ce nu am adaugat 10 pixeli tagului UL de prima data? Pentru ca ai nevoie sa separi un LI de
altul.
Pasul 3
sub .sidebar ul li{} scrii:
.sidebar ul li <h2> {
font-size: 14px;
}
Pasul 4
Scrie sub .sidebar ul li <h2> {} urmatoarele:
.sidebar ul li{
padding: 0;
}
Lectia numarul 18
Footer si divizarea indexului
Sa impartim index.php in mai multe fisiere mai mici. Avem nevoie de style.css mai tarziu. Dupa
aceea vom lucra cu index.php pentru a crea noi fisiere.
Deschidem index.php si style.css
Pasul1
Adaugam 10 pixeli in varful (top) DIV-ului footer
Pasul 2
Dam o valoare de 18 pixeli tagului P inauntru footer (adica #footer p{})
Pasul 3
Cream un fisier numit header.php. In index.php copiem de la sfarsitul DIV-ului header tot ceea ce
urmeaza in nou creatul fisier header.php. Adica vom avea:
26

<?php wp_head(); ?>
</head>
<body><div id="wrapper">
<div id="header">
</div>
Pasul 4
Tot ceea ce ai copiat in header.php din index.php inlocuiesti cu:
<?php include(TEMPLATEPATH . '/header.php'); ?>
Salvezi si dai refresh.
Pasul 4 (bis)
Facem acelasi lucru ca mai sus doar ca pentru sidebar. Cream fisierul sidebar.php. De la inceputul
DIV-ului sidebar pana la sfarsit copiem in fisierul nou creat sidebar.php.
Apoi, in index.php, inlocuim acest pasaj cu
<?php get_sidebar(); ?>
Salvam si dam refresh; nu se observa schimbari.
Deci vom avea fisierul sidebar.php:
<div class="sidebar">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<li id="search">
<?php include(TEMPLATEPATH . '/searchform.php'); ?>
</li>
27
<li id="calendar"><h2><?php _e('Calendar'); ?></h2>

</li>
<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php
wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li><h2><?php _e('Meta'); ?></h2>
<ul>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php endif; ?>
</ul>
</div>
Pasul 5
Repetam pentru footer.php. Cream fisierul si in el copiem DIV-ul footer din index.php. Deci vom
avea fisierul footer.php:
<div id="footer">
<p>
Copyright © 2007 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?
></a>
</p>
</div>
</div></body>
</html>
Lectia 19 Fisierele sub-templates

28
Pasul 1
Cream un fisier archive.php
Copiem tot ceea ce este in index.php in in archive.php
Salvam archive.php
In fisierul archive.php schimbam the_content in the_excerpt.
Salvam din nou.
Acuma, dam refresh la pagina arhiva; rezultatul ne va da o prescurtare si nu tot articolul. Facem asta
pentru a preveni Google sa ne penalizeze pentru duplicat de continut. Daca una din paginile din
arhiva si front page-ul deschid acelasi continut, acesta este un continut duplicat.
Pasul 2
Cream un nou fisier search.php
Copiem tot ceea ce este in archive.php in search.php
Salvam fisierul search.php
Acuma toate cautarile vor returna prescurtari.
Pasul 3
Cream fisierele page.php si single.php
Copiem tot ceea ce este in index.php in page.php si single.php (In acest moment cele doua fisiere
sunt la fel).
Salvam ambele fisiere si le inchidem.
Pasul 4
Exista diferente intr o Pagina si o pagina? page.php customizeaza aparitia Pages.
Prima data in page.php scriem urmatorul cod sub <?php the_content(); ?> :
<?php link_pages('<p><strong>Pages:</strong>','</p>','number'); ?>
<?php edit_post_link('Edit','<p>','</p>'); ?>
A doua oara stergem codul postmetadata din page.php. Aici avem codul fara postmetadata:
<div class=entry>
<?php edit_post_link('Edit','<p>','</p>'); ?>
</div>
A treia oara, stergem posts_nav_link() sau blocul de navigare din page.php
<?php endwhile; ?>
<div class= navigation>
<?php .posts_nav_link(); ?> (astea doua boldate dispar)
</div>
<?php else: ?>
Ce s-a intamplat? Prima linie a codului fost pentru a arata linkurile in sub-pagina. Salvezi page.php
si inchizi.
Pasul 5
In single.php scrii sub <?php the_content() ?> urmatoarele:
(Este aceiasi linie ca mai inainte)
In al doilea rand, in zona postmetadata sterge <?php comments_popup_link(); ?> si tagul <br/>
de dupa el. Nu sterge toate postmetadata.
In al treilea rand, inlocuieste <?php posts_nav_link(); ?>
cu:
29
<?php previous_post_link('«%link'); ?><?php next_post_link('%link»'); ?>

Salvezi si inchizi
Lectia numarul 20 Comentarii

Pasul 1
Cream un nou fisier comments.php si copiem in el urmatorul cod:
<?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do
not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { //
and it doesn't match the cookie
?>
<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>
<?php return;
}
}
/* This variable is for alternating comment background */
$oddcomment = 'alt';
?>

<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response',
'% Responses' );?> to “<?php the_title(); ?>”</h3>
<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>
<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?> <a
href="#comment-<?php comment_ID() ?>" title=""><?php comment_date('F jS, Y') ?>
<?php _e('at');?> <?php comment_time() ?></a> <?php _e('Said:'); ?> <?php
edit_comment_link('Edit Comment','',''); ?>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
</div>
<?php comment_text() ?>
</li>
30
<?php /* Changes every other comment to a different class */

if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post->comment_status) : ?>

<?php else : // comments are closed ?>

<p class="nocomments">Comments are closed.</p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
<h3 id="respond">Leave a Reply</h3>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?
redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php"
method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?
php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wplogin.php?action=logout" title="Log out of this account">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo
$comment_author; ?>" size="40" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?
></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo
$comment_author_email; ?>" size="40" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo
"(required)"; ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?
>" size="40" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>


<p><textarea name="comment" id="comment" cols="60" rows="10"
tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit
Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>
Salvam.
Pasul 2
Copiem urmatorul fisier (comments-template.css) in style.css:
.comments-template{
margin: 10px 0 0;
border-top: 1px solid #ccc;
padding: 10px 0 0;
}
.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}
.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;
}
.comments-template h2, .comments-template h3{
font-size: 16px;
}
.commentmetadata{
font-size: 12px;
}
.comments-template p.nocomments{
padding: 0;
}
.comments-template textarea{
font-family: Arial, Helvetica, Georgia, Sans-serif;
32
font-size: 12px;
}
Pune-l la sfarsitul lui style.css ori chiar deasupra lui #footer.
Pasul 3
Scrii urmatorul cod sub DIV-ul entry in fisierul single.php:
<div class=comments-template>
<?php comments_template(); ?>
</div>
Pasul 4 (necesar validarii codului)
Validarea off-line:
mergi la codul sursa al paginii
copiezi tot codul
mergi la validator
adaugi in cutie (box) codul
dai check
33

Create a WordPress Theme Step-by-Step

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create a WordPress Theme Step-by-Step

Uploaded by

Copyright:

Available Formats

Crearea unei teme Word Press

Lectia 2 (Header template)

<a href=<?php bloginfo('url');>><?php bloginfo('name'); ?></a>

Buclele (The Loops)

care vine dupa, ca de exemplu sidebar-ul sau footer-ul.

Sa ne amintim ca H1(header) se foloseste la titlu si H2 (sub-header) la subtitlu. Salvam index.php

Lectia numarul 4 Continutul (The Content)

Ar trebui sa ai cam asa ceva:

id este unic, in timp ce class

sunt multiple class=entry. Pot fi header si container in schimb id-uri? Desigur.

Else, Post ID, Link title

Posts Nav Link

Page Link Listing

Get Archives and Links

Search Form and Calendar

Pasul 1 Adaugarea search

<?php include(TEMPLATEPATH.'/searchform.php'); ?>

Lectia numarul 11: Widgetarea sidebar-ului

---------------Apoi scrie <?php endif; ?> imediat inainte de tagul </ul> :

Lectia numarul 12 Footer

Lectia numarul 13 Style.css

Lectia numarul 14 Hex Codes si Styling links

Lectia numarul 15 Widths si Floats

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

Theme Name: Tutorial

Formatarea postarilor si Miscellaneous

Lectia numarul 17 Stilizarea sidebarului

Footer si divizarea indexului

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

<li id="calendar"><h2><?php _e('Calendar'); ?></h2>

Lectia 19 Fisierele sub-templates

<?php previous_post_link('&laquo;%link'); ?><?php next_post_link('%link&raquo;'); ?>

Lectia numarul 20 Comentarii

<?php /* Changes every other comment to a different class */

php echo allowed_tags(); ?></small></p>-->

You might also like

<?php previous_post_link('«%link'); ?><?php next_post_link('%link»'); ?>