- Use a child theme so that layout modifications are not lost when the main WordPress theme is updated.
- Utilize the Additional CSS feature or a custom small plugin to safely insert extra code.
- Always back up your data and ensure error-free code writing to prevent site errors.
Ever changed colors or added code directly in a theme, only for everything to disappear after an update? That happens because a theme update overwrites the original files. There are two solutions: a child theme and a small plugin for your code.
What is a child theme?
A child theme is a “child” theme that inherits all the appearance and functionality of the parent theme, but saves your changes in a separate folder. When the parent theme is updated, your changes remain safe.
Creating a simple child theme
In wp-content/themes/, create a new folder, for example temaku-child, then populate it with two files.
1. style.css
/*
Theme Name: Temaku Child
Template: temaku
Version: 1.0
*/
/* CSS tambahan Anda di bawah ini */The Template value must match the parent theme’s folder name exactly.
Read also Securing WordPress Login: Passwords, 2FA, and Attempt Limits
2. functions.php
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array( 'parent-style' ),
wp_get_theme()->get( 'Version' )
);
} );Activate Temaku Child in the Appearance, Themes menu. Some modern themes already enqueue their own styles, so if the design looks strange, check your theme’s documentation.
For minor CSS: Additional CSS
If you only want to change a few colors or spacing, you don’t need a child theme. Use Additional CSS in the Customizer (or Site Editor for block themes). It’s quick, safe, and easy to revert.
For PHP code: your own small plugin
PHP code related to site functionality (rather than design) is better placed in a plugin, because it keeps working when you switch themes. Create a folder named wp-content/plugins/kode-situs-saya/ containing a single file named kode-situs-saya.php:
<?php
/**
* Plugin Name: Kode Situs Saya
* Description: Kumpulan kode kecil khusus situs ini.
*/
// Contoh: tampilkan 150 kata pada ringkasan artikel.
add_filter( 'excerpt_length', function () {
return 150;
} );Activate it from the Plugins menu. Add subsequent code snippets one by one in the same file.
Read also Speeding Up WordPress Without the Hassle: 7 Most Impactful Steps
If the screen goes white after adding code
The most common cause is a typo (such as forgetting a semicolon). Don’t panic:
- Open File Manager or FTP.
- Rename the folder of the plugin (or child theme) you just created.
- Reload the site. WordPress will revert to the previous theme or plugin.
- Fix the code, then activate it again.
Good habits
- Back up before adding code.
- Write a brief comment about the purpose of each code snippet.
- Test on a staging site if your site already has heavy traffic.
Frequently Asked Questions
Why do my custom codes disappear after updating my WordPress theme?
When you update a theme, the system overwrites the original files, which erases any direct code modifications you made. To prevent this, use a safe way to add code in wordpress, such as a child theme or a dedicated site-specific plugin.
What is a child theme and how does it protect custom designs?
A child theme inherits the appearance and functionality of your parent theme while storing your custom changes in a separate folder. This is a safe way to add code in wordpress because updates to the main parent theme will not overwrite your personal CSS modifications.
How can I safely add minor CSS changes without using a child theme?
If you only need to adjust a few colors or spacing elements, you can use the Additional CSS section inside the WordPress Customizer or Site Editor. It provides a fast, safe way to add code in wordpress that is easy to revert.
Where should I place custom PHP functionality snippets?
PHP code related to site functionality should be placed inside a small, custom-built plugin rather than theme files. This ensures your modifications remain active even if you decide to switch your website theme in the future.
What should I do if my WordPress screen turns white after adding code?
Do not panic if a syntax error causes a white screen. Access your site via File Manager or FTP, temporarily rename the folder of the plugin or child theme you just modified, and the site will instantly revert back to normal.
Hi everyone, I'm Ari, a Blogger from Indonesia. Always learning new things, trying them out and putting them into practice right away. Everything is difficult without practice, bro. You always have to be creative and innovative.