The default theme when installing WordPress, “Twenty Twenty-One,” can sometimes interfere with customizations due to its inline CSS. When trying to adjust the theme’s CSS, these inline styles may prevent your changes from being applied correctly.
In this article, we will show you how to remove the inline CSS output by the WordPress “Twenty Twenty-One” theme.
What is the “Twenty Twenty-One” Theme?
When creating a blog or website with WordPress, one of the first themes you encounter is “Twenty Twenty-One.” This theme is simple, easy to use, and widely adopted across many websites. However, when customizing it, you may run into issues where your changes do not work as expected. One common problem is that CSS modifications are not applied correctly.
Why CSS Changes Are Not Reflected
The main reason for this issue is the inline CSS that is automatically output to the page. Because styles like the following are embedded in the page, your custom CSS may not override them, preventing the desired design changes.
<style id='twenty-twenty-one-style-inline-css'>
body,input～
</style>
Therefore, it is necessary to remove this inline CSS.
How to Remove Inline CSS
The solution is to delete this inline CSS. You can do this by adding the following code to the theme’s functions.php file:
/* Hide inline CSS added to the HTML page */
add_action( 'wp_enqueue_scripts', function() {
$styles = wp_styles();
$styles->add_data( 'twenty-twenty-one-style', 'after', array() );
}, 20 );
This code customizes how WordPress loads stylesheets. The key point is to correctly specify the identifier ‘twenty-twenty-one-style’. If this is incorrect, the inline CSS will not be removed.
Conclusion
The “Twenty Twenty-One” theme is a great way to learn the basics of customization. By using the method introduced here, you can solve the issue of CSS changes not being applied and create your own unique design. Let’s continue to explore the fun of building websites with WordPress together!
※ Please use this method at your own risk.
