• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / Twenty Twenty-Five Theme: the Ultimate Guide

Twenty Twenty-Five Theme: the Ultimate Guide

Posted: March 18, 2025 by Claire Brotherton
1 Comment

Twenty Twenty-Five Shop homepage

Released with WordPress 6.7 on November 12, 2024, Twenty Twenty-Five is the new default theme for 2025.

You will need at least WordPress 6.7 and PHP 7.2 to run it.

At the time of writing, it has over 700,000 active installs according to wordpress.org.

You can test out the theme for free at WordPress Playground. Visiting the Playground gives you a newly installed WordPress site running Twenty Twenty-Five.

Table Of Contents
  1. Twenty Twenty-Five theme design
  2. Twenty Twenty-Five theme typography
  3. Twenty Twenty-Five theme menus
  4. Twenty Twenty-Five theme style variations
  5. Twenty Twenty-Five theme templates
    • Adding or deleting templates
    • Editing and resetting templates
    • Changing the whole design of a template
      • Blog Home layout variations
  6. Twenty Twenty-Five theme patterns and template parts
    • About (7 patterns)
    • Banners (19 patterns)
    • Call to Action (13 patterns)
    • Contact (3 patterns)
    • Featured (16 patterns)
    • Footers (5 patterns)
    • Gallery (1 pattern)
    • Headers (5 patterns)
    • Media (2 patterns)
    • Pages (11 patterns)
    • Post formats (3 patterns)
    • Posts (4 patterns)
    • Services (3 patterns)
    • Testimonials (3 patterns)
    • Text (3 patterns)
    • Uncategorized (3 patterns)
    • Template parts
      • Changing the header
      • Changing the footer
      • Resetting a template part
  7. Twenty Twenty-Five theme translations
  8. Twenty Twenty-Five theme accessibility
    • Link accessibility
    • Colour contrast of palettes
      • Default
      • Evening
      • Noon
      • Dusk
      • Afternoon
      • Twilight
      • Morning
      • Sunrise
      • Midnight
      • Colour contrast summary
    • Landmarks and navigation
  9. Customizing the Twenty Twenty-Five theme
    • Create a child theme
    • Add new Google fonts
    • Show an excerpt rather than content on your blog page
    • Create a template for a custom post type
    • Enable the Photo blog templates
    • Make the header sticky
    • Improve the legibility of the Calendar block in dark style variations
    • Create a landing page
    • Add images with Openverse
    • Use different text styles
    • Use post formats block patterns
  10. Twenty Twenty-Five demo sites
  11. Summing up

Twenty Twenty-Five theme design

The designer of Twenty Twenty-Four, Beatriz Fialho, also worked on Twenty Twenty-Five. View Twenty Twenty-Five’s design on Figma to see her design.

Twenty Twenty-Five Personal Blog designs on Figma

The theme is designed for a range of purposes: 

  1. Bloggers
  2. Portfolios sites
  3. Magazine sites
  4. Businesses.

A fresh install looks like the following:

The default look of a new Twenty Twenty-Five install showing the Blog Home template

Twenty Twenty-Five theme typography

By default Twenty Twenty-Five uses the Google Fonts pairing of Manrope and Fira Code.

Quote block using Manrope and Code block using Fira Code typography

Other typography combinations you can choose from are:

  • Beiruti and Literata
  • Vollkorn and Fira Code
  • Platypi and Ysabeau Office
  • Roboto Slab and Manrope
  • Literata and Ysabeau Office
  • Platypi and Literata
  • Literata and Fira Sans
Heading block using Beiruti and Paragraph block using Literata typography
Beiruti (headings) and Literata (paragraph) typography

Twenty Twenty-Five theme menus

Twenty Twenty-Five installs with one header menu and two footer menus. A new install has just one page (Sample Page) in the header menu.

The two footer menus have a series of empty custom links (links without destinations). So you’ll need to edit or delete them. You can access the menu by editing any template and clicking on the footer.

To edit any menu item, click on it, then click on the Link symbol in the toolbar followed by the Edit link symbol (the pencil icon).

How to select and edit a link

Change the link text and/or the link destination as required.

Change the link text or URL

Save your changes.

To delete a menu item, click on it and open the three-dot Options menu in the toolbar.

Open the Options menu

Scroll to the bottom of the menu and select Delete.

The Delete menu option

You can add new menu items using the plus button after selecting the parent Navigation block.

The plus button adds items to the navigation

If you use the Page List as a menu, the menu will display all your pages. New pages are automatically added to the header menu, unless you edit it.

Twenty Twenty-Five theme style variations

Twenty Twenty-Five has nine style variations. They are:

  1. Default – the default black and white style.
  2. Evening – the dark black and white style.
  3. Noon – a cream and black style.
  4. Dusk – a warm grey and black style.
  5. Afternoon – a style with light and dark green.
  6. Twilight – another dark style.
  7. Morning – a warm grey and darker grey style.
  8. Sunrise – a maroon, pink and white style.
  9. Midnight – a purply blue and green style.

Each style comes with a palette of colours used. You can mix and match style variations and palettes.

The nine Twenty Twenty-Five palettes
The Midnight style variation with the Noon palette

You can also change the typography here:

Twenty Twenty-Five theme typography
Afternoon style variation with Roboto Slab and Manrope typography

Twenty Twenty-Five theme templates

When newly installed, Twenty Twenty-Five has eight templates:

  1. All Archives
  2. Blog Home
  3. Index
  4. Page No Title
  5. Page: 404
  6. Pages
  7. Search Results
  8. Single Posts
Twenty Twenty-Five theme templates

Adding or deleting templates

You add new templates with the Add New Templates button, where you’ll be presented with a list of templates you can create.

You can only delete templates you’ve created. To do so, click the three-dot menu next to the template name and choose Delete. Then select Delete again to delete it.

