How to remove inline CSS from post together in WordPress (WP)?
How to remove inline CSS from post together in WordPress (WP)?
By Prof. Fazal Rehman Shamil Last modified on October 5th, 2019
How to remove inline CSS from post together in WordPress (WP)?
Sometimes, we need to use inline CSS in our website pages. But in some cases, we need to remove inline CSS from all posts. In such cases, we need to change the CSS one by one in each post.
Code of removing inline CSS from WP Pages
PHP
12345
add_filter(‚the_content‘, function( $content ){ //–Remove all inline styles by fazal rehman shamil– $content = preg_replace(‚/ style=(„|\‘)(.*?)(„|\‘)/‘,“,$content); return $content;}, 20);
You can insert this code in functions.php file.
How to add Custom CSS to Elementor
Add Custom CSS to Elementor Free (best practices)
Elementor advertises itself as a no-code pagebuilder, but there are still times where a little extra CSS comes in handy. I frequently turn to CSS for things
Elementor advertises itself as a no-code pagebuilder, but there are still times where a little extra CSS comes in handy. I frequently turn to CSS for things like button styling, filter effects, and pseudo-elements.
And while Elementor Pro includes a handy custom CSS module, users of the free version of Elementor have to turn to 3rd-party solutions and workarounds.
Fortunately, it’s easy to add CSS to Elementor Free pages and layouts. There are several methods available, and two don’t even require installing a plugin.
Websites use inline CSS all the time. ‘Inline’ means the CSS rules are embedded in the HTML page itself, rather than pulled from a separate stylesheet. In fact, inline styles can be great for page speed, because you can load only the exact styles needed on this page.
When to use this method: This is best for one-off styles, used on a specific template or page. If you plan to reuse these styles most of your Elementor pages, consider a method.
How to embed CSS with the Elementor HTML Widget
Add an ‘HTML’ widget anywhere in your layout
Add <style> </style> tags
Write your CSS rules inside the <style> tags.
Add your CSS to the WordPress Customizer
WordPress now has its own area where you can add CSS code to your site. It’s hidden at the bottom of the CSS customizer, but works fine in a pinch. One advantage of having it in the customizer is you can see your changes live while you write your code instead of having to reload the page.
Use this method if: You plan to reuse styles and classes on multiple Elementor layouts, and you’re not already using another CSS plugin.
Adding CSS to Elementor using the Customizer
On the front-end of your site, go to Customize > Additional CSS
Add your code
1. Customizer > Additional CSS2. Add your CSS styles
Note: Elementor disables the admin bar while you’re designing, so you can’t access to Customizer until you close your Elementor layout.
Use a CSS Plugin
You might already have a CSS plugin installed on your site. Plugins like Simple CSS, Custom CSS Pro, and CSS Hero are great ways to keep your CSS separate from your theme. Most include syntax highlighting, and some even have code-completion or even automatic CSS writing.
Use this method if: You want your CSS code separate from your theme (the customizer CSS is theme-specific).
I frequently use a CSS plugin for my own sites, and I really like the live-view editing that shows your changes in real-time. Eventually, however, I tend to move more permanent CSS into my child theme or a separate custom stylesheet.
Recommended CSS Plugins:
These are all plugins that I have tested personally. Most are completely free, though the paid ones are way more powerful, because they essentially write the CSS for you.
Simple CSS (free) – This free plugin gives you all the core features you need, like syntax highlighting, live editing, and page-specific CSS (add custom CSS to any page or post).
Custom CSS Pro (free) – I use this plugin for many of my video tutorials (mostly because it zooms with the page for better legibility on small screens). It has an annoying quirk, however, that takes you back to the home page whenever you open it.
My personal pick would be Simple CSS. It has syntax highlighting and two skins (light and dark). But the most useful feature in this instance is the page-specific CSS, that is only enqueued for that specific page. This is really handy when adding CSS for a specific Elementor layout.
Enqueue a custom stylesheet (advanced)
If you’ve got some basic developer skills and are comfortable working with FTP or SSH, you can easily enqueue your own custom stylesheet that will be loaded on any Elementor layout.
Simply create a custom stylesheet in the root of your theme directory. For example, I’ll call it my-elementor-styles.css
Then we can enqueue it whenever Elementor styles are loaded using the elementor/frontend/before_enqueue_scripts hook.
You can put this code in your functions.php file, and it should fire only on pages built with Elementor.
Key Takeaways
While there are 4 basic methods to add your own Elementor styles, two stand out to me as the best options.
Embed CSS with the HTML Widget – If you’re writing one-off code that will only be used in a single Elementor layout or template, just embed it directly in the page. It will save precious milliseconds on your sitewide page speed scores.
Use a CSS Plugin – For CSS code that gets re-used, use a plugin like Simple CSS. Using a plugin is better than the ‘additional CSS’ section of the Customizer, because it’s not tied to your theme, and won’t break your styles if you switch themes.
The following filter will remove inline CSS generated by the Astra theme and Astra Pro plugin. Paste the following code into child theme’s functions.php file
The following filter will remove inline CSS generated by the Astra theme and Astra Pro plugin. Paste the following code into child theme’s functions.php file
IMPORTANT NOTE: This filter will remove all the inline CSS added by Astra which will affect the styling of your website.
function astra_force_remove_style() {
add_filter( 'print_styles_array', function($styles) {
// Set styles to remove.
$styles_to_remove = array('astra-theme-css', 'astra-addon-css');
if(is_array($styles) AND count($styles) > 0){
foreach($styles AS $key => $code){
if(in_array($code, $styles_to_remove)){
unset($styles[$key]);
}
}
}
return $styles;
});
}
add_action('wp_enqueue_scripts', 'astra_force_remove_style', 99);
Was this article helpful? Yes NoDid not find a solution? We are here to help you succeed.Open a support ticket
ClassicClassic AdvancedClassic CompactClassic Contact FormClassic SimpleClassic LocationsClassic Copyright & Social LinksClassic Blog
Modern Footers
ModernModern ButtonModern CleanModern Call To Action SimpleModern Useful LinksModern Background SimpleTop Social Links
Ecommerce Footers
Ecommerce ClassicEcommerce Classic 2Ecommerce ModernEcommerce Modern 2
Header Builder
In Porto 6.0, templates builder is newly added to create and modify the whole site including header dynamically using page builders. You can build the header dynamically in any layout using templates builder. After you create header, you need to set display condition where you want to display and select “Header Builder in Porto Templates builder” in Porto -> Theme Options -> Header -> Header Type -> Select Header to display it.
Footer Builder
In Porto 6.0, templates builder is newly added to create and modify the whole site including footer dynamically using page builders. With Porto footer builder, You can build the footer dynamically in any layout. After you create footer, you need to set display condition where you want to display and select “Footer Builder in Porto Templates builder” in Porto. And you are now limited more by your imagination than anything else.
Build your website with Porto
Porto Theme has been available on ThemeForest since 2015 and is one of the top sellers with more than 70K+ sales.
