Quickstart guide

Learn the basics of using Twentig with block themes.

This guide is for the Twenty Twenty-Two theme and block themes.
Looking for the Twenty Twenty-One and Twenty Twenty guide?

Install Twentig

To install the Twentig plugin, follow these steps:

  1. Log in to your WordPress Dashboard.
  2. Click Plugins > Add New.
  3. Type Twentig in the search box.
    Alternatively, you can click Upload Plugin to upload the plugin .zip file.
  4. Click Install Now.
  5. Once the installation is done, click Activate.

After you activate the plugin, you’ll be redirected to the Twentig home, where you can find quick links to help you get started.

↑ Table of Contents

Use a block theme

To take full advantage of Twentig, we recommend that you use Twenty Twenty-Two, the new default WordPress theme, or any block themes.


Full site editing features

A block theme, like Twenty Twenty-Two, is a theme that uses blocks for all parts of a site, including navigation menus, header, content, and site footer — allowing you to edit and customize all parts of your site.

Block themes are designed to support all of the features of full site editing. This includes the following: 

  • Site Editor: an editor that allows you to edit all parts of your site, navigate between templates, and more.
  • Styles: a feature that allows you to customize your site, including individual blocks, as much as you’d like with different colors, typography, layouts, and more.
  • Templates: edit, create, and manage templates that a page or posts uses.
  • Template parts: a way to organize and display groups of blocks as part of a block template mainly for site structure, like Headers and Footers.
  • Theme blocks including the Navigation block, Query Loop block, and more.

Note: Twenty Twenty-Two and block themes are designed to use the Site Editor instead of the Customizer to edit your site. The Customizer is now hidden by default.

↑ Table of Contents


Getting started with block themes and full site editing

The WordPress.org courses below will teach you the basics of full site editing and its features to help you get started with block themes.

↑ Table of Contents

Style your site

The Site Editor allows you to customize your entire site using a new styling system. Open the Site Editor from your WordPress Dashboard by clicking Appearance > Editor.

In the Site Editor, you can see the Styles icon in the top-right corner. Styles allows you to customize your site as much as you’d like with different colors, typography, layouts, and more.

To personalize your site even more, Twentig Styles adds extra options. Next to the Styles icon, you can find the Twentig Styles icon.

↑ Table of Contents


Change the typography

Inside Styles, you can manage your site’s typography by changing the font family, font size, font weight, line height, and more. By default, Twentig adds a dozen of curated Google Fonts to the font family setting.

Add more Google Fonts

  1. Inside Twentig Styles , click Typography.
  2. Click Font 1.
  3. Select the font family of your choice and the styles you want to include.
  4. Save and reload the page to make these changes effective inside the editor. Now you can select the Font 1 you’ve just added in all the Font family dropdowns (inside the Styles and the block settings sidebar).
1
2
3
4

To define another font, repeat the process by clicking on Font 2.

Self-host your Google Fonts or use Google Fonts delivery service

By default, the Google Fonts you’re using are hosted locally on your server. Twentig lets you change the hosting method if needed.

  1. Inside Twentig Styles , click Typography.
  2. Click Font Hosting.
  3. Click the toggle off to use the Google Fonts delivery service. Click the toggle on to host the fonts locally on your server.
1
2
3

Change the text font

  1. Inside Styles , click Typography.
  2. Click Text.
  3. Here you can change the font size, line height, and font weight. To change the font family, open the Font family dropdown.
  4. Select the font family of your choice.
1
2
3
4

Change the heading font

Edit the heading font settings
  1. Inside Styles , click Blocks.
  2. Click Heading.
  3. Click Typography.
  4. Here you can change the the font family, line height, font weight, and letter spacing. It’s likely you won’t use the size setting as it sets all the headings (H1 to H6) to the same size.
1
2
3
4

Note: Some themes like Twenty Twenty-Two set a different font family for the post/page title. In this case, the Heading font family won’t be applied to the post/page title. See below how you can change the font family for the Post Title block.

Edit the post title font settings

Some themes like Twenty Twenty-Two set different font settings for the Post Title block. You can change the fonts settings of the Post Title block to match the heading font or set a different style.

  1. Inside Styles , click Blocks.
  2. Scroll and click Post Title.
  3. Click Typography.
  4. Here you can change the font family, font size, line height, and font weight.
1
2
3
4

Change the blocks font settings (Navigation, Site Title…)

WordPress adds font family support to the following blocks:

  • Navigation
  • Site Title
  • Site Tagline
  • Post Title
  • Query Title
  • Heading
  • Button
  • List

You can either change their font setting globally inside Styles > Blocks. Or you can change the font settings of a block, individually and not across the site, by selecting them inside the Site Editor.

For example, you can change the font settings of your site navigation as follow:

  1. Select your navigation block inside your header and click Settings the settings icon. Inside the Typography panel, click + to add options.
  2. Click Font family and the other settings you want to change.
  3. Now you can change the font family and the other options you’ve added.
1
2
3

↑ Table of Contents


Change the colors

The Colors section inside Styles allows you to manage the default color of different global Elements on the site:

  • Background: the background color for your whole website.
  • Text: the default color used for text across the site.
  • Link: the default color used for links across the site.

