Creating Default Post Templates by Category?

Hi there!

I’m new to theme X and struggling a bit with wrapping my head around its file structure.
What I would like to do is filter by posts by category and apply a template. So, for example, say I have a page called Samples and on that page, I have a grid. And in that grid, I have a bunch of posts that are in the category Samples. Whenever I click on an individual block to open that post, I want any post in the category Samples to load using the post template Samples, and likewise for other posts in other categories to have other default templates. First, is this possible. Second, how? And third, will this appreciably slow loading times?

However, I must confess that at the moment, I can’t even get new post templates to show up under Post Attributes in WordPress. I am working with Renew and have the child theme installed. I tried putting some post templates in the x-child folder, but they don’t show up as options in WordPress…
They look like this:

<?php /* * Template Name: Samples * Template Post Type: post, page, product */ get_header(); ?>

Clearly I’m utterly lost - any help would be much appreciated! (and if you can, please explain to me like I’m a total idiot and tell me why your code works…)

Thanks,
Emi

Hi Emi.

Thanks for writing in.

You can create a query to filter the posts category that will be displayed on the page. Here is a reference link on how to do that:

https://codex.wordpress.org/Class_Reference/WP_Query#Category_Parameters

The loading time should not take too long but it also depends on the number of posts that is loaded on the page. If you have a lot of posts, you can add a pagination to the template.

As for the page templates, the files in X are organized per stack where there is the main template file in the root directory of the theme and it calls another template file that is specific to the stack that you are using.

For example, the template Blank - Container | Header, Footer. The main file of the template is in wp-content/themes/x which is template-blank-1.php.

Inside the template-blank-1.php, you will see the line

<?php x_get_view( x_get_stack(), 'template', 'blank-1' ); ?>

which calls the template-blank-1.php file that is in /wp-content/themes/x/framework/views/YOUR_STACK.

Inside that file, you will see the call to the header and footer and the main content of the page.

But please note that although that is how the files are structured in X, you can still create custom page template using the usual Wordpress guidelines just like here:

https://developer.wordpress.org/themes/template-files-section/page-template-files/#creating-custom-page-templates-for-global-use

Please make sure that you will create the custom pages inside the child theme so that they will not be removed when you update the theme.

Kindly also go over this article of some best practice for customization:

Hope this helps you get started.

1 Like

Hi!
Thank you, that helps, but doesn’t quite answer my question, I think? I understand how to sort, categorize, and filter posts, so that, for example, all the posts of a particular category appear on a page. That has already been done.

However, what I would like to do is to take advantage of the fact that Wordpress now supports having multiple blog-post templates to select which post template is used for each category, so that all the posts in a particular category use one blog post template and the ones in another category render using another.

So, I need instructions on how to make multiple blog post templates appear (since I’m not sure about how to do that from the Best Practices Customization page), and/or how to then filter posts so that posts in one category use one template and posts in another category use another template. NOT a page template, but the blog post template…

It would be similar to this –


– in that I would like a pull-down post attributes Templates menu to appear so that I can choose from multiple post/blog templates, and then I would also like to know whether I can code it so that any post in X category loads using a particular template, and any post in Y category uses a different template, and so on.

Unfortunately, at the moment, I can’t even find the default post template in the view…

Can you tell me how to do that?
Thanks again!

Hello There,

Thanks for writing in! If you so not have post templates yet, of course the default post template will be used and the “Post Attributes” will not be displaying.

You will have to create your custom templates for each of your category. To create one, you can follow the steps below assuming that you have your child theme active and ready. I will be using Integrity stack as an example.
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php
/*
Template Name: Sample Post layout
Template Post Type: post

*/
?>

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Integrity.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'integrity', 'content', get_post_format() ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

The code is taken from wp-content/themes/x/framework/views/integrity/wp-single.php. You can choose which stack you are using and copy it over.

3] Make your necessary changes for the template if there is a need to.
4] Save the file named as sample-post.php for example. You can name the file according to your post template name.
5] You can go back to steps 1 - 4 if you need to create more templates.
6] Upload the *.php file/files to your server in the child theme’s folder wp-content/themes/x-child/

If all the steps were followed correctly, you should be able to access the Post Templates when you edit the posts.

Or in the Posts overview > Quick Edit:

Hope this helps.

1 Like

That worked great, thanks!!!

This might be a silly question, but why does that work when I copy that file to
wp-content/themes/x-child/
and not when I copy it to
wp-content/themes/x-child/framework/views/renew

It seems like best practices is to put the template where it would usually go… Is it because I am adding something as opposed to replacing something?

Also, on another note, the custom skins in the grid are not the same as the original skins. For example, with the Quito skin, the first category is the color as designated by the customization for that post, but if you want to customize the Quito skin in the skin builder, all of the terms are default grey… Is there a way to modify those original skins?

And lastly, I have created different post templates for my different categories, and I want to change the font colour of the headings in each template, but I cannot figure out how to do that… It seems so simple, but nothing works… Can you tell me how to do that?

Thank you so much!!

Hello There,

If you place it in renew it does work because the template needs to be in the child theme’s folder. If you want to use the best practices, you will do these steps instead:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php
/*
Template Name: Sample Post layout
Template Post Type: post

*/
?>


<?php x_get_view( x_get_stack(), 'template', 'sample-post ); ?>

3] Save this file as template-sample-post.php and upload to your server in the child theme’s folder wp-content/themes/x-child/

4] Create another new file and insert this:

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Integrity.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

?>

<?php get_header(); ?>
  
  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php while ( have_posts() ) : the_post(); ?>
        <?php x_get_view( 'integrity', 'content', get_post_format() ); ?>
        <?php x_get_view( 'global', '_comments-template' ); ?>
      <?php endwhile; ?>

    </div>

    <?php if ( $fullwidth != 'on' ) : ?>
      <?php get_sidebar(); ?>
    <?php endif; ?>

  </div>

<?php get_footer(); ?>

The code is taken from wp-content/themes/x/framework/views/integrity/wp-single.php. You can choose which stack you are using and copy it over.

5] Make your necessary changes for the template if there is a need to.
6] Save the file named as template-sample-post.php and upload to your server in the child theme’s folder wp-content/themes/x-child/framework/views/integrity/. This step is for Integrity stack only. When you switch stack, it will return an error if you haven’t created template-sample-post.php file for other stacks.

You can go back to steps 1 - 6 if you need to create more templates. Please take note how I named my files and how it relates in the code.


For the Grid skins, please understand that some of the skin may not be editable or not available when you go to the skin editor. You might need to create your own. To do that, please check out this documentation:
https://theme-one.com/docs/the-grid/#skin_builder


Your heading titles and its colors according to category, you will need a custom css. Please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.category-mindfulness .entry-title {
    color: red;
}

.category-recipes .entry-title {
    color: yellow;
}

You may need to duplicate and edit the code to add your other categories.

Hope this helps.

1 Like

That all works! Thanks so much for bearing with me - you’ve both been so helpful!!

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.