Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Alt Teması Nasıl Oluşturulur (Başlangıç Kılavuzu)

Alt temalar, etrafta çokça kullanılan ve yeni başlayanların kafasını karıştıran WordPress terimlerinden biridir. Hatta bunları duymuş ve ne kadar karmaşık göründükleri için oluşturmayı atlamaya karar vermiş olabilirsiniz.

Bunu anlıyoruz. Ancak deneyimlerimize göre, alt temalar ileride sizi bir sürü baş ağrısından kurtarabilir. Değerli özelleştirmelerinizi korur, sitenizi bozmadan denemeler yapmanızı sağlar ve temanızı güncellemeyi çocuk oyuncağı haline getirir.

İlgileniyorsanız, bu yeni başlayan dostu kılavuzda bir alt temanın nasıl çalıştığını, nasıl özelleştirileceğini ve üzerinde nasıl değişiklik yapılacağını açıkladık.

How to Create a WordPress Child Theme

Alt Tema Nasıl Çalışır ve Neden İhtiyacınız Var?

Bir alt tema, başka bir WordPress temasının tüm özelliklerini, işlevlerini ve stillerini devralır. Bir alt tema oluşturduğunuzda, orijinal tema ana tema olarak adlandırılır.

Kalıtım, temanın ana stilini tanımlayan üst temanın style.css dosyasını içerir. Alt tema, kendi dosyalarını ekleyerek veya mevcut olanları değiştirerek devralınan özellikleri geçersiz kılabilir veya genişletebilir.

WordPress tem anızı bir alt tema yüklemeden özelleştirmek mümkün olsa da, yine de bir temaya ihtiyaç duymanızın birkaç nedeni vardır:

  • Alt temalar, tema güncellemeleri sırasında özelleştirmelerinizi koruyarak üzerlerine yazılmasını önler. Ana temayı doğrudan değiştirirseniz, güncelleme yaptığınızda bu ince ayarlar kaybolabilir.
  • Alt temalar, bir hazırlama ortamına benzer şekilde, sitenin orijinal temasını bozmadan yeni tasarımları veya özellikleri güvenle denemenizi sağlar.
  • Kod yazmayı biliyorsanız, alt temalar geliştirme sürecini daha verimli hale getirebilir. Bir alt temanın dosyaları ana temanınkilerden çok daha basittir. Ana temanın yalnızca değiştirmek veya genişletmek istediğiniz kısımlarını değiştirmeye odaklanabilirsiniz.

WordPress Alt Teması Oluşturmadan Önce Yapılması Gerekenler

Birçok WordPress kullanıcısının teknik konulara dalmak için heyecanlandığını, ancak hatalar ortaya çıktığında cesaretlerinin kırıldığını gördük. Bunu anlıyoruz. Bu yüzden bir alt tema oluşturmadan önce neye bulaştığınızı bilmek önemlidir.

İşte bu adım adım kılavuza devam etmeden önce yapmanızı önerdiğimiz bazı şeyler:

  1. Kod ile çalışacağınızın farkında olun. Yapmanız gereken değişiklikleri anlamak için en azından temel düzeyde HTML, CSS, PHP ve isteğe bağlı olarak JavaScript bilgisine sahip olmanız gerekecektir. WordPress tema el kitabında bu konuda daha fazla bilgi edinebilirsiniz.
  2. İstediğiniz web sitesi tasarımına ve özelliklerine sahip bir ana tema seçin. Mümkünse, yalnızca birkaç değişiklik yapmanız gereken bir tema bulun. Gerekirse WordPress temalarını değiştirmeden önce yapılması gerekenler kontrol listemizi takip edebilirsiniz.
  3. Tema geliştirme için yerel bir site veya hazırlık sitesi kullanın. Canlı sitenizde istemediğiniz hatalar oluşturmak istemezsiniz.
  4. Önceweb sitenizi yedekleyin. Eğer bu ilk seferinizse Duplicator gibi bir yedekleme eklentisi kullanmanızı öneririz.

Mevcut temanızdan bir alt tema oluşturmanın birkaç yolu vardır. Biri manuel kodla yapılırken, diğerleri çok daha acemi dostu olan bir eklenti gerektirir.

Teknik deneyiminiz yoksa ilk yöntem göz korkutucu görünebilir. Bununla birlikte, eklenti yöntemlerinden birini seçseniz bile, sürece ve ilgili dosyalara aşina olmak için manuel yöntemi okumanızı öneririz.

Profesyonel İpucu: Temanızı alt tema oluşturmadan özelleştirmek mi istiyorsunuz? Web sitenizi bozmadan özel kod parçacıklarıyla yeni özellikleri güvenle etkinleştirmek için WPCode ‘u kullanın.

Tüm bunları aklımızda tutarak, WordPress’te bir alt temanın nasıl oluşturulacağına geçelim. Aşağıdaki bağlantıları kullanarak tercih ettiğiniz yönteme geçebilirsiniz:

Yöntem 1: Manuel Olarak Alt WordPress Teması Oluşturma

Öncelikle WordPress kurulum klasörünüzdeki /wp-content/themes/ dosyasını açmanız gerekir.

Bunu WordPress hosting ‘inizin dosya yöneticisini veya bir FTP istemcisini kullanarak yapabilirsiniz. Biz ilk seçeneğin çok daha kolay olduğunu düşünüyoruz, bu yüzden bunu kullanacağız.

Bluehost müşterisiyseniz, barındırma hesabı kontrol panelinize giriş yapabilir ve ‘Web Siteleri’ sekmesine gidebilirsiniz. Bundan sonra, ‘Ayarlar’a tıklayın.

Bluehost site settings

Genel Bakış sekmesinde, ‘Hızlı Bağlantılar’ bölümüne ilerleyin.

Ardından, ‘Dosya Yöneticisi’ni seçin.

Bluehost File Manager button

Bu aşamada, web sitenizin public_html klasörüne gitmeniz ve /wp-content/themes/ yolunu açmanız gerekir.

Burada, alt temanız için yeni bir klasör oluşturmak için sol üst köşedeki ‘+ Klasör’ düğmesine tıklamanız yeterlidir.

Creating a new folder in Bluehost file manager

Klasöre istediğiniz ismi verebilirsiniz.

