Bu dökümanın herkes için faydalı olacağına inanarak yazıyorum. WordPress temalarının en kötü özelliği, tamamıyla tasarımcıya hitap edememesi. Yani temaların içinde php kodları barındırması, tasarımcılar yönünden pek de iç açıcı bir şey değildir. 
O yüzden bir WordPress teması yapabilmek için, çok az da olsa PHP bilgisine ve tabiki orta düzeyde CSS ve HTML bilgisine sahip olmanız gerekiyor. Lafı daha da uzatmak istemiyorum ve hemen konuya geçiş yapıyorum.
Başlangıç – Bir Temanın Yapısı
WordPress temalarının yapısı, aslında çok anlaşılır ve basittir. CSS dosyası ile başlamak istiyorum. CSS dosyası, temanızda kullandığınız her şeyin, en ince detayların bile görünümlerinin ayarlanmasını sağlayan dosyadır. Daha sonra temanızdaki index.php dosyası: içinde temanıza ait php kodlarını barındıran temel dosyadır. Ayrıca bu dosya, tüm sayfalarda ekrana gelen, header.php ve footer.php dosyalarını da içermektedir. Şu an baktığınızda bir çok temanın bu dört dosyadan fazlasını içerdiğini görürsünüz. Bunun tek sebebi, wordpress’in her içerik için farklı bir görünüm kullanabilmenize imkan vermesidir. Örneğin temalarda, archives.php ve single.php de hazır gelebiliyor. Bunlardan archives.php, arşivlerin gösterimi yani kategorilerin içindeki yazıların gösterimini; single.php ise, tekil yazı sayfasının gösterimi, yani bir yazının devamı linkine tıkladığınızda açılan sayfanın düzenini sağlıyor.
Bu dökümanı yazmak için faydalandığım yer dökümanı 2 parçaya bölmeyi uygun görmüş. Yazının bu kısmında standart HTML ve CSS kodlarını içeren fonksiyonel bir tema yapacağız. Diğer kısımda ise, biraz daha gelişmiş özellikleri kullanmanızı sağlayacağız.
Dökümanı hazırlayan site, Six Shooter Media’nın yapmış olduğu “Typography Paramount” teması üzerinde çalışmayı uygun görmüş. Yani bu temanın, kaba taslak bir benzerini yapacağız.
1.ADIM – style.css
style.css stil dosyası temada bulunması gereken en temel dosyalarımızdan birisi. style.css oluştururken yapmamız gereken ilk şey, yorum satırları arasına(yani /* */ arasına) tema bilgilerimizi eklemek.
/* Theme Name: Typography Paramount Theme URI: http://www.sixshootermedia.com Description: An image-less template focusing on Typography. Author: Sam Parkinson Author URI: http://xseria.com Version: 1.0 */
Yukarıdaki kodlar, WordPress’in yönetim panelinde tema detaylarını göstermesi için gerekli olan bilgilerdir. Buradaki bilgileri kısaca açıklayayım:
Theme Name: Yaptığınız temaya vermiş olduğunuz isim
Theme URI: Yaptığınız temayı tanıtan sayfanın linki
Description: Temanızı anlatan kısa bir açıklama
Author: Temayı yapan kişinin ismi
Author URI: Temayı yapan kişinin internet adresi
Version: Temanın sürüm bilgisi
Bir tema yaptığınızda, stil dosyanızın en üstünde, hiç boşluk bırakmadan bu bilgileri belirtmelisiniz.
Tema için “typography-paramount” adında yeni bir klasör oluşturun örneğin ve bu klasörü wordpress tema dizini (wp-content/themes/) içerisine yükleyin.
Oluşturduğunuz stil dosyasını da bu klasörün içine yerleştirin, diğer türlü başka bir klasörün içine yerleştirdiğinizde, wordpress tema dosyalarınızı göremeyecektir.
WordPress Stil Dosyası
2.ADIM – Üst ve Alt Kısımlar / Header ve Footer
Bu aşamada, header.php ve footer.php adında iki yeni dosya oluşturacağız.
header.php
Üst kısmı oluşturarak başlıyoruz. Tema klasörünüz içerisine, header.php adında bir dosya oluşturun ve aşağıda vereceğim kodları oluşturduğunuz dosyanın içerisine kopyalayın. Bu dosya bütün sayfalarınızda görüntülenen en üst kısımdır. Örneğin site adınızın bulunduğu yer yada üst menülerin bulunduğu yer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<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'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen,projection" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php bloginfo('description'); ?>
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<ul id="nav">
<?php wp_list_pages('sort_column=menu_order&title_li='); ?></ul>
</div>
Yukarıda kullanılan php kodlarını da kısaca açıklıyayım:
language_attributes() – Sitenizin dil bilgisini gösterir. Örneğin Türkçe için tr, ingilizce için en yazacaktır.
bloginfo() – Sitenize ait bilgileri gösterir. Örneğin bloginfo(‘name’) kullanımı, sitenizin adını ekranda gösterecektir.
wp_title() – Sayfanın başlığını gösterir.
wp_head() – javascript linklerini ve diğer bilgileri gösterir.
get_option() – WordPress’in options tablosu içerisinden, istenilen veriyi getirir. Yani get_option(‘home’) şeklinde bir kullanım, anasayfa linkini getirecektir.
wp_list_pages() – Sitenizde bulunan sayfaları listeleyen fonksiyondur. içerisinde kullandığımız parametreler, sayfaların doğru şekilde sıralanmasını ve varsayılan başlığın (“Sayfalar”) gizlenmesini sağlar.
WordPress Temanın Üst Kısmı
footer.php
Tema klasörünüz içerisinde yeni bir dosya oluşturun ve adını, footer.php yapın. Aşağıda vermiş olduğum kodları bu dosyanın içerisine kopyalayın. Bu dosyaya yazdığınız bilgiler sitenizdeki her sayfanın alt kısmında gösterilecektir. Kodları yerleştirdikten sonra, şu an bulunduğumuz yılı, site ismini ve besleme linkini gösteren değişken yapılı bir dosyamız oldu.
<div id="footer">
Template design by <a href="http://www.sixshootermedia.com">Six Shooter Media</a>
© <?php the_time('Y'); ?> <?php bloginfo('name'); ?>
<a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></div>
</div>
<?php wp_footer(); ?>
</body>
</html>
Yukarıda kullandığımız fonksiyonların işlevleri:
the_time(‘Y’) – İçerisinde bulunduğumuz yılı gösterir.
bloginfo(‘name’) – Sitenizin ismini gösterir.
bloginfo(‘rss2_url’) – Sitenizin besleme linkini gösterir. (RSS)
wp_footer() – WordPress’in sitenizin alt kısmına bir şeyler eklemesi için gerekli olan koddur. Örneğin Google Analytics eklentisi kurdunuz ve izleme kodunu girdiniz. İzleme kodunun footer’a ekleneceğinden bu kodun footer.php dosyası içerisinde bulunması gereklidir.
WordPress Temanın Alt Kısmı
3. ADIM – Çekirdek Dosya
Şimdi bir index.php dosyası oluşturacağız.
index.php
WordPress temalarında gerekli dediğimiz iki dosyadan birisi de index.php dosyası. (Diğeri ise daha önce söylediğimiz style.css dosyası). Şimdi tema klasörünüzde, index.php isminde yeni bir dosya oluşturun ve aşağıdaki kodları içerisine ekleyin.
<?php get_header(); ?> <?php get_footer(); ?>
Temanıza eklemiş olduğunuz bu satırlar, WordPress sistemize, header.php ve footer.php yi nereye ekleyeceğini söylüyor. Şimdi bu iki kodun arasına, yazılarımızı göstermemizi sağlayacak olan asıl gerekli kodu ekliyoruz.
<div id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php the_time('F j, Y'); ?> at <?php the_time('g:ia'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?>
<?php endwhile; else: ?>
<h2>Woops...</h2>
Sorry, no posts we're found.
<?php endif; ?>
<?php posts_nav_link(); ?></div>
Yukarıdaki kodlar, WordPress’in yazı döngüsünü yapmasını sağlayacak olan kodlardır. İlk satırda, WordPress döngüye başlar ve endwhile; koduyla döngüyü sonlandırır. WordPress her döngüde sitenizdeki yazıları gösterir, eğer sitenizde yazı yoksa, “Woops…” yazısını ekranda gösterir. En alt satırda gördüğünüz, “posts_nav_link” fonksiyonu ile sayfalama linklerini gösterir.
Bir sonraki makalede, single.php dosyasını ele alacağız. Bu dosya, bir kullanıcı yazının başlığına tıkladığında yada devamı linkine bastığında açılacak sayfayı düzenlemenize yarıyor
Genel index.php Yapısı
Hadi bakalım denemelerinizi yapın ve görüşlerinizi bildirin
Ayrıca bu güzel yazı için, Nettuts’a teşekkür ediyoruz
Kaynak: http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-wordpress-theme-from-scratch/
“Sıfırdan WordPress Teması Yapmak Bölüm 1” için 28 Yorum var
Çok güzel bir anlatım olmuş hocam, çok teşekkürler
merhaba… kafamdaki wordpress siteyi yapacak birisini arıyorum. 2-3 temayı bir araya getirmek gerekiyor. ilgilenirseniz, yada ilgilenebilecek birini tanıyorsanız lütfen bana 0530 274 88 98 numaralı telefondan ulaşın. çok fazla bir para veremem ama ücret konusunda umarım anlaşırız.
Arkadaşlar size kolay bir şekilde tema yapmayı anlatacağım… Şimdi örnek yapılmış bir temayı indirin… Dreamweaver veya Frontpage programlarından biri ile düzenleyin…
peki en alttaki wordpress c 2010 Theme altyapı yerıne kendı ıstedıgımız yazıyı nasıl yazarız? mesela telif hakları … aittir.?
Yeterli bir anlatım olmamış ne yazıkki =( Genede teşekkürler.
Bana anlatım çok yeterli gelmedi açıkçası..
sen anlat senden de yararlanalım.
Çok güzel elinize sağlık
teşekkürLer.
Bu yazının devamını nasıl okuyabiliriz acaba ?
merhaba ben sade yaptığım temada foundere linkimi koyacam linkim silindiğinde tema orjinal footer.php yi kullanın yazacak bu konuda yardım ederseniz çok sevinirim
fuctions.php de bir dongü oluşturmalısınız!
tesekkür ederim
Teşekkürler.
çok teşekkürler. ben de ilk wp temamı yapmış oldum sayenizde. wp hakkında çok fazla yığılmış bilgim vardı ancak hiç sıfırdan yapmamıştım. bu örnek temayı şu hale getirdim
imgeder.com
ziyaret edip bakabilirsiniz. tekrar teşekkürler.
abicim bari 2. sayfayıda ekleseydin yazına ilk sayfada kalmışın
Merhaba. Gerçekten ellerinize sağlık diyorum. Türklerin bu gibi açık kaynak kodlu uygulamları geliştirmesi hepimizin ve ülkemizin geleceği için burda tabiki internet teknolojisinden bahsediyorum sizler gibi geliştirici kişiler tarafından sağlanacaktır. Teşekkürler.
Güzel bir yazı olmuş
süper bir anlatım ..
güzel makale göz geziricem aradqımı bulmam gerek
saol
hocam çok kral anlatım olmuş tebrikler
Kendi temamı nasıl yaparım diye araştırırken r10 da bi tıkladım ki buraya geldik 
Bundan sonra takipteyim.Saygılar…
semih bey teşekkürler daha once bu kadar acıklayıcı bilgiye ulaşmamıştım hic klavyen dert gormesin oldukca acıklayıcı.devamıda gelir umarım.dun sana mail atmıstım geldimi acaba.ayrıca sana kolaylık olsun diye bir WP-Table Reloaded eklentisini cıkarıyorlar bak yeni biri yapıyor sanırım bunu 2.7.1 surumu ile calısıyor.
linki http://wordpress.org/extend/plugins/wp-table-reloaded/
Teşekkürler. Ben vakit bulup bakamadım bir türlü. Siz bu eklentiyi denediniz mi?
denedim ama calısmadı acaba biryerde yanlısmı yaptım ama basit bir eklenti.sizde bir denersmisiniz acaba nasıl olacagını yaptım ama kodla gosteremedim gorunmuyor sayfada
ayrıca kaynak oner bolumun icin size iki tane eklentili kaynak gonderiyorum benim ilgimi cekti eklentiler sizinde cekecegini dusundum
http://www.code-styling.de/
http://www.wpuzmani.com/eklenti-incelemesi-wp-table-reloaded/ adresinde açıklamaları hazırladım
Beğenmenize sevindim
Biz her zaman burdayız, yine bekleriz
Teşekkür ederim