How to Customize Archive Pages (Text Above and Below Post Grid) on WordPress Websites

For most category, tag and other taxonomy archive pages, I leave as-is.  Sometimes I’ll add a description and customize the SEO title but otherwise I just leave it alone.

But sometimes I want to be able to fully customize the page by adding content above AND below the post grid.  While I can easily create a new archive page in Gutenberg from scratch, I tend to prefer using the default archive pages just because it’s easier.  I don’t need to do a canonical or redirect.  Usually, I like the native post grids the theme generates.  It’s a lot less work.

The problem in the past has been not being able to add content below the post grid and above the title on the archive.  Most themes offer a “description” field that places text between the title and post grid, but that’s it.  It’s very limiting.

In the event I want to put a ton of content on the page, I want it below the post grid.

In the past, I’ve paid coders hundreds of dollars to add a text editor below the post grid.  It works fine until I change themes.  Then I have to do it again.

But now I’m using a theme with a ton of amazing features including the ability to totally customize archive pages.  This article steps you through how to do it.

Default Archive Page (with description)

Here’s what the default archive page looks like on Fat Stacks.  The text above the post grid is placed there with the description field which is available on most themes these days.  I did nothing to customize it beyond what’s offered on the archive editing screen.

Default archive page

Suppose I want to target a great keyword with an archive page but need more content to stand a chance.

While I could put it in the description above the post grid, that would essentially ruin the “archive” functionality.  The post grid would be pushed way down the screen. That’s no good.

The better option is adding content below the post grid.  A paragraph or two or some hero section is totally fine above the grid… but the heavy-lifting content should be below the grid.

Here’s how to do it.

Step 1: I’m using Astra Pro Theme

I’m sure there are other themes out there that can do this, but all of my sites use Astra Theme.  I love this theme.  It has infinite scroll built-in. It’s fast. It’s built for Gutenberg. It’s simple. It looks great.  There’s really nothing I don’t like about it.

This tutorial is based on Astra theme. If you have no intention of getting Astra, this tutorial is useless to ya.

Step 2: Create a Custom Layout

The key to customizing archive pages with Astra is using the custom layouts feature.

Basically, you can create content sections and then bolt them to any page or post you want, including select archive pages.

One of the best aspects of this feature is you can build your content sections in Gutenberg which offers unlimited desing potential.

Step 3: Choose the Hook Custom Layout

It’s a good idea to title your Custom Layouts in a way so you know exactly what it is.  It doesn’t take long to end up with a lot of custom layouts.

For this particular Custom Layout use, you must choose “Hook” as follows.

Step 4: Assign Hook Placement and Choose the Specific Archive Page

I’m not going to go through every possible hook placement because there are many.

This tutorial is specifically about being able to add content to the bottom of archive pages so that’s what I’ll restrict it to.

The following screenshot sets out placement (Action field) and how to select the specific archive page (Display On) fields.

What about above the Title and below the header on an archive page?  

Here’s the Action selection for that (select “content_top”):

Step 5:  Creating the content for your archive page

You create your custom content just as you would any content in the Gutenberg editor where you made the selections above.

Here’s how to fix that alignment problem.  Put your content inside an Ultimate Addons for Gutenberg Section block as follows:

The Section block offers all kinds of options for placement and alignment.  It’s a very useful block.

Here’s the result at the bottom of the Income Reports archive page… the text in the Section block is much better aligned:

FYI, I’ve removed the text from the bottom of the income reports archive… I don’t really need it. The above was done for this tutorial.  However, on niche sites, I use the above to create some excellent custom archive pages.

More Tips

SEO Tip: Be sure you noindex the Custom Layouts in your SEO plugin.  If you don’t, they will index on their own in Google which you don’t want. You want to restrict the indexing to the pages it’s bolted to.  I use the SEO Framework plugin on all sites except one (which uses Yoast).

How to noindex Custom Layouts with the SEO Framework plugin:

Go into the plugin’s Settings screen and do the efollowing.

Click “Save Settings”.

How to noindex Custom Layouts with the Yoast SEO plugin:

Go into Search Appearance, then click the “Content Types” tab as follows:

Scroll down until you find the Custom Layouts section.  Select “No” for “Show Custom Layouts in search results” as follows:

Click “Save Changes”.

Multiple URLs:  There are so many applications for Astra’s Custom Layouts.  You can bolt on content sections to one, two, multiple or all URLs on your site.  You can do so via tag, category, specific URLs, etc.  It’s very surgical.  When I create a custom archive layout, I bolt it to just that one URL unless it’s something I want to show up on multiple archive pages such as a list of links or something else.

Leave a Comment

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

Scroll to Top