Deleting a template

Editing and resetting templates

You can edit any template by clicking on it. From there you can edit the header, footer or content of the template.

At this time, it’s not possible to duplicate a template. If you edit a template and make a mistake, you can use the editor’s Undo button to revert the last change. It’s also possible to reset templates that you’ve saved changes to.

To reset a template, do one of the following:

In the block editor, when you are editing a template, choose the three-dot menu for the template in the settings sidebar and pick Reset from the flyout menu.

Resetting a template in the template editor

In the Templates section of Appearance > Editor, choose the three-dot menu for the template in the settings sidebar and pick Reset from the flyout menu.

Resetting a template in the Templates section

In each case you need to select Reset from the dialog box that appears.

Changing the whole design of a template

You can change the entire layout of a template by clicking on the Design tab of the template (seen in the settings sidebar) and selecting an alternative.

For example, for the Single Posts template you can have a post with a sidebar by selecting the News blog single post with sidebar variant.

Single Posts template with the News blog single post with sidebar

Blog Home layout variations

Here are the alternative layouts for the Blog Home template:

Twenty Twenty-Five News blog home layout
News blog home
Twenty Twenty-Five Photo blog home layout
Photo blog home

This design relies on featured images for your posts, so make sure you assign them to avoid gaps in the layout.

Twenty Twenty-Five News blog with featured posts grid
News blog with featured posts grid (I altered the query loops to remove sticky posts)
Twenty Twenty-Five Text-only blog, home
Text-only blog, home
Twenty Twenty-Five Homepage for right-aligned blog (partial)
Homepage for right-aligned blog
Twenty Twenty-Five News blog with sidebar
News blog with sidebar

Other templates also have alternative design patterns. The only one that doesn’t is the Page No Title template.

Twenty Twenty-Five theme patterns and template parts

Twenty Twenty-Five comes with a multitude of unique block patterns, 70 in all. These are grouped as follows:

About (7 patterns)

  • Cover with big heading
  • Event schedule
  • Grid with videos
  • Heading and paragraph with image on the right
  • Overlapping images and paragraph on right
  • CV/bio
  • FAQs
Twenty Twenty-Five About patterns

Banners (19 patterns)

  • Banner with book description
  • Cover with big heading
  • Short heading and paragraph and image on the left
  • Intro with left-aligned description
  • Poster-like section
  • Banner with description and images grid
  • Events, 3 columns with event images and titles
  • Grid with categories
  • Hero book
  • Hero, full width image
  • Hero, overlapped book cover with links
  • Hero podcast
  • Logos
  • Link in bio heading, paragraph, links and full-height image
  • Link in bio with profile, links and wide margins
  • Link in bio with tight margins
  • Pricing, 3 columns
  • Services, 3 columns
  • Services, team photos
Twenty Twenty-Five Banners patterns

Call to Action (13 patterns)

  • Call to action with book links
  • Call to action with locations
  • Centered heading
  • Events list
  • Call to action with grid layout with products and link
  • Heading and search form
  • Newsletter sign-up
  • Event RSVP
  • Pricing, 2 columns
  • Pricing, 3 columns
  • Services, 3 columns
  • Services, subscriber only section
  • Services, team photos
Twenty Twenty-Five Call to Action patterns

Contact (3 patterns)

  • Centered link and social links
  • Contact, info and locations
  • Contact location and link
Twenty Twenty-Five Contact patterns

Featured (16 patterns)

  • Cover with big heading
  • Short heading and paragraph and image on the left
  • Banner with description and images grid
  • Contact location and link
  • Call to action with grid layout with products and link
  • Instagram grid
  • Overlapping images and paragraph on right
  • Business homepage
  • Coming soon
  • CV/bio
  • Landing page for book
  • Landing page for podcast
  • Link in bio heading, paragraph, links and full-height image
  • Link in bio with profile, links and wide margins
  • Services, team photos
Twenty Twenty-Five Featured patterns

Footers (5 patterns)

  • Centered footer
  • Footer with columns
  • Footer with newsletter signup
  • Centered footer with social links
  • Footer
Twenty Twenty-Five Footers patterns

Gallery (1 pattern)

  • Instagram grid
Twenty Twenty-Five Gallery patterns

Headers (5 patterns)

  • Centered header
  • Header with columns
  • Header with large title
  • Header
  • Vertical header
Twenty Twenty-Five Headers patterns

Media (2 patterns)

  • Poster-like section
  • Instagram grid
Twenty Twenty-Five Media patterns

Pages (11 patterns)

  • Business homepage
  • Coming soon
  • CV/bio
  • Landing page for book
  • Landing page for event
  • Landing page for podcast
  • Link in bio heading, paragraph, links and full-height image
  • Link in bio with profile, links and wide margins
  • Link in bio with tight margins
  • Portfolio homepage
  • Shop homepage
Twenty Twenty-Five Pages patterns

These are full page patterns and will show up in the editor when you create a new page.

Prompt to choose a pattern when you create a new page

Post formats (3 patterns)

  • Post format name
  • Audio format
  • Link format
Twenty Twenty-Five Post formats patterns

Posts (4 patterns)

  • More posts
  • Portfolio homepage
  • Photo blog posts
  • List of posts, 1 column
Twenty Twenty-Five Posts patterns

Services (3 patterns)

  • Pricing, 3 columns
  • Services, 3 columns
  • Services, subscriber only section
Twenty Twenty-Five Services patterns

Testimonials (3 patterns)

  • 2 columns with avatar
  • 3 column layout with 6 testimonials
  • Review with large image on right
Twenty Twenty-Five Testimonials patterns

Text (3 patterns)

  • Comments
  • Post navigation
  • FAQs
Twenty Twenty-Five Text patterns

