How to Retrieve Deleted CSS from the WordPress Customizer

As of 2024, WordPress powers about 40% of all websites on the internet. This makes it one of the most widely used platforms for website development. With such a large user base, it’s no surprise that there are hundreds of thousands of WordPress developers in the market, working to support these websites. We frequently write about WordPress tools and tips that help users streamline their daily tasks, save time, and better understand the workflow behind the WordPress systems.

WordPress offers a variety of ways to customize CSS, such as using child themes, editing theme CSS files (though not recommended), utilizing plugins that inject styles and scripts, and, of course, using the Customizer itself. In this post, we’ll dive into Additional CSS in the WordPress Customizer—a feature often used by developers to write custom styles specific to a site’s active theme.

While we will cover the various methods of adding CSS to a WordPress theme in a separate post, this article will focus specifically on how to use the Customizer’s Additional CSS option effectively, as well as how to recover lost or deleted CSS styles, in case something goes wrong.

Advantages and Disadvantages of Customizer CSS

The WordPress Customizer provides a simple and effective way to apply custom CSS. Here are the main benefits and potential drawbacks of using the Customizer for CSS:

Advantages:

• Real-time Preview: You can write and preview your changes in real time, which makes it easier to see the impact of your customizations as you go.
• Ease of Use: It’s easy to add and deploy styles directly from the Customizer without needing access to theme files or additional tools.

Disadvantages:

• Loss of Styles with Theme Switch: One major downside is that if a developer tests another theme by activating it temporarily, the custom styles added through the Customizer are lost. When the theme is switched back, those styles won’t automatically be restored. This can cause frustration, especially if the styles were extensive.

In this post, we will walk you through how to recover deleted CSS from the WordPress database, so you don’t lose your custom styles if they get wiped out by a theme switch.

Retrieve From The WordPress Database

Here’s a step-by-step guide on how to retrieve those styles.

Step 1: Access the WordPress Database

First, make sure you have access to the database of your WordPress site. You can typically do this through phpMyAdmin or any another MySQL GUI client.

Step 2: Locate the wp_posts Table

Once you’ve logged into your database client, look for the table named wp_posts. (Note: The table prefix wp_ can be different if you changed it during installation, so it may be something like {your_prefix}_posts).

Step 3: Filter the Relevant Record

Now, you need to search for the post that corresponds to your theme. In the wp_posts table, look for the row where the post_title matches your active theme’s name. For instance, if your theme is named “dotsperpixels”, you’ll look for the blog name in the post_title column.

To filter the records, you can run the following SQL query:

SELECT * FROM wp_posts WHERE post_title='dotsperpixels';

This will return all entries for the theme named “dotsperpixels.”

Step 4: Retrieve the CSS Content

Look through the query results and locate the latest entry for your theme. Once you find it, copy the value from the post_content field. This field contains the custom CSS you added through the Customizer.

Step 5: Paste the CSS Back into the Customizer

Finally, paste the copied CSS content back into the Additional CSS section of the WordPress Customizer:

1. Go to the WordPress Dashboard.
2. Navigate to Appearance > Customize.
3. Click on Additional CSS.
4. Paste your recovered CSS and publish the changes.

Note:

In the example screenshots shown above, I’m using phpMyAdmin to interact with the database, but the same process can be followed using any MySQL GUI client.

Conclusion

While using the WordPress Customizer to add custom CSS is convenient and effective, there are risks involved, particularly when switching themes temporarily. If your custom CSS is deleted during a theme test, you can easily retrieve it from the WordPress database by following the steps outlined in this guide.

By knowing how to recover lost CSS styles, you can avoid the headache of rewriting them and ensure your customizations stay intact, even when testing new themes. Do let us know if the above solution worked for you or any other ways, that you have found to retrieve the custom CSS, in the comments below.

Stay tuned for our upcoming post where we’ll explore other ways to customize CSS in WordPress, from child themes to plugin-based solutions. Until then, happy customizing!

Image Credit : Photo by Markus Winkler on Pexels.com