Level up your WordPress site building capabilities

The live CSS editor for learners and Pros

Achieve developer-level design control in seconds with Microthemer - the point-and-click live CSS editor for WordPress site builders.

Easily create CSS grid layouts, design responsively, integrate with your favourite page builder, use Sass, and get expert CSS help from the author of the plugin.

Buy now Live demo

Love it, or get your money back.
No questions asked.

Toolbar And Rulers
Make anything
responsive
CSS variables
& Sass support
Drag & drop
CSS grid layouts
Trusted Brands 4

Live CSS editing with HTML inspection

Your style edits appear on screen instantly with Microthemer, so you can make design changes in seconds. And to help ensure you always select the right element, Microthemer's HTML inspector displays the underlying HTML code for the elements you select. This unique feature makes Microthemer the best live CSS editor for real world projects, and the perfect tool to take your understanding of HTML and CSS to the next level.

Live Edit

Customize anything you can see on the page

With Microthemer's point-and-click to edit feature, you can restyle absolutely any part of any WordPress page, from header to footer. This includes Gutenberg (or classic editor) post and page content, custom posts, hard-coded theme or plugin content, page builder content - you name it. Microthemer works seamlessly with your favourite WordPress tools to give you developer-level design control in a few clicks.

Themes

The biggest selection of CSS styling options

Enjoy the largest set of CSS styling options provided by any WordPress CSS editor (150+). Choose from modern styles like animations, transitions, transforms, filters, flexbox, and CSS grid to web design essentials like typography, position, spacing, sizing, and backgrounds. The style fields will speed up your workflow significantly without sacrificing any control; you can switch back and forth between the style fields and the code editor as you please.

Styling

Drag and drop CSS grid controls

CSS grid solves age old web design problems with columns that don't vertically align, adapt to different screen sizes easily, or space apart without unwanted peripheral space. The only downside is the steep learning curve. But Microthemer's visual drag and drop controls bring the power of CSS grid to the masses. So you can create beautiful web layouts using CSS grid in seconds. It's so much easier than the old way it almost feels like cheating.

Interactive CSS Grid Demo

Grid

Quick and easy access to Google fonts

Save time and effort by visually browsing Google fonts without leaving the Microthemer interface. You can then insert the font you want with a single click. This dramatically simplifies experimenting with different Google fonts and ensures your site only loads the minimum fonts and variations needed for your design - no unnecessary font files.

Watch video demo

Fonts

Responsive design for mobile and tablet

Microthemer takes the pain out of responsive design. Some common breakpoints are provided to help you get started, but are entirely customizable. Use the responsive tabs or drag the top ruler to check how your site looks on different screen sizes, and then fix any issues. This feature is super useful for creating pixel perfect layouts on mobile - no need to settle for cropped/bunched up text or strangely large spacing and heading typography.

Responsive

Integrates with key page builders

Microthemer integrates seamlessly with page builders such as Elementor, Beaver Builder and Oxygen. You add content with your page builder, then style it with Microthemer - at the same time, using a single browser tab.

Some people handle the styling exclusively with Microthemer, while others use it for the final 20%. Needless to say, if you've never found your page builder's styling options to be limiting or repetitive, Microthemer probably isn't for you.

Plugins

Safe editing with draft mode

Try out a new WordPress design on your live site without worrying about site visitors seeing your work in progress. Draft mode changes will only be visible to you. Publish your style changes only when you are 100% happy with them. This is great if you're still testing out the various styling options. Draft mode provides a safe environment for applying bold new changes to your site, worry free.

Draft

Help and support whenever needed

We understand that you may need help making CSS changes from time to time. This is nothing to feel shy about. We want you to get the best possible results out of Microthemer and have fun using it. So please head over to our friendly and supportive forum if you get stuck with anything. You will receive help from Sebastian - the author of the plugin, and an expert on all things CSS and Microthemer related.

Support

Supports developers to work faster

Microthemer is not just a tool for non-coders. Far from it. Microthemer provides an extremely quick and convenient way to add custom CSS, Sass, and JavaScript code in the browser - the same place you add content using Gutenberg or a page builder.

Your code changes render on screen instantly - no need to switch between desktop applications, wait for Sass to compile, or compulsively refresh the browser. Plus, CSS selectors and media queries are defined in only one place to keep responsive development dry.