Uncategorized (3 patterns)

  • Right-aligned blog, 404
  • Photo blog page
  • Page template for the right-aligned blog
Twenty Twenty-Five Uncategorized patterns

Template parts

There are 7 template parts in Twenty Twenty-Five: 3 headers, 3 footers and one general (the sidebar).

  • Footer Columns
  • Footer Newsletter
  • Footer
  • Header with large title
  • Header
  • Sidebar
  • Vertical header
Twenty Twenty-Five template parts

Changing the header

You can change the header of a template by editing it and then selecting the header element and then choosing an alternative design from the Design tab.

Changing the header in Twenty Twenty-Five theme

There are actually more designs to choose from than the three that come with the theme. You can select from the following:

Twenty Twenty-Five Centred header
Centered header
Twenty Twenty-Five Header with columns
Header with columns
Twenty Twenty-Five Header with large title
Header with large title
Twenty Twenty-Five Header
Header (the default)
Twenty Twenty-Five Header inside full-width background image
Header inside full-width background image
Twenty Twenty-Five Simple header with dark background
Simple header with dark background
Twenty Twenty-Five Text-only header with tagline
Text-only header with tagline
Twenty Twenty-Five Simple header with tagline
Simple header with tagline 
Twenty Twenty-Five Fullwidth site title and menu button
Twenty Twenty-Five Fullwidth header with hero image
Fullwidth header with hero image
Twenty Twenty-Five Fullwidth header with large font size
Fullwidth header with large font size
Twenty Twenty-Five Simple header
Simple header

Centered header with logo

Twenty Twenty-Five Centered header with logo
Centred header with logo

You may have noticed that the vertical header isn’t in this list. You’ll find it in use in the Home page for the right-aligned blog, Right-aligned blog, 404 and also Page template for the right-aligned blog, an alternative Pages template layout.

Twenty Twenty-Five Page template for the right-aligned blog

Changing the footer

Changing footer is exactly the same as changing the header, except you select the footer template part.

You can choose from the following footers:

Twenty Twenty-Five Centered footer
Centered footer
Twenty Twenty-Five Footer with columns
Footer with columns
Twenty Twenty-Five Footer with newsletter signup
Footer with newsletter signup
Twenty Twenty-Five Centered footer with social links (dark)
Centered footer with social links
The Twenty Twenty-Five default footer shows a site logo, site title, tagline in one column and two lists of links in columns two and three
Footer (the default)
The Centered footer with social links shows the site logo, Proudly powered by WordPress and three social links all centered
Centered footer with social links
Twenty Twenty-Five Footer with search, site title, and credit line
Footer with search, site title, and credit line
Twenty Twenty-Five Footer with site title and credit line
Footer with site title and credit line
The fullwidth footer with background color and three columns has a dark background and shows location, pages and social links
Fullwidth footer with background color and three columns
Twenty Twenty-Five Fullwidth footer with navigation, credit, and social
Fullwidth footer with navigation, credit, and social
Twenty Twenty-Five Left-aligned footer
Left-aligned footer

Resetting a template part

To reset a template part, select it from the list of template parts (under Patterns). Click the three-dot menu next to the template and select Reset and then Reset.

Reset a template part in Twenty Twenty-Five

Twenty Twenty-Five theme translations

Twenty Twenty-Five currently has 26 translations including French, German, Spanish, Italian, Persian and simplified Chinese, so is suitable for multilingual users.

Where the theme has been translated and the language selected in Settings > General, any new block patterns added will be in the translated language. 

Selecting a Twenty Twenty-Five block pattern in French

Twenty Twenty-Five theme accessibility

The theme depends on the block editor, so its accessibility is tied to the editor. WordPress 6.7 brought 55 accessibility improvements to the block editor.

Link accessibility

There is a skip link in the header to skip the main navigation.

Links in the post or page body are underlined, while navigation menu links are not. There is a clear keyboard focus style of a black outline for all links in the page.

The Twenty Twenty-Five Focus style in Firefox

Colour contrast of palettes

Default

The Default palette uses the following colours:

Base

#ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

Contrast

#111111

RGB: 17, 17, 17

CMYK: 0, 0, 0, 93

Accent 1

#ffee58

RGB: 255, 238, 88

CMYK: 0, 7, 65, 0

Accent 2

#f6cff4

RGB: 246, 207, 244

CMYK: 0, 16, 1, 4

Accent 3

#503aa8

RGB: 80, 58, 168

CMYK: 52, 65, 0, 34

Accent 4

#686868

RGB: 104, 104, 104

CMYK: 0, 0, 0, 59

Accent 5

#fbfaf3

RGB: 251, 250, 243

CMYK: 0, 0, 3, 2

Accent 6

#000000

RGB: 0, 0, 0

CMYK: 0, 0, 0, 100

#111111 & #FFFFFF black text and white background = Contrast Ratio 18.88:1 (AA and AAA pass)

#111111 & #FBFAF3 black text and light yellow background, seen in Group or Column block style 1  = Contrast Ratio 18.04:1 (AA and AAA pass)

#40464D & #DDDDDD black text and grey background, seen at the top of the calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#40464D & #FFFFFF black text and grey background, seen in the body of the calendar block = Contrast Ratio 9.54:1 (AA and AAA pass)

#111111 and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio 5.24:1 (AA pass, AAA fail)

#111111 & #F6CFF4 black text and pink background, seen in Group or Column block style 2  = Contrast Ratio 13.62:1 (AA and AAA pass)

#111111 & #FFEE58 black text and yellow background, seen in Group or Column block style 3  = Contrast Ratio 13.62:1 (AA and AAA pass)

 #F6CFF4 & #503AA8 pink text and purple background, seen in Group or Column block style 4  = Contrast Ratio 6.03:1 (AA pass, AAA fail)

