The Astra theme is famous for its flexibility. In addition, you can even use astra_content_loop() to add your custom content to any existing post type. But sometimes, you just need more. Hence, this document will show you how to create a custom post type that works perfectly with the Astra theme.
You might wonder why you need Custom Post Type (CPT)? Simply put, in some situations adding content to existing post types and templates canโt provide the needed result. Thus, you have the option to add a completely new post type and shape it based on your needs.
Adding Custom Post Type (CPT)
Adding CPTs to your website can bring a lot of advantages. For example, you can add a CPT with a custom layout and functionality making it suitable for non-standard content. Also, each CPT has a custom taxonomy that can help you improve the way your content is organized.
To illustrate, we will import the โBusinesslyโ Starter Template and create an additional CPT called Sessions.ย
The template we will use contains an โInteractive Sessionsโ page. Each session has some specific information like dates, host, and speaker. We will show you how to create a CPT containing these options. In addition, weโll set the โInteractive Sessionsโ page as an archive for displaying Sessions.
Before starting, make sure you have your Astra theme and your Astra Child Theme set. Also, you can import the โBusinesslyโ Starter Template to your website. If you need any assistance importing the template, you can check this document.
Now, letโs show you how to register our Sessions CPT.
Register Custom Post Type
You can register your custom post type and give them any name you want. Also, you can add an unlimited number of CPTs to your website.
To register a CPT you need to add a few lines of code to the functions.php file of your Astra theme. The issue with this is that your CPTs will be removed with every theme update. For this reason, we will register our CPT to the functions.php file of the Astra Child Theme. To explain, the child theme will keep all our registered CPTs and other changes safe when updating the Astra theme. If you still donโt have the child theme installed, check this doc for instructions on how to do it.
Now, to register your CPT follow these steps:
Step 1 – Log in to your website, and navigate to Dashboard > Appearance > Theme File Editor. Here, on the top right side of the screen, select your Astra Child theme;
Step 2 – Next, in the Theme Files list, click on the functions.php to open the file;
Step 3 – Under the existing code in the file, add the following:
// Custom post type function
function astra_custom_post_types() {
// Basic Session Post Type
register_post_type('session', array(
'public' => true,
'rewrite' => array('slug' => 'sessions'),
'labels' => array(
'name' => 'Sessions',
'add_new_item' => 'Add New Session',
'edit_item' => 'Edit Session',
'all_items' => 'All Sessions',
'sinuglar_name' => 'Session'
),
));
}
// Hooking up the function to the Astra Theme
add_action('init', 'astra_custom_post_types');
The register_post_type is a WordPress function used to register post types. To use this function, you just need to pass it two arguments: custom post name, and an array of post type options.
Further, you can extend the code any way you need. For example, some of the additional arguments are:
- Add the Block editor support: ‘show_in_rest’ => true
- Add the CPT archive:‘has_archive’ => true
- Add features to the CPT post editor. In this example we added title field, editor, excerpt, featured image, revisions and custom fields: ‘supports’ => array(‘title’, ‘editor’, ‘excerpt’, ‘thumbnail’, ‘revisions’, ‘custom-fields’)
- dd icon to an admin menu item (dashicon) for your CPT. In our example, we chose a calendar icon. You can check the list of available dashicons and use the one you need by changing the icone name: ‘menu_icon’ => ‘dashicons-calendar’
Now, our CPT code looks like this:
// Extended Session Post Type
register_post_type('session', array(
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'excerpt', 'thumbnail', 'revisions', 'custom-fields'),
'show_in_rest' => true,
'rewrite' => array('slug' => 'sessions'),
'labels' => array(
'name' => 'Sessions',
'add_new_item' => 'Add New Session',
'edit_item' => 'Edit Session',
'all_items' => 'All Sessions',
'sinuglar_name' => 'Session'
),
'menu_icon' => 'dashicons-calendar',
));
Also, the list of labels can be extended if needed. In addition, you can extend the code even further by adding all your arguments using the $args variable. Here, you would use the following code for registering your CPT:
register_post_type( 'movies', $args );
You can find more details and the full list of available CPT options here.
Now you registered your new CPT and you will notice a matching new menu item in your Dashboard menu.
Update permalink structure
If you created and visited a new CPT post, youโll notice your website is displaying a โPage Not Foundโ notification. This happened because the WordPress permalink structure of your website wonโt update automatically when you register your CPT.
Thus, any time you add a new CPT, you need to update the permalink structure yourself. To do this, navigate to Dashboard > Settings > Permalinks. Though you can change your permalinks here, itโs not needed – just click on the โSave Changesโ button.
Creating Custom Template for Your CPT And Archive
Once youโve registered your CPT, itโs time to check it out on the front end. Now, you’ll notice that it looks the same as your regular posts. The reason for this is that we havenโt added any custom template for this CPT. For this reason, WordPress is using the default template located in the single.php file.
Also, if you check the Archive page, you will notice that it looks the same as other archive pages on your website. The reason is the same.
To create your custom templates, follow these steps:
Step 1 – Access your website root folder and navigate to your Astra Child theme folder (the default path is: /wp-content/themes/astra-child);
Step 2 – Add separate files for your CPT post and archive. Keep in mind that these files need to be named in the exact format:
- single-{cpt-name}.php
- archive-{cpt-name}.php
Accordingly, we will name our Session CPT files as:
- single-session.php
- archive-session.php
This will provide you with empty templates which you can build any way you want.
Step 2b – Alternatively, make copies of the original files if you want to use the existing Astra template with some modifications. Here, you can copy the following files from your Astra theme folder (the default path is: /wp-content/themes/astra-child):
- single.php
- archive.php
Now add these files to your Astra Child theme folder and rename them to:
- single-session.php
- archive-session.php
This will give you precisely the same template as used by default files. Now you can modify these files and change how your CPT pages look.
These templates will be applied only to your CPT. Keep in mind that these files need to be placed in your Astra Child folder. Contrary, if placed in your Astra theme folder, the theme update will delete your CPT files.
Update the Container Layout for Your CPT
Though many Astra Customizer settings will be applied to your CPTs, when it comes to container layout there are some limitations.
Namely, your CPT will follow the website container layout. But, if you want to set a different layout for your CPT you need to add the following code to your Astra Child Theme functions.php file:
add_filter ( 'astra_get_content_layout', 'custom_post_type_content_layout'); // Update the container layout based on Custom Post Type.
function custom_post_type_content_layout ( $layout ){ // Add your CPT instead of Session. If you want to use this layout for more than one CPT, you can add them all separating each CPT by coma (eg. 'session', 'events').
if ( is_singular( array( 'session' ) ) ) {
$layout = 'boxed-container';
}
return $layout;
}
In the code above, you need to specify the layout option that you want to apply, and CPTs to which it should be applied. You cen use following codes for different layout options:
- Full Width / Streched = ‘page-builder’
- Full Width / Contained = ‘plain-container’
- Content Boxed = ‘content-boxed-container’
- Boxed = ‘boxed-container’
Add Sidebar
Similar to the container layout, the default Sidebar Customizer settings will be applied to your CPTs.
Thus, to add a sidebar to your CPT, you need to set this as a default value for the whole website:
Step 1 – Navigate to Dashboard > Appearance > Customize > Sidebar;
Step 2 – Under the โDefault Layoutโ dropdown, select the โLeft Sidebarโ or โRight Sidebarโ option.
Adding CPT Content
Previously, we showed you how to add support for the Block (Gutenberg) Editor to your CPT. Thus, you can add your post content using Block editor out of the box.
On the other hand, if you prefer using Elementor or Buiver Builder instead, you will need to enable them for your CPT.
To enable Elementor for CPT, follow these steps:
Step 1 – Navigate to Dashboard > Elementor > Settings and click on โGeneralโ tab;
Step 2 – Under โPost Typesโ check the CPTs you wish to edit with Elementor. Click the โSave Changesโ button.
To enable Beaver Builder for CPT, follow these steps:
Step 1 – Navigate to Dashboard > Settings > Beaver Builder;
Step 2 – Click the โPost Typesโ option and check the CPTs you wish to edit with Beaver Builder. Click the โSave Post Typesโ button.
Astra Loop
The alternative option to adding a CPT is to use the astra_content_loop(). You can use this option to add a CPT template content to existing post types instead of creating a new Custom Post Type.
To do this, you need to add this code to the Astra Child Theme functions.php file:
function add_cpt_content() {
// bail if this current post type is different.
if ( 'cpt' !== get_post_type() ) {
return;
}
?>
<!-- Your custom HTML markup here -->
<p>My custom theme HTML</p>
<?php
}
add_action( 'astra_entry_content_before', 'add_cpt_content' );
Further, if you add your code using this method, any future template changes made by Astra them will not have an influence on the CPT content you added. Thus, there will be no need for you to manually update your content.
