How to remove unused css in wordpress? - css

My page speed insights shows me to remove unused css what should I do?
Is there any plugin for wordpress to do so?
I am using worpress

the longer answer:
unused CSS is a curse in environments such as WordPress (or Joomla or Drupal or …) as each theme/ plugin adds CSS which covers all of the use cases where the plugin (or theme) can be used in. this means that each individual CSS-file on your site has a lot of code in it that isn’t strictly needed on a random page of your site (or may even not be needed on your site at all).
there currently is no way to automate the removal of unneeded CSS, but you might be able to get some improvement using e.g. “plugin organizer” to only allow plugins to work on specific pages) and by creating a child theme that only has the CSS needed for your site (you’ll have to dequeue the parent theme CSS though).
ALso you can use css and js minify wordpress plugin that can also help you to run your site fast.e.g
Fast Velocity Minify
WP Super Minify

Related

Why is it better to enqueue Google Fonts in Functions.php vs style.css in a WordPress theme?

I'm having trouble finding an answer to why it's better to enqueue Google fonts in the functions.php file vs adding #import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,800,900'); directly to the style sheet.
I read on one site that if you use the style sheet method the CSS file loads twice? That's bogus, right? Why is the functions method superior?
Enqueuing the style sheet in your functions.php is better just in case there might be another plugin that wants to use the same font. If it's properly enqueued using the wp_register_style() and wp_enqueue_style() functions then WP will only include the link once, no matter how many plugins want it. However, #import it yourself (or add the link manually to your header.php) and WP can't know about those, so it will get loaded more than once.
Of course, if you know exactly what resources your theme and plugins are using, and know that nothing else will want to load the same font, it doesn't really matter if you link to or import it manually!
WordPress has a large and strong developer community. Thousands of people all around the world design themes and plugins for WordPress. To ensure that everything works properly and that one plugin or theme doesn’t break another, WordPress has an enqueue script function. This particular function provides a systematic way of loading Javascript along with styles.
With the help of the wp_enqueue_script() function, you can easily inform WordPress the best time to load a script long with dependencies if any. Such a feature allows everybody to utilize the built-in Javascript libraries that come in a bundled form. It also helps in reducing the load time of page along with avoiding easy conflicts with themes and plug-ins.
Enqueuing scripts in WordPress also ensures that duplicates with the same handle are not loaded twice.

I need to change/remove some CSS call links from wordpress site

I need to change/remove some CSS call links. I can see them in View Page Source. How do I actually get to them to make the changes? In other words, where are they?
Might be This is because of cache plugin in WordPress site. Try to disable CSS minify setting from the plugin.
You can not change those links or remove it but after disabling minify setting you can modify your CSS. You can then find your correct CSS path in view source.
They are either in your theme or in plugins. Most cases it is in themes. open your theme search for the name...there will be a function enque_script with having those file names as parameter. comment the function which is including your unwanted file.

Material Design Lite: Is Installation on Wordpress possible?

Random and probably dumb question-can Material-Design-Lite blog template be fully installed on Wordpress? Downloaded the full template from http://www.getmdl.io/templates/blog/index.html and wondering how to use the entire file....
Thanks!
Sure it is possible! I actually was playing around with MDL and integrated it into WordPress. If you are interested you can grab it off GitHub:
https://github.com/braginteractive/MDLWP
Yes, you can absolutely make a Wordpress template using MDL. Helping you do that though... is a bit of a big task. Try looking for help around the web on just building Wordpress templates, then when are you working with HTML, use MDL classes and necessary attributes for components.
Yes. You'll probably want to do so by creating a new theme. The MDL templates provides static HTML, CSS, and Javascript. Wordpress requires PHP to dynamically add your content. You could approach this from two directions: modifying an existing theme or blank starter-theme to work with the CSS and Javascript, or adding the necessary php to the MDL HTML files (and making them php files).
You could also potentially add the MDL css and javascript through a child theme or plugin to use only select portions of it if you're not looking for a MDL Theme. At a minimum you'll need to add classes to the elements you want to affect, and watch out for potential conflicts.
Not sure of your level of experience, but here are some starting points.
Wordpress Codex on Theme Development
A tutorial on creating a theme from static html
A tutorial on including your css and javascript files
Write now there are two themes available for free
MDLWP - Free Theme and premium plugins available -
http://mdlwp.com/
Realistic - Free theme
https://wordpress.org/themes/realistic/

Prestashop changes to theme

I have been tasked with making a small design change (CSS) to a Prestashop site that used an off the shelf theme.
I know that in WordPress you can make a child theme to put your design changes in which is best practice.
Is there a similar method I should be using in Prestashop? Or alternatively is there anywhere in the dashboard I can put these changes?
If you're building from a default theme, then the correct way would be to go to Themes > Add New Theme > Create New Theme > Copy default-bootstrap and create a new theme.
There are no child themes in PrestaShop (any kind of inheritance system for themes would majorly complicate an already complex system). What you have is what you work with. If you bought a third party theme, then go modify it directly (modify .tpl files, modify global.css, etc.). IF you copied default theme, then work with your copy (just don't work with default theme, it may get updated).
An event better way would be to install compass and modify .sass files (that is the most correctest :D way).

Wordpress theme is taking no affect?

i want to make some changes into my wordpress css file. i downloaded the style.css and other css file via ftp and made all the changes into the codes i wanted to. I uploaded the files and replace it with the other files. I waited for some time to take it affect but nothing happened, i left it and open my site the other day but the things were still same, no changes. I was using the WP Minify cache plugin. I even deleted it and re upload the css files again but still no changes. I tried out so many things but no success.
I than changed the name of the theme main directory via ftp, it help me a bit and made me happy for awhile, all the changes appeared. I again needed some changes in css files but unfortunately again suffering the same process. Please help :(
P.S. No theme is taking the effects of modifications in the css files codes. i tried different themes, but same results. Even if i delete the style.css nothing happened, but when i delete the entire directory of that theme then blank white page appear on my website.
It doesn't sound like you activated the new theme from your administration panel.
http://codex.wordpress.org/Themes#Selecting_the_Active_Theme
When using any cache plugins you should delete its cache when you do any changes to the website. Have you already done that?
Are there any other css files being loaded after style.css that may alter what you are trying to change?
It's generally not a good idea to edit the themes style.css directly b/c when you upgrade that theme you will lose all of your customizations.
Doesn't your theme have some place for custom CSS? Some themes have it in Appearance >> Theme Options, or something of that nature. What theme is it? Do you have a framework, or child themes? More info needed ... but every theme has a spot for custom css; as was mentioned, it's not best practice to make your modifications in the actual main theme stylesheet, due to updates, etc. ... and anything in the custom css section overrides the default theme stylesheet.

Resources