Create headers, sidebars and footers using WordPress Block Editor (GeneratePress)

Requirements: Check out the FAQs below.

I want to display links to all my categories on my blog page as illustrated above. This will allow users to filter and view my posts by category.

When I click Edit, I am unable to edit and add blocks to the default blog page as illustrated below.

Let’s use the new Block Elements feature in GeneratePress. They work just like other Elements, but they allow you to use the block editor to build your Element content instead of needing to use HTML. When combined with GenerateBlocks, you can now build custom headers, sidebars, and footers. You can also use the Block Element as a regular hook to add content anywhere throughout your website!
We will create the category links as a block element an display them on Blog page using hooks (no coding needed).

Total Time: 10 minutes

1. Location where we want to add some custom links

   I want to add links to all my post categories on my blog page above the content.

   

2. Add the new Block Element

   From WordPress admin menu, go to Appearance > Elements, click on Add New Element (1) and choose Block (1) as the element type and Create.

   

3. Insert required blocks

   The Block Element editing experience is similar to editing WordPress post/page.
   Click on (+) Add Block button and add a Category block. I decided to show post counts.

   

   I wrapped the category block inside a Container block. This block allows us to add simple background colour to the block.

   As illustrated above, I also added additional CSS classes list-inline has-separator border to style the links in block.

   See FAQs below on how to add custom CSS.

4. Display the element on the right page

   Scroll down and select the following settings to display these blocks on my blog page:
   1. Set Block Type to Hook
   2. For the Hook, select to display it before the main content. Here is a visual guide to hooks in GeneratePress.
   3. Only display on Blog page

   

5. Add some custom CSS to make it better

   When I visit my blog page, I notice that I can see the custom category links…
   

   Optional step:
   I want to style the links with some custom CSS that I added using a plugin (see FAQ below).

   Add the below code.

   .list-inline {
list-style: none;
margin-left: 0;
margin-bottom: 0;
}
.list-inline > li {
display: inline-block;
margin-right: .5rem;
}
.list-inline.has-separator > li:after {
content: '|';
display: inline-block;
color: #ccc;
font-size: small;
margin-left: .5rem;
}
.list-inline > li:last-of-type:after {
content: '';
}

6. Done.

   I can now see links to all my blog categories. Check it out.