Setting Up a Custom Post Type and Displaying on a Sage 9 Page Template

Heads up! I have rebuilt this theme using Timber/Twig. I haven’t maintained the Sage theme in a few years so this information is very outdated. Please checkout the Sage website for more current instructions.

Note: I’m using Sage 9 with Bedrock and Local server for my local environment, so the file and directory locations are written according to that set up.

In this article, I will walk through how I set up my Portfolio Custom Post Type (CPT) and displayed it on the Portfolio section of the homepage of my site. Before I get into the steps, I’d like to mention that this is V1 of how I plan to display the Portfolio custom post type (CPT) on the front page. Currently, the code that queries/displays the Portfolio CPT is written in the front page template. Eventually, I would like to create a custom Gutenberg block that will display this section. Once I get to that, I will update this post.

Set Up the Custom Post Type Plugin

It’s a best practice to set up Custom Post Types in a plugin, this way if/when you change themes the CPT will still be accessible in the new theme.

Add Cpt Folder within Plugins Folder

For most WordPress setups you can add the CPT plugin folder to /wp-content/plugins. But since I’m developing with Sage 9 with Bedrock and Local server for my local environment, the plugins folder is in this location: /app/bedrock/web/app/plugins

  1. Create a folder for the CPT ( I named mine “portfolio-custom-post-type”)*
  2. In that folder, create a PHP file to register the CPT ( I named mine “portfolio.php,” you can view this file on github.)

Display Custom Post Type Loop in a Sage 9 Page Template

In order to display the list of portfolio projects in a grid layout on my front page I needed to set up the “front-page.blade.php” template file and a Controller to query and loop through the CPT.

  1. First, I recommend reading about Sage 9 Controllers for more information about naming conventions and usage.
  2. Add FrontPage.php file to the app/Controllers folder
    1. Write the loop function to query the Portfolio CPT
  3. Create or edit the template file for the front-page (/resources/views/front-page.blade.php)
  4. Loop through the CPT using the loop function defined in the Controller. Here is my code (view full front-page.blade.php file on github):
@foreach($portfolio_loop as $portfolio_topic)
   <div class="front-page_section-portfolio_topics--topic" style="background: linear-gradient( rgba(38, 36, 35, 0.3), rgba(38, 36, 35, 0.3) ), url({!! $portfolio_topic['thumbnail_url'] !!});">
     <h3 class="front-page_section-portfolio_topics--topic-title">{!! $portfolio_topic['title'] !!}</h3>
     <button class="front-page_section-portfolio_topics--topic-btn-open">View work</button>
   </div><!--end  front-page_section-portfolio_topics--topic -->
   <!--end portfolio topic modal-->
   <div class="portfolio_topic-modal" role="dialog" aria-labelledby="modal_title">
     <div class="portfolio_topic-modal__content" id="portfolio_topic-modal__holder" role="document">
       <button class="portfolio_topic-modal__content--btn-close" id="portfolio_topic-modal__close"type="button" aria-label="close">&times;</button>
       <div class="portfolio_topic-modal__content--details">{!! $portfolio_topic['content'] !!}</div>
     </div><!--end portfolio_topics-modal__content-->
   </div><!--end  portfolio_topics-modal -->
   <!--modal-->
   @endforeach
  1. Lastly, set up a style sheet for the front-page template (resources/assets/styles/layouts/ _front-page-header.scss). I created a grid layout of my Portfolio. View the scss file on github.

*Notes: If I end up setting up more CPT I might decide to create a folder that holds all of my custom post types in one spot, or a single file that registers multiple CPT.


Comments

Paula says

Do you know how to insert pagination on the Custom Post Type loop in Blade?

Replies to Paula

Amber Alter says

Good Question, Paula. I am displaying my CPT in a carousel on the front page of my site instead of as a list on an archive page, so I haven't added pagination functionality to my code. I can't explain how to do it from experience, and there seems to be different approaches to this, but these conversations might be useful to you:

This thread shows how to add a pagination query to the post query in the Controller: https://discourse.roots.io/t/pass-custom-query-from-controller-to-view-for-pagination/11141/3

This conversation shows an example of using a php function: https://discourse.roots.io/t/pagination-instead-of-pager/301/3

This conversation talks about setting up an archive page and using WP query on the archive template: https://discourse.roots.io/t/custom-post-type-archive-on-a-custom-page-template/12980/3

I might work on setting up an archive page for this CPT in the future. When I do, I'll be sure to updated this article.

Comments for this post are closed.