Overview
Recently on December 8, 2020, WordPress has released a new update for version 5.6. In a new update, WordPress has also released a new theme Twenty Twenty-One. We will see some new updates in the Twenty Twenty-One theme in this blog.
Responsive view changes:-
Earlier in all themes, the mobile menu is seen from less than 767px width, and in Twenty-Twenty theme mobile menus is seen from less than 999px width but now in Twenty Twenty-One theme mobile menu is seen from less than 481px width, above 481px it will show the normal menu.
File Structure:-
Now in the twenty-twentyone, theme file structure and the code structure is changed. Previously for header, we had only one file header.php. But now in the templates parts folder we have a header folder, in that folder, we have different files for each component of the header like for logo site-branding.php file and navbar site-nav.php file many other files. All File components are called in our header.php file. Same for Footer and content files, the file structure is a little bit changed.
Custom CSS:-
In WordPress for a child theme, we are creating style.css and in that file, we are importing the parent theme’s style which was automatically called. But in the Twenty Twenty-One theme we need to call our child theme’s CSS file in the function file.
We can include our child theme’s CSS file using the below code
function add_scripts() {
wp_enqueue_style( 'twenty-twenty-one-style', get_stylesheet_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'add_scripts' );Social Menu changes:-
In all themes, we are getting a social menu option in the menu section. But now in the Twenty Twenty-One theme, that option is removed. For the social menu, we have two options either we can use a plugin or we can use “dashicons“. Dash Icons are icons that are provided by WordPress. We can use it by enqueuing in our function file. below is the code for that
wp_enqueue_style( 'dashicons' );
To check all dash icons please refer to this link:- Dashicons
Dark Mode Support:-
One of the best accessibility features of the Twenty Twenty-One theme is support for the visitor’s color scheme preferences in their operating system or browser settings. If you have Dark Mode enabled, your site will be shown to visitors using a light or dark color scheme, respecting their operating system’s preferences.
To activate Dark Mode Support, you can go to the Colors & Dark Mode section in your Customizer. If you have a light color selected for the site’s background, you will be able to see an option to activate the Dark Mode Support setting. The background color you select will be applied to the light mode, while Dark Mode colors are optimized automatically. You can use the Dark Mode On/Off button at the bottom of the preview screen to toggle between dark & light schemes in your preview.
Image Editing option:-
Now in the Twenty Twenty-One theme for the image, we are getting some options like we can crop the image at the time of adding an image. Also now we can apply some style like rounded image or image with a border, etc.
Conclusion
I hope that this blog might be useful to use Twenty Twenty-One Theme in your Project. In the future, there will be more blogs on new WordPress updates.
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