Here you can also manage the color palettes which are used to provide default color options for blocks.

For the Theme palette, most block themes such as Twenty Twenty-Two define a Foreground and Background color. If you’ve changed the Background and Text colors under Elements, we recommend that the Foreground and Background colors of the Palette match the Background and Text colors that you’ve set.

To change the color palettes:

  1. Inside Styles > Colors, click the Palette.
  2. Click the options icons and Edit colors.
  3. Click the colors you want to change, and set your desired color.
1
2
3

↑ Table of Contents


Change the layout

Edit the content and wide width

Inside Twentig Styles , you can change the content and wide width settings defined by the theme.

  1. Inside Twentig Styles , click Layout.
  2. Change the values (you need to save and reload to make these changes effective inside the editor).
1
2

The content width is applied to the content (paragraph, heading, list…) inserted at the root of the post/page editor and to all blocks whose alignment is set to None.

The wide width is applied to all blocks whose alignment is set to Wide width.

The content and wide widths are also applied to the blocks inside a Group block that has the “Inherit default layout” setting enabled.

Use Twentig spacing adjustments

To make it easier to build pages, Twentig includes an option to apply predefined spacing styles (margin and padding).

For example, it removes the margin between two consecutive full width groups with background color and adds proper vertical padding.

Enabling this option is helpful if you want spacing that looks great right out of the box. As Twentig block patterns rely on it, we recommend that you use this option.

Note: For each individual block, you can override the predefined spacing by setting a custom margin/padding/block spacing.

Edit site padding

Inside Styles > Layout, you can change the padding of your entire site’s structure. However, it’s likely you won’t need to use this setting.

↑ Table of Contents


Change the blocks styles

Inside Styles > Blocks, you can customize the appearance of the blocks across your entire site. It’s likely you won’t need to change all the block settings in this section, but it can help customize some blocks globally.

For example, you may find it useful to edit the Button block globally by changing its font family, font size, colors, padding, and border radius.

  1. Inside Styles , click Blocks.
  2. Click Button.
  3. Here you can change the typography, colors, and layout of the Button block across your site.
1
2
3

Note: Changes here will impact each instance of this block unless it has been individually customized. For example, if you set a custom color on an individual button block, the global Styles won’t override this custom color.

↑ Table of Contents


Add custom CSS

If you need to write custom CSS, you can add your code inside the Additional CSS panel of the Customizer. To access it, click Twentig then Custom CSS inside the WordPress dashboard.

↑ Table of Contents


Set your site icon

Site icon (favicon) is what you see in browser tabs and bookmark bars. By default, WordPress uses the image you’ve uploaded for the Site Logo block as the site icon.

To use a custom icon, click Twentig then Site icon inside your WordPress dashboard. It will open the Customizer, where you can upload your site icon.

↑ Table of Contents

Build your site with blocks

Twentig supercharges the block editor with additional block settings, styles, CSS classes, and pre-designed patterns — making it easier to create your own professional website.


Getting started with blocks

New to the WordPress block editor? In the WordPress.org articles listed below, you’ll learn the basics of using the block editor.

↑ Table of Contents


Enhance the core blocks

Twentig enhances the existing WordPress blocks by providing additional styles, block settings, margin controls, responsive visibility controls, and CSS classes. They appear in the block settings sidebar when a block is selected. Click the settings icon to open the settings sidebar.

  1. Selected block
  2. Styles
  3. Twentig settings
  4. Margin
  5. Responsive visibility
  6. Additional CSS Classes

Use additional block settings and styles

Twentig provides additional settings, styles, and CSS classes for the following blocks:

  • Group: shadow, shape divider
  • Columns: responsive layout, text alignment
  • Column: styles (shadow, hard shadow, top border), stretched link
  • Media & Text: styles (shadow, overlap), responsive layout, reverse stack order, stretched link, full height
  • Cover: styles (shadow, inner border, rounded), aspect ratio, shapes, stretched link, hover effect
  • Heading: typography options, decoration
  • Paragraph: typography options
  • List: styles (dash, checkmark, arrow, border, no bullet, inline), spacing
  • Separator: styles (asterisks, dotted, dashed), width, height
  • Image: styles (rounded corner, shadow, frame, border), shapes, black & white filter
  • Gallery: fixed width columns, image aspect ratio, gutter, responsive layout, caption size, border, image filter
  • YouTube, Vimeo, SoundCloud, and Video blocks: style (frame)
  • Social Icons: hover effect
  • Quote and Pullquote: additional styles
  • Table: styles (border, inner border), vertical alignment
  • Navigation: responsive breakpoint, menu icon, menu icon size, hover style, active style, button styles
  • Post Excerpt: max number of words
  • Post Featured Image: styles (rounded, shadow, frame), image aspect ratio, shapes, black & white filter
  • Archive Title: option to hide the prefix
  • Post Tags and Post Categories: styles (outline, pill, hashtag, plain)
  • Post Author: link to author archive, inline layout, avatar shape
  • Pagination: page numbers styles (circle, square, plain), previous page and next page styles (pill, square)
  • Previous Post and Next Post: styles (stack, arrow)
  • Site Title: underline style
  • Site Logo: image width on mobile
  • Post Title: typography options
  • Tag Cloud: style (pill)
  • Search: style (underline)

