How To Safely Modify WordPress Code Without Any Major Disasters?

Modifying your WordPress site’s code might seem simple at first, but it comes with risks that can ruin your site if not done correctly. This article will explore best practices for safely modifying your WordPress site’s code without losing your changes during updates.

1. Use a Child Theme:

Using a child theme is essential to preserve your changes during updates. Sometimes you might be tempted to ignore it, especially if everything works fine. I don’t see the need for a child theme if you don’t plan on changing the code, but believe me, the moment you change a single letter in the code, the child theme becomes indispensable. Plus, it only takes 60 seconds, so why not do it?

How to install a child theme:

• Install your main theme.
• Find the name of your theme in the themes folder, wp-content>themes>theme-name, and note it (case-sensitive).
• Use an online child theme generator. Personally, I use this child theme generator. Just input the previously noted name and get your child theme with a click of a button.
• Install the child theme via the WordPress dashboard: keep the old theme (parent theme) and install the one obtained from the generator. WordPress will automatically detect that it’s a child theme and that its parent theme exists. Don’t forget to never deactivate or delete the parent theme.

2. Avoid Directly Modifying WordPress Files:

Even with a child theme, it’s not recommended to directly modify the parent theme’s or WordPress’s files. After an update, all your changes will disappear, which would be really frustrating.

Although you can block updates with a small code in the wp-config.php file:

define('AUTOMATIC_UPDATER_DISABLED', true);
define('WP_AUTO_UPDATE_CORE', false);

or using plugins like Easy Updates Manager, I discourage this approach. Over time, some functions become obsolete, which can cause compatibility issues.

3. Modify Code in the Child Theme: The child theme gives you access to the functions.php and style.css files, where you can write your PHP functions and CSS styles. To access these files, go to Appearance > Theme File Editor, and select your child theme.

At first, modifying the code in the child theme might seem a bit complicated, but despite our experience in PHP and object-oriented programming, WordPress is still a code created by someone else, making it difficult to understand and modify.

Not to forget the fact that the logical thing to think of is directly changing on a PHP template (like a product page model or cart model), which we can’t do (because of the updates), so we call instead existing functions from the child theme and modify them, which kind of seems like a strange thing to do at first, like you’re rectifying your code, but it’s not your code, it’s WordPress code.

Note: For the cautious ones among you, if you fear breaking the site, I have two good news for you: one, WordPress doesn’t save PHP code with syntax errors, and it tells you where the error is; and two, if it gets saved and causes a syntax or compatibility error, you can access this file through cPanel, go to your file manager > wp-content > themes, and you will see your famous child theme folder. You can simply access the functions.php file and delete the code causing the error.

4. Create a Plugin:

Creating a custom plugin is a super effective method to keep your changes, even after WordPress updates. A plugin remains active and works independently.

Learning to create a plugin might seem intimidating, but it’s really simple if you follow a basic template. It’s a clean method to add fairly complex and substantial functionalities.

5. Change Style:

For minor style changes like colors and fonts, inspect the code elements, find the classes or IDs, and add your styles to the child theme’s style.css file.

Unfortunately, in most cases, it doesn’t work unless you add !important at the end of CSS properties:

.button-form {
    font-size: 18px !important;
    color: black !important;
}

This little word !important can save you a lot of time by forcing the browser to take your property instead of WordPress's.

6. Modify Text:

Sometimes, you want to change certain words or phrases without touching the backend. For this, the “Real-Time Find and Replace” plugin is ideal. This plugin modifies the HTML generated by WordPress without touching the PHP code. For example, to change the phrase “Powered by WordPress” at the bottom of the page, install the plugin, find the source text, and replace it with what you want.

Note: The plugin will be placed under Tools (and not Plugins) after installation, no idea why 😅.

I hope these little clarifications and tips have boosted your courage to integrate more code into your WordPress sites. Keep exploring and learning to make your sites even more efficient and personalized. Happy coding!