Make WordPress

You may have noticed the new shiny icons in the adminadmin (and super admin) screens in WordPress 7.2 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.. As previously announced on Replacing Dashicons in the admin bar and menu, the icons in the admin bar and menu are now inline SVGs from @wordpress/icons. Before, they were Dashicons font glyphs drawn with CSSCSS Cascading Style Sheets. ::before.

Most plugins and themes need no changes. Registering menu pages and admin bar nodes, with or without Dashicons, works as before. However, CSS such as admin color schemes and admin themes may need a small update. If your pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. modifies coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. icons, it might also need updating.

If your plugin or theme does not modify core admin bar or menu icons, you may jump ahead to the New APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. section below.

Needs updating: color schemes

Every CSS rule that styles core icons through ::before no longer styles the icons now as they are inline SVG elements.

If your color scheme colors icons through ::before, for backward compatibility, WordPress uses the following best-effort rules to keep the colors until you update it:

• SidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. menu: icons get the icon colors you pass to wp_admin_css_color(), falling back to the menu text color.
• Admin bar: if you used SASS to generate your stylesheet based on core’s _admin.scss, then it already colors the .ab-icon element (luckily), so icons get to keep the intended colors.

Otherwise, icons get core’s default colors, which may not be intended. To fix your scheme completely, wherever your stylesheet colors an icon through ::before, color the element as well. The SVG will inherit the color from that element. For rules that color .ab-item::before, color the .ab-icon as well.

/* Before */
#adminmenu div.wp-menu-image::before { color: #c3c4c7; }
#wpadminbar li:hover .ab-icon::before { color: #72aee6; }
#wpadminbar #wp-admin-bar-site-name > .ab-item::before { color: #c3c4c7; }

/* After (works on 7.2 and earlier versions) */
#adminmenu div.wp-menu-image,
#adminmenu div.wp-menu-image::before { color: #c3c4c7; }
#wpadminbar li:hover .ab-icon,
#wpadminbar li:hover .ab-icon::before { color: #72aee6; }
#wpadminbar #wp-admin-bar-site-name > .ab-item .ab-icon,
#wpadminbar #wp-admin-bar-site-name > .ab-item::before { color: #c3c4c7; }

Do this for the corresponding hover, focus, current and open states, and the .mobile rules as well. The rules above are only examples.

Needs updating: core icon modifications

CSS: Hiding a core icon

Hiding an icon through ::before no longer hides the icon, which is now an element. Hide the element as well.

/* Before */
#adminmenu #menu-comments div.wp-menu-image::before { display: none; }
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before { display: none; }
#wpadminbar #wp-admin-bar-edit > .ab-item::before { display: none; }

/* After (works on 7.2 and earlier versions) */
#adminmenu #menu-comments div.wp-menu-image::before,
#adminmenu #menu-comments div.wp-menu-image svg { display: none; }
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon { display: none; }
#wpadminbar #wp-admin-bar-edit > .ab-item::before,
#wpadminbar #wp-admin-bar-edit > .ab-item .ab-icon { display: none; }

CSS: Replacing a core icon with an image

Styles that put a background image on the glyph and make the glyph transparent relied on core’s content to create the box. Set content and a size yourself.

/* Before */
#adminmenu #menu-posts div.wp-menu-image::before {
    background-image: url(logo.png);
    color: transparent;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
    background-image: url(logo.png);
    color: transparent;
}

/* After (works on 7.2 and earlier versions) */
#adminmenu #menu-posts div.wp-menu-image::before {
    content: "";
    background: url(logo.png) center / 20px 20px no-repeat;
}
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(logo.png) center / contain no-repeat;
}

CSS: Replacing a core admin bar icon through .ab-item::before

This applies to the admin bar nodes whose icon used to be drawn on .ab-item::before: edit, customize, site-editor, my-sites, site-name and my-account. The icon is now a separate .ab-icon element, so a content set on .ab-item::before no longer replaces it. Your glyph is hidden, and core’s icon is shown instead.

To fix it, set the content on the ::before of the icon element as well, which takes the place of core’s icon.

/* Before */
#wpadminbar #wp-admin-bar-edit > .ab-item::before { content: "\f319"; }

/* After (works on 7.2 and earlier versions) */
#wpadminbar #wp-admin-bar-edit > .ab-item::before,
#wpadminbar #wp-admin-bar-edit > .ab-item .ab-icon::before { content: "\f319"; }

PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher: Modifying the title or icon of a core admin bar node

Certain core nodes used to contain the empty <span class="ab-icon"> in the title to draw the icon. Such nodes, along with the rest of core admin bar nodes, no longer have the empty span, and now set the icon with the new icon argument instead. Except for wp-logo, whose title contains the logo icon itself. For example:

• $wp_admin_bar->get_node( 'new-content' )->title:
  • was: <span class="ab-icon" aria-hidden="true"></span><span class="ab-label">New</span>
  • now: <span class="ab-label">New</span>
• $wp_admin_bar->get_node( 'wp-logo' )->title:
  • was: <span class="ab-icon" aria-hidden="true"></span><span class="screen-reader-text">About WordPress</span>
    now: <span class="ab-icon svg-icon" aria-hidden="true"><svg …>…</svg></span><span class="screen-reader-text">About WordPress</span>

Code that looks for the empty span in these titles will no longer find it and needs to be updated. See also the “Supporting earlier WordPress versions” section below on how to modify admin bar nodes that works across versions. See also the appendix for the full markup changes.

CSS: Styling the front end search icon, the default My Sites site icon, or the Collapse Menu icon

Styles on the pseudo-elements of these icons no longer affect them as well. Target the new element instead.

/* Before */
#wpadminbar #adminbarsearch::before { color: red; }
#wpadminbar .quicklinks li div.blavatar::before { color: red; }
#collapse-button .collapse-button-icon::after { color: red; }

/* After (works on 7.2 and earlier versions) */
#wpadminbar #adminbarsearch::before,
#wpadminbar #adminbarsearch .ab-icon { color: red; }
#wpadminbar .quicklinks li div.blavatar::before,
#wpadminbar .quicklinks li div.blavatar svg { color: red; }
#collapse-button .collapse-button-icon::after,
#collapse-button .collapse-button-icon svg { color: red; }

CSS: Targeting a menu item by its Dashicon class

Use the item’s id or its menu-icon-* class instead now.

/* Before */
#adminmenu .dashicons-admin-post::before { content: "\f319"; }

/* After (works on 7.2 and earlier versions) */
#adminmenu .dashicons-admin-post::before { content: "\f319"; }
#adminmenu .menu-icon-post div.wp-menu-image::before { content: "\f319"; }

Note that the old Dashicon class matched every menu item that used that Dashicon, while an id or a menu-icon-* class matches one item.

What keeps working

For backward compatibility, WordPress keeps the most common customizations working without changes.

Sidebar menu

• Existing core menu data is unchanged, including the dashicons-* icon values. For example:
  • get_post_type_object( 'post' )->menu_icon is still dashicons-admin-post.
  • The $menu global and the REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/ still hold the same dashicons-* values.
• If a plugin uses Dashicon in menu_icon and it has a matching core-admin icon, that SVG icon will be rendered instead. This includes post types with no menu_icon, which default to dashicons-admin-post.
  • See the “New API” section below for more information about the core-admin collection.
• Any other Dashicon, image URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, base64 SVG or none value renders exactly as before.
• A ::before with content on div.wp-menu-image still replaces the icon, and the SVG is not shown.

Admin bar

• On all core nodes, a ::before with content on .ab-icon still replaces the icon.
• Third-party nodes render exactly as before.

New API to use SVG icons

If you want to use SVG icons instead of Dashicons for your own sidebar menu items and admin bar nodes, you can now pass the name of a registered icon when you register menu pages, post types and admin bar nodes.

Which icons to use

You can use an icon from core’s core-admin collection. Once an icon is added to core-admin, its name will not change and it will not be removed. You can preview the collection in the icon library on Storybook. More icons will be added to core-admin based on feedback from plugin developers.

DO NOT use the core collection for admin icons. It is meant for the front end, content and the Icon blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.. Some plugins or themes might want to unregister core icons.

You can also use your own icons. Register your own collection and its icons with wp_register_icon_collection() and wp_register_icon(), then use them the same way.

Icon names as menu icons

add_menu_page() and the menu_icon argument of register_post_type() now accept the namespaced name of a registered icon, besides the existing Dashicons, URL, base64 SVG and none values.

add_menu_page(
    __( 'Notes', 'my-plugin' ),
    __( 'Notes', 'my-plugin' ),
    'manage_options',
    'my-plugin-notes',
    'my_plugin_render_notes',
    'core-admin/pin' // Now allowed: a registered icon name.
);

icon argument for admin bar nodes

WP_Admin_Bar::add_node() now accepts an icon argument: the namespaced name of a registered icon. The icon is rendered before the title.

add_action(
    'admin_bar_menu',
    function ( WP_Admin_Bar $wp_admin_bar ) {
        $wp_admin_bar->add_node(
            array(
                'id'    => 'my-plugin-notes',
                'icon'  => 'core-admin/pin',
                'title' => __( 'Notes', 'my-plugin' ),
                'href'  => admin_url( 'admin.php?page=my-plugin-notes' ),
            )
        );
    },
    100
);

In both cases, a name that is not registered renders no icon. With WP_DEBUG enabled, it also triggers a _doing_it_wrong() notice.

wp_is_valid_icon_name()

A new helper function that returns whether a value has the form of a namespaced icon name (collection/icon-name). It does not check that the icon is registered.

Supporting earlier WordPress versions

If your plugin used to show a Dashicon in admin menu or admin bar, and you want to keep supporting it in earlier versions, follow these instructions.

This depends on whether or not your Dashicon already has an official replacement in the core-admin collection. Check the icon replacement mapping here in the manifest. Search for your Dashicon in the 'dashicons' key.

If your Dashicon has no official core-admin icon replacement in 7.2, or you want to use your own SVG icon

You can still use any alternative core-admin icon or your own SVG icon, and you need to pass the icon name explicitly.

For admin menu (add_menu_page() and register_post_type()), since icon names are not supported in earlier versions, gate it with function_exists( 'wp_is_valid_icon_name' ). In contrast, the new argument for admin bar node is ignored in earlier versions, and an empty span in the title is hidden in 7.2, so you can pass both the old Dashicon and the new SVG icon as follows.

add_menu_page(
    ...,
    function_exists( 'wp_is_valid_icon_name' ) ? 'core-admin/receipt' : 'dashicons-text'
);
$wp_admin_bar->add_node(
    array(
        ...
        'title' => '<span class="ab-icon dashicons-text" aria-hidden="true"></span> My Node',
        'icon'  => 'core-admin/receipt',
    )
);

If your Dashicon has an official core-admin icon replacement in 7.2

Admin menu icons will be automatically replaced in 7.2 with the SVG icon replacement. However, for admin bar node icons, you still need to pass the mapped icon name explicitly.

add_menu_page(
    ...,
    'dashicons-cart'
);
$wp_admin_bar->add_node(
    array(
        ...
        'title' => '<span class="ab-icon dashicons-cart" aria-hidden="true"></span> My Node',
        'icon'  => 'core-admin/cart',
    )
);

If your Dashicon has an official core-admin icon replacement in version later than 7.2

In future versions, WordPress may add more icons to the core-admin collection, which map to more Dashicons. In the future, if a new core-admin icon is registered and you want to use it, you need to further gate it with a registration check as follows.

$icon = 'dashicons-text';              // for < 7.2
if ( function_exists( 'wp_is_valid_icon_name' ) ) {
    $registry = WP_Icons_Registry::get_instance();
    if ( $registry->is_registered( 'core-admin/invoice' ) ) {
        $icon = 'core-admin/invoice';  // for > 7.2 (as an example)
    } elseif ( $registry->is_registered( 'core-admin/receipt' )  ) {
        $icon = 'core-admin/receipt';  // for 7.2
    }
}
add_menu_page(
    ...,
    $icon
);
$wp_admin_bar->add_node(
    array(
        ...
        'title' => '<span class="ab-icon dashicons-text" aria-hidden="true"></span> My Node',
        'icon'  => $icon,
    )
);

Appendix: HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup changes

This appendix shows how the markup and the CSS of each icon changed, for code that targets them directly.

<!-- Before 7.2 -->
<div class='wp-menu-image dashicons-before dashicons-admin-post' aria-hidden='true'><br /></div>

.dashicons-admin-post::before { content: "\f109"; }

<!-- In 7.2 -->
<div class='wp-menu-image dashicons-before svg-icon' aria-hidden='true'><svg …>…</svg></div>

<!-- Before 7.2 -->
<span class="collapse-button-icon" aria-hidden="true"></span>

#collapse-button .collapse-button-icon::after { content: "\f148"; }

<!-- In 7.2 -->
<span class="collapse-button-icon" aria-hidden="true"><svg …>…</svg></span>

<!-- Before 7.2 -->
<a class='ab-item' href='…'>Edit Post</a>

#wpadminbar #wp-admin-bar-edit > .ab-item::before { content: "\f464"; }

<!-- In 7.2 -->
<a class='ab-item' href='…'><span class="ab-icon svg-icon" aria-hidden="true"><svg …>…</svg></span>Edit Post</a>

<!-- Before 7.2 -->
<a class='ab-item' href='…'><span class="ab-icon" aria-hidden="true"></span><span class="ab-label">New</span></a>

#wpadminbar #wp-admin-bar-new-content .ab-icon::before { content: "\f132"; }

<!-- In 7.2 -->
<a class='ab-item' href='…'><span class="ab-icon svg-icon" aria-hidden="true"><svg …>…</svg></span><span class="ab-label">New</span></a>

<!-- Before 7.2 -->
<form id="adminbarsearch" …><input …>…</form>

#wpadminbar #adminbarsearch::before { content: "\f179"; }

<!-- In 7.2 -->
<form id="adminbarsearch" …><span class="ab-icon svg-icon" aria-hidden="true"><svg …>…</svg></span><input …>…</form>

<!-- Before 7.2 -->
<div class="blavatar"></div>

#wpadminbar .quicklinks li div.blavatar::before { content: "\f120"; }

<!-- In 7.2 -->
<div class="blavatar"><svg …>…</svg></div>

Props @audrasjb, @peterwilsoncc, @mcsf, and @wildworks for reviewing this dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase..

#7-2, #dev-notes, #dev-notes-7-2

Maybe not your content per se, but the ability to discover it is with the introduction of the /random/ endpoint in WordPress 7.2. A request to example.com/random/ will lead end users to a randomly selected published post. The feature is on by default and is built on the existing rewrite, WP, and WP_Query APIs. If you have a legitimate reason to not support this on a site, or you simply hate fun, there is a filter to disable this entire feature.

The Random URLs

The random base is prefixed to existing archive paths. This default base is translatable and customizable with a new option on wp-admin/options-permalink.php. With the default base and pretty permalinks, the following rules are generated:

• /random/ redirects to a random post.
• /random/category/release/ redirects to a random post in the release categoryCategory The ‘category’ taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. Any publicly queryable taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. attached to an eligible post type gets a similar rule, for example /random/tag/dev-note/.
• /random/author/jorbin/ redirects to a random post by that author.
• /random/{post-type-slug}/ redirects to a random post of a custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. that is randomable.

Randomable Post Types

A new randomable argument on register_post_type() controls eligibility. When not set, it defaults to true for post types that are publicly_queryable and have has_archive set. Among built-in types, post is randomable; page and attachment are not.

register_post_type(
        'musicals',
        array(
                'public'      => true,
                'has_archive' => true,
                'randomable'  => false, // Keep musicals out of /random/.
        )
);

Customizing So It’s a Little Less Random

The random post is chosen by the main query. WP::handle_random() runs the main query with three callbacks added for the duration of the request: wp_random_content_pre_get_posts() on pre_get_posts, wp_random_content_posts_orderby() on posts_orderby, and wp_random_content_post_limits() on post_limits. Together they restrict the query to eligible posts, order by RAND(), and limit the result to one row.

Because the selection goes through the main query, existing pre_get_posts callbacks that customize an archive also apply to its random redirect. To change the selection only for random requests, check the query with wp_is_random_content_query():

add_action(
        'pre_get_posts',
        static function ( WP_Query $query ) {
                if ( wp_is_random_content_query( $query ) ) {
                        $query->set( 'category__not_in', array( 525600 ) );
                }
        }
);

No Random, No Problem

If you prefer to disable random redirects on your site, you can use the wp_enable_random_content_redirect filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output.. A simple mu-pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. with add_filter( 'wp_enable_random_content_redirect', '__return_false' ); will mean no random rewrite rules are generated, the random base field is hidden on the permalinks screen, and the random query variable is ignored.

For more detail, see #64498 and changesets r64402, r64405, r65042, and r65250.

Props @peterwilsoncc, @annezazu, @jeffpaul for review.

#7-2, #dev-notes, #dev-notes-7-2

The next WordPress Developers Chat will take place on Wednesday, November 4, 2026, at 15:00 UTC in the core channel on Make WordPress Slack.

The live meeting focuses on upcoming releases and CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. development, with time for discussions and open floor.

If you have requests for help with a ticketticket Created for both bug reports and feature development on the bug tracker. or another discussion topic, please post details in the comments section at the end of this agenda, or bring it up in Dev Chat during open floor.

Announcements 📢

WordPress 7.2

• WordPress 7.2 Beta 4 released Nov 3rd, 2026
• BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 5 scheduled for Nov 10th

General

• 7.1.4 Security Release released last week (included 7.2 Beta 3)
• What’s new in Gutenberg 24.3? (28 October)
• Exploring a design for Feature Notifications
• Updates to the WordPress Marketing Repository
• Flagship WordCamps on WP.org/news

#7-2, #agenda, #core, #dev-chat