![[Tutorial #20] Create Categories for Mutiple Topics – 1](http://modernblackhand.com/wp-content/uploads/2016/11/wp-tut-category.png "[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:
- Find
category-slug.phpfiles. A slug is the user friendly, url valid name of this category. - If not found, find
category-id#.php. id# is the id number of this category. - If not found, wordpress uses
category.php. - 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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?php /** * Category file * * * @link https://codex.wordpress.org/Template_Hierarchy * * @package Multitopics */ $cat_id = get_cat_id(single_cat_title("",false)); //Need plugin: Advanced Custom Fields $topic_header_image = get_field('topic_header_image','category_'.$cat_id); $header_text = get_field('header_text','category_'.$cat_id); get_header(); ?> <section class="header-image parallax-bg" data-type="background" data-speed="2" style="<?php echo $topic_header_image ?>" > <div class="header-text"> <h1 class="page-title"><?php echo $header_text; ?> </h1> </div> </section> <!-- BLOG CONTENT ================================================== --> <div class="container blog-container"> <div class="row" id="primary"> <main id="content" class="col-sm-10 col-sm-offset-1" role="main"> <?php if ( have_posts() ) : ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php /* * Include the Post-Format-specific template for the content. * If you want to override this in a child theme, then include a file * called content-___.php (where ___ is the Post Format name) and that will be used instead. */ get_template_part( 'template-parts/content', get_post_format() ); ?> <?php endwhile; ?> <?php the_posts_navigation(); ?> <?php else : ?> <?php get_template_part( 'template-parts/content', 'none' ); ?> <?php endif; ?> </main><!-- #main --> </div><!-- #primary --> </div> <!-- container --> <!-- MODAL for post ================================================== --> <div class="modal fade" id="postModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> </div> <!-- modal content --> </div> <!-- modal dialog --> </div> <?php get_footer(); ?> |
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:
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.