Bu eğitimde, ana temamız olarak Twenty Twenty-One kullanacağımız için sadece twentytwentyone-child klasör adını kullanacağız. İşiniz bittiğinde, ‘Yeni Klasör Oluştur’a tıklayın.

Naming a new child theme file in Bluehost file manager

Ardından, yeni oluşturduğunuz klasörü açmalı ve alt temanızın ilk dosyasını oluşturmak için ‘+ Dosya’ya tıklamalısınız.

Bir FTP istemcisi kullanıyorsanız, Notepad gibi bir metin düzenleyici kullanabilir ve dosyayı daha sonra yükleyebilirsiniz.

Creating a new file in Bluehost file manager

Devam edin ve bu dosyaya ‘style.css’ adını verin, çünkü bu dosya çocuğunuzun ana stil sayfasıdır ve çocuk teması hakkında bilgi içerecektir.

Ardından, ‘Yeni Dosya Oluştur’a tıklayın.

Creating a new stylesheet file in Bluehost file manager

Şimdi, style.css dosyasına sağ tıklayın.

Bundan sonra, aşağıdaki ekran görüntüsünde olduğu gibi yeni bir sekme açmak için ‘Düzenle’ye tıklayın.

Editing a style.css file in Bluehost file manager

Bu yeni sekmede, aşağıdaki metni yapıştırabilir ve ihtiyaçlarınıza göre ayarlayabilirsiniz:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

İşiniz bittiğinde, ‘Değişiklikleri Kaydet’e tıklayın.

Saving a stylesheet file in Bluehost file manager

Yapmanız gereken bir sonraki şey ikinci bir dosya oluşturmak ve ona functions.php adını vermektir. Bu dosya, stil sayfalarını ana temanın dosyalarından içe aktaracak veya sıraya alacaktır.

Belgeyi oluşturduktan sonra, aşağıdaki wp_enqueue kodunu ekleyin:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

İşiniz bittiğinde, dosyayı önceki adımda olduğu gibi kaydedin.

Not: Bu yöntemde, alt temanızın stil sayfalarının düzgün şekilde yüklendiğinden emin olmak için resmi Alt Temalar ve Varlıkları Dahil Etme belgelerini okumanızı öneririz.

Artık çok temel bir alt tema oluşturdunuz. WordPress yönetici panelinizde Görünüm ” Temalar bölümüne gittiğinizde Twenty Twenty-One Çocuk seçeneğini görmelisiniz.

Sitenizde alt temayı kullanmaya başlamak için ‘Etkinleştir’ düğmesine tıklayın.

Activating a child theme in WordPress admin

Yöntem 2: Bir Eklenti ile Klasik Çocuk Teması Oluşturma

Sıradaki yöntemde Child Theme Configurator eklentisi kullanılmaktadır. Bu kullanımı kolay WordPress eklentisi, kod kullanmadan hızlı bir şekilde WordPress alt temaları oluşturmanızı ve özelleştirmenizi sağlar, ancak yalnızca klasik (blok olmayan) bir tema ile iyi çalışır.

Yapmanız gereken ilk şey WordPress eklentisini yüklemek ve etkinleştirmektir. Etkinleştirdikten sonra, WordPress panonuzda Araçlar ” Alt Temalar bölümüne gitmeniz gerekir.

Ebeveyn/Çocuk sekmesinde sizden bir eylem seçmeniz istenecektir. Başlamak için ‘Yeni bir Alt Tema Oluştur’ seçeneğini seçin.

Creating a new child theme with Child Theme Configurator

Ardından, açılır menüden bir üst tema seçin. Biz Hestia temasını seçeceğiz.

Bundan sonra, temanın ana tema olarak kullanıma uygun olduğundan emin olmak için ‘Analiz Et’ düğmesine tıklamanız yeterlidir.

Choosing a parent theme in Child Theme Configurator

Ardından, alt temanın kaydedileceği klasörü adlandırmanız istenecektir. İstediğiniz herhangi bir klasör adını kullanabilirsiniz.

Bunun altında, yeni stillerin nereye kaydedileceğini seçmeniz gerekir: birincil stil sayfasına veya ayrı bir stil sayfasına.

Birincil stil sayfası, alt temanızla birlikte gelen varsayılan stil sayfasıdır. Bu dosyaya yeni özel stiller kaydettiğinizde, doğrudan alt temanızın ana stillerini değiştirmiş olursunuz. Her değişiklik orijinal temanın stilinin üzerine yazılır.

Ayrı seçeneği, yeni bir özel stili ayrı bir stil sayfası dosyasına kaydetmenizi sağlar. Bu, orijinal temanın stilini korumak ve üzerine yazmamak istiyorsanız kullanışlıdır.

Gösterim amacıyla ilk seçeneği seçeceğiz. Ancak alt tema özelleştirmelerinizle daha yaratıcı hale geldikçe, bu işlemi her zaman tekrarlayabilir ve ikinci seçeneği seçebilirsiniz.

Choosing where to save the stylesheet in Child Theme Configurator

Aşağı doğru ilerlerken, ana temanın stil sayfasına nasıl erişileceğini seçmeniz gerekir.

Eklentinin uygun eylemleri otomatik olarak belirlemesine izin vereceği için varsayılan ‘WordPress stil kuyruğunu kullan’ seçeneğini kullanacağız.

Choosing the parent theme stylesheet handling in Child Theme Configurator

Adım 7’ye geldiğinizde, ‘Alt Tema Özelliklerini Düzenlemek için Tıklayın’ etiketli düğmeye tıklamanız gerekecektir.

Daha sonra alt temanızın ayrıntılarını doldurabilirsiniz.

Filling out the child theme details in Child Theme Configurator

Manuel olarak bir alt tema oluşturduğunuzda, ana temanın menülerini ve widget’larını kaybedersiniz. Alt Tema Yapılandırıcısı bunları ana temadan alt temaya kopyalayabilir. Bunu yapmak istiyorsanız 8. adımdaki kutuyu işaretleyin.

Son olarak, yeni alt temanızı oluşturmak için ‘Yeni Alt Tema Oluştur’ düğmesine tıklayın.

Clicking the Create New Child Theme button in Child Theme Configurator