Edit the margins of the blocks

WordPress lets you control the margins of a few blocks (Heading, Columns, Buttons…):

  1. With your block selected, click Settings the settings icon. Inside the Dimensions panel, click + to add options.
  2. Click Margin to add this option.
  3. Click Unlink Sides.
  4. Now you can change the block margins with your custom values.
1
2
3
4

For the blocks that don’t have WordPress margin controls, Twentig adds Margin Top and Margin Bottom settings inside the Advanced panel to let you adjust the vertical spacing.

When you select a margin value, its respective CSS class is automatically added to the Additional CSS Class(es) field.

Control the visibility of the blocks

Inside the Advanced panel, Twentig lets you control the block’s visibility based on the viewport size. When you enable a visibility option (Hide on Desktop, Hide on Tablet, or Hide on Mobile), the block will be hidden on this device.

You can see that the respective class is automatically added to the Additional CSS Class(es) field.

Add CSS Classes

Inside the Advanced panel, you can add CSS classes to your block. To fine-tune your blocks, Twentig provides a list of predefined CSS classes for several blocks (indicated by the the plus icon icon).

To add predefined CSS classes, follow these steps:

  1. Inside the Advanced panel, click the plus icon to open the Twentig CSS Library.
  2. Select the class(es) you want to apply to the block.
  3. Click the plus icon to close the library. You can see that the classes are automatically added to the Additional CSS Class(es) field.
1
2
3

↑ Table of Contents


Build your pages with pre-designed patterns

Twentig brings hundreds of ready-to-use pre-designed patterns, making it easy to create stunning pages. There are 2 types of pre-designed patterns:

  • Block pattern: a predefined arrangement of blocks that can be used standalone or combined with other block patterns to create a page.
  • Page pattern: an entire pre-designed page (that you can find under the Pages category).

You can customize, mix and match the layouts to fit your needs. Or use them as is.

Screenshot of a block pattern featuring a team.
Example of a block pattern
Screenshot of a services page layout.
Example of a page pattern

How to insert a block pattern

To insert a block pattern, follow these steps:

  1. Inside the block editor, place your cursor where you want to insert the block pattern.
  2. Click the block inserter icon to open the block inserter.
  3. Click the Patterns tab.
  4. Browse the categories and click the block pattern you want to insert (you can also drag and drop the pattern into your content).
  5. Once inserted, you can edit the block pattern with your own content, customize, or rearrange the blocks.

Note: WordPress includes its block patterns. If you wish to disable them, navigate to Twentig > Settings in your WordPress dashboard and uncheck the Core Block Patterns box.

↑ Table of Contents


Build your header

Use Twentig navigation settings

To customize your navigation even more, Twentig provides additional settings to the Navigation block under the Twentig settings panel. You can find them under the Twentig settings panel:

  • Hover style: select the hover state style of the navigation links.
  • Active style: select the active state style of the navigation links.
  • Overlay menu breakpoint: control on which device the menu collapsed into a hamburger menu.
  • Menu icon: choose a two or three lines hamburger icon, or a plus icon.
  • Icon size: control the size of the hamburger and close icons.
Use block patterns to build your header

In addition to the header block patterns defined by your theme, Twentig provides header patterns that you can find in the Headers category of the patterns inserter:

  • Full width header with border
  • Wide width header with shadow

You can insert these patterns inside the Header template part defined by your theme, then you can edit it to fit your needs.

Like how you edit the header, you can modify your footer by editing the Footer template part defined by your theme.

Use block patterns to build your footer

In addition to the footer block patterns defined by your theme, Twentig provides footer patterns that you can find in the Footers category of the patterns inserter:

  • Footer Inline: Copyright and Social Links
  • Footer Inline: 2 Rows
  • Footer Stack: Navigation
  • Footer 2 Columns: Text and Navigation

You can insert these patterns inside the Footer template part, and then you can edit it to fit your needs.

↑ Table of Contents


Build your blog with the Query Loop block

Use Twentig settings

Twentig provides additional settings to the Theme blocks used to build the query loop:

  • Post Featured Image: styles (rounded, shadow, frame), image aspect ratio, shapes
  • Post Title: underline style, responsive text alignment
  • Post Excerpt: max number of words
  • Post Author: link to author archive, inline layout, avatar shape
  • Post Categories and Post Tags: styles (outline, pill, hashtag, plain), underline style

Use block patterns to display your posts

In addition to the query block patterns defined by your theme, Twentig provides query patterns that you can find in the Query category of the patterns inserter:

  • Posts 3 Columns
  • Posts: Small Image on Left
  • Posts Stack: Right Sidebar

You can insert these patterns to replace the existing Query Loop block inside the Home, Index, or Archive templates defined by your theme.

↑ Table of Contents

Congratulations

You’re ready to use Twentig like a pro! Subscribe to our newsletter to receive exclusive content, tips and updates.