WP finally live: How to edit style.css on the fly and live (Theme Editor?) and immediately see changes + caching - wordpress

I developed my WP WooCommerce shop locally with XAMPP and finally got around to upload my site.
1) How do you make edits to your CSS when the site is live and online?
Do you use Appearance > Theme Editor to make changes to your style.css file that is saved in your child theme or is there a plugin that is "better" than the default one?
Is there a shortcut for commenting lines out?
Or do you have an identical version locally that is synced to the uploaded version and do the edits locallly and upload the final edited style.css file?
I'm not sure what the best workflow is.
2) I find myself making changes and nothing happens on the live site. Do I have to clear the cache and than login again to get into my WP dashboard? Seems very tedious... I searched the forum and found that you can do something with this line
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
can someone elaborate how and where to use it? does it go into the functions file?

Use this line your functions.php
function yourthemename_style_nscripts(){
wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), time() );
}
add_action('wp_enqueue_scripts', 'yourthemename_style_nscripts');
otherwise,
open your functions.php then find your yourthemename_style_nscripts function then paste it.

Related

Custom Stylesheet/Scripts returns a 404 - Wordpress Theme

I'm bursting my brains out. I just can't figure out why my custom stylesheets/scripts won't load.
The stylesheet/scripts are properly enqueued (see below) but for some reason, if I load the stylesheet on my browser, or check in the browser console. it would return a 404
enqueued via
wp_enqueue_style('libraries', get_template_directory_uri() . '/assets/build/css/libraries.css');
wp_enqueue_style('site', get_template_directory_uri() . '/assets/build/css/site.css');
I have also checked file permissions, and theme and file folders are set to 770.
What do you think is the issue?
Try with get_theme_file_uri() like this:
wp_enqueue_style ( 'site', get_theme_file_uri('/assets/build/css/site.css'), ... );
Here the link to the documentation of this function:
https://developer.wordpress.org/reference/functions/get_theme_file_uri/

Wordpress functions.php file not working ...Undefined function 'wp_enqueue_style'

I don't know why I'm having this issue. I'm new to wordpress and I am following along with a 'freecodecamp' tutorial(youtube) on how to make a custom wordpress theme from scratch.
In the video, the instructor is enqueueing his style sheet using the functions.php file. Here is the exact code he is using...
Click here for code image
<?php
function followandrew_register_style() {
wp_enqueue_style('followandrew-bootstrap', get_template_directory_uri() . "/style.css", array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'followandrew_register_style' );
?>
Click here for error image
Visual Studios is prompting this error as soon as I write out the commands...
"Undefined function 'wp_enqueue_style', and undefined function 'add_action'.
I am including "wp_head()" inside my front-page.php to output the stylesheet.
Everything else is working fine. I am able to see my basic html setup when posting in inside the "front-page.php". My wordpress is connected correctly and I have access to the backend admin.
If I hardcode the path to the style sheet inside of front-page.php, it works fine.
So basically, any functions or commands I try to run inside the functions.php file are coming back undefined!
Nevermind, it looks like everything is working fine. I just had the wrong source path for the custom css link.
VS code is still displaying the undefined error but everything is working.
Best 5 hours Ive ever wasted :)

Wordpress determine which file is enqueueing script

In my Wordpress site, the "pure css" (purecss.io) framework is included in my header, and I want to get rid of it. I'm sure it was included there in wp_enqueue_script(), but for the life of me I can't figure out which file or plugin included it to remove it!!
I created a new theme and deleted ALL other themes.
I downloaded the entire wp-content/plugins directory and performed a search on the whole folder for the yahooapis URL, found nothing.
Anyone know what my next step might be? I need to get rid of it because it's causing some of my new styles to be messed up, and it's included at the bottom of the list of scripts.
Thanks!
You try the wp_dequeue_script() function.
https://codex.wordpress.org/Function_Reference/wp_dequeue_script
function purecss_dequeue_script() {
wp_dequeue_script( 'pure-css' );
}
add_action( 'wp_print_scripts', 'purecss_dequeue_script', 100 );

CSS Not properly Working in localhost

I’m using localhost for wordpress theme development by xampp server. When I change in my css file it not work instantly. Its work may be after 3-4 hours. css dynamically linking is ok. Wht’s the problem plz.?
Sometimes I have found that the browser will cache assets when running under localhost and make it appear as though updates are not taking effect. It's hard to tell from your description if this might be the problem, but try clearing cached images and files and see if that helps.
Sounds like you have some intense caching. In local development you can bust the cache with a different version numbers in your wp_enqueue_style call. Version number is the 4th parameter. In this example, we'll update the version number to be the current date/time of the latest change to the style.css file.
/**
* Proper way to enqueue scripts and styles
*/
function theme_name_scripts() {
$cacheBusterCSS = date("U", filemtime( get_stylesheet_directory() . '/style.css' ) );
wp_enqueue_style( 'style-name', get_stylesheet_uri(), array(), $cacheBusterCSS );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
This kind of dynamic version number is only for local development and is a bad idea for production sites when you want to leverage caching for better page load times.

WordPress - page content not updating in front-end

I have a problem with a WordPress site.
When I am trying to update page content or edit css file, changes not appearing in front-end. It looks like cache problem, but I empty my cache every time and nothing helps. I should wait some hours or try another browser to see changes that I've made.
I am not using any cahce plugins and don't know why content changes take so long to go live.
Please help me.
This is standart browser cache for CSS and JS files. You can reload page with CTRL+SHIFT+R buttons. If you want to display your new CSS for all users, you need to change the version of CSS-file in your theme. Read More: https://codex.wordpress.org/Function_Reference/wp_enqueue_style
I am facing this kind of issues these days too, what I do is, in the
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
in $ver i place php function time() it changes after every second, I think this technique is best for development purpose.
so the final enque will be
wp_enqueue_script( 'myscript', filesourse/file.js, array(''), time(), true );
for the style you can also use time() at the $ver position
wp_enqueue_style( 'mystyle', filesourse/file.css, array(''), time(), 'all' );
Hope this will work for you too,
If you have cache folder in your rootfolder rename it and try,because your all site configuration store that cache folder in root folder.

Resources