Coding

Supports beginners to become professionals

If you are new to building WordPress sites, do you always want to feel like a beginner? There is actually a risk of that with development tools that strive to completely shield you from the technicalities of site building. Microthemer is different. Microthemer shows you what it's doing, and invites you to understand CSS, and how it relates to HTML, in your own time. Because that's how you will achieve full design control, for real. That's how you will move from beginner to Pro, which is a very advantageous place to be.

Levels

More Features

  • Inspect and edit in one place with computed CSS reporting

    Microthemer reveals your theme's default styling so you can anchor style edits to this. For example, if a heading has a bottom margin of 12px you’ll know that setting this to 24px will double that space.
  • Export your designs between domains and easily backup your work

    You can export your design changes to a 'Design pack' at any time. This is useful for backing up your work, trying out alternative designs and transporting customisations over to another site.
  • Autosave and undo are there to help if you make a mistake

    Microthemer includes a revision restore feature. The past 50-300 actions that alter your workspace are remembered. So, if you make a few mistakes you can easily roll back to a previous point.
  • Clean, optimized code that won't slow your site down

    Surprisingly light-weight for such a powerful plugin. Unlike many other plugins, 95% of Microthemer's code does not run outside of the Microthemer interface so it won't slow down your site.
  • Includes a JavaScript editor with helpful error reporting

    Type some JavaScript code and hit the Control+S keyboard shortcut. Microthemer will reload the site and report any errors in your code so you don't have to fire up the browser console.
  • Deactivate or uninstall before handing over to the client

    If you don't want your clients to make changes with Microthemer, or you just like to minimise clutter, you can uninstall it and still keep the CSS changes you made with it.
Yearly
Lifetime
  • Black Friday Trial

    $ 0
    Unlimited sites
    No credit card
    No auto-renew
    Use until Black Friday
    Famously good support
  • Standard yearly

    $ 45 yearly
    3 sites (in total)?
    1 year free upgrades
    Pay annually
    Cancel / upgrade any time
    Famously good support
  • Developer yearly

    $ 90 yearly
    Unlimited sites
    1 year free upgrades
    Pay annually
    Cancel / upgrade any time
    Famously good support
  • Free month!

    Developer monthly

    $ 8.99 1st month $01st month
    Unlimited sites
    Ongoing upgrades
    Pay monthly
    Cancel / upgrade any time
    Famously good support
  • Standard lifetime

    $ 78
    3 sites (in total)?
    Lifetime upgrades
    One time fee
    Pay once, use forever
    Famously good support
  • Developer lifetime

    $ 399
    Unlimited sites
    Lifetime upgrades
    One time fee
    Pay once, use forever
    Famously good support
  • Free month!

    Developer monthly

    $ 8.99 1st month $01st month
    Unlimited sites
    Ongoing upgrades
    Pay monthly
    Cancel / upgrade any time
    Famously good support
  • Black Friday Free Trial

    Use Microthemer for free before Black Friday (Nov 27th).
    We've removed the credit card step so you can try the Developer plan without starting a subscription.

    We will email you near Black Friday to see if you want to grab the deal before it's gone!

Secure SSL encryption Pay with PayPal or credit card 30 day no questions money back guarantee Love it, or get your money back.
No questions asked.
  • A Game Changer December 3, 2019
    This is an amazing plugin that has changed my development workflow significantly. I used to create a custom functionality plugin with SCSS to override my themes CSS which was a slow process of trial and error. Now, I still create the custom functionality plugin, but I don’t have to create [...]
    Adam Henriksen
  • CSS (and JS) Tuning for Everyone! October 2, 2018
    I love this tool because it allows the experienced developer to quickly, easily and with almost zero impact be able to craft CSS solutions to design problems on top of Page Builders quickly and easily including a kind of IDE for CSS and even throw in some JavaScript for event [...]
    mikesale
  • Superb Styling Plugin July 24, 2017
    Microthemer has enabled me to gain complete control over appearance. After several months of use, I can get the look I want 90% of the time and this percentage is steadily increasing. It’s also a good learning tool. I combine it with GeneratePress and its addons – GP sets up [...]
    kevinphayes
  • Awesome plugin December 2, 2017
    This is one of the most important/one of the FIRST TO INSTALL plugin for me, when making a new WP install. It is great in many ways : -let’s you see your changes on the go (no need to save/exit/refresh) -creates CSS code – which is a big help, for [...]
    zholy9

