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

5. 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.