Eklenti, alt temanız için bir klasör oluşturacak ve temayı daha sonra özelleştirmek için kullanacağınız style.css ve functions.php dosyalarını ekleyecektir.

Temayı etkinleştirmeden önce, önizleme yapmak ve iyi göründüğünden ve sitenizi bozmadığından emin olmak için ekranın üst kısmındaki bağlantıya tıklamalısınız.

Previewing a child theme in Child Theme Configurator

Her şey çalışıyor gibi görünüyorsa, ‘Etkinleştir ve Yayınla’ düğmesine tıklayın.

Şimdi, alt temanız yayına girecektir.

Bu aşamada, alt tema tam olarak ana tema gibi görünecek ve davranacaktır.

Activating a child theme after it was made with Child Theme Configurator

Yöntem 3: Bir Eklenti ile Alt Blok Teması Oluşturma

Eğer bir blok tema kullanıyorsanız, WordPress Create Block Theme eklentisi ile bir alt tema oluşturmanın kolay bir yolunu sunar.

İlk olarak, WordPress eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Bundan sonra, Görünüm ” Blok Tema Oluştur‘a gidin.

Burada, ‘Create a Child of [current theme name]’ seçeneğini seçmeniz yeterlidir.

Creating a child theme with Create Block Theme plugin

Ardından, alt temanızın bilgilerini doldurun. Bu örnekte Twenty Twenty-Four kullandığımız için temaya Twenty Twenty-Four Child adını vereceğiz.

Ayrıca alt tema için bir açıklama ve yazar da verdik. Tamamlandığında, ‘Alt Tema Oluştur’ düğmesine tıklayın.

Inserting the child block theme's information in the Create Block Theme plugin

Eklenti şimdi WordPress tema zip dosyasını oluşturacak ve yönetici alanınıza yükleyecektir.

Bu işlem tamamlandığında, web siteniz yeni oluşturulan bu alt temayı otomatik olarak etkinleştirecektir. Bunu Görünüm ” Temalar bölümüne giderek onaylayabilirsiniz.

Seeing the newly created child theme made with the Create Block Theme plugin

Bonus İpucu: Temanızın Alt Tema Oluşturucusu Olup Olmadığını Öğrenin

Şanslıysanız, WordPress temanız zaten bir alt tema oluşturmak için mevcut bir özelliğe sahip olabilir.

Örneğin, Astra kullanıyorsanız, Astra Çocuk Teması Oluşturucu web sitesine gidebilirsiniz. Bundan sonra, sadece alt tema adınızı girin ve ‘Oluştur’ düğmesine tıklayın.

Astra Child Theme Generator website

Tarayıcınız daha sonra alt temanızı otomatik olarak bilgisayarınıza indirecek ve bunu WordPress’e kendiniz yükleyebileceksiniz.

Ayrıca alt tema oluşturucusu olan başka popüler WordPress tem aları da bulduk:

Klasik Alt Temanızı Özelleştirme

Not: Bu bölüm klasik WordPress teması kullanıcıları içindir. Eğer blok tema kullanıyorsanız, bir sonraki bölüme geçebilirsiniz.

Teknik olarak, Tema Özelleştirici’yi kullanarak alt temanızı kod olmadan özelleştirebilirsiniz. Burada yaptığınız değişiklikler ana temanızı etkilemeyecektir. Kodlama konusunda henüz rahat değilseniz, Özelleştirici’yi kullanmaktan çekinmeyin.

Bununla birlikte, alt temayı kodla özelleştirmenizi de öneririz.

WordPress tema geliştirme hakkında daha fazla bilgi edinmenin yanı sıra, kod özelleştirme, değişikliklerin alt temanın dosyalarında belgelenmesine olanak tanıyarak bunların izlenmesini kolaylaştırır.

Şimdi, bir alt temayı özelleştirmenin en temel yolu style.css dosyasına özel CSS eklemektir. Bunu yapmak için hangi kodu özelleştirmeniz gerektiğini bilmeniz gerekir.

Ana temadaki mevcut kodu kopyalayıp değiştirerek süreci basitleştirebilirsiniz. Bu kodu Chrome veya Firefox Inspect aracını kullanarak ya da doğrudan ana temanın CSS dosyasından kopyalayarak bulabilirsiniz.

Yöntem 1: Chrome veya Firefox Inspector’dan Kod Kopyalama

Değiştirmeniz gereken CSS kodunu keşfetmenin en kolay yolu, Google Chrome ve Firefox ile birlikte gelen denetçi araçlarını kullanmaktır. Bu araçlar, bir web sayfasının herhangi bir öğesinin arkasındaki HTML ve CSS’ye bakmanıza olanak tanır.

Denetçi aracı hakkında daha fazla bilgiyi denetleme öğesinin temelleri: WordPress’i kendin yap kullanıcıları için özelleştirme başlıklı kılavuzumuzda bulabilirsiniz.

Web sayfanıza sağ tıkladığınızda ve inspect öğesini kullandığınızda, sayfanın HTML ve CSS’sini göreceksiniz.

Farenizi farklı HTML satırlarının üzerine getirdiğinizde, denetçi bunları üst pencerede vurgulayacaktır. Ayrıca, vurgulanan öğeyle ilgili CSS kurallarını da gösterecektir:

Demonstrating how the Chrome inspect tool works

Nasıl görüneceğini görmek için CSS’yi orada düzenlemeyi deneyebilirsiniz. Örneğin, temanın gövdesinin arka plan rengini #fdf8ef olarak değiştirmeyi deneyelim. body { yazan kod satırını ve içinde color: yazan kodu bulun.

Renk: öğesinin yanındaki renk seçici simgesine tıklayın ve HEX kodunu aşağıdaki gibi uygun alana yapıştırın:

Artık CSS kullanarak arka plan rengini nasıl değiştireceğinizi biliyorsunuz. Değişiklikleri kalıcı hale getirmek için, style.css dosyanızı alt tema dizininde açabilirsiniz ( dosya yöneticisini veya FTP‘yi kullanarak).

Ardından, aşağıdaki kodu alt tema bilgilerinin altına aşağıdaki gibi yapıştırın:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

body {
    background-color: #fdf8ef
}

