Top 2 New Features of the Twenty Twenty-One WordPress Theme

Included in the release of WordPress 5.6 is the Twenty Twenty-One Theme. The Twenty Twenty-One theme is a minimalist design and g-d only knows, that after 2020, we need more minimalism. The Twenty Twenty-One theme relies heavily on using Building Blocks to develop blog post and pages. This is a great approach. Basically, you start with a simple foundation and build each page as complex or simple as you want it to be.

1

Create Your Own Block Pattern

Blocks are a relatively new concept to WordPress. They’re awesome. They are really building blocks that go into making the whole of a webpage. There are all different kinds of blocks. Some examples are: blocks for entering headings, image blocks, form blocks and testimonial blocks, just to name a few.

Let’s create a custom block. We are going to create a custom block that displays a user’s information. For instance, this is handy to insert after an article. It will consist of two columns, a heading, an image, and a description.

Copy the below code into your child theme’s function.php file.

/*START Signature Pattern Block*/
add_action( 'init', function(){

	register_block_pattern_category( 
		'custom-patterns', 
		array( 'label' => esc_html__( 'Custom patterns', 'twentytwentyone-child' ) ) );

	register_block_pattern(
	'twentytwentyone-child/custom-bio-pattern',
	array(
		'title'			=> __( 'Author Bio', 'twentytwentyone-child' ),
		'description'	=> _x( 'A block with 2 columns that displays an avatar image, a heading and a paragraph.', 'Block pattern description', 'twentytwentyone-child' ),
		'content'		=> '<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:image {"id":29,"linkDestination":"none","className":"size-large is-style-twentytwentyone-border"} -->
<figure class="wp-block-image size-large is-style-twentytwentyone-border"><img src="http://35.245.166.157/wp-content/uploads/2021/01/Troy-Brick-Photo-scaled.jpg" alt="Troy Golden - Digital Coach" class="wp-image-29"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:heading {"level":4} -->
<h4>About Troy Golden</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta was founded in 2013 with a desire to change the status quo. We set out to create the best WordPress hosting platform in the world, and that’s our promise. We don’t settle and are here to stay.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
		'categories'	=> array( 'custom-patterns' ),
	)
	);
});
/*END Signature Pattern Block*/

NOTE: Change the part of the code to reflect your own About Us and Image. Here is the part of the code to change.

<img src="http://35.245.166.157/wp-content/uploads/2021/01/Troy-Brick-Photo-scaled.jpg" alt="Troy Golden - Digital Coach" class="wp-image-29"/>
2

Dark Mode

Twenty Twenty-One introduced dark mode. With dark mode, a user can invert a full website to show darker colors. The background becomes dark and the foreground becomes white. Its up for debate, but some say dark mode is better on the eye. Follow the instructions below to enable dark mode.

  1. Go To Appearance
  2. Customizeappearance - customize - wordpress
  3. Colors & Dark Modewordpress-dark-mode
  4. Tick the checkbox to enablewordpress-dark-mode-checkbox

Leave a comment

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