A category page: header and posts
One design for every category of the blog: the header shows the name, description and cover of the open category, and its posts follow. When the client adds a new category, it has a page right away.
What you get
<body wp-fields-group="Category">
<header class="category">
<img class="category__cover" src="images/coffee.jpg" alt="" tax-image="Category cover">
<h1 wp="term-title">Coffee</h1>
<div class="category__lead" wp="term-desc">
<p>Beans, brewing and the people who roast them.</p>
</div>
<p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>
</header>
<div class="posts" wp="posts">
<article class="post-card">
<a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a>
<p class="post-card__date" wp="post-date">October 1</p>
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
</div>
<div class="posts__empty" wp="no-results">No posts in this category yet</div>
</body>- Name: Coffee
- Description: Beans, brewing and the people who roast them.
Beans, brewing and the people who roast them.
Roasted on Mondays, sold out by Friday
The name and description are the category’s built-in fields; the cover and subtitle are fields from your markup.
Step by step
Name the field group
wp-fields-group on the
<body>ofarchive.html. It builds the template WordPress uses to show categories and tags.<body wp-fields-group="Category">
Name and description
wp="term-title" and
wp="term-desc"show what is set on the category. WordPress splits the description into paragraphs, so it goes on a<div>.<h1 wp="term-title">Coffee</h1> <div class="category__lead" wp="term-desc"> <p>Beans, brewing and the people who roast them.</p> </div>
Cover
tax-image on an
<img>: each category gets its own image, which the client picks in the category’s settings.<img class="category__cover" src="images/coffee.jpg" alt="" tax-image="Category cover">
A field of the category’s own
tax-text is a line WordPress categories do not have: here, a subtitle.
<p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>
The category’s posts
wp="posts"is the main list of the page: WordPress picks the posts of the open category. Inside is a post card as in wp="post-title", and next to it awp="no-results"block for an empty category.<div class="posts" wp="posts"> <article class="post-card"> <a href="#" wp="post-link"><img src="images/news.jpg" alt="" wp="post-image"></a> <p class="post-card__date" wp="post-date">October 1</p> <h3><a href="#" wp="post-title-link">New autumn menu</a></h3> </article> </div> <div class="posts__empty" wp="no-results">No posts in this category yet</div>
What matters
- How many posts to show at once is set in Settings → Reading. If there are more, add pagination.
- Category fields appear on every category and tag. They are filled in on each one: “Load data” does not bring them over.
- Tags open the same template:
term-titleshows the tag’s name, and the category fields show the tag’s values.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<div class="posts" wp-query="'post_type'=>'post','posts_per_page'=>6">
<article class="post-card">
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
</div>wp-query instead of the main list: every category page shows all the blog’s posts. The log stays silent.
<div class="posts" wp="posts">
<article class="post-card">
<h3><a href="#" wp="post-title-link">New autumn menu</a></h3>
</article>
</div>wp="posts" shows the posts of the category being viewed.
<p class="category__tagline" fld-text="Category tagline">Roasted on Mondays</p>fld-text in the header reads a field of a post or page, not of the category: the category gets no value of its own. The log stays silent.
<p class="category__tagline" tax-text="Category tagline">Roasted on Mondays</p>tax-text is the category’s own field.