A visual theme editor for responsively customizing the appearance of any WordPress theme or plugin, with or without writing code.
Microthemer is a feature-rich visual design plugin for responsively customizing the appearance of any WordPress theme or plugin content (e.g. contact forms), down to the smallest detail. Microthemer caters for both coders and non-coders.
Main Features (for all users)
- Style anything on your web page, including headers, menus, sidebars footers, and plugin content.
- Intuitive visual editing.
- Over 100 style options at your disposal e.g. Google Web Fonts, background color, font-family, CSS3 gradients, drop shadow etc. Pro-only styles include animation, transition, and flexbox.
- Design responsively without the usual headaches. Preview your site at different screen sizes and apply media queries styles without writing code.
- Export your designs as a zip file. For sharing with friends, or transferring between domains.
- In-program docs so you can learn about CSS, or refresh your memory.
- History feature, so you can go back if you make a mistake.
- Draft mode, so you can try new designs on a live site without affecting what visitors see until you're ready to publish.
- Apply styles per-page or globally.
- Apply :hover states an any other pseudo selector like :nth-child() without having to remember the syntax.
- Advanced color picker for sampling colors from your theme and creating custom palettes.
- Import CSS media queries, selectors, and styles from any stylesheet into Microthemer's GUI.
- Light-weight. Microthemer generates CSS. It doesn't try to do much more than that.
- Nonce security to help keep things secure.
- Supports multi-site.
- Supports SSL sites.
- Great support provided via our dedicated Microthemer forum.
- Free CSS, HTML, and responsive design tutorial.
- Event-based animation (e.g. onClick, inView)
Main Features for developers
- Full code editor that lets you write code in the browser while looking at the page.
- Hybrid GUI code editor if you want to leverage the power of the GUI but prefer writing CSS properties and values by hand.
- SCSS, CSS, and JS supported.
- Enqueue JS libraries native to WordPress like jQuery UI for rapid experimentation.
- Minify CSS code.
- HTML and CSS inspection, similar to browser inspectors.
- Keyboard shortcuts for common actions.
- Validation of custom selectors with visual feedback as you type.
- Hide from clients by uninstalling or deactivating, but still use the CSS Microthemer generates by copying and pasting a few lines of PHP code to your theme's functions.php file.
Free VS Premium version
This free version limits you styling 15 things, and doesn't include flexbox, transition, or animation features. To unlock the full program, you can purchase a Standard ($45) or Developer ($90) license.
Getting started video
Using Microthemer with Beaver Builder
Learn flexbox with Microthemer in 14 mins
Is This Plugin Supported?
Yes. Please post your question in our Microthemer forum.
Where can I find documentation?
Microthemer has built-in documentation! Just click the help icon (top right of the interface) to load the tutorials and CSS Reference. You can also search and post questions in our forum from there without having to leave the Microthemer interface.
- Click the 'Plugins' menu option in WordPress.
- Search for 'Microthemer Lite'.
- Install and activate the plugin.
- Go to the 'Microthemer' menu option.
- Start customizing the appearance of your site.
Microthemer’s intuitive interface sits above your site to make it easy to see the changes as you make them.
To start editing simply double click anything on the page. Or click the 'Target' button to enable 'hover targeting'.
Microthemer comes with over 80 CSS styling properties grouped into eleven categories. In this screenshot we can see border options, such as color, width, radius and style.
The main menu allows you organise and manage your folders and selectors. You can simply drag and drop them into the required position, as well as copy, edit, or delete.
Microthemer includes a revision restore feature. The past 50 actions that alter your workspace are remembered. So if you make a mistake you can easily roll back to a previous point.
The advanced selector wizard options show you the computed CSS for anything you double-click, just like right-click with browser inspectors.
The advanced targeting options includes a list of potential selectors from the very specific to the very broad. Microthemer understands that sometimes users want to target a set of elements, such as all list items titles, as well as just single elements.
Easily preview your site as if you were viewing it on phone or tablet as you design and apply screen width specific styles to make your theme fully responsive.
You can view the CSS code Microthemer generates for debugging or copying and pasting elsewhere. Some users like the fact you can deactivate Microthemer and still make the use of the styles (without having to copy and paste CSS).