Docs index
Getting started (6)- Introducing Microthemer 7
- Install and setup
- Basic workflow
- Who is Microthemer for?
- Troubleshooting
- V6 to V7 (main changes)
The interface (18)- Dark mode and layout options
- Selecting elements
- Styling options
- Draft vs published changes
- Folders
- Load CSS on specific pages
- Automatic page speed
- Responsive media queries
- Uninstall, but keep changes
- Preferences
- Site navigator
- History restore points
- HTML and CSS inspection
- Single selector vs full code editor
- Adding custom JavaScript
- Generated CSS
- Keyboard shortcuts
- Development roadmap
How To (10)- Create gradient text
- Blur the background, not the content
- Use Microthemer with Bricks Builder
- Apply CSS shapes and SVG masks
- Copy CodePen HTML/CSS/JS to WordPress
- Style WishList Member Registration Forms
- Use CSS pseudo elements (::before) for tooltips, Font Awesome icons, and speech bubbles
- Reuse styles with custom body classes
- WP container queries using Microthemer
- Gutenberg Responsive CSS using Microthemer
Old videos (11)- CSS grid controls
- Designing ‘broken grid’ layouts
- 3-2 alternating grid columns
- Mobile-first Gutenberg grids
- CSS variables
- Learn flexbox
- Google fonts
- Elementor integration
- Beaver Builder integration
- Oxygen Builder integration
- Fast & scalable Sass compilation
Load CSS on specific pages
You can optimise how Microthemer loads CSS by assigning folders to specific pages, or types of page. Microthemer does this automatically if the Auto folder option in the footer is enabled. But you may want to customise the default condition, which tends to assign a folder to just one page.
Examples
CSS loading is controlled by PHP-like logical conditions, which Microthemer can help you generate. The following table provides examples of supported conditions. If a condition is evaluated as true on a given page, it means the folder will load its CSS.
Function Reference
Microthemer does NOT use the PHP eval() function. Instead, it reads your conditions as plain text and then runs the relevant function(s). Only a handful of PHP functions are allowed – some WordPress API functions, custom Microthemer functions, and native PHP, namely $_GET and isset().
Note: the result of each function or overall condition is cached so that you can freely repeat the same functions and conditions in multiple folders without incurring any performance penalty.
Supported WordPress Functions
get_post_type() has_action() has_block() has_category() has_filter() has_meta() has_post_format() has_tag() is_admin() is_archive() is_author() is_category() is_date() is_front_page() is_home() is_page() is_post_type_archive() is_search() is_single() is_singular() is_super_admin() is_tag() is_login() is_user_logged_in()
Custom Microthemer Functions
\Microthemer\has_template() \Microthemer\is_active() \Microthemer\is_admin_page() \Microthemer\is_post_or_page() \Microthemer\is_public() \Microthemer\is_public_or_admin() \Microthemer\match_url_path() \Microthemer\query_admin_screen() \Microthemer\user_has_role()
\Microthemer\has_template()
This can be used to check if a particular Bricks template or Gutenberg template, template part, pattern, or navigation is loading on the current page. For block themes, Microthemer maintains a cache of templates/parts/patterns/navigation. This ensures that has_template() can run very efficiently even when checking for templates nested inside other templates.
Microthemer generates has_template() conditions automatically when you style individual templates, template parts, patterns, and navigation via the Full Site Editor (FSE). Watch the walk-through video to see how Microthemer integrates with the Gutenberg block editor.
Usage Examples
Source code
\Microthemer\is_active()
Check if a theme or plugin is active. Enter the type of item to check as the first parameter. Enter the directory name of the theme inside /wp-content/themes or the plugin inside /wp-content/plugins.
Usage Examples
Source code
\Microthemer\is_post_or_page()
Check if you are on a post or a page, on either the frontend or the block editor. The latter could mean viewing the page via the regular “Edit Page” admin screen or via the Full Site Editor (FSE). This is useful because you will normally want any custom Microthemer CSS to render in all contexts. Microthemer uses this condition when targeting single pages if you have “Auto folder” enabled with the “Page” option.
Most of the time, you will pass a single post/page ID parameter. But you can also pass “global” as a parameter to load your folder on all pages and single posts. Or you can pass “front” to load the folder on the home page, including any Full Site Editor (FSE) pages that default to the home page.
Usage Examples
Source code
\Microthemer\is_admin_page()
Check if the current page is any admin page, or a specific admin page. Optionally pass in a single parameter that can either be a PHP file name or a post id. If no parameter is passed in, the function will return true if it is any admin area page.
Usage Examples
Source code
\Microthemer\is_public()
Check if the current page is a public facing page (i.e. the frontend, not the admin area). This function does not accept any parameters.
Usage Example
Source code
\Microthemer\is_public_or_admin()
Checks if the current page is on the admin side or the frontend. If no parameter is passed in, it will always return true. If a Post or Page id is passed in, it will return true on the admin and frontend for a specific post or page only. This function is useful when you want styles to appear in the Gutenberg editor as well as the frontend. Support for that must be enabled via the Preferences however. And watch the video for advice about targeting elements with single classes.
Usage Examples
Source code
\Microthemer\match_url_path()
Check if the URL path for the current page contains a text substring, or matches regex pattern if the second argument is set to true.
Usage Examples
Source code
\Microthemer\query_admin_screen()
Check the value of a WP Screen object property by passing in a property key and value to compare. This function is useful for applying styles to all sorts of admin pages.
Usage Examples
Source code
\Microthemer\user_has_role()
If no parameter is passed in, this simply checks if the current user is logged in. Pass in a user ID value to check for a specific user, or a role name to check for a type of user.
Usage Examples
Source code