Pixelwars

Hi @flloyd,

All three are typical first surprises when moving from a classic theme to a block theme like Twenty Twenty-Five, and none of them needs code.

Sidebars

Block themes don’t have widget areas, which is why the theme’s docs never mention sidebars. Instead, a sidebar is just a block layout inside a template. Twenty Twenty-Five ships a ready-made “Sidebar” template part and several layouts that already use it:

• News blog with sidebar (blog / home page)
• News blog single post with sidebar (single posts)
• Right-aligned page and Right-aligned single post

To use one, go to Appearance > Editor > Templates, open the template (e.g. “Single Posts” or “Pages”), and in the template’s settings sidebar look at the “Design” section, which lists these alternatives. Click one to switch.

Or build your own: in the template, add a Columns block (e.g. 70/30), move the content blocks into the left column, and in the right column insert the “Sidebar” template part (search for “Sidebar” in the + inserter). Edit the Sidebar part like any other blocks: Search, Latest Posts, Categories, an image, whatever your old widgets were. Since it’s a template part, edits show up on every template that uses it.

Menu showing every page

When the Navigation block has no menu of its own, WordPress falls back to a “Page List” block, which lists all your pages and adds every new one automatically. To take control:

1. Appearance > Editor > Navigation, open the menu (or select the Navigation block in your header).
2. Select the Page List inside it and click “Edit”. Confirm in the “Edit Page List” dialog.
3. The list turns into individual links. Remove the pages you don’t want, drag the rest into order, and add custom links with +.

From then on, new pages are no longer added automatically.

Gap between header and content

The Pages template adds space twice: the main content group has a “Large” top margin, and the group inside it has a “Large” top padding (up to 70px each on wide screens). To reduce it, open Appearance > Editor > Templates > Pages, open List View (the icon with three lines, top left), select the outer Group below the Header, then Styles > Dimensions and lower or clear the top margin. If it’s still too much, do the same with the top padding of the Group inside it.

About the header ending up in the footer position: in that same List View the Header template part should be the first item and the Footer the last. If they’re swapped, drag them back. If the template got too messy, the template’s three-dot menu has “Reset”, which restores the theme’s original layout for that template (it removes your changes to that template only, not your pages or posts).

Hi @petewatterschatsworth,

You’re right that the palette has 8 colors. That’s the theme’s design palette (Base, Contrast and Accent 1-6), and WordPress’s own default palette is switched off in this theme. You can add as many colors as you like without any code.

More colors

1. Appearance > Editor > Styles > Colors > Palette > Edit palette.
2. Switch to the “Custom” tab and click “Add color” (+). Pick the color or type a hex value, give it a name, and save.

Your custom colors then show up in every text, background and link color picker on the site, next to the theme ones. Example: the blue #4460a7 you’ve typed by hand on your design process page could become a named “Brand blue” there, and you’d reuse it with one click instead of retyping the hex value.

For a one-off color you don’t need the palette at all: in any block’s color option, click the swatch with the color picker (or “Custom color picker”) and enter a hex value.

The same Colors screen also has “Palettes”, with eight ready-made alternative color schemes that come with Twenty Twenty-Five. One click recolors the whole site, if you’d like to try a different starting point.

Text over images (Cover block)

I checked the page you linked, and there’s no Cover block on it at the moment, so here are the settings that make the biggest difference:

• Overlay: select the Cover block, then Styles tab > Overlay. Pick a dark color (or your new brand color) and raise “Overlay opacity” until the text reads easily, usually 40-60% for white text. This is the single biggest improvement.
• Text color and size: set the heading inside the Cover to white or Base, and go one or two steps larger than normal text. Bold or larger text needs less contrast to stay readable.
• Focal point: in the Cover’s Settings, drag the focal point so the busy part of the photo sits away from the text.
• Text box: for very busy photos, put the text in a Group block inside the Cover and give that Group a background color (for example your brand color) plus some padding. The text then sits on a solid panel and stays readable over any image.

As a rule of thumb, if you have to squint at the text in the editor, visitors on a phone in daylight won’t be able to read it. Go darker with the overlay.

Hi @orangemarmalade,

Before anything else, about your third question: please don’t delete the site. You don’t need to, and it’s the one step that could lose your images.

3. Media

Your Media Library doesn’t belong to the theme. The files live in wp-content/uploads and the entries in the database, so switching themes, or even deleting the old theme afterwards, leaves every image in place, ready to reuse. Only deleting the WordPress site itself (or a host’s “reinstall/reset”) would remove them.

The safe route: Appearance > Themes > Add New > Twenty Twenty-Five, then hover it and click “Live Preview” to look around without switching. When you’re ready, activate it and rebuild page by page; your existing posts and pages stay too. Take a backup first anyway, it’s good practice before any theme change.

What does not carry over from a classic theme: sidebars/widgets, and anything built with that theme’s own shortcodes or page builder. Old menus can be brought back: in the Navigation block’s menu options there’s “Import Classic Menus”.

1. Patterns

