Blocks, Widgets Blocks

Blocks » Categories List Block

The Categories List block displays a list of categories based on your previously published posts by category. This can be handy for readers who want to find more of your posts about certain topics.

Table of Contents

Add the Categories List Block

To add the Categories List block, click on the + Block Inserter icon and search for “categories list”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /categories list on a new line and press enter to quickly add a new Categories List.

Screen recording of how to add a Categories List block by typing /categories list on a new line.
Insert a Categories List block by typing /categories list on a new line.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear above it:

Screenshot of Categories block toolbar.

The Categories List block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Change the block’s horizontal alignment or width.
  • More options.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click on the ⚙️ icon to open the block settings
Settings

The settings contain several options to control how the list of categories appears on your site. Each setting is explained in more detail below.

The list of Settings for the Categories List block.

Display as dropdown: Choose this option to display the categories in a dropdown menu rather than as a list. This is handy if you want to save space or have a lot of categories.

Show post counts: If this option is chosen, the total number of published posts for each category will be displayed next to the category link. You can show post counts in both the list and dropdown display formats.

Show only top level categories: If you have parent and child categories (i.e. subcategories within main categories), you can choose to display only the top-level categories like in this example:

Show empty categories: If you have categories that don’t have associated posts yet, you can choose to display the category or hide it. You can show empty categories in both the list and dropdown display formats.

Show hierarchy: If you have parent and child categories (i.e. subcategories within main categories) you can choose to display the hierarchy or just leave the list without indicating which subcategories fit inside your main categories. You can show category hierarchies in both the list and dropdown display formats.

Typography

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough (if available.)

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.

Dimensions

On certain themes, the Categories List block will include a setting for Dimensions, with options for both padding and margin.

Click on the + icon next to Dimensions to select and activate the Padding and Margin dimension settings. The padding setting affects the space around the block’s content, inside of its borders. The margin setting affects the space outside of the selected block’s borders.

An arrow points to the + button next to dimensions, revealing clickable options for padding and margin.

You can type in a custom value in the text field if you want the same spacing all around the block.

For more specific control, click the link icon to set different spacing values for the top, right, bottom, and left of the block.

An arrow points to the link icon next to Padding and Margin, which opens up the controls for top, right, bottom, and left dimensions.

To change the unit for the margin or padding setting, click on PX to display a dropdown with the other supported units: %, EM, REM, VW, and VH.

An animated GIF shows the process of clicking on PX to open up a dropdown of other units.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

Recipe block - Advanced Settings
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help