Evening

The Evening palette uses the following colours:

Base

#1b1b1b

RGB: 27, 27, 27

CMYK: 0, 0, 0, 89

Contrast

#f0f0f0

RGB: 240, 240, 240

CMYK: 0, 0, 0, 6

Accent 1

#786d0a

RGB: 120, 109, 10

CMYK: 0, 9, 92, 53

Accent 2

#442369

RGB: 68, 35, 105

CMYK: 35, 67, 0, 59

Accent 3

#d1d0ea

RGB: 209, 208, 234

CMYK: 11, 11, 0, 8

Accent 4

#cbcbcb

RGB: 203, 203, 203

CMYK: 0, 0, 0, 20

Accent 5

#353535

RGB: 53, 53, 53

CMYK: 0, 0, 0, 79

Accent 6

#ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

#CBCBCB & #1B1B1B grey text and black background = Contrast Ratio 10.61:1 (AA and AAA pass)

#F0F0F0 & #353535 white text and dark grey background, seen in the Code block and the Group block Style 1 = Contrast Ratio 10.76:1 (AA and AAA pass)

Twenty Twenty-Five Calendar block in the Evening style variation

#40464D & #DDDDDD dark text and light grey background, seen at the top of the Calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#40464D & #1B1B1B grey text and dark background, seen in the body of the Calendar block = Contrast Ratio 1.8:1 (AA and AAA fail)

#F0F0F0 and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio 3.15:1 (AA and AAA fail)

#F0F0F0 & #442369 white text and dark purple background, seen in the Group block Style 2  = Contrast Ratio 10.9:1 (AA and AAA pass)

#F0F0F0 & #786D0A white text and mustard background, seen in the Group block Style 3 , also in the Footer with newsletter signup  = Contrast Ratio 4.6:1 (AA pass, AAA fail)

#442369 & #D1D0EA dark purple text and lilac background, seen in the Group block Style 4  = Contrast Ratio 8.23:1 (AA and AAA pass)

#1B1B1B & #F0F0F0 black text and white background, seen in the Group block Style 5  = Contrast Ratio 15.11:1 (AA and AAA pass)

Noon

The Noon palette uses the following colours:

Base

#f8f7f5

RGB: 248, 247, 245

CMYK: 0, 0, 1, 3

Contrast

#191919

RGB: 25, 25, 25

CMYK: 0, 0, 0, 90

Accent 1

#ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

Accent 2

#f5b684

RGB: 245, 182, 132

CMYK: 0, 26, 46, 4

Accent 3

#191919

RGB: 25, 25, 25

CMYK: 0, 0, 0, 90

Accent 4

#5f5f5f

RGB: 95, 95, 95

CMYK: 0, 0, 0, 63

Accent 5

#f1eee9

RGB: 241, 238, 233

CMYK: 0, 1, 3, 5

Accent 6

#000000

RGB: 0, 0, 0

CMYK: 0, 0, 0, 100

#191919 & #F8F7F5 black text and cream background, seen in headings = Contrast Ratio 16.42:1 (AA and AAA pass)

#5F5F5F & #F8F7F5 dark grey text and cream background, seen in body text = Contrast Ratio 5.96:1 (AA pass, AAA fail)

#40464D & #DDDDDD dark grey text and mid grey background, seen in the top of the Calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#191919 and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio  4.88:1 (AA pass, AAA fail)

#191919 & #F1EEE9 black text and light beige background, seen in the Group block Style 1  = Contrast Ratio 15.19:1 (AA and AAA pass)

#191919 & #F5B684 black text and orange background, seen in the Group block Style 2  = Contrast Ratio 9.96:1 (AA and AAA pass)

#191919 & #FFFFFF black text and white background, seen in the Group block Style 3  = Contrast Ratio 17.58:1 (AA and AAA pass)

#F5B684 & #191919 orange text and black background, seen in the Group block Style 4  = Contrast Ratio 9.96:1 (AA and AAA pass)

#F8F7F5 & #191919 cream text and black background, seen in the Group block Style 5  = Contrast Ratio 16.42:1 (AA and AAA pass)

Dusk

The Dusk palette uses the following colours:

Base

#e2e2e2

RGB: 226, 226, 226

CMYK: 0, 0, 0, 11

Contrast

#3b3b3b

RGB: 59, 59, 59

CMYK: 0, 0, 0, 77

Accent 1

#f5edff

RGB: 245, 237, 255

CMYK: 4, 7, 0, 0

Accent 2

#650dd4

RGB: 101, 13, 212

CMYK: 52, 94, 0, 17

Accent 3

#191919

RGB: 25, 25, 25

CMYK: 0, 0, 0, 90

Accent 4

#5f5f5f

RGB: 95, 95, 95

CMYK: 0, 0, 0, 63

Accent 5

#dbdbdb

RGB: 219, 219, 219

CMYK: 0, 0, 0, 14

Accent 6

#3b3b3b

RGB: 59, 59, 59

CMYK: 0, 0, 0, 77

#3B3B3B & #E2E2E2 dark grey text and light grey background, seen in headings = Contrast Ratio 8.64:1 (AA and AAA pass)

#000000 & #E2E2E2 black text and light grey background, seen in body text and Quote block = Contrast Ratio 16.21:1 (AA and AAA pass)

#650DD4 & #E2E2E2 purple text and light grey background, seen in visited links = Contrast Ratio 6.32:1 (AA pass, AAA fail)

#40464D & #DDDDDD, dark grey text and light grey background, seen at the top of the Calendar widget = Contrast Ratio 7.02:1 (AA and AAA pass)

#3B3B3B and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio 3.11:1 (AA and AAA fail)

#E2E2E2 & #650DD4 light grey text and purple background, seen in buttons = Contrast Ratio 6.32:1 (AA pass, AAA fail)

