How to create and customize a wordpress child theme — smashing magazine

The wpuonline.com Business & eCommerce plans enable you khổng lồ make many changes to your theme’s appearance using custom CSS and khổng lồ build upon its mặc định functionality usingthird-party plugins. If you’d lượt thích lớn go further and make changes khổng lồ your theme’s underlying code, then you could consider creating a child theme.

Bạn đang xem: How to create and customize a wordpress child theme — smashing magazine

What is a Child Theme?Creating a Child ThemeCreating a Child Theme ManuallyCreating Child Theme Using Child Theme ConfiguratorMaking Changes to lớn Your Child ThemeSupport for Your Child Theme

What Is a Child Theme?

A child theme is a theme that inherits the functionality & styling of a parent theme.

To use an analogy from Kathryn Presner’s talk onGetting Comfortable with Child Themes: Think of a parent theme as a master recipe for brownies. You could create a child recipe called nutty brownies that inherits all of the ingredients and steps, but with the addition of nuts.

Below you’ll find screenshots of two themes in our repository, Edin & Goran. Goran is a child theme to lớn Edin, you’ll see that Goran inherits much of Edin’s kiến thiết & has its own additional customisations.


*
Edin is a parent theme khổng lồ Goran.
*
Goran is a child theme of Edin.

↑ Table of Contents ↑

Creating a Child Theme

To use child themes with a wpuonline.com site, you’ll need khổng lồ first install wpuonline.com locally on your computer. After you’ve created your child theme locally, you can then zip it up & upload it to your wpuonline.com Business site.

An alternative khổng lồ manually creating your child theme is khổng lồ make use of a plugin that will create your child theme for you (for example Child Theme Configurator). Search the plugin repository for “child themes” to lớn browse through your available options.

Please note: You can tải về a copy of free themes in our collection at the bottom of each wpuonline.com showcase page. Look for the download link:

*

It is not possible to lớn create a child theme of a theme that is already the child of another theme.

We cannot provide files for premium themes.

↑ Table of Contents ↑

Creating a Child Theme Manually (Business Plan or eCommerce Plan)

For the example below, we’re going lớn be using the Twenty Seventeen theme.

Step 1.

Search and tải về your theme file from the wpuonline.com.org repository here. Once downloaded, double-cliông chồng on a Mac & that will extract the thư mục. Or if you’re on Windows, right-cliông xã and “Extract all.”

*

Step 2.

Create a new folder và give sầu your child theme a name, for example, ‘twentyseventeen-child’.

It is recommended that the name of your child theme directory is appended with ‘-child’. Make sure that there are no spaces in your child theme directoryname.


*

Step 3.

Copy and paste the style.css andfunctions.phpfiles from your original parent theme (twentyseventeen) inlớn your new child theme (twentyseventeen-child).


*

*

You need to change the following lines to include the parent folder name in order lớn show that this particular theme will be its child.

– Theme name– Description

You should keep the following fields as they are:

– Template– Text domain

The other fields are optional but not required. You can read more about what they are forhere.

The template line should contain the folder name of your parent theme. Make sure to lớn save sầu this file after the changes have been made.

*

Step 5.

In your new child theme, open up your functions.php file using the same text editor. Empty the file by clicking command+A > delete on Mac (CTRL+A > delete on Windows).

Xem thêm: Hỏi Không Hiện Ảnh Đại Diện Trong Bài Viết Wordpress ? Cách Tạo Ảnh Chức Năng Cho Bài Viết Wordpress

Afterward, copy & paste the below code & replace the‘$parent-style’ value with the name of your theme with a -style added (in this case it’s twentyseventeen-style).

Make sure lớn save sầu this file after the changes have sầu been made.


get("Version") );}add_action( "wp_enqueue_scripts", "my_theme_enqueue_styles" );

*

Step 6.

Now we need to lớn zip up the folders.

OnWindows:

Locate the tệp tin or thư mục that you want to zip.Press và hold (or right-click) the file or thư mục, select (or point to) Skết thúc to lớn, & then select Compressed (zipped) folder.

A new zipped thư mục with the same name is created in the same location. To rename it, press and hold (or right-click) the thư mục, select Rename, and then type the new name.

On Mac:

Locate the items tozipin theMacFinder (file system)Right-cliông chồng on a tệp tin,folder, or files you want tozip.Select “Compress Items”Find the newly created .ziparchive sầu in the samedirectory.

Step 7.

If you have a wpuonline.com Business or eCommerce plan, you can upload your custom theme by going to lớn My Sites → Appearance → Themes, then use the Upload Theme button. Upload both your parent theme & your child theme and activate your child theme.

To see details on how khổng lồ upload a custom theme click here.

↑ Table of Contents ↑

Creating Child Theme Using Child Theme Configurator (Business Plan or eCommerce Plan)

Download and install the plugin here:https://wpuonline.com.org/plugins/child-theme-configurator/. To see more on installing pluginscliông chồng here.

Please note that Child Theme Configurator is a third buổi tiệc nhỏ plugin & support for this plugin can be found và submitted here: https://wpuonline.com.org/support/plugin/child-theme-configurator/

Once installed go khổng lồ Tools > Child themes

Step 1 – Select a parent theme.

Step 2– Hit Analyze. This checks that the parent themes are using wpuonline.com standard practice và that there’ll be no surprises with yourtheme.

*

Step 3–This is the nameof the directory/thư mục that is housing the theme in your site.

Step 4– Select where you’re saving your styles. It’s recommended that you select the default primary stylesheet style.css option

*

Step 5– Select the parent theme stylesheet handling option, this determines how your child theme will use the styles of your parent theme. It’s recommended that you use the wpuonline.com style queue option.

Step 6– Customize the child theme name, description, author and version. This where you enter in your themes credentials that will appear in your style sheet CSS.

*

Step 7– Copy parent theme menus, widgets và customizer settings. If you’ve sầu been setting up your parent theme in the Customizer, this option will copy over those settings into lớn your new child theme.

*

↑ Table of Contents ↑

Making Changes to lớn Your Child Theme

We always recommend making changes to your theme away from your live site – please see the following methods below.

Xem thêm: Cách Xem Số Lần Người Khác Vào Facebook Của Mình, Đơn Giản Nhất

↑ Table of Contents ↑

Support for Your Child Theme

Knowledge of HTML and PHPhường. is needed in order lớn make changes via a child theme. The wpuonline.com tư vấn team will be happy to help point you in the right direction or offer alternatives to a child theme (if they exist). More advanced HTML & PHP falls outside the scope of support. If you require more advanced help, you could consider hiring a web designer or contacting your theme’s author directly.


Chuyên mục: Theme wordpress