Heading block in WordPress

Banner for article about Heading block in WordPress

In WordPress, the Heading block helps to organize and structure content for visitors and search engines.

The block also defines the importance of different parts and shows how they are connected.

Add Heading text

To add the Heading block:

  1. Click on the + Block Inserter icon in the Editor top bar.
  2. Search for “heading”.
  3. Click it to add the block to content area.

Change case of Heading text

Depending on the WordPress theme, the Heading block may allow to change the case: uppercase, lowercase, or title case.

The option is located in the block settings, under Typography.

Customize case

To keep part of the title in lowercase while the rest is in uppercase, you will need to mix the use of custom HTML and CSS.

For instance, let’s say we have the following title: “K9 Services and Programs”, and we need to make “K9” lowercase and “Services and Programs” uppercase.

So, the final result of the heading text should look like this on a website: “k9 SERVICES AND PROGRAMS”.

First, create a title with custom HTML:

  1. Add Heading block with the text “K9 Services and Programs”.
  2. Edit the block as HTML by clicking on the More options menu (three dots) in the block toolbar.
  3. Wrap a part of text, you want to lowercase, within a span tag with a custom CSS class.
  4. Click Edit visually to exit HTML mode.
  5. If needed, make the title uppercase using the Typography options in block sidebar settings.
  6. Publish the page changes.
Preview of active Heading block in HTML mode, where a part of text is wrapped within a span tag with custom CSS class.

Note, there are cases when a WordPress theme comes with uppercase headings by default.

Second, add custom CSS to change styles of selected part of the Heading text:

:is(h1,h2,h3,h4,h5,h6) > .title-special {
  text-transform: lowercase;
}

Note, we use title-special as a custom CSS class for a span tag, used to wrap a part of text with lowercase style.