2023 just arrived. Happy New Year !! To day we are going the introduce the new default WordPress theme of this year in the version 6.1 . Like all other WordPress theme, this new default theme is named after the year it is released for. Now let’s dig into Twenty Twenty-Three WordPress: Explore the New Features, Functions, and Style Variations.
WordPress is the most popular content management system today, with millions of websites being built with it. With its latest 6.1 release along with the Twenty Twenty-Three theme, WordPress has made it easier for users to create stunning websites.
In this blog post, we will explore the features of the Twenty Twenty-Three theme and how you can use it to get ahead of the curve and create stunning websites.
Behind the Design of Twenty Twenty-Three Theme
In a nutshell, a simplified form of Twenty Twenty-Two is the Twenty Twenty-Three. However, the new default theme’s clarity and airiness immediately stand out. Even though the new theme is a condensed version of Twenty Twenty-Two, it has some significant differences from the old default theme.
The project presented an opportunity to engage bright people from the WordPress community. The highlighted style variants for Twenty Twenty-Three were submitted by users of the WordPress community, yielding 38 contributions from 19 people in 8 different countries for a genuinely international assortment. A handpicked selection of 10 was selected from those entries and packaged with the new theme.
That is why Kjell Reigstad wrote concerning the development of default themes
- “There’s reason to expect that the community can harness all this to provide more frequent and diversified theme and customization alternatives for our users in the coming years.”
This method of style modification brings in the next wave of block themes, capable of utilizing the platform’s most advanced design features and resources directly in the Site Editor.
The following chart shows a report showing the downloads of the new default theme as of December 2022 –
How to Install theTwenty Twenty-Three Theme
When you upgrade WordPress to its most recent version, the newest default theme is automatically installed and activated. Think about how block themes might be used as the starting point for new WordPress users when configuring their themes. It was therefore quite evident that we expected other themes to operate in a similar manner.
Search for “Twenty Twenty-Three” under
Appearance >> Themes >> Add new
You may alternatively obtain it from the Theme Repository in lieu of that. In order to utilize it on your website, choose it and then click “Install” and “Activate.”
The Features, Functions, and Styles of the Twenty Twenty-Three Theme
Without further ado, let’s get to know the new features, functions, and styles of the new default theme that make it stand out. We have tested the theme on our site and found the followings very useful –
Fluid Spacing and Typography
Prior to WordPress 6.1, the editor was the only place where custom spacing values could be defined. As a result, theme developers could not provide precise padding, margin, and spacing values before WordPress 6.1. Multiple restrictions are the outcome of this.
Now, the problem is solved with the fluid spacing support of the Twenty Twenty-Three theme. This can be enabled in the new spacing.spacingScale and spacing.spacingSizes with the following settings –
| “settings”: { “spacing”: { “spacingScale”: { “steps”: 0 }, “spacingSizes”: [ { “size”: “clamp(1.5rem, 5vw, 2rem)”, “slug”: “30”, “name”: “30” }, { “size”: “clamp(1.8rem, 1.8rem + ((1vw – 0.48rem) * 2.885), 3rem)”, “slug”: “40”, “name”: “40” }, { “size”: “clamp(2.5rem, 8vw, 6.5rem)”, “slug”: “50”, “name”: “50” }, { “size”: “clamp(3.75rem, 10vw, 7rem)”, “slug”: “60”, “name”: “60” }, { “size”: “clamp(5rem, 5.25rem + ((1vw – 0.48rem) * 9.096), 8rem)”, “slug”: “70”, “name”: “70” }, { “size”: “clamp(7rem, 14vw, 11rem)”, “slug”: “80”, “name”: “80” } ], “units”: [ “%”, “px”, “em”, “rem”, “vh”, “vw” ] }} |
You may use the new default WordPress theme as a model for adding support for fluid typography, as it offers a wonderful illustration of how the feature is implemented in WordPress themes.
Look for the following code in theme.json file to know the settings.typography.fontSizes[] and settings.typography.fluid properties –
| “settings”: { … “typography”: { “fluid”: true, “fontSizes”: [ { “fluid”: { “min”: “0.875rem”, “max”: “1rem” }, “size”: “1rem”, “slug”: “small” }, { “fluid”: { “min”: “1rem”, “max”: “1.125rem” }, “size”: “1.125rem”, “slug”: “medium” }, { “size”: “1.75rem”, “slug”: “large”, “fluid”: false }, { “size”: “2.25rem”, “slug”: “x-large”, “fluid”: false }, { “size”: “10rem”, “slug”: “xx-large”, “fluid”: { “min”: “4rem”, “max”: “20rem” } } ] }} |
New Fonts and Typefaces
The Twenty Twenty-Three WordPress theme features modern and stylish typography that is optimized for readability. It has a range of font sizes and weights, as well as a range of letter, line, and paragraph spacing options.
This allows users to customize their website’s typography to best fit their content and branding. The font selection includes a range of popular fonts, such as Open Sans, Roboto, Helvetica Neue, and so on.
You should also know, the Twenty Twenty-Three WordPress theme features the following typefaces –
| Inter – var(–wp–preset–font-family–inter)DM Sans – var(–wp–preset–font-family–dm-sans)System Font – var(–wp–preset–font-family–system-font)IBM Plex Mono – var(–wp–preset–font-family–ibm-plex-mono)Source Serif Pro – var(–wp–preset–font-family–source-serif-pro) |
The Twenty Twenty-Three WordPress theme also includes the Google Fonts library, allowing users to easily access a wide range of free fonts. This makes it easy for users to create a readable website with an appealing look.
Page Styles and Layouts
The Twenty Twenty-Three WordPress theme gives users the freedom to design their websites in a variety of page styles and layouts. The theme offers a variety of column layouts, making it simple for users to design pages with multiple columns.
New Fonts and Typefaces
The Twenty Twenty-Three WordPress theme features modern and stylish typography that is optimized for readability. It has a range of font sizes and weights, as well as a range of letter, line, and paragraph spacing options.
This allows users to customize their website’s typography to best fit their content and branding. The font selection includes a range of popular fonts, such as Open Sans, Roboto, Helvetica Neue, and so on.
You should also know, the Twenty Twenty-Three WordPress theme features the following typefaces –
| Inter – var(–wp–preset–font-family–inter)DM Sans – var(–wp–preset–font-family–dm-sans)System Font – var(–wp–preset–font-family–system-font)IBM Plex Mono – var(–wp–preset–font-family–ibm-plex-mono)Source Serif Pro – var(–wp–preset–font-family–source-serif-pro) |
The Twenty Twenty-Three WordPress theme also includes the Google Fonts library, allowing users to easily access a wide range of free fonts. This makes it easy for users to create a readable website with an appealing look.
Page Styles and Layouts
The Twenty Twenty-Three WordPress theme gives users the freedom to design their websites in a variety of page styles and layouts. The theme offers a variety of column layouts, making it simple for users to design pages with multiple columns.
Twenty Twenty-Three is adaptable and well adapted to Gutenberg‘s most recent site editing capabilities, including block patterns, global style variants, and template customization. The new default theme is remarkable because of how light and uncomplicated it is.
The illustration below displays single post pages with and without featured photos as examples.
Color Palettes
Additionally, a variety of color schemes are available in the Twenty Twenty-Three WordPress theme, enabling users to quickly and easily alter the appearance and feel of their website. The color palettes are designed to work with any of the fonts in the Twenty Twenty-Three library, making it easy to create a cohesive, stylish look for your website.
The following code from theme.json contains the new color palette –
| { “settings”: { “appearanceTools”: true, “color”: { “palette”: [ { “color”: “#ffffff”, “name”: “Base”, “slug”: “base” }, { “color”: “#000000”, “name”: “Contrast”, “slug”: “contrast” }, { “color”: “#9DFF20”, “name”: “Primary”, “slug”: “primary” }, { “color”: “#345C00”, “name”: “Secondary”, “slug”: “secondary” }, { “color”: “#F6F6F6”, “name”: “Tertiary”, “slug”: “tertiary” } ] }, }} |
Custom Block Patterns
There are several different unique block patterns included in the Twenty Twenty-Three WordPress theme. These enable users to add unique content and features to their websites quickly and easily.
These block patterns include a range of popular content types, such as contact forms, search boxes, and social media feeds. This makes it easy to create a website with a unique, engaging look.
You may quickly develop a fully functional website using the default Twenty Twenty-Three theme by utilizing all of the custom block patterns. You just need to drag and drop new patterns or blocks into your web page and adjust them globally across your website.
Templates & Template Parts
It is simple to build a beautiful website with the new template and template parts of the Twenty Twenty-Three WordPress theme. The templates are designed to work with any of the themes in the Twenty Twenty-Three library, making it easy to create a website with a unique, stylish look.
The following theme.json includes the code of the templates –
| { “customTemplates”: [ { “name”: “blank”, “postTypes”: [ “page”, “post” ], “title”: “Blank” }, { “name”: “blog-alternative”, “postTypes”: [ “page” ], “title”: “Blog (Alternative)” }, { “name”: “404”, “postTypes”: [ “page” ], “title”: “404” }, { “name”: “with-featured-image”, “postTypes”: [ “page”, “post” ], “title”: “With Featured Image” }, { “name”: “with-cover-block”, “postTypes”: [ “page”, “post” ], “title”: “With Cover Block” } ],} |
You will get a list of eleven templates and four template components when you activate and launch the new theme on your website.
The matching HTML files may also be found in the Twenty Twenty-Three templates and parts directories.
You will get the code for the template parts in the following theme.json –
| { “templateParts”: [ { “area”: “header”, “name”: “header”, “title”: “Header” }, { “area”: “footer”, “name”: “footer”, “title”: “Footer” }, { “area”: “uncategorized”, “name”: “comments”, “title”: “Comments” }, { “area”: “uncategorized”, “name”: “post-meta”, “title”: “Post Meta” } ]} |
Additionally, The following unique templates are offered by Twenty Twenty-Three aside from the default ones –
- 404 page
- Blog page
- Blank page
- Page with the featured image
- Page with the cover block
To know more about the new WordPress Twenty Twenty-Three theme, you can either visit the official website or check out the following video –
Use the editor | WordPress.com Support
Bottom Line
With the Twenty Twenty-Three WordPress theme, you can easily create a stunning website that stands out from the crowd. The theme offers a range of features, such as custom typography, page styles and layouts, templates, and custom block patterns, making it easy to create a website with a unique, stylish look.
So go ahead and get ahead of the curve by exploring the Twenty Twenty-Three WordPress theme and creating a stunning website today.