#191919 & #DBDBDB dark grey text and light grey background, seen in the Group block Style 1 = Contrast Ratio 16.21:1 (AA and AAA pass)

#E2E2E2 & #650DD4 light grey text and purple background, seen in the Group block Style 2 = Contrast Ratio 6.32:1 (AA pass, AAA fail)

#E2E2E2 & #191919 light grey text and dark grey background, seen in the Group block Style 2 and the Group block Style 4 = Contrast Ratio 13.57:1 (AA and AAA pass)

#650DD4 & #F5EDFF purple text and lilac background, seen in the Group block Style 3 and the the Footer with newsletter signup = Contrast Ratio 7.19:1 (AA and AAA pass)

#E2E2E2 & #650DD4 light grey text and purple background, seen in the Group block Style 3, Style 4 and Style 5 button and the Footer with newsletter signup button  =  Contrast Ratio 6.32:1 (AA pass, AAA fail)

#E2E2E2 & #3B3B3B light grey text and grey background, seen in the Group block Style 5 = Contrast Ratio 8.64:1 (AA and AAA pass)

Afternoon

The Afternoon palette uses the following colours:

Base

#dae7bd

RGB: 218, 231, 189

CMYK: 6, 0, 18, 9

Contrast

#516028

RGB: 81, 96, 40

CMYK: 16, 0, 58, 62

Accent 1

#c7f642

RGB: 199, 246, 66

CMYK: 19, 0, 73, 4

Accent 2

#ebf6d3

RGB: 235, 246, 211

CMYK: 4, 0, 14, 4

Accent 3

#303d10

RGB: 48, 61, 16

CMYK: 21, 0, 74, 76

Accent 4

#516028

RGB: 81, 96, 40

CMYK: 16, 0, 58, 62

Accent 5

#ebf6d3

RGB: 235, 246, 211

CMYK: 4, 0, 14, 4

Accent 6

#516028

RGB: 81, 96, 40

CMYK: 16, 0, 58, 62

#516028 & #DAE7BD olive text and light green background, seen in headings and paragraph text = Contrast Ratio 5.28:1 (AA pass, AAA fail)

#516028 & #EBF6D3 olive text and light green background, seen in the Code block and the Group block Style 1 = Contrast Ratio 6.1:1 (AA pass, AAA fail)

#DAE7BD & #516028 light green text and dark green background, seen in the Button block, and the Group block Style 5 = Contrast Ratio 6.1:1 (AA pass, AAA fail)

#40464D & #DDDDDD dark grey text and light grey background, seen in the top of the Calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#516028 and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio 1.91:1 (AA and AAA fail)

#C7F642 & #303D10 lime green text and dark green background, seen in the Group block Style 2 = Contrast Ratio 9.26:1 (AA and AAA pass)

#303D10 & #C7F642 lime green text and dark green background, seen in the Group block Style 2 button = Contrast Ratio 9.26:1 (AA and AAA pass)

#516028 & #C7F642 green text and lime green background, seen in the Group block Style 3 =  Contrast Ratio 5.46:1 (AA pass, AAA fail)

#DAE7BD & #516028 light green text and olive background, seen in the Group block Style 3 button = Contrast Ratio 5.28:1 (AA pass, AAA fail)

#EBF6D3 & #303D10 light green text and dark green background, seen in the Group block Style 4 = Contrast Ratio 10.36:1 (AA and AAA pass)

#303D10 & #EBF6D3 dark green text and light background, seen in the Group block Style 4 button = Contrast Ratio 10.36:1 (AA and AAA pass)

#516028 & #DAE7BD olive text and light green background, seen in the Group block Style 5 button =  Contrast Ratio 5.28:1 (AA pass, AAA fail)

Twilight

The Twilight palette uses the following colours:

Base

#131313

RGB: 19, 19, 19

CMYK: 0, 0, 0, 93

Contrast

#ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

Accent 1

#4b52ff

RGB: 75, 82, 255

CMYK: 71, 68, 0, 0

Accent 2

#ff7a5c

RGB: 255, 122, 92

CMYK: 0, 52, 64, 0

Accent 3

#252525

RGB: 37, 37, 37

CMYK: 0, 0, 0, 85

Accent 4

#ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

Accent 5

#252525

RGB: 37, 37, 37

CMYK: 0, 0, 0, 85

Accent 6

#ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

#FFFFFF & #131313 white text and black background = Contrast Ratio 18.58:1 (AA and AAA pass)

#FFFFFF & #252525 white text and dark grey background, seen in the Code block and the Group block Style 1 = Contrast Ratio 15.32:1 (AA and AAA pass)

#40464D & #DDDDDD grey text and cream background, seen in the top of the Calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#40464D & #131313 grey text and black background, seen in the body of the Calendar block = Contrast Ratio 1.94:1 (AA and AAA fail)

#FFFFFF and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio 3.6:1 (AA and AAA fail)

#131313 & #FFFFFF black text and white background, seen in the Group block Style 1 button = Contrast Ratio 18.58:1 (AA and AAA pass)

#131313 & #FF7A5C black text and orange background, seen in the Group block Style 2 = Contrast Ratio 7.24:1 (AA and AAA pass)

#FFFFFF & #4B52FF white text and blue background, seen in the Code block and the Group block Style 3 = Contrast Ratio 5.31:1 (AA pass, AAA fail)

#FF7A5C & #252525 orange text and grey background, seen in the Group block Style 4 = Contrast Ratio 5.97:1 (AA pass, AAA fail)

#252525 & #FF7A5C black text and orange background, seen in the Group block Style 4 button = Contrast Ratio 5.97:1 (AA pass, AAA fail)

#131313 & #FFFFFF black text and white background, seen in the Group block Style 5 = Contrast Ratio 18.58:1 (AA and AAA pass)