WordPress yöneticisine gidip Görünüm Tema Dosyası Düzenleyicisi‘ni açarsanız aşağıdaki gibi görünecektir:

Adding custom CSS in a child theme's stylesheet in the theme file editor

Yeni başlayan biriyseniz ve başka değişiklikler yapmak istiyorsanız, her kodun tam olarak hangi öğeye atıfta bulunduğunu bilmeniz için HTML ve CSS’ye aşina olmanızı öneririz. İnternette başvurabileceğiniz birçok HTML ve CSS kopya sayfası bulunmaktadır.

İşte alt tema için oluşturduğumuz stil sayfasının tamamı. Denemekten ve değiştirmekten çekinmeyin:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

Yöntem 2: Ana Temanın style.css Dosyasından Kod Kopyalama

Belki de alt temanızda özelleştirmek istediğiniz pek çok şey vardır. Bu durumda, bazı kodları doğrudan ana temanın style.css dosyasından kopyalayıp alt temanızın CSS dosyasına yapıştırmak ve ardından değiştirmek daha hızlı olabilir.

İşin zor kısmı, bir temanın stil sayfası dosyasının yeni başlayanlar için gerçekten uzun ve bunaltıcı görünebilmesidir. Ancak, temelleri anladıktan sonra aslında o kadar da zor değildir.

Twenty Twenty-One ana temasının stil sayfasından gerçek bir örnek kullanalım. WordPress kurulum klasörünüzde /wp-content/themes/twentytwentyone adresine gitmeniz ve ardından style.css dosyasını dosya yöneticinizde, FTP’de veya Tema Dosyası Düzenleyicisinde açmanız gerekir.

Aşağıdaki kod satırlarını göreceksiniz:

:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}

3 ila 15. satırlar, tüm temanın kendi özel HEX kodlarında kullanacağı renk türlerini (sarı, yeşil, mor gibi) kontrol eder. Ve sonra, ‘global-color-primary’ veya ‘global-color-secondary’ gibi satırlar için, bunlar o temanın birincil ve ikincil renkleri anlamına gelir.

Bu kod satırlarını alt temanızın stil sayfasına kopyalayabilir ve ardından mükemmel renk düzeninizi oluşturmak için HEX kodlarını değiştirebilirsiniz.

Ana temanın stil sayfasında aşağı doğru ilerlediğinizde, burada olduğu gibi diğer değişkenlerin de bu renk değişkenlerine sahip olabileceğini fark edeceksiniz:

/* Buttons */
--button--color-text: var(--global--color-background);