Don't use PayPal?

We can create a stripe invoice for you.

Request a stripe invoice

Request a stripe invoice

Subscription FAQs

Will you refund me if I decide Microthemer isn't for me?

Yes of course. We will happily provide a no fuss refund within 30 days of your purchase if you decide Microthemer isn't right for your needs.

With the standard license, are domains transferable?

The only difference between the Standard and Developer licenses is the number of domains you can install Microthemer on. The developer license places no limit - you can install Microthemer on as many sites as you please.

The standard license permits installing Microthemer on 3 sites in total. So it's not possible to transfer site licenses between a rotating set of 3 domains. This is because it's a feature of Microthemer that you can completely uninstall it after making style edits, and still have the changes stick. See MTs Preferences > Inactive tab for more information on that. This is where Microthemer differs from most WP products - you don't need to keep it active on a domain in order to make use of it on that domain. As such, there would be little advantage of the developer license if the standard license allowed for domain transference.

Note: If you install Microthemer on a dev/staging domain, you can ask for it to be removed from your quota once the site is launched on the live domain. Just send us a quick message via our contact form.

What forms of payment do you accept?

Currently we only accept payments via PayPal on the website. If PayPal isn't an option for you, we can manaully create a stripe invoice for you. We will add a Stripe payment gateway to the website in the near future. Please let us know if that would be easier for you than PayPal.

Do you provide support for Microthemer?

Yes. We provide documentation and have an actively maintained forum where you can get free support. Please use it as often as you need to.

Microthemer FAQs

Will I lose Microthemer edits if I update my theme?

Your Microthemer styles are completely safe when you update your parent or child theme. That's the beauty of controlling styling via a plugin – plugins are not affected by theme updates. Microthemer restyles your WordPress site in a non-destructive way. It simply creates an alternative stylesheet:

/wp-content/micro-themes/active-styles.css

This stylesheet has style rules that the browser applies instead of the styles in your theme because they have higher CSS specificity. Microthemer doesn’t delete or modify any files in your theme. Therefore when you update the theme, nothing is lost.

Can I remove Microthemer and still use the CSS code it generates?

You can deactivate or completely uninstall Microthemer and still make use of the styles it creates by manually including the /wp-content/micro-themes/active-styles.css . To do this:

  1. Access the Microthemer interface
  2. Go to General > Preferences > Inactive.
  3. Copy the code from the textarea to your theme's functions.php file.
  4. This code will do nothing when Microthemer is active. But if Microthemer is inactive, it will add Microthemer CSS/custom JS to your site. It will also add page-id/slug classes to the <body> tag which you might have tapped into when using Microthemer. And any Google fonts you applied with Microthemer.
  5. Because the inactive code also ensures the right Google fonts and classes are included, we recommend this method over copying and pasting Microthemer's CSS code to your theme. But you can do that too if you prefer to use Microthemer as a simple CSS generator.
  6. Rest assured that when you deactivate or uninstall Microthemer, its settings will not be deleted from the database by default. There is an option for that on the Preferences > Inactive tab, but it's off by default. So if you ever want to go back and make further edits, you can just re-install Microthemer.
  7. You may ask "Is there any need to buy the developer license if you can deactivate Microthemer"? Yes, domain licenses are non-transferable precisely because of this deactivation feature. So with the Standard license, you can only install Microthemer on 3 domains in total. Once you've reached this quota, you will need to upgrade to the Developer license in order to install Microthemer on additional domains.

How can I see the code Microthemer generates?

You can view the CSS Microthemer generates at any time from the View > Generated CSS & JS option.

Do I need to know CSS/HTML code to use Microthemer?

No, Microthemer has been developed with an equal mind for non-coders and experienced CSS developers. That said, you will enjoy Microthemer more if you are willing to learn how to read a bit of HTML and CSS code, even if you always let Microthemer generate it for you. Learning how Microthemer makes the style changes to your site will enable you to be more proficient. A little bit of knowledge goes a really long way in that respect. To start with, you can just play around with the UI controls. But that might just give you a taste for more. If so, checkout the videos via the Help menu at the top right of the interface.

Close
NEW - Transforms & filters