Morning

The Morning palette uses the following colours:

Base

#dfdcd7

RGB: 223, 220, 215

CMYK: 0, 1, 4, 13

Contrast

#191919

RGB: 25, 25, 25

CMYK: 0, 0, 0, 90

Accent 1

#7a9bdb

RGB: 122, 155, 219

CMYK: 44, 29, 0, 14

Accent 2

#f7e6ff

RGB: 247, 230, 255

CMYK: 3, 10, 0, 0

Accent 3

#182949

RGB: 24, 41, 73

CMYK: 67, 44, 0, 71

Accent 4

#5f5f5f

RGB: 95, 95, 95

CMYK: 0, 0, 0, 63

Accent 5

#d7d3cc

RGB: 215, 211, 204

CMYK: 0, 2, 5, 16

Accent 6

#191919

RGB: 25, 25, 25

CMYK: 0, 0, 0, 90

#191919 & #DFDCD7 black text and sand background, seen in headings = Contrast Ratio 12.85:1 (AA and AAA pass)

#5F5F5F & #DFDCD7 black text and sand background, seen in body text = Contrast Ratio 4.66:1 (AA pass, AAA fail)

#191919 & #D7D3CC black text and sand background, seen in the Code block and the Group block Style 1 = Contrast Ratio 11.78:1 (AA and AAA pass)

#40464D & #DDDDDD black text and grey background, seen in the top of the Calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#40464D & #DFDCD7 black text and sand background, seen in the body of the Calendar block = Contrast Ratio 6.97:1 (AA pass, AAA fail)

#191919 and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio  4.88:1 (AA pass, AAA fail)

#191919 & #7A9BDB black text and blue background, seen in the Button block and the Group block Style 3  = Contrast Ratio 6.31:1 (AA pass, AAA fail)

#191919 & #F7E6FF black text and pale pink background, seen in the Group block Style 2 = Contrast Ratio 14.83:1 (AA and AAA pass)

#DFDCD7 & #191919 sand text and black background, seen in the Group block Style 3 button = Contrast Ratio 12.85:1 (AA and AAA pass)

#DFDCD7 & #182949 sand text and navy background, seen in the Group block Style 4 = Contrast Ratio 10.57:1 (AA and AAA pass)

#DFDCD7 & #191919 sand text and black background, seen in the Group block Style 5 = Contrast Ratio 12.85:1 (AA and AAA pass)

Sunrise

The Sunrise palette uses the following colours:

Base

#330616

RGB: 51, 6, 22

CMYK: 0, 88, 57, 80

Contrast

#ffffff

RGB: 255, 255, 255

CMYK: 0, 0, 0, 0

Accent 1

#f0fda6

RGB: 240, 253, 166

CMYK: 5, 0, 34, 1

Accent 2

#db9ab1

RGB: 219, 154, 177

CMYK: 0, 30, 19, 14

Accent 3

#c1e4e7

RGB: 193, 228, 231

CMYK: 16, 1, 0, 9

Accent 4

#db9ab1

RGB: 219, 154, 177

CMYK: 0, 30, 19, 14

Accent 5

#4a1628

RGB: 74, 22, 40

CMYK: 0, 70, 46, 71

Accent 6

#db9ab1

RGB: 219, 154, 177

CMYK: 0, 30, 19, 14

#DB9AB1 & #330616 pink text and maroon background, seen in headings and body text = Contrast Ratio 7.86:1 (AA and AAA pass)

#DB9AB1 & #4A1628 pink text and maroon background, seen in the Code block = Contrast Ratio 6.45:1 (AA pass, AAA fail)

#330616 & #DB9AB1 maroon text and pink background, seen in the Button block = Contrast Ratio 7.86:1 (AA and AAA pass)

#40464D & #DDDDDD black text and cream background, seen in the top of the Calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#40464D & #330616 black text and maroon background, seen in the body of the Calendar block = Contrast Ratio 1.86:1 (AA and AAA fail)

#FFFFFF and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio 3.6:1 (AA and AAA fail)

#4A1628 & #FFFFFF maroon text and white background, seen in the Group block Style 1 = Contrast Ratio 14.61:1 (AA and AAA pass)

#FFFFFF & #4A1628 white text and maroon background, seen in the Group block Style 1 button = Contrast Ratio 14.61:1 (AA and AAA pass)

#330616 & #DB9AB1 maroon text and pink background,  seen in the Group block Style 2 = Contrast Ratio 7.86:1 (AA and AAA pass)

#FFFFFF & #330616 white text and maroon background, seen in the Group block Style 2 button, the Group block Style 3 button and the Group block Style 4 button = Contrast Ratio 17.82:1 (AA and AAA pass)

#330616 & #F0FDA6 maroon text and yellow background, seen in the Group block Style 3 = Contrast Ratio 16.38:1 (AA and AAA pass)

#330616 & #C1E4E7 maroon text and blue background, seen in the Group block Style 4 = Contrast Ratio 13.16:1 (AA and AAA pass)

#FFFFFF & #4A1628 white text and maroon background, seen in the Group block Style 1 button and the Group block Style 5 = Contrast Ratio 14.61:1 (AA and AAA pass)

#4A1628 & #FFFFFF maroon text and white background, seen in the Group block Style 5 button = Contrast Ratio 14.61:1 (AA and AAA pass)

Midnight

The Midnight palette uses the following colours:

Base

#4433a6

RGB: 68, 51, 166

CMYK: 59, 69, 0, 35

Contrast

#79f3b1

RGB: 121, 243, 177

CMYK: 50, 0, 27, 5

Accent 1

#5644bc

RGB: 86, 68, 188

CMYK: 54, 64, 0, 26

Accent 2

#372696

RGB: 55, 38, 150