Bu temel olarak, tüm düğme metinlerinin --global--color-background: içinde bildirilen aynı rengi kullanacağı anlamına gelir; bu renk nane yeşilidir(--global--color-green: #d1e4dd). Eğer --global--color-green: içindeki HEX değerini değiştirirseniz, düğme metni de farklı görünecektir.

Not: Twenty Twenty-One alt temasını kullanıyorsanız ve herhangi bir değişiklik görmüyorsanız, style.css dosyasını her güncellediğinizde tema dosyası bilgilerinin ‘Sürüm’ kısmını güncellemeniz gerekebilir (örneğin, 1.0’dan 2.0’a).

Alt tema özelleştirmelerinizi denemek için bu eğitimleri de takip edebilirsiniz:

Block Alt Temanızı Özelleştirme

Bir alt blok teması kullanıyorsanız, özelleştirmelerinizin çoğu style .css değil theme.json dosyanızda yapılacaktır.

Ancak testlerimiz sırasında sürecin karmaşık olduğunu gördük. Klasik alt temaların aksine, WordPress tema geliştirmede yeniyseniz doldurmanız gereken daha büyük bir bilgi boşluğu var (özellikle JSON ve CSS’nin orada nasıl işlendiği hakkında).

Bununla birlikte, Create Block Theme eklentisini kullanarak çok daha kolay bir alternatif bulduk. Bu araç WordPress Tam Site Editöründe yapılan tüm değişiklikleri alt tema.json dosyanıza kaydedebilir. Böylece, herhangi bir koda dokunmanız gerekmeyecek çünkü eklenti bunu sizin için halledecek.

Size bir örnek gösterelim. İlk olarak, Görünüm ” Düzenleyici‘ye giderek WordPress Tam Site Düzenleyicisi ‘ni açın.

Selecting the Full-Site Editor from the WordPress admin panel

Aralarından seçim yapabileceğiniz birkaç menü göreceksiniz.

Burada, sadece ‘Stiller’i seçin.

Opening the Styles menu in Full Site Editor

Bir sonraki sayfada, aralarından seçim yapabileceğiniz çeşitli yerleşik stil kombinasyonları göreceksiniz.

Bizim amacımız için, tüm bunları atlayabilir ve sadece kalem simgesine tıklayabilirsiniz.

Clicking the Edit Styles button in the Full Site Editor

Şimdi, alt temanızın yazı tipleri gibi bazı kısımlarını değiştirmeyi deneyelim.

Bu örnek için, devam edin ve sağ kenar çubuğundaki ‘Tipografi’ye tıklayın.

Clicking the Typography menu in Full Site Editor

Ardından, metin, bağlantılar, başlıklar, alt yazılar ve düğmeler için temanın genel yazı tiplerini değiştirmek üzere bazı seçenekler göreceksiniz.

Göstermek için ‘Başlıklar’a tıklayalım.

Clicking Headings in the Full Site Editor

Yazı Tipi açılır menüsünde, orijinal seçimi mevcut olan herhangi bir yazı tipiyle değiştirin.

Gerekirse görünümü, satır yüksekliğini, harf aralığını ve harf kaplamasını değiştirmekten çekinmeyin.

Styling headings in the Full Site Editor

İşiniz bittiğinde, sadece ‘Kaydet’e tıklayın. Bundan sonra, ‘Kaydet’in yanındaki Blok Teması Oluştur düğmesine (İngiliz anahtarı simgesi) tıklayabilirsiniz.

Ardından, ‘Değişiklikleri Temaya Kaydet’e tıklayın.

Saving changes made to a child theme with the Create Block Theme plugin

Ardından, devam edin ve alt temaya hangi değişikliklerin kaydedileceğini seçin.

Örnekler arasında yazı tipleri, özel stiller, şablon değişiklikleri ve daha fazlası yer alır.

Selecting what changes to save to the child theme with the Create Block Theme plugin

İşiniz bittiğinde, kenar çubuğunu sonuna kadar kaydırın.

Ardından, ‘Değişiklikleri Kaydet’e tıklayın.

Clicking on the Save Changes button in the Create Block Theme plugin

Şimdi, koda yansıyan değişiklikleri görebilmeniz için theme.json dosyanızı görüntüleyelim.

Bunu yapmak için Blok Teması Oluştur düğmesine tekrar tıklayın ve ‘Tema.json’u görüntüle’yi seçin.

Clicking to view the theme.json file in the Create Block Theme plugin

Üzerine tıkladıktan sonra, dosyanın bazı yeni kod eklemeleri içerdiğini göreceksiniz.

Bizim durumumuzda, dosya başlık etiketlerinin yarı kalın görünümlü, 1,2 satır yüksekliğinde, 1 piksel satır aralığında ve küçük harflerle Inter yazı tipini kullanacağını belirten kodu içerir.

Viewing the theme.json file in the Create Block Theme plugin

Bu nedenle, alt blok temanızı her düzenlediğinizde, İngiliz anahtarı simgesine tıkladığınızdan ve değişikliklerinizi kaydettiğinizden emin olun, böylece iyi belgelenmiş olurlar.

Alt Temanın Şablon Dosyaları Nasıl Düzenlenir?

Çoğu WordPress teması, tema içindeki belirli bir alanın tasarımını ve düzenini kontrol eden tema dosyaları olan şablonlara sahiptir. Örneğin, altbilgi bölümü genellikle footer.php dosyası tarafından ele alınır ve üstbilgi header.php dosyası tarafından ele alınır.

Her WordPress temasının da farklı bir düzeni vardır. Örneğin, Twenty Twenty-One temasında bir üstbilgi, içerik döngüsü, altbilgi widget alanı ve altbilgi bulunur.

Bir şablonu değiştirmek istiyorsanız, dosyayı ana tema klasöründe bulmanız ve alt tema klasörüne kopyalamanız gerekir. Bundan sonra, dosyayı açmalı ve istediğiniz değişiklikleri yapmalısınız.

Örneğin, Bluehost kullanıyorsanız ve ana temanız Twenty Twenty-One ise, dosya yöneticinizde /wp-content/themes/twentytwentyone adresine gidebilirsiniz. Ardından footer.php gibi bir şablon dosyasına sağ tıklayın ve ‘Kopyala’yı seçin.

Copying footer.php in Bluehost file manager

Bundan sonra, alt temanızın dosya yolunu girin.

İşiniz bittiğinde, ‘Dosyaları Kopyala’ya tıklamanız yeterlidir.

Entering the child theme's file path to copy and paste the footer.php into inside Bluehost file manager

Daha sonra dosya yoluna yönlendirileceksiniz.

Footer.php dosyasını düzenlemek için üzerine sağ tıklayın ve ‘Düzenle’yi seçin.

Editing footer.php in Bluehost file manager

Örnek olarak, ‘Proudly powered by WordPress’ bağlantısını altbilgi alanından kaldıracağız ve oraya bir telif hakkı bildirimi ekleyeceğiz.

Bunu yapmak için, <div class="powered-by"> etiketleri arasındaki her şeyi silmelisiniz:

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

Ardından, aşağıdaki örnekte bu etiketlerin altında bulduğunuz kodu yapıştırmanız gerekir:

<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

İşte şimdi metin düzenleyicide sahip olmanız gereken şey:

Replacing the WordPress footer links in footer.php inside Bluehost file manager

Devam edin ve değişiklikleri resmi hale getirmek için dosyayı kaydedin.

Bundan sonra, yeni telif hakkı bildirimini görmek için web sitenizi ziyaret edin.

Adding a dynamic copyright notice in footer.php

Alt Temanıza Yeni İşlevsellik Ekleme

Bir temadaki functions.php dosyası, bir WordPress sitesine özellikler eklemek veya varsayılan özellikleri değiştirmek için PHP kodunu kullanır. WordPress siteniz için mevcut temanızla otomatik olarak etkinleştirilen bir eklenti gibi davranır.

Kod parçacıklarını kopyalayıp functions.php’ye yapıştırmanızı isteyen birçok WordPress eğitimi bulacaksınız. Ancak değişikliklerinizi ana temaya eklerseniz, temaya yeni bir güncelleme yüklediğinizde bunların üzerine yazılacaktır.

Bu nedenle özel kod parçacıkları eklerken bir alt tema kullanmanızı öneririz. Bu eğitimde, temamıza yeni bir widget alanı ekleyeceğiz.

Bu kod parçacığını alt temamızın functions.php dosyasına ekleyerek bunu yapabiliriz. İşlemi daha da güvenli hale getirmek için WPCode eklentisini kullanmanızı öneririz, böylece functions.php dosyasını doğrudan düzenlemeyerek hata riskini azaltırsınız.

Daha fazla bilgi için özel kod parçacıklarının nasıl ekleneceğine ilişkin kılavuzumuzu okuyabilirsiniz.

İşte functions.php dosyanıza eklemeniz gereken kod:

// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

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

Dosyayı kaydettikten sonra, WordPress kontrol panelinizin Görünüm ” Widget ‘lar sayfasını ziyaret edebilirsiniz.

Burada, widget ekleyebileceğiniz yeni özel widget alanınızı göreceksiniz.

Creating a custom widget area for a child theme

Özel kod parçacıklarını kullanarak temanıza ekleyebileceğiniz pek çok başka özellik vardır. WordPress functions.php dosyası için bu son derece kullanışlı püf noktalarına ve yeni başlayanlar için faydalı WordPress kod parçacıklarına göz atın.

WordPress Alt Temanızdaki Sorunlar Nasıl Giderilir?

Daha önce hiç alt tema oluşturmadıysanız, bazı hatalar yapma olasılığınız yüksektir ve bu normaldir. Bu nedenle bir yedekleme eklentisi kullanmanızı, yerel bir site veya hazırlama ortamı oluşturmanızı ve demo siteniz için kukla içerik kullanmanızı öneririz.

Tüm bunlar söylenirken, çok çabuk pes etmeyin. WordPress topluluğu çok beceriklidir, bu nedenle yaşadığınız sorun ne olursa olsun, muhtemelen bir çözümü zaten vardır.

Başlangıç olarak, bir çözüm bulmak için en yaygın WordPress hatalarımıza göz atabilirsiniz.

Muhtemelen göreceğiniz en yaygın hatalar, kodda gözden kaçırdığınız bir şeyden kaynaklanan sözdizimi hatalarıdır. WordPress’te söz dizimi hatasının nasıl bulunacağı ve düzeltileceğine ilişkin hızlı kılavuzumuzda bu sorunları çözme konusunda yardım bulabilirsiniz.

Ayrıca, bir şeyler çok yanlış giderse her zaman yeniden başlayabilirsiniz. Örneğin, ana temanızın gerektirdiği bir şeyi yanlışlıkla sildiyseniz, dosyayı alt temanızdan silebilir ve baştan başlayabilirsiniz.

Umarız bu makale bir WordPress alt temasının nasıl oluşturulacağını öğrenmenize yardımcı olmuştur. WordPress temanızı en son standartlara göre nasıl test edeceğinize dair nihai kılavuzumuza ve ücretsiz ve premium WordPress temaları hakkındaki karşılaştırma yazımıza da göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

100 yorumBir Cevap Bırakın

  1. Hajjalah

    Thanks for this comprehensive guide. I would like to create a child theme using the plugin method but still have some not sure about some issues.
    Will the codes in the WPCode plugin take effect on the child theme? If the parent theme is updated but the child theme is not updated, Can’t they conflict to cause an error?

    • WPBeginner Support

      Yes the code in WPCode will appear on your child theme and if you update the parent theme there is a chance of conflict but it is not a guarantee.

      Yönetici

  2. Jiří Vaněk

    A child theme is always the first thing I create on a newly installed site. Although I try to use WP Code a lot and avoid problems, but the child theme is an absolutely brilliant thing when updating a template and can save a lot of trouble with lost code that disappears from the main template after an update.

  3. Asad

    Sir, what should I write in function.php to call the Parent theme?

    • WPBeginner Support

      You would want to use the code from our article below the text /* enqueue scripts and style from parent theme */ :)

      Yönetici

  4. Yogesh Sambare

    Hi, Team wpbeginner,
    Thanks for this awesome guide, now I think I’m able to make my themes child theme, and it’s really helpful for me .

    • WPBeginner Support

      Glad you found our guide helpful! :)

      Yönetici

  5. Ricardo

    The line:
    “wp_get_theme()->get(‘Version’) )”

    Should be:
    “wp_get_theme()->get(‘Version’) )”

    cheers!

    • WPBeginner Support

      While our comments automatically changed that in your message, we see the issue, thank you for letting us know :)

      Yönetici

  6. Rubb

    Can I delete the plugin after I create the child theme?

    • WPBeginner Support

      Currently, you can do that with the plugin :)

      Yönetici

  7. Eitan

    You need to add quotation marks to the Y = (“Y”) at the echo date, or you’ll get an error. – echo date(“Y”)

    • WPBeginner Support

      Thank you for pointing out the typo :)

      Yönetici

  8. Bomo

    So now that we have created a child theme, how do we update the parent theme when the child theme is activated?

    • WPBeginner Support

      You would update the parent theme as you normally would. For safety, you may want to create a backup before you update the parent theme in case there is a conflict somewhere.

      Yönetici

      • RYAD

        But do we have to activate the parent theme before we update and them desactivate it and reactivate the child theme ?

        • WPBeginner Support

          No, you can update the theme without it being active

  9. Mahesh Yadav

    One thing I want to know, if we make a child theme then we have 2 CSS files to load one parent theme CSS and second child them CSS. Wouldn’t it increase the site load time and It added one more CSS to load?

    • WPBeginner Support

      While the load time would technically increase, it shouldn’t be by a noticeable amount.

      Yönetici

  10. Nadia Shaheen

    Great work!
    stay blessed and keep sharing awesome content.

    • WPBeginner Support

      Thank you, glad you liked our content :)

      Yönetici

  11. Fahad

    Great Work !
    This site is super helpful :)
    Keep it up !!

    • WPBeginner Support

      Thank you, glad our article was helpful :)

      Yönetici

  12. Daniel Waduka

    I am just starting to use child themes, and this article has been of so much help to me.

    Thanks so much.

    • WPBeginner Support

      Glad our guide could be helpful :)

      Yönetici

  13. Marcos Flores

    Hi! i’ve been reading this article and it works! but i also read wordpress documentation about this and they say this

    “Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php ”

    Should i use both method? or if i user the function.php i dont need to write import function inside style.css (located in my child-theme folder)

  14. Khema

    Your instructions are missing a step with the functions.php creation. It should mention that needs to wrap the whole file. In this case I didn’t want to add the example you used and to another piece of code from the article you linked to. Naturally those codes didn’t include the php tag.

    Thanks for the article. It’s very very helpful.

  15. rReons

    So question. I was using my wordpress theme without any child theme and was doing all the changes in to it. I have created a child theme thanks to your guide and I’m using that now as the website theme.

    My question is both themes have the same modifications changes. If I update the main theme from now on, will the changes affect the child theme also?

  16. balu

    He! wpbeginner. Wordpress official site saying this. You need to update the post. Thank You!

    Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

  17. Pat

    Great info…you made it to my save list!! Thanks!

  18. Alfonso de Garay

    I have a Child theme with the theme latest version installed in my site. WP version 4.7.5. Received a notice that says WP version is available please update now.
    1. Do I have to backup my site again before updating?
    2. Do I have to create another Child theme using Child version 1 one?
    2. How can I change the Name, email and URL to Chile version 1

    • WPBeginner Support

      Hi Alfonso,

      WordPress updates normally do not affect your themes so you do not need to create another child theme. You should always backup your website before updating WordPress.

      Yönetici

  19. Lisa Bruce

    Hi, I can see that this video/post is a few years old, so I’m a little late to the party, but I have a questions I was hoping you could help me with.
    I am a relatively new to WP and just came to realize the importance of child themes. I have been working on developing a site for a friend and have made several changes to the theme that I am using. I found a bug in the theme and contacted the theme developer and they said that the bug had been fixed in a recent update.
    If I install the update I believe I will loose all my customizations. Is it too late to create a child them? Is it possible to do it now and then install the update? I prefer not to have to start from scratch.

    • WPBeginner Support

      Hi Lisa,

      If you know what changes you made and to which files, then first download a backup of your existing theme to your computer. After that, install the updated version. You can now create a child theme and then copy and paste the code from your customized version to the child theme.

      Yönetici

  20. Nell Yang

    Thank you for this helpful post. I have always been looking for a video to show me how exactly should I use child theme. It is quite time consuming that each time after I updated my theme, all my styles just went away. It is frustrating to do everything over again. I tried to read the documents from wordpress but still don’t know how to proceed after activate the child theme. Keep up the good work! Thank you again!

  21. Tony Agee

    Good instructional video. Most tutorials I have watched tell you to paste the code in the file but they neglect to tell you what medium to paste the code to. I was going to use Notepad++ but I guess you can use regular notepad.

  22. JP

    Hello, i just want to say that you are a very good writer, very clear and simple. I past a long time on your article for learn WP.

    Thank you!

  23. Rob Brooks

    Hi. Thank you for being a great WP resource. I am new to WP and really appreciate your guidance. I have followed the article to the letter but when I go to enable the child template on the site, I get the error “The parent theme is missing. Please install the “Real Estate Lite” parent theme. As you see I am using a free template called Real Estate light. it is located in the ../real-estate-lite/ directory of wp-content/themes. My code is below… did I do something wrong?

    Theme Name:   Real Estate Lite Child Theme
    Theme URI:    http://www.example.com/
    Description:  Real Estate Lite child theme
    Author:       me
    Author URI:   http://www.example.com
    Template:     Real Estate Lite
    Version:      1.0.0
    */
    @import url("../real-estate-lite/style.css");
    

    In addition, I will mention the theme was free and is running on WP version 4.7.2 (Running on Plesk). I created style.css file directly on the server so no FTP issues.

    I have already made significant changes to the parent style.css file as well as functions.php … I am not sure if this would affect this, but going to test on an unedited dummy domain to see if I get the same results

    Any guidance/assistance you can provide would be greatly appreciated.

    • WPBeginner Support

      Hey Rob,

      You will need parent theme to be installed on your site and Template value should match parent theme’s actual name which you can see in it’s style.css file.

      Yönetici

  24. Carrie

    Hi! Great article! I am finally starting to understand how to edit css so that I get the result I want, thanks to this article.

    Thanks much for the simplified explanation!

  25. Nalin

    I created a child theme & Using @import for the “style.css” on a child theme. Now I want to change in another css file of parent theme’s folder ….. /font_awesome/css/fontawesome.css
    Now, I want to know that where I will put my new fontawesome.css in child theme & how to use @import command.
    or any other process to use more css file in child theme.

  26. Rebecca

    So, I don’t have the wp content folder on my computer. What should I do?
    Should I have downloaded this at some point?

    • WPBeginner Support

      Hi Rebecca,

      The wp-content file is hosted on your hosting account not on your computer. You will need an FTP client to connect to your server.

      Yönetici

  27. Brad

    Using @ import is no longer best practice

    • SAppa

      Then what is the best practice now? You should be able to back up your comment.

  28. Jean-philippe

    I am learning so much since a few hours on your website. Everytime I search something in google related to “how to” in wordpress I find that the best information is here at WPbeginner. It is always well explained and easy to understand. I will always come back for information here without a doubt.

    • WPBeginner Support

      Hi Jean-philippe,

      Thanks for the kind words, we are glad you find WPBeginner helpful :) Don’t forget to join us on Twitter for more WordPress tips and tutorials.

      Yönetici

  29. Smart Rashed

    This is the article ,which i am looking for,thanks man.

  30. Kevin

    I know this will be a stupid question. I’m so new to this and have no skills at all. If I am creating a file, style sheet, etc. on my wp installation file on my local pc, how does that get onto my website? I guess I’m missing that? I use like 3 different PCs to work on my website and those local files aren’t on all of them. Again, I am sure I am missing something really dumb. Not seeing the connection.

  31. Francesco

    Hi there,
    I’m following your tutorial but WordPress (4.5.3) doesn’t recognise the new folder on my online server. How can I work around this?
    Thanks,
    F.

  32. Muhammad Moosa

    Helpful article indeed, I followed it and created a child theme. Thanks.

  33. Carolina

    Hi, thanks for the tutorial, very helpfull. But I have a question. Can I create a child theme from an already established website? I have a client who designed his own website but did not create a child theme. How to go about it?

    • WPBeginner Support

      If their current theme follows WordPress coding standards and best practices then you should have no trouble creating a child theme.

      Yönetici

  34. Mike

    Thank you so much for the article and video. Apparently since these were created WordPress has new best practices listed in their codex which is confusing me.

    “The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.”

    Do I stick with the steps you outlined herein verbosely, or do I omit the import function and create the PHP file, or do I implement both?

    My theme’s style.css file only contains a header so importing that file seems irrelevant, and there are multiple CSS files like main.css located elsewhere in the parent’s file structure. Not knowing any better as a beginner I have already made changes to main.css to achieve some of my goals and only now I realize the child theme is necessary.

    Any advice is greatly appreciated.

    Best regards,

    Mike

    • WPBeginner Support

      You will need to import at least your style.css file it should be in your parent themes main directory. It should automatically import other CSS files.

      Yönetici

      • Mike

        Even if the style.css has nothing but the header?

        • Jack

          If your style.css file do not have imports to other css styles, you can import them directly, just like style.css.

  35. Olamide

    Good day. When I did a live preview of the child theme, I noticed that it didn’t have the css of the parent theme. Maybe this is as a result of an error in the way I inserted the code?
    This is the code that I inserted:
    /*
    Theme Name: sparkling child
    Theme URI: https://www.wpbeginner.com/
    Description: sparkling child theme
    Author: djetlawyer
    Author URI: http://www.example.com
    Template: sparkling
    Version: 1.0.0
    */
    @import url(“../sparkling/style.css”);

    The parent theme is “sparkling”. If there is any error, please correct me.
    Thank you.

  36. lucia

    Hi there,
    I am trying to set up a child theme to activate my footer on twenty twelve, but I don’t know what code to use to set it up.
    I tried this webpage

    with various suggestions , and I have tried to change your suggestion as given on twenty thirteen , but I don’t succeed.
    Could you please give me the right working code for setting up a child them for twelve twelve.

  37. Leigh

    This was incredibly helpful – especially your HTML for us to copy. I’ve never been so excited to see colors change on a website before. This is easily the best “how-to” out there for this theme!

  38. Bhautik Andhariya

    Hello, I have tried same example that you shown. But my child theme is replacing all the style of its parent theme.
    It doesn’t have any style of it’s parent. What is the solution? Can you please help me? I am new in wordpress and i am learning it.

  39. Angelo

    Hi there!

    I’ve just installed the Bose template and also created a child theme for it. However, the following error message appears on the center of my website:

    Warning: implode(): Invalid arguments passed in /home/hello582/public_html/teste/wp-content/themes/bose/featured.php on line 12

    I’m a very beginner at websites creation, so I haven’t got any clue about what the problem is. Could anyone help me?

    Thanks a lot!

  40. Djamila

    Hi,

    Thanks for the article! I could not get my child theme to ‘appear’ in the template section and it turned out I indeed misspelled the way the original template was named. What a difference a capital makes, huh?
    However, now that I have my child theme I was able to update the parent theme and when I did all of a sudden I got an issue with a super important plugin ( I am building a review blog on a local database, for now and it’s the wrap up/grading plugin belong to the template designers).
    In the parent template they ‘upgraded’ this plugin. I personally prefer the old one, but okay…anyway…underneath my review you now see *both*, the old wrap up with grades and the new one, which looks out of whack too. I have de-activated and re-activated but it stays like that. Super annoying and I don’t know where to look to either keep the old one (prettier) or only the new one and outlines as should.

    Where should I start? Thanks for any help you can give me.

  41. Amanda

    Thanks for a great article!

    If I use a child theme, will I still be able to customize it using the Appearance> Theme Options that comes with my theme in the admin panel such as font size, background colors etc. or do I have to go the code route?

    If I have activated the Child theme and I use the Appearance tab to update the styling instead of using code, is it essentially still updating the parent theme because the related files are not in the child theme folder?

      • Amanda

        Thanks for your reply.

        So if I activate the Child Theme and use the settings in the Appearance tab of my admin panel to change the styling (instead of writing css code), my changes won’t be overwritten when I do a theme or Wordpress update on the parent theme?

        Would I still need to copy the stylesheet, header, footer files etc. to the child theme folder to make the scenario above work?

  42. Laura

    I’ve been following these (and other) steps to create a child theme based on twentytwelve. The issue I’m running into is that wordpress seems to ignore only some of the css I’ve changed from the original theme and it’s driving me nuts. For example, I’ve successfully changed the background colour of the menu, but it simply won’t let me change the text colours of anything. I’ve used your approach of editing it in chrome’s code inspector thing (which worked great, the colour got changed, suggesting my code was correct) and pasting the changed code into the style.css of the child theme, but it doesn’t seem to get picked up at all. I don’t know what to do about this, any insights would be very welcome!

  43. Boyet

    Thank you very much for this tutorial. I don’t have problem editing my child theme’s stylesheet, header, and footer files.

    My question is, what will I do if I wanted to change something in a file located in my mother theme’s folder like: public_html/wp-content/themes/shopera/woocommerce?

    Do I need to create the same path in my child theme?

    Thanks in advance…

  44. Tony Arnold

    Very helpful and largely understood and executed.
    I am trying to make my header image full width.My theme doesn’t ‘allow’ this as standard so do i change the file?
    Thank you

  45. Sohail Farooq

    Love this article I tried and got it worked at once.

  46. Xander

    Hi, there!

    It seems I have got stuck a little bit. I have already made some changes in the some .php-files (e.g. header.php, footer.php and so on) of my parent theme without having a child theme installed.
    Now I want to create a child theme because updates of the parent one have been coming. What should I do with all those already modified files? Should I copy them in the child theme’s directory? What are folder I need to have it it? Should I create the same folders that the parent theme has got for the child theme?

    Thank you,

    • WPBeginner Support

      You don’t need all the folders of your parent theme. You just need to recreate the files where you have made changes. We have a tutorial on how update themes without losing changes. It has a section where you can find out which files you have modified in your theme and what changes you have made to them.

      Download a fresh copy of your parent theme on your computer. Download the old theme to your computer and then upload the fresh copy. After that create a new child theme. Copy the files where you have made changes from the fresh theme to your child theme. Copy the changes you have made in the old theme files into the files of your new child theme.

      It would take some troubleshooting before you get it right. So we strongly recommend you to backup your site first. If possible test your changes on a local WordPress install first.

      Yönetici

      • Xander

        Thank you. Could you please give me a link on the tutorial mentioned?
        There is another obstacle – I have changed functions.php file, how can I reconcile both of them in the parent and child themes?

  47. Chris

    Can I load and install my new child theme on another site? If so how?

    Thanks!

    • WPBeginner Support

      Download your child theme to your computer. Create a zip file containing the theme folder. Go to the admin area of another site and then visit Appearance » Themes. Click on the add new theme button and then click on the upload button. Upload the zip file you created earlier. WordPress will extract and install your child theme.

      You will also need to install the parent theme as well.

      Yönetici

  48. Daniel Garneau

    Hello,

    I find this tutorial very useful to learn how to create a child theme. But in the process I made the following ajustments. There needs to be two files in the child-theme directory. They have to be named style.css and functions.php.

    style.css must contain at least (supposing one is using the TwentyTen theme):
    @import url(“../twentyten/style.css”);
    Template: twentyten

    When I consulted the turorial on 2015-05-12, the “template: twentyten” line was in the comment block. It must be a command that can be read by WordPress.

    Also, there must be a functions.php file, and it has to have minimally the following line of command :
    <?php

    Your tutorial along with the wp codex, helped me creating my first child theme. Thank you.

  49. Maria

    Is it safe to say that the changes I made in the custom css field can be placed into my child’s theme style.css?

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.