Skip to content

Files

Latest commit

ff04314 · Dec 21, 2020

History

History
138 lines (74 loc) · 9.65 KB

2_twenty_twenty_one_theme.md

File metadata and controls

138 lines (74 loc) · 9.65 KB

Status: Version 2020/12/19. This is being finalized with the Release Squad.

Twenty Twenty-One Default Theme

Introducing Twenty Twenty-One which is the default theme with this release. https://make.wordpress.org/core/2020/09/23/introducing-twenty-twenty-one/


Questions and Answers - aimed at supporting General Users

Q1. What is the difference between WordPress theme Twenty Twenty and Twenty Twenty-One?

A. Both themes have high levels of accessibility and performance and follow good practice. Just like other WordPress default themes, they receive the necessary updates to be fully compatible with the latest WordPress version.

The main reason to choose the new Twenty Twenty-One theme is its modern design, freshness and flexibility. Twenty Twenty-One adds beautifully styled block patterns, block styles, and a custom color palette to make adding content to your site easy. This theme has a new color palette with pastel colors ideal for different purposes from a photographer’s personal portfolio to a cosmetic store, or beauty blog. It is also the first time where the default WordPress theme has a Dark mode feature.

Q2. What are the benefits of using a WordPress default theme Twenty Twenty-One?

This new theme has:

1. A unique design pattern in line with modern trends.

Unique design patterns in 2021 Theme

To find out more about patterns which were introduced in August 2020 in WordPress 5.5 go to this link

2. New color palette with nice pastel colors

Color Palette for 2021 Theme

You can choose the background color in the Customizer (check it below) and change color of text or background of a block in The Block Editor.

Choose Background color in Customizer for 2021 Theme

3. Ability to give visitors the possibility to switch to the Dark mode with one button

Dark Mode in 2021 Theme

You can choose a background color and enable or disable this feature in the Customizer (Dashboard > Appearance > Customize > Colors & Dark Mode)

Dark Mode in 2021 Theme

4. Highest level of Accessibility from WordPress default themes

Highest level of Accessibility in 2021 Theme

While the Twenty Twenty-One theme is of this highest accessibility level, accessibility of your site will also depend on which plugins you install. The WordPress Accessibility team recommends that you review all plugins for accessibility before installing them on your site. These scores are also dependent on which plugins you have on your site as well, so be careful and do your research before choosing to install a plugin on your site.

The WordPress community has a whole team devoted to accessibility which will be celebrating its 10th anniversary in 2021. If you want to find more about their work or to and get involved, visit

Try the Twenty Twenty-One theme for yourself and discover its many benefits. The Release Squad working with many other contributors across the WordPress open source project have done a lot of work on this theme and it’s an exciting step forward

Q3. What is the Dark Mode in Twenty Twenty-One Theme?

Twenty Twenty-One will include support for Dark Mode. This feature can be enabled within the Customizer.

Dark Mode in 2021 theme

Dark Mode allows the site to honor a visitor’s dark mode preferences on the device they are using to view your site.

Once enabled, the front-end of the site will show a floating button to enable or disable dark mode.

Dark Mode in 2021 theme

If a visitor to your site has dark mode enabled in their system preferences, the site will default to their chosen preference (dark mode on/off). The Dark Mode: On/Off button will float in front of your content, in the bottom right corner of your site.

If you do enable dark mode, pay attention to any logos and graphics used on your site.

Be sure to test your site for good contrast between the text, any graphics and chosen background color on your site. One of the many resources for testing accessibility is https://wave.webaim.org/

Logos and graphics to keep in mind when turning dark mode on

Logos and graphics to keep in mind when turning dark mode on

Q3. How can I customize my Twenty Twenty-One theme?

There are several ways to customize your WordPress theme. You can use the “Customizer” (Dashboard > Appearance > Customize) where you can add your logo, change colors, add background image, edit menus and widgets, but also add custom styles. https://wordpress.org/support/article/appearance-customize-screen/

You can make a child theme to extend the functionality further. https://developer.wordpress.org/themes/advanced-topics/child-themes/

Additionally, you can add even more functionality to your site with plugins. To install a plugin, you can use keywords to search and find plugins in the official WordPress repository on https://wordpress.org/plugins/

Questions and Answers - aimed at supporting Developers

Q1. How can I customize my Twenty Twenty-One theme?

A. There are several ways to customize your WordPress theme. You can use the “Customizer” (Dashboard > Appearance > Customize) where you can add your logo, change colors, add a background image, edit menus and widgets, add custom styles and more. https://wordpress.org/support/article/appearance-customize-screen/

Additionally, you can add even more functionality to your site with plugins. To install a plugin, you can use keywords to search and find plugins in the official WordPress repository on https://wordpress.org/plugins/gins/ or through the WordPress Dashboard (Dashboard > Plugins > Add New)

You can extend the functionality further by making a child theme.

Q2. What is the best way to make a customized version of the Twenty Twenty-One theme?

A. To further customize the Twenty Twenty--One theme you can follow these steps:

  1. Create a “twentytwentyone-child” folder.
  2. Create “style.css” file inside with minimum required information:
/*
 Theme Name:   Twenty Twenty-One Child
 Theme URI:	http://example.com/twenty-twenty-one-child/
 Description:  Twenty Twenty-One Child Theme
 Author:   	YOUR NAME CHANGE THIS
 Author URI:   http://example.com
 Template: 	twentytwentyone
 Version:  	1.0.0
 License:  	GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:     	light, dark, two-columns, right-sidebar, responsive-layout
 Text Domain:  twentytwentyone child
*/

You can create new styles or add your custom functions in “functions.php”. Then, activate your theme by going to Dashboard > Appearance > Themes. Select your new child theme and click “Activate” to enjoy your Twenty Twenty-One Child theme.

Keep in mind that not all themes include parents’ styles automatically. The Twenty Twenty-One theme will do this for you.

More information about how to create a Child theme you can view the process at: https://developer.wordpress.org/themes/advanced-topics/child-themes/


Questions and Answers - aimed at supporting non-developers

You can use dark mode in the Twenty Twenty-One theme by asking your developer or self-installing if you have administrator rights, the dark mode.


Thanks to Olga Gleckler, Mark Smallman, Christopher Churchill, Abha Thakor, Meher Bala, Shanta Nathwani, Angela Jin, Daisy Oslen for researching and working on this document, and to the teams that provided assistance. Thanks to all the release squad members who have provided input.