CMYK: 63, 75, 0, 41

Accent 3

#251d51

RGB: 37, 29, 81

CMYK: 54, 64, 0, 68

Accent 4

#79f3b1

RGB: 121, 243, 177

CMYK: 50, 0, 27, 5

Accent 5

#e8b7ff

RGB: 232, 183, 255

CMYK: 9, 28, 0, 0

Accent 6

#79f3b1

RGB: 121, 243, 177

CMYK: 50, 0, 27, 5

#79F3B1 & #4433A6 green text and blue background, seen in headings and body text = Contrast Ratio 6.72:1 (AA pass, AAA fail)

#79F3B1 & #372696 green text and blue background, seen in the Code block and the Group block Style 2 = Contrast Ratio 8.12:1 (AA and AAA pass)

#4433A6 & #79F3B1 blue text and green background, seen in the Button block and the Group block Style 5 = Contrast Ratio 6.72:1 (AA pass, AAA fail)

#40464D & #DDDDDD black text and cream background, seen in the top of the Calendar block = Contrast Ratio 7.02:1 (AA and AAA pass)

#40464D & #4433A6 black text and blue background, seen in the body of the Calendar block = Contrast Ratio 1.03:1 (AA and AAA fail)

#79F3B1 and #EB4C77 seen in the Heading, Paragraph, Button with Two Images block = Contrast Ratio 2.61:1 (AA and AAA fail)

#251D51 & #E8B7FF purple text and pink background, seen in the Group block Style 1 = Contrast Ratio 9.21:1 (AA and AAA pass)

#E8B7FF & #251D51 pink text and purple background, seen in the Group block Style 1 button and the Group block Style 4 = Contrast Ratio 9.21:1 (AA and AAA pass) 

#79F3B1 & #5644BC green text and blue background, seen in the Group block Style 3 = Contrast Ratio 5.17:1 (AA pass, AAA fail)

#4433A6 & #79F3B1 green text and blue background, seen in the Group block Style 3 = Contrast Ratio 5.17:1 (AA pass, AAA fail)

Colour contrast summary

It’s worth noting that only the Default style variation needs to be accessibility-ready. If you’re unsure about the theme’s colour contrast, this is the best style variation to use.

A number of the style variations – primarily those with dark backgrounds – seem to have issues with the colour contrast for the Calendar block. I suspect this is more of an issue with the block than with the theme.

Twenty Twenty-Five Calendar block Midnight style variation

I also found contrast issues with the following block where you can see the inadequate colour contrast. I wouldn’t recommend using it.

Twenty Twenty-Five Heading, Paragraph, Button with Two Images block with the Afternoon style variation

Landmarks and navigation

The theme is split into landmark regions, as shown below. Read how landmarks benefit screen reader users.

Twenty Twenty-Five landmarks

You can add a name to a Navigation block to make it distinguishable and more understandable for a screen reader user. You do this by:

  1. Adding a new navigation block. The block defaults to the “All Pages” navigation.
  2. Edit the navigation block. 
  3. In the block settings, click on the Settings icon (the cog icon).
  4. Scroll down to the Advanced tab and click on it.
  5. In the Menu name field, change the name.
  6. Save your changes.
Renaming a menu in the Navigation block

The navigation now has an aria-label with the name you just added. You can repeat this process for your other navigation blocks.

Customizing the Twenty Twenty-Five theme

Create a child theme

Classic themes relied on making child themes to save changes to the theme. The need for child themes is not so great for block themes because they save changes to the database. Have a read of Carolina Nymark’s article on block child themes to determine if you need one.

The easiest way to create a Twenty Twenty-Five child theme is to use the Create Block Theme plugin.

Once you have installed the plugin, go to Appearance > Create Block Theme.

Create Block Theme settings page

Select the Create a Child option.

Create a child of Twenty Twenty-Five

Complete the information and select Create Child Theme. You will be redirected to the Site Editor with the new theme already active.

Add new Google fonts

You can add new fonts by doing the following:

  1. Open the site editor at Appearance > Editor.
  2. Select Styles, then Edit styles (the pencil icon).
  3. In the Styles panel, select Typography.
  4. Choose the Manage fonts icon (to the right of the Fonts heading).
  5. Select Install Fonts.
  6. Click the Allow access to Google Fonts button.
  7. Find the font you want and select it.
  8. Choose the font variant(s) you want to use and select it or them.
  9. Select Install. You should get a message saying “Fonts were installed successfully.”
  10. Repeat steps 7-9 for any other fonts you want to install.

To use the font in your theme, exit the font dialog box and scroll down to the Styles panel’s Elements section. Select the element you want to apply the font to. In the example below, I’ve chosen Headings. In the Typography section choose the font you want from the combo box. You should see it immediately applied to the page. Don’t forget to save your changes!

Applying the ABeeZee Google Font to headings

Show an excerpt rather than content on your blog page

By default the Blog Home template shows the full post content, but you can change this by finding the Content block in the Document Overview, adding an Excerpt block underneath it and then deleting the Content block.

Editing the Blog Home template to show the excerpt in Twenty Twenty-Five

Create a template for a custom post type

I created a Movie custom post type with the Advanced Custom Fields plugin and gave it a Genres taxonomy and a field group with 3 custom fields – Year, Rating and Quote. Using the Advanced Views Framework plugin I created a shortcode to add these custom fields to an instance of the Movie post type.

I used the Add New Template button from the Templates view and chose the Single item: Movie.

Adding a new Movie template to Twenty Twenty-Five

I started this template with the News blog single post with sidebar design and customized it. Here’s what the template ended up looking like in the List View.

Single Movie template in List View

And on the website, a Movie looks like this:

Back to the Future, an example of a Movie custom post type

Enable the Photo blog templates

To use the Photo blog templates you need to switch designs for both the Blog Home and Single Posts templates.

  1. Go to Appearance > Edit site.
  2. Select Templates.
  3. Select Blog Home.
  4. In the Settings sidebar, open the Design tab.
  5. Scroll down and select the Photo blog home pattern. It will replace the design for Blog Home.
  6. Save your changes.
  7. Repeat steps 1-6 but this time select the Single Posts template in step 3 and the Photo blog single post in step 5.
Editing the Blog Home template and selecting the Design tab
Selecting the Photo blog home pattern for the Blog Home template

To make the most of these templates, give each of your posts a featured image. Otherwise there will be gaps in your photo grid and the posts won’t be visible.

Photo Blog Home layout in Twenty Twenty-Five

Make the header sticky

There are a few steps to making your header sticky i.e. on top of the screen as you scroll down.

  1. Open a template. I’ve chosen Blog Home.
  2.  Select the Header, and in the three-dot menu, select Group.
  3. In this group block’s settings, turn off the Inner blocks use content width setting.
  4. Open the Position options, select Default and change to Sticky.
  5. Save your changes. The menu will now be sticky on this template’s page, but if you look at the page you will see it’s transparent when you scroll.
  6. In the block editor, select the group block Styles tab.
  7. In the Color section, set a solid background colour.
  8. Save your changes.
Selecting the Header and the Group option
Step 2: Grouping the header
Turning off the Inner blocks use content width option
Step 3: Making the header full width
The Group block's Position menu showing the Sticky option
Step 4: Making the header sticky
Changing the background colour of the Group block
Step 7: Selecting a solid background colour

Repeat this process for the other templates you’re using.

Improve the legibility of the Calendar block in dark style variations

To do this you need to Edit styles by selecting the pencil icon in the Styles menu.

Normally you would edit individual blocks to customize their styles, but that doesn’t work as expected in this case. The grey title and days of the week aren’t changed.

Instead, when editing styles, click on the three-dot menu next to the Revisions icon and select Additional CSS. 

The Additional CSS option

Then add this code:

.wp-block-calendar table:where(:not(.has-text-color)) {

  color: #fff;

}

Save your changes. You’re almost there, but the table heading contrast is now too low.

Twenty Twenty-Five Evening style Calendar block with poor table header contrast

Now find the Block styles.

Customize Blocks option

Select the Calendar block from the list.

Click on Text and change the colour to a dark one e.g. #1B1B1B.

Twenty Twenty-Five Evening Calendar block with dark text

This is better – but the link at the bottom has now disappeared.

Click on Link and change the colour to a light one e.g. #F0F0F0.

Twenty Twenty-Five Evening Calendar block with light link text

Save your changes.

Your Calendar block is now legible!

Twenty Twenty-Five Evening Calendar block with good colour contrast

Create a landing page

To create a landing page from a pattern, add a new page and select the landing page pattern you want to use, for example Landing page for podcast.

Name your page.

To hide the page title, select the Template Pages in the settings sidebar and then Swap template.

How to swap page template

Select Page No Title.

Save your page.

Since you removed the title, remember to change the heading level of The Stories Podcast from h2 to h1.

To get the sponsorship section to show, you need to add logos to the placeholder image blocks and videos to the video blocks.

Choose a template

Save or Publish the page and view it.

Add images with Openverse

WordPress 6.7, which is required to use Twenty Twenty-Five, includes the Openverse Media Library, a free stock photos, images, and audio library. All images in it are either in the public domain or Creative Commons licensed.

To insert an image, use the blue block inserter button on the top left, then select Media and Openverse.

Search for the image you want to use and click to insert it. 

Add an image with Openverse

The image is added automatically to your Media Library as well as the page, and has a caption with a link to the image license. At the time of writing it seems that all the images you can choose from have the CC0 1.0 Universal license, which is copyright free. At a later stage you may be able to filter the content by other Creative Commons license types. You can do this if you go direct to the Openverse website.

The Openverse integration does not give the image alternative text, so you will need to add your own if necessary, and save your changes.

Use different text styles

Both Heading and Paragraph blocks have styles which you can apply in the block settings sidebar. Text has the Default style normally. The Display and Subtitle styles both enlarge the text, while the Annotation style makes the text smaller and puts a rounded border around it.

Twenty Twenty-Five Heading and paragraph styles

Use post formats block patterns

If you use post formats for blog posts, the theme has 3 block patterns for you to use.

The Post format name is a general block, while the Audio format and Link format blocks are for Audio and Link post formats respectively. The latter two blocks can have multiple styles.

Twenty Twenty-Five Post formats block patterns

Twenty Twenty-Five demo sites

You can view a demo site of the Twenty Twenty-Five theme on WordPress.com. Just select Demo site to view. You can switch between desktop, tablet and mobile views.

Twenty Twenty Five Business homepage mobile view from WordPress.com

MotoPress have created another demo site at Twenty Twenty-Five – 2025 WordPress Theme Demo. What’s cool about this one is that it includes a style switcher, so you can view pages in the different style variations.

Twenty Twenty-Five Portfolio homepage Dusk style variation from MotoPress.com

Summing up

In my opinion, Twenty Twenty-Five is the best default full site editing theme so far. It has a wide variety of uses and a decent number of block patterns. As it has been translated into several languages, it’s suitable for multilingual sites.

Have you tried Twenty Twenty-Five? Let me know in the comments.

Related

Category: WordPress Tags: accessibility-ready, theme

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Trackbacks

  1. Having blog home showing only excerpts for Twenty Twenty Five theme. | Sabre23t v4.1 says:
    April 12, 2025 at 2:50 am

    […] https://www.abrightclearweb.com/twenty-twenty-five-theme-the-ultimate-guide/#show-an-excerpt-rather-… […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map