0

I'd like to understand if it's possible to edit some files on WordPress such as CSS files with external editor like Atom without need to reload page to see the changes just like it's possible with dev tools. I already have a child theme and some working external CSS files. Just want to know if I can edit them with live preview without need to wait for every reload of the page which takes quite long, a few seconds. Thank you!

P.S. I found this solution with jQuery and fetching MySQL data: https://github.com/sohaibilyas/fetch-data-without-reload

So now only need to understand how to call a certain WP page from MySQL directly from a PHP file connecting to the appropriate db and table. Thanks!

Dmitry
  • 29
  • 6

1 Answers1

1

Well, from my knowledge the ideal thing for this would be BrowserSync, but you'd have to implement a node process to run it and connect it to your Wordpress site in order for it to refresh each time a file with specific criteria is modified.

I am not sure if that's the ideal option for a production server though. What is it exactly that you want to achieve with this?

Mihail Minkov
  • 2,463
  • 2
  • 24
  • 41
  • Hi and thank you for your answer! My goal is very simple. I'd like to edit CSS in a comfortable external editor to see all the changes immediately as the file saves. I need this only in maintenance mode of my site when it's temporarily closed. – Dmitry May 22 '20 at 22:20
  • 1
    You could do that using BrowserSync, you just have to determine your reload conditions. – Mihail Minkov May 23 '20 at 02:20
  • If I'm correct, browser-sync will make the pages being edited to refresh every time when the file is saved. But since my WP reloads with a delay I'm wondering if there's any solution that could display the changes immediately like it works with dev tools? Otherwise It'd not worth such a solution because it would be easier to work with dev tools to change some CSS and see the result right away how it looks like and then copy and paste the code to the right file. Anyway, editing with dev tools is fast but has some mess for perception, that's why I asked if there could be an alternative. Thanks. – Dmitry May 23 '20 at 08:12
  • 1
    PHP runs on the server, so you can't display the changes immediately. – idleberg May 23 '20 at 16:48
  • 1
    @Dmitry developer tools run only in your browser. I believe there's a way to save the changes you do there, but in the end it always requires that you save the modifications in order for them to be displayed. In your wordpress do you use something like Visual Composer or is it a regular theme you're editing? Using a visual builder might be more what you are looking for. – Mihail Minkov May 23 '20 at 17:31
  • I use Elementor, but' like to have my CSS code to be organized in a separate files rather in Elementor widgets and to edit it using an external editor. But my problem with editing in that way is in the need of refreshing pages to be able to see CSS changes. I don't know if I can make some offload to my site so it could refresh the pages like plain HTML. The only way for me now is to edit in Dev Tools and copy created or modified CSS rules to the files, but it's very annoying process, that's why I thought about some specific solution. If there's no a working solution I'll try to ease my website – Dmitry May 26 '20 at 17:53
  • 1
    @Dmitry unfortunately that's the downside of visual builders such as Elementor, you are bound to what they give you. As for that last part you could check this thread https://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools – Mihail Minkov May 27 '20 at 16:50
  • Thanks for the sharing. So what'd you suggest in my situation is to lightweight my website so the pages could load fast so I then could use BrowserSync? I think it's not because of Elementor but because of bunch of plugins that I use. What is the best way to catch the most heavy source which overloads the page loading? Thank you. – Dmitry May 30 '20 at 20:50