What Must Be Included in style.css and functions.php for WordPress Child Themes? A Complete and Rigorous Practical Tutorial

In WordPress website development and theme customization, usingChild Theme This is the officially recommended best practice. By using child themes, you can freely adjust styles and functionality without modifying the parent theme's source code, preventing custom content from being lost when the parent theme is updated. However, many users are unaware of this when performing the operation. Which content must be written in style.css and functions.php?This article will focus on this core theme, emphasizing the essential content, recommended writing practices, and common pitfalls for these two key files within the child theme. It aims to help you correctly create and utilize child themes.

1. What is a WordPress child theme?

1. Definition of Child Themes

subthemeanThemes that depend on parent themes to runIt can inherit the parent theme's:

• Template files (such as header.php, single.php)
• Style Sheet (CSS)
• Function Logic (Code in functions.php)

At the same time, it allows you toOverride or extend in the child themeThis content.

2. Why use child themes?

Directly modifying the parent theme files will cause the following issues:

• After updating the parent theme, all modifications were lost.
• Not conducive to maintenance and debugging
• Prone to causing compatibility issues

while usingsubthemeThe advantage lies in:

• The parent theme can be safely updated at any time.
• All custom content is centralized in the child theme.
• More compliant with WordPress official development standards

Whenever you plan to modify the theme, you should use a child theme.

II. Minimum Usable Structure of Child Themes

A child theme that can be properly recognized and activated by WordPress,Theoretically, only one file is required.::

your-child-theme/ └── style.css

However, in actual development,Almost all of them will use functions.php simultaneously.::

your-child-theme/ ├── style.css └── functions.php

The reason is:

• Should the parent theme be loaded?typedepends on the implementation of the parent theme itself
• To ensure compatibility and the order in which styles are loaded, style management is typically handled within the child theme.
• Whenever any functionality needs to be added, functions.php must be used.

Summary of Responsibilities for style.css and functions.php::

filename	Is it necessary?	primary role
style.css	be	Declare child theme identity, write CSS
functions.php	No (strongly recommended)	Control style loading and add functionality

• Without style.css, the child theme cannot be recognized.
• Whether functions.php is required depends on the parent theme and actual needs.
• In the vast majority of projects, both files are used simultaneously.

III. What must be included in the child theme's style.css?

1. The core function of style.css

In the child theme,style.css There are two main functions:

1. Declare to WordPress that this is athematic
2. Store the child theme's own CSS styles

Among them.The subject declaration information is required.Even if you don't write any CSS for now.

2. Required theme header information in style.css

WordPress via style.css Use the comments at the top of the document to identify the subject.

Minimal Required Writing

/* Theme Name: My Child Theme Template: parent-theme-folder */

Theme Name and Template are child themes.indispensableField, Field Description:

• Theme NameThe name of the child theme displayed in the WordPress admin panel. It can be customized but must be unique.
• TemplateFolder name of the parent theme (not the theme display name). If this field is entered incorrectly, the child theme will not function properly.

3. Recommended Complete Theme Header Information (Best Practice)

While these fields are not all required, they are highly valuable for tutorial websites, team projects, and long-term maintenance.

/* Theme Name: My Child Theme Theme URI: https://example.com/my-child-theme Description: A child theme developed based on the XX parent theme Author: Your Name Author URI: https://example.com Template: parent-theme-folder Version: 1.0.0 */

The functions of each field are as follows:

• Theme URIURL of the theme introduction or description page (optional)
• DescriptionBrief description of the subtopic for management and identification purposes.
• Author: Theme Author Name
• Author URIAuthor's homepage or company website address
• VersionChild theme version number, for easier maintenance and updates later on.

4. Write styles in style.css

Below the theme header information, you can directly write CSS:

body { background-color: ##f5f5f5; }

Something to keep in mind:

• Child theme's style.css Will not automatically load parent theme styles
• Whether the parent theme's styles take effect depends on whether the parent theme has correctly enqueued the style sheet.

5. Practices to Avoid in style.css

The following practices are no longer recommended:

• utilization @import Introducing parent theme styles
• Writing PHP code in style.css

Example of an error:

@import url("../parent-theme/style.css");

This approach may impact performance and potentially cause issues with the loading order of styles.

4. What must be included in the child theme's functions.php file?

1. Description of the Purpose of functions.php

subtheme functions.php For use in:

• Managing the loading order of parent and child theme styles
• Add or modify theme features
• Overrides behavior added via hooks in the parent theme

It is important to clarify that:Child theme's functions.php Will not override the parent theme's functions.phpInstead, it will execute after the parent theme has finished loading.

2. Is functions.php absolutely necessary?

Technically speaking:

• If the parent theme has already loaded the styles correctly
• And you don't need to add any features.

Child themes can function properly even without a functions.php file.
However, in actual projects, to ensure compatibility and controllability,It is still generally recommended to create a functions.php file.The

take	Is it necessary?
Only activate the child theme without modifying any content.	Not necessarily
Control the loading order of styles	need
Add any feature	necessarily
Business / Long-term Projects	urge

3. The most common and safest approach in functions.php: Loading styles

Below is one of the officially recommended and most compatible approaches:

<?php add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' ); function my_child_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) ); }

Description:

• get_template_directory_uri() Return to Parent Topic Path
• get_stylesheet_uri() Return to the child theme's style.css path
• Ensure correct loading order through dependencies

Before use,It is recommended to review the functions.php file of the parent theme.Confirm the location and loading method of its style sheet.

4. Common Extension Usage in functions.php

Add Theme Support

add_theme_support( 'post-thumbnails' ); add_theme_support( 'title-tag' );

Register Navigation Menu

register_nav_menus( array( 'main-menu' => 'Main Navigation Menu', ) );

Include other functionality files from the child theme

require_once get_stylesheet_directory() . '/inc/custom-functions.php';

5. Notes on functions.php

• Function names should remain unique and avoid conflicts with parentthematicor plugin conflicts
• In a pure PHP file,Recommended: Omit PHP terminatorto avoid output errors

V. Fully Functional Child Theme Example

style.css Example

/* Theme Name: My Child Theme Template: twentytwentyfour Version: 1.0.0 */ body {   font-family: Arial, sans-serif; }

functions.php Example

<?php add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' ); function my_child_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) ); }

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off