Cancel

Sarah Gooding

Write CSS in the Customizer with the Advanced CSS Editor Plugin

photo credit: cutting in - (license)
photo credit: cutting in – (license)

Last year WordPress developer Hardeep Asrani and the folks at ThemeIsle released Custom Login Customizer, a plugin that allows users to design their own login pages in the customizer. Since that time core developers have made more progress on the customizer roadmap, allowing for more varied uses outside of a theme-related context.

Last week the ThemeIsle team debuted Advanced CSS Editor, a new plugin in its arsenal that demonstrates another exciting use for the customizer. It makes use of postMessage transport to offer live previews of CSS changes while a user is writing them in the customizer. The plugin also allows users to write CSS for different device screen sizes, including desktop, tablet, and mobile phones. The demo below shows a screen capture of the plugin in action on my test site:

edit-css

Seeing CSS edits updating in real time, instead of switching back and forth between a file editor and the frontend, was a refreshing experience. Having the ability to quickly write and preview media queries is also a convenient feature.

Although many core contributors are not fond of having a file editor in WordPress, the feature has yet to be removed. Using the Advanced CSS Editor plugin makes you wonder what the core file editor might look like in the customizer, at least for CSS files.

In the past, the customizer’s paint brush admin icon seemed like an ambitious stretch for a feature that, up until recently, felt clunky and slow to render previews. But recent advancements like selective refresh will help to make the customizer provide a true live preview experience.

The Advanced CSS Editor plugin is a good example of how fast previews can be in the customizer and how much of a better experience it offers over similar plugins that require multiple clicks to refresh.

Category:
Tags:
22

22 responses to “Write CSS in the Customizer with the Advanced CSS Editor Plugin”

  2. Can you not achieve the same thing by just using the element inspector in Chrome or Firefox?

      • Exactly , and in Chrome , the moment you hit refresh , everything is gone. ( It stays in firebug tho)

      • Which is not entirely true. There is one (or more) extensions around that gives you some kind of auto-save/auto-update mode.

        Haven’t used them for ages, though.
        It’s much easier for me to test stuff right in Firebug, then go on with copying it right out of the “styles” tab, and inserting it into my CSS. Much more control. Also much quicker results, as these auto-update features tend to make the browser work very sloppy.

        cu, w0lf.

        • No doubt, Firefug is way better than our plugin. But it’s a developer tool, and our is a plugin to add that CSS to WordPress and specify screen size, and is specially for non-coders.

          And not everyone uses Firefox, so if you will find a plugin which will allow Firebug changes to save, it won’t work on other browsers.

    • Yeah , i guess it will be a default feature judging by the fact it supports multiple scfeen sizes in the customizer ( which is also expected to be a native feature in 4.5)
      But the screen size feature can be a default itself , making it appear for every option separately. That said , this feature would be very useful.

    • Well, it will never be a default feature. Core team isn’t fond of such things. And for the screen sizes in 4.5, we will probably do something to make the experience better with it. Plus, we are working on adding a code highlighter to it. :)

  4. Cheers for the heads-up, Sarah, looks interesting. I’m going to guess this is for themes that don’t have a Custom CSS box as part of the Customizer already?

    • I think so – and the difference being that this is probably more tightly integrated with the customizer and, as @Punya said above, it works with the responsive sizes functionality of 4.5. Which is hot.

      • Excellent, look forward to trying be it. Though I have to say, the new responsive implementation by WordPress is kinda sucky when it comes to direct inserted YouTube links. The videos are tall and squished and look awful compared to previous version.

        And it’s not the theme, seeing this on all blogs I visited lately on mobile.

  6. well you can’t blame the feature to be ‘kinda sucky’ for that. Maybe the embedded video problem may be addressed in the latest update the
    ps – yes , the videos are sort of half-cut on smartphones and tablets sometimes.

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: