How to Customize the TwentyTwenty WordPress theme?

How to Customize the TwentyTwenty WordPress theme?

WordPress Twenty Twenty is a default theme released with WordPress 5.3. It offers a lot of attractive features to customize your site as per your wish. You can change the background color, custom the cover page template, add styling to the blockers from Gutenberg editor, and many more. But, how to customize the  WordPress theme is a question for many. In this article, we will give you a detailed guide on how to customize the default theme.

WordPress Twenty Twenty Theme 

Twenty-Twenty is designed with a special focus on Gutenberg. It aims to take full advantage of the flexibility of block editor and offers many theme options that you can use for different purposes. 

Twenty Twenty Theme
(Image source: Make WordPress Core)

If you wish to use the theme for business organizations, you can combine columns, groups, and media with full and wide alignments. It will create a dynamic layout to display your products or services. If you want to use it for traditional blogs, the centered content column and the fine-tuned typography will make it perfect for that.  There are many such features. 

You can custom the background color and the accent colors in the customizer to give your site a personal touch. The colors of all your site elements are calculated automatically based on the colors you pick. It ensures a highly accessible color contrast for your visitors. The theme is perfect for both personal and professional use.     

Responsive Theme

Theme Features 

Twenty-Twenty is a minimal WordPress theme. It gives the site owners and developers the freedom to design and customize the content layouts of their pages and posts. It is designed for Gutenberg and depends mainly on the Gutenberg Life Cycle. 

The theme comes with numerous advanced features like content width, automatic feed links, post thumbnails, title tags, and many HTML5 elements. 

Full Block Editor Support

Twenty-Twenty block editor
(Image Source: WordPress)

Twenty-Twenty has been built keeping in mind the columns and group blocks that can be combined to make impressive landing pages and block layouts. It also includes full editor styles for the block editor. 

Are you looking to learn WordPress and build a website? Check access to these easy WordPress tutorials by WP 101

Site Logo

With Twenty Twenty you can modify your site’s logo according to your business. To change it on your site, do the following:

  1. Go to My Site ? Customize, click on the Site Identity section.
  2. Click the Add logo button to open the Media Manager.
  3. Upload a new image, or select one that’s already in your Media Library.
  4. Click Set as logo and you’ll see your logo appear in the preview.
  5. Click the Publish button to save your changes.
Twenty Twenty Site Logo
(Image Source: WordPress)

Featured Image

A featured Image resonates mood of your content or blog. It enhances the presentation of your site. The recommended Featured Image size for Twenty Twenty theme is 1980px wide by 1485px high.

Twenty-Twenty Featured Image
(Image Source: WordPress)

Adding Custom Colors 

With Twenty-Twenty, you can change the color settings of your site and give a personal touch. All you need to do is go to Customizer ? Colors.

Twenty-Twenty Adding Custom Colors
(Image Source: WordPress)

There are three color settings to choose from:

  • Background Color (defaults to a light beige)
  • Header & Footer Background Color (defaults to white)
  • Primary Color (defaults to pink)

Cover Template

This page template will let you display the title of the post on the top of the featured image. 

Twenty twenty Cover Template
(Image Source: WordPress)

To do this:

  1. Click on edit post or page
  2. Select the “Document” tab in the right sidebar
  3. Expanding the “Post/Page Attributes” tab
  4. Select “Cover Template” in the “Template” dropdown.

Widgets

This theme comes with two widgets areas below the content of the site. Maximum column width is 570px. If your screen is wider than 700 px the widgets are automatically divided into two columns.

Twenty-twenty Widgets
(Image Source: WordPress)

Adding Social Icons

With Twenty-Twenty you can add links to your social media profiles and they will be displayed in the footer. First, you need to create social links menu then:

  1. Head to Customize ? Menu.
  2. Select the Menu Locations panel.
  3. Assign the menu you’ve created to the Social Links Location.
  4. Click the Publish button on top to save your changes.

Twenty-twenty theme includes icons for:

  • Behance
  • Codepen
  • DeviantArt
  • DockerHub
  • Digg
  • Dribbble
  • Dropbox
  • Facebook
  • Flickr
  • Foursquare
  • GitHub
  • Google+
  • Instagram
  • LinkedIn
  • Meanpath
  • Medium
  • Pinterest
  • Periscope
  • Pocket
  • Reddit
  • Skype
  • SlideShare
  • Snapchat
  • SoundCloud
  • Spotify
  • StumbleUpon
  • Tumblr
  • Twitch
  • Twitter
  • Vimeo
  • Vine
  • VK
  • WordPress
  • Yelp
  • YouTube

Read this guide to learn how to change a WordPress Theme

How to customize the appearance of twenty twenty theme 

You can customize the appearance of Twenty Twenty in the following ways-

  1. Site Identity handles logo, icon, titles and tag lines. You may enable or disable all of these elements in the Site identity section of the customizer
Twenty-Twenty Site Identity

2. Cover Template section handless the settings of the Cover Template page templates. You will find the following options there –

Twenty twenty Cover template
  • An option to add a parallax effect to the background image 
  • Colour Pickers to change the custom background color and the text colors for featured image overlay 
  • A Slider for controlling the opacity of the overlay 

3. The Menus section offers five menu locations. You can use them as per your need. Here are the options – 

Twenty twenty Menus
  • Desktop Horizontal Menu 
  • Desktop Expanded Menu  
  • Mobile Menu  
  • Footer Menu 
  • Social Menu 

4. Finally, there is an Additional CSS section. It allows you to add your custom styles.   

Twenty twenty Additional CSS

Final thoughts

We have tried here to give you a detailed insight into how to use the new WordPress default theme Twenty-Twenty. Hope you found the steps helpful. Try the easy steps, customize WordPress Twenty Twenty theme, and move ahead. You will reach your goal in a few days.

If you liked the article, please share it with your friends. You can do that by hitting the “Click to share” button below. Leave your feedback on the comment section. We would love to hear from you. If you have any questions, please let us know. We will get back to you soon.  You can find us on Twitter and Facebook. Also, subscribe to our Youtube channel for more tutorials.

1 Comment on “How to Customize the TwentyTwenty WordPress theme?

Leave a Reply to Crearunblog Cancel reply

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

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.