How to create a wordpress child theme: step

Are you looking lớn create a child theme in WordPress? Once you learn the WordPress basics, you probably want lớn learn how lớn customize your WordPress site. We believe that child themes are a great starting point for anyone looking to lớn customize WordPress themes. In this article, we will show you how to lớn create a child theme in WordPress.

*

Video Tutorial:


For those who don’t want khổng lồ watch the video clip, you can continue reading the article below.

Bạn đang xem: How to create a wordpress child theme: step

Why You Need lớn Create a Child Theme?

Child themes are considered the best way khổng lồ customize your WordPress themes. A child theme inherits all the features & appearance of its parent theme. You can customize it without affecting the parent theme. This allows you khổng lồ easily update parent theme without worrying about losing your changes.

You can learn more about child themes in our article What is a WordPress Child Theme? Pros, Cons, & More.

Requirements

A basic understanding of CSS/HTML is required, so that you can make your own changes. Some knowledge of PHPhường would certainly help. If you are good at copying and pasting code snippets from other sources, then that would work too.

We recommkết thúc you khổng lồ practice on your local development environment. You can move a live sầu WordPress site khổng lồ local VPS for testing purposes or use dummy nội dung for theme development.

Getting Started

Any good WordPress theme can be used as a parent theme. However, there are many different kind of themes và some may not be the easiest lớn work with. For the sake of this tutorial, we will be using Twenty Thirteen, which is one of the default WordPress themes.

Creating Your First Child Theme

First you need to open /wp-content/themes/ in your WordPress installation thư mục and create a new folder for your child thme. You can name this thư mục anything you want. For this tutorial we will be naming it wpbdemo.

*

mở cửa a text editor like Notepad and paste this code:

/* Theme Name: WPB Child Theme Theme URI: https://www.wpuonline.com/ Description: A Twenty Thirteen child theme Author: wpuonline.com tác giả URI: https://www.wpuonline.com Template: twentythirteen Version: 1.0.0*/
import url("../twentythirteen/style.css");Now save this tệp tin as style.css in the child theme folder you just created.

Most of that stuff in this file is self explanatory. What you really want to lớn pay attention lớn is the Template: twentythirteen.

This tells WordPress that our theme is a child theme & that our parent theme directory name is twentythirteen. The parent folder name is case-sensitive. If we provide WordPress with Template: TwentyThirteen, then it will not work.

The last line in this code imports our parent theme’s stylesheet khổng lồ the child theme.

This is the minimum requirement for creating a child theme. You can now go lớn Appearance » Themes where you will see WPB Child Theme. You need to lớn cliông chồng on activate button khổng lồ start using the child theme on your site.

*

Since you haven’t changed anything in your child theme yet, your site will use all functionality and appearance of its parent theme.

Customizing Your Child Theme

Each WordPress theme has a style.css file in their main directory. Mostly this is your theme’s main stylesheet where all the CSS goes. However, some themes may only have theme’s header information in it. Such themes usually have sầu CSS files located in a separate directory.

For this section you’ll need a bit of CSS know-how.

Google Chrome và Firefox come with built-in inspector tools. These tools allow you to lớn look at the HTML and CSS behind any element of a web page.

If you want khổng lồ see the CSS used for navigation menu, then simply take your mouse over to lớn the navigation thực đơn & right-cliông chồng lớn select Inspect Element.

*

This will split your browser screen in two parts. In the bottom part of the screen, you will see the HTML and CSS for the page.

*

As you move sầu your mouse on different HTML lines, Chrome inspector will highlight them in the upper window. As you can see that we have sầu navigation thực đơn selected in the screenshot above sầu.

Xem thêm: Đầu Số Tài Khoản Của Các Đầu Số Tài Khoản Của Ngân Hàng Vietcombank, Agribank

It will also show you the CSS rules related to lớn the highlighted element in the window on the right.

You can try editing the CSS right there to lớn see how it would look. Let’s try changing the background-color of .navbar to #e8e5ce.

Xem thêm: Hướng Dẫn Auto Click Nhiều Vị Trí, Auto Click Pro 2

*

You will see that the background color of navigation bar will change. If you like this, then you can copy this CSS rule & paste in your Child Theme’s style.css tệp tin.

.navbar background-color: #e8e5ce;Save the changes you made khổng lồ style.css file và then preview your site.

Repeat the process for anything that you would want lớn change in your theme’s stylesheet. Here is the complete stylesheet that we have created for the child theme. Feel free to experiment và modify it.

/* Theme Name: WPB Child Theme Theme URI: https://www.wpuonline.com Description: A Twenty Thirteen child theme Author: wpuonline.com tác giả URI: https://www.wpuonline.com Template: twentythirteen Version: 1.0.0*/
import url("../twentythirteen/style.css");.site-title padding: 30px 0 30px;.site-header .home-links min-height: 0px;.navbar background-color: #e8e5ce;.widget background-color: #e8e5ce;.site-footer background-color: #d8cdc1; .site-footer .sidebar-container background-color:#533F2AEditing The Template Files

*

Each WordPress theme has a different layout. Let’s look at the layout of the Twenty Thirteen theme. You have sầu header, navigation menus, nội dung loop, footer widget area, secondary widget area, & footer.

Each of these section is handled by different files in the twentythirteen folder. These files are called templates.

Most of the time these templates are named after the area they are used for. For example, footer section is usually handled by footer.php file, header & navigation areas are handled by header.php tệp tin. Some areas, like the content area are handled by multiple files called nội dung templates.

First you need khổng lồ vày is select the theme file you want to lớn modify and then copy it inkhổng lồ your child theme.


Chuyên mục: Theme wordpress