They’re meant to be used quickly. Twenty Twenty-Five ships about 70 patterns in the inserter (+ > Patterns), grouped as Banners, Featured, Call to action, About, Services, Testimonials, Contact and so on, plus a dozen full-page layouts that appear in a “Choose a pattern” window when you create a new page.

Inserting one is instant. What you get is a copy filled with placeholder text and the theme’s demo images, so the only real “customization” is replacing those with your own. Colors and fonts follow your site styles automatically. So the useful preparation is:

• the text and images for each section, and
• choosing your colors and fonts first (Appearance > Editor > Styles, including the style variations), because every pattern picks them up.

Once you’ve tuned a section you want to repeat, select it and use the three-dot menu > “Create pattern”. If you mark it Synced, editing it once updates it everywhere it’s used.

2. Font sizes

• Whole site: Appearance > Editor > Styles > Typography. “Text” sets the body size and “Headings” the heading sizes. “Font size presets” edits the size scale itself (Small to Extra Extra Large), and every block using a preset follows. The theme uses fluid typography, so these sizes also scale down on phones automatically.
• One section or one page: wrap the blocks in a Group (select them, Ctrl/Cmd+G) and set Typography > Size on the Group. Everything inside that doesn’t have its own size inherits it. Headings, and text inside patterns that already have a preset size, keep their own value; change those on the block itself.

Hope that helps you plan the move.

Hi @ashley_c, answering here as well so the solution sits in the right topic.

There’s no per-device setting for this in the block editor (the Row block’s justification applies to all screen sizes), so it’s a small CSS rule, but a safe one.

Twenty Twenty-Five’s header is a Row with the logo/title on the left and the navigation on the right. On phones the navigation collapses into the menu button below 600px, and that’s the breakpoint to use.

1. Appearance > Editor > Patterns > Template parts > Header. In the List View select the Row that contains your logo and the navigation (Group > Group > the Row). Sidebar > Advanced > Additional CSS class(es): header-row. Save (tick “Header” in the save dialog).
2. Appearance > Editor > Styles > three-dot menu > Additional CSS:

@media (max-width: 599px) {
	.header-row {
		flex-wrap: wrap;
		justify-content: center;
	}
	.header-row > :first-child {
		flex-basis: 100%;
		display: flex;
		justify-content: center;
	}
}

Result on phones: the logo (or the logo + site title group, whatever is first in the Row) is centered on its own line, and the menu button sits centered below it. If you’d rather keep the menu button on the right, replace justify-content: center in the first rule with justify-content: flex-end. Desktop is untouched.

If you set the navigation’s “Overlay Menu” to “Always”, the menu button also appears on larger screens; use max-width: 781px in that case so the two breakpoints match.

Alternative without CSS: on the same Row set Justification to Center and Orientation to Vertical. That centers the header on every device, including desktop, which may or may not be what you want.

Hi @jindai,

Yes, there is a single supported setting, and you don’t need to touch the templates one by one.

Appearance > Editor > Styles > Blocks > Title > Typography. Text alignment is one of the optional controls in that panel, so if you don’t see it, click the three-dot “Typography options” button at the top of the panel and tick “Text alignment”. Choose Center, save.

That one value applies to every Post Title block on the site: the blog listing, archives, search results and single posts. In Twenty Twenty-Five none of the templates set an alignment on the title block, so nothing overrides it. Body text is untouched; the setting is scoped to the Title block only.

Two things to know:

• It also centers page titles, because pages use the same Title block. If you want pages left-aligned, open the Pages template (Appearance > Editor > Templates > Pages), select the title and set its alignment to Left in the toolbar; a value set on the block always wins over the site-wide one.
• If a title somewhere refuses to center, it already has its own alignment set in the template; select it there and clear it (Align > none), and the site-wide value takes over.

Why the CSS attempts were inconsistent: .entry-title doesn’t exist in block themes, and “h2 a” selectors center nothing because the link is inline inside the heading. The working selector is simply the block class:

.wp-block-post-title {
	text-align: center;
}

It should behave the same everywhere in this theme, because the title is a block-level heading inside a constrained group on every template. You’d only need it if you want different behaviour per context, e.g. only on single posts and the blog:

body.single-post .wp-block-post-title,
body.blog .wp-block-post-title {
	text-align: center;
}

And if you maintain a child theme, the same thing in theme.json, which is what the Styles UI writes for you:

{
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"textAlign": "center"
				}
			}
		}
	}
}

CENTER LOGO ON MOBILE:

There’s no per-device setting for this in the block editor (the Row block’s justification applies to all screen sizes), so it’s a small CSS rule, but a safe one.

Twenty Twenty-Five’s header is a Row with the logo/title on the left and the navigation on the right. On phones the navigation collapses into the menu button below 600px, and that’s the breakpoint to use.

1. Appearance > Editor > Patterns > Template parts > Header. In the List View select the Row that contains your logo and the navigation (Group > Group > the Row). Sidebar > Advanced > Additional CSS class(es): header-row. Save (tick “Header” in the save dialog).
2. Appearance > Editor > Styles > three-dot menu > Additional CSS:

@media (max-width: 599px) {
	.header-row {
		flex-wrap: wrap;
		justify-content: center;
	}
	.header-row > :first-child {
		flex-basis: 100%;
		display: flex;
		justify-content: center;
	}
}

Result on phones: the logo (or the logo + site title group, whatever is first in the Row) is centered on its own line, and the menu button sits centered below it. If you’d rather keep the menu button on the right, replace justify-content: center in the first rule with justify-content: flex-end. Desktop is untouched.

If you set the navigation’s “Overlay Menu” to “Always”, the menu button also appears on larger screens; use max-width: 781px in that case so the two breakpoints match.

Alternative without CSS: on the same Row set Justification to Center and Orientation to Vertical. That centers the header on every device, including desktop, which may or may not be what you want.

Hi @ashley_c,

The three symptoms you describe usually have one cause: the bar lives in the wrong place.

In Twenty Twenty-Five the header is a template part called “Header”, and all eight templates of the theme (pages, posts, archives, 404, home) use that same part. Anything you add there shows on every page. If the bar only shows on the home page, it was most likely added to the home page’s content (Pages > Edit) or to the home template itself, not to the Header part.

How to build it in the right place:

1. Appearance > Editor > Patterns > Template parts > Header (or click the header on any page in the editor and choose “Edit” on the Header part).
2. In the List View (the icon with three lines, top left) you’ll see Group > Group > Group(Row). Select the outermost Group and insert a Row block (Group > Row) as its first child, above the existing inner Group. Placed there it spans the full width.
3. On the Row: Styles tab > Color > Background: pick a custom color and paste your logo blue as a hex value (e.g. #0a4f9c). Text: white. Layout: Justification “Space between”, Align “Full width”.
4. Inside the Row: on the left a Paragraph with the phone number and e-mail (or two paragraphs in a small Row), on the right the Social Icons block.
5. Save, and in the save dialog make sure the “Header” checkbox is ticked (the dialog lists each changed item separately; if only the template is ticked the part change is lost).

About the bar being white instead of blue on the home page: block colors are inline styles, so if the editor shows blue and the live page shows white, you’re most likely looking at a cached copy of the page. Check the page in a private window while logged out, and purge your caching plugin / host cache. “Shows for a moment, then gets pushed off the top” on other pages I can’t diagnose without seeing it; rebuild the bar as above first, it normally disappears with the misplacement.

Hi @totezitrone,

Good news first: you don’t need JavaScript, and you don’t need a separate CSS file per block. Plain CSS still works in block themes. What changed is what sits underneath it. Think of it as three layers:

1. theme.json for the design tokens (fonts, colours, spacing)

This is the one thing that replaced the old “variables at the top of style.scss” habit. Define your palette once in settings.color.palette and your fonts in settings.typography.fontFamilies. WordPress turns them into CSS custom properties (–wp–preset–color–accent-1, –wp–preset–font-family–manrope, …), loads them in the editor and on the front end, and shows them in the UI pickers. Changing a colour later means editing one line. Default styles for elements and blocks go in styles.elements (headings, links, buttons) and styles.blocks.

2. Your own CSS file for everything else

Keep writing normal CSS (or Sass compiled to CSS) in style.css and enqueue it, exactly like before. Block themes don’t load style.css automatically, so a child theme needs a tiny functions.php:

add_action( 'wp_enqueue_scripts', function () {
     wp_enqueue_style( 'my-child-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
} );

add_action( 'after_setup_theme', function () {
     add_editor_style( 'style.css' ); // same CSS inside the editor
} );

Hooks you can rely on: the .wp-block-* classes, .is-style-* block style variations, and your own classes added under Advanced > Additional CSS class(es) in the block sidebar. Since WordPress 6.6 the theme.json output is wrapped in :root :where(…), so a plain class selector in your file wins without !important.

3. Raw CSS inside theme.json, if you prefer one file

Since 6.2 theme.json accepts arbitrary CSS: top-level in styles.css, and per block in styles.blocks[“core/button”].css, where & stands for the block’s own selector. Twenty Twenty-Five does exactly this; open its theme.json and search for “css”.

Two gotchas that probably caused “the same problem” in both attempts:

• Don’t edit Twenty Twenty-Five itself; updates overwrite it. Also, TT5 loads style.min.css unless SCRIPT_DEBUG is on, so edits to its style.css do nothing. Use a child theme (Template: twentytwentyfive in the child’s style.css header) or your own theme from Create Block Theme.
• Anything you change in Site Editor > Styles is saved in the database and overrides theme.json. If you tweak something visually, use Create Block Theme > “Save changes to theme” to write it back into the files, so the files stay the source of truth.

So the workflow you’re used to still exists: edit theme.json and style.css in your editor, compile Sass if you like, reload. Additional CSS is meant for site owners, not for theme developers.

Docs:
https://developer.wordpress.org/themes/global-settings-and-styles/
https://developer.wordpress.org/themes/core-concepts/including-assets/
https://developer.wordpress.org/themes/advanced-topics/child-themes/