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

For many class, tag and different taxonomy archive pages, I go away as-is.  Typically I’ll add an outline and customise the search engine marketing title however in any other case I simply go away it alone.

However generally I would like to have the opportunity to absolutely customise the web page by including content material above AND under the put up grid.  Whereas I can simply create a brand new archive web page in Gutenberg from scratch, I have a tendency to choose utilizing the default archive pages simply because it’s simpler.  I don’t want to do a canonical or redirect.  Often, I just like the native put up grids the theme generates.  It’s rather a lot much less work.

The issue previously has been not having the ability to add content material under the put up grid and above the title on the archive.  Most themes supply a “description” area that locations textual content between the title and put up grid, however that’s it.  It’s very limiting.

Within the occasion I would like to put a ton of content material on the web page, I would like it under the put up grid.

Up to now, I’ve paid coders a whole bunch of {dollars} to add a textual content editor under the put up grid.  It really works high-quality till I modify themes.  Then I’ve to do it once more.

However now I’m utilizing a theme with a ton of wonderful options together with the flexibility to completely customise archive pages.  This text steps you thru how to do it.

Desk of Contents

Default Archive Web page (with description)

Right here’s what the default archive web page appears to be like like on Fats Stacks.  The textual content above the put up grid is positioned there with the outline area which is offered on most themes as of late.  I did nothing to customise it past what’s provided on the archive modifying display screen.

Default archive page

Suppose I would like to goal an ideal key phrase with an archive web page however want extra content material to stand an opportunity.

Whereas I might put it within the description above the put up grid, that might basically damage the “archive” performance.  The put up grid could be pushed manner down the display screen. That’s no good.

The higher possibility is including content material under the put up grid.  A paragraph or two or some hero part is completely high-quality above the grid… however the heavy-lifting content material must be under the grid.

Right here’s how to do it.

Step 1: I’m utilizing Astra Professional Theme

I’m certain there are different themes on the market that may do that, however all of my websites use Astra Theme.  I really like this theme.  It has infinite scroll built-in. It’s quick. It’s constructed for Gutenberg. It’s easy. It appears to be like nice.  There’s actually nothing I don’t like about it.

This tutorial is predicated on Astra theme. When you’ve got no intention of getting Astra, this tutorial is ineffective to ya.

Step 2: Create a Customized Format

custom layouts astra jun10

The important thing to customizing archive pages with Astra is utilizing the customized layouts function.

Mainly, you possibly can create content material sections and then bolt them to any web page or put up you need, together with choose archive pages.

Among the best facets of this function is you possibly can construct your content material sections in Gutenberg which affords limitless desing potential.

Step 3: Select the Hook Customized Format

It’s a good suggestion to title your Customized Layouts in a manner so you understand precisely what it’s.  It doesn’t take lengthy to find yourself with lots of customized layouts.

For this explicit Customized Format use, it’s essential to select “Hook” as follows.

choose hook astra jun10

Step 4: Assign Hook Placement and Select the Particular Archive Web page

I’m not going to undergo each potential hook placement as a result of there are lots of.

This tutorial is particularly about having the ability to add content material to the underside of archive pages in order that’s what I’ll prohibit it to.

The next screenshot units out placement (Motion area) and how to choose the precise archive web page (Show On) fields.

setting up custom layouts astra jun10

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

Right here’s the Motion choice for that (choose “content_top”):

top archive content2 jun10

Step 5: Creating the content material to your archive web page

You create your customized content material simply as you’d any content material within the Gutenberg editor the place you made the picks above.

custom content bad jun10

Right here’s how to repair that alignment downside.  Put your content material inside an Final Addons for Gutenberg Part block as follows:

section content uag jun10

The Part block affords every kind of choices for placement and alignment.  It’s a really helpful block.

section controls jun10

Right here’s the outcome on the backside of the Revenue Studies archive web page… the textual content within the Part block is significantly better aligned:

section content on blog jun10

FYI, I’ve eliminated the textual content from the underside of the earnings experiences archive… I don’t actually need it. The above was carried out for this tutorial.  Nonetheless, on area of interest websites, I take advantage of the above to create some glorious customized archive pages.

Extra Ideas

search engine marketing Tip: Be certain you noindex the Customized Layouts in your search engine marketing plugin.  For those who don’t, they are going to index on their very own in Google which you don’t need. You need to prohibit the indexing to the pages it’s bolted to.  I take advantage of the search engine marketing Framework plugin on all websites besides one (which makes use of Yoast).

How to noindex Customized Layouts with the search engine marketing Framework plugin:

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

noindex custom layouts seo plugin jun10

Click on “Save Settings”.

How to noindex Customized Layouts with the Yoast search engine marketing plugin:

Go into Search Look, then click on the “Content material Sorts” tab as follows:

yoast1 jun10

Scroll down till you discover the Customized Layouts part.  Choose “No” for “Present Customized Layouts in search outcomes” as follows:

yoast noindex2 jun10

Click on “Save Modifications”.

A number of URLs:  There are such a lot of functions for Astra’s Customized Layouts.  You may bolt on content material sections to one, two, a number of or all URLs on your website.  You are able to do so through tag, class, particular URLs, and so forth.  It’s very surgical.  After I create a customized archive structure, I bolt it to simply that one URL until it’s one thing I would like to present up on a number of archive pages resembling a listing of hyperlinks or one thing else.