[Tutorial #20] Create Categories for Mutiple Topics – 1

[Tutorial #20] Create Categories for Mutiple Topics – 1

Introduction

In this tutorial we will introduce wordpress’ categories for creating our multiple-topic blog site.

Use of Category

Category Function

WordPress’ category enables us to better organize and display different types of posts. Differences between posts can simply be the topics as in our site, or they can be completely separate entities like “product description” vs “design portfolio”.

Category vs. Tags

Besides category, wordpress also has ‘tags’ for posts. However tags are normally used to better describe posts rather than separating them.

Category Templates Hierarchy

WordPress’ category display template hierarchy is as follows:

  1. Find category-slug.php files. A slug is the user friendly, url valid name of this category.
  2. If not found, find category-id#.php. id# is the id number of this category.
  3. If not found, wordpress uses category.php.
  4. If not found, wordpress uses archive.php.

You can find the category’s slug directly on the category page. Category ID is not so obvious: it is in the url, of segment tag_ID=Number

wp category slug id

The red area in the middle is the category’s slug (beer_life). Top right in the url is the category id (7)

You can read this tutorial for reviewing wordpress’ template hierarchy mechanism.

Our Category Strategy

In ModernBlackHand we want to have 4 separate pages displaying these types of posts: Internet of Things, Cycling, Web and Beer & Life.

Since they differ only in context, we want to display them with mostly the same style except the category title and category image. We achieve this by:

  • Using Advanced Custom Fields for categories.
  • Create category.php.
  • Set specific category URLs at home page and header menu.

category.php

The category.php code is as follows. You can also find it on my Github page. We wil delay the modal usage (line 65-70) to later tutorials.

 

Line 10-13: Getting Advanced Custom Fields

See this tutorial for more details of using ACFs.

Line 14, 79: include header.php and footer.php

Line 16-23: Parallax effect header

See this tutorial for parallax effect details.

Line 26-66: Category Blog Index

This section prints out the posts that belong to this category.

Line 30: Bootstrap column classes

The content has a width 10 and is centered. See this tutorial for Bootstrap’s grid system usage.

Line 31, 50, 54: Check Posts

This PHP if loop asks wordpress if there is any posts via have_post() function:

  • If yes, it enters the Loop to print out posts.
  • If not, it prints out content indicating there is no posts.

Line 43 and 52: get_template_part

Like the home page template page-home.php, here we use the function get_template_part(...) to include codes from other files.

If there are posts, the function here includes codes for showing a post in a list from the file template-parts/content.php. If not it includes codes from another file template-parts/content-none.php . You can review the details from the Codex.

Line 34: the Loop’s while and the_loop()

See this tutorial for more details about the Loop.

Line 48: wordpress posts navigation

WordPress can be customized to display appropriate amount of posts per page. The function that shows “older posts” and “newer posts” to navigate over pages is the_posts_navigation().

You can customize the post number per page in Settings -> Reading , at Blog pages show at most:

WP blog post number

As you have more posts and therefore more pages to show, you can further use function the_posts_pagination(...) to show page links besides “previous” and “next” links. See the Codex for more details.