\n\n\n\n\n\n
What Is WordPress Custom Post Type?<\/h2>\n
WordPress custom post type is an additional content category users create to organize their website content. It is useful if your WordPress website has diverse content that doesn’t belong to WordPress’s default post types.<\/p>\n <\/div>\n\n\n\n<\/p>
While you can assign categories to organize your content, your posts will appear in one list when grouped into the same post type. This makes tracking your posts more difficult.<\/p>
By default, WordPress has seven post types:<\/p>
- \n
- Posts<\/strong> – category for regular posts. Typical content of this type includes a blog post.<\/li>\n\n\n\n
- Pages<\/strong> – displays static content that is not listed by date.<\/li>\n\n\n\n
- Attachments<\/strong> – all the website media, including images, videos, or PDF files.<\/li>\n\n\n\n
- Revisions <\/strong>– saved versions of all post types.<\/li>\n\n\n\n
- Navigation Menus <\/strong>– list of links your website visitors can use to find specific information.<\/li>\n\n\n\n
- Custom CSS <\/strong>– type that you can modify to customize your WordPress theme.<\/li>\n\n\n\n
- Changesets <\/strong>– the track of changes made in the customizer.<\/li>\n<\/ol>
WordPress custom post types allow you to choose a particular section for your content. You can quickly group content without choosing categories and easily track posts in different sections.<\/p>
Custom post types in WordPress also offer several customization options. This allows you to expand their functionality beyond the default posts.<\/p>
For instance, you can move the custom post type menu, change the edit screen’s appearance, and enable features like featured images or excerpts.<\/p>
Elements of a WordPress Custom Post Type<\/h2>
Before creating custom post types, you must understand the terms array <\/strong>and element<\/strong>. They are essential parts of your custom post type’s code.<\/p>
An array <\/strong>is a data structure that stores key and value pairs known as elements<\/strong>. In this case, it reserves the properties of the custom post type.<\/p>
To create a custom WordPress post type, there are three arrays containing different elements – $args<\/strong>, $labels<\/strong>, and $supports<\/strong>. The associative array $args<\/strong> is short for arguments, which include various key-value pairs, including:<\/p>
- \n
- description<\/strong> – a short and descriptive summary of the post type. You can only display it in the post type’s template.<\/li>\n\n\n\n
- public<\/strong> – changes WordPress custom post types’ visibility to authors and visitors. Choose TRUE<\/strong> to make it appear in the WordPress Dashboard and visitors’ custom query.<\/li>\n\n\n\n
- menu_position<\/strong> – defines the new post type’s location in the WordPress admin menu. Refer to the WordPress codex page<\/a> for its value and positions.<\/li>\n\n\n\n
- has_archive<\/strong> – defines the custom post type archives, URL structure, and slug name based on parameter 1 of register_post_types()<\/strong>.<\/li>\n\n\n\n
- show_in_admin_bar <\/strong>– alters the post type’s visibility in the upper admin bar under the +New<\/strong> section.<\/li>\n\n\n\n
- show_in_nav_menus<\/strong> – changes whether you can add posts of this type to navigation menus created via the Appearance<\/strong> → Menus<\/strong>.<\/li>\n\n\n\n
- query_var <\/strong>– sets whether site visitors can enter a post’s type and title as a query in the URL to view it.<\/li>\n<\/ul>
In addition to the elements, $args<\/strong> holds the $labels <\/strong>and $supports<\/strong> array containing different key-value pairs. We recommend creating a separate $labels<\/strong> variable to keep all the key and value pairs to make the code cleaner and easier to understand<\/p>
The $label<\/strong> array defines the custom post type’s text and holds the following keys:<\/p>
- \n
- name<\/strong> – the general plural name for the post type<\/li>\n\n\n\n
- singular_name<\/strong> – the name for a single post of the custom type<\/li>\n\n\n\n
- add_new<\/strong> – replaces the ‘Add New’ text<\/li>\n\n\n\n
- add_new_item<\/strong> – changes the ‘Add New Post’ text<\/li>\n\n\n\n
- edit_item<\/strong> – adjusts the ‘Edit Post’ text<\/li>\n\n\n\n
- featured_image <\/strong>– modifies ‘Featured Image’ in the post editor<\/li>\n\n\n\n
- set_featured_image<\/strong> – replaces ‘Set Featured Image’<\/li>\n\n\n\n
- menu_name <\/strong>– alters the text of the top-level link. The default text for the link is the name key<\/li>\n<\/ul>
Meanwhile, the $supports <\/strong>array contains elements that define the custom post type’s features. The TRUE<\/strong> value enables the following features:<\/p>
- \n
- title<\/li>\n\n\n\n
- editor<\/li>\n\n\n\n
- author<\/li>\n\n\n\n
- thumbnail<\/li>\n\n\n\n
- excerpt<\/li>\n\n\n\n
- trackbacks<\/li>\n\n\n\n
- custom-fields<\/li>\n\n\n\n
- comments<\/li>\n\n\n\n
- revisions<\/li>\n\n\n\n
- page-attributes<\/li>\n\n\n\n
- post-formats<\/li>\n<\/ul>
How to Create a WordPress Custom Post Type<\/h2>
There are three different ways to add custom post types in WordPress, and each has its pros and cons:<\/p>
- \n
- Using a normal plugin<\/strong> – most simple, but the custom post type will be deleted if you uninstall or deactivate the plugin.<\/li>\n\n\n\n
- Editing the theme’s functions.php file<\/strong> – doesn’t require an additional tool, but this method doesn’t preserve the data after the theme update.<\/li>\n\n\n\n
- Creating a <\/strong>site-specific plugin <\/strong><\/a>– preserves the data and is highly customizable but requires technical skills.<\/li>\n<\/ul>
In this article, we will use the third method. Before proceeding, we recommend you read our tutorial about how to create a WordPress plugin<\/a> to learn more about the custom code.<\/p>
To create custom post types, use <\/strong>the register_post_type()<\/a> function. This takes two parameters – the custom post type name<\/strong> and the $args <\/strong>array.<\/p>
The plugin’s code should also contain custom functions that call register_post_type()<\/strong>. Remember to hook these functions to the init <\/strong>action hook to allow the custom post type to register properly.<\/p>
To avoid conflict with other plugins, your custom function should have a prefix like ht_<\/strong>.<\/p>
Here is a code example for a Custom Article <\/strong>post type plugin:<\/p>
<?php\n\/*\nPlugin Name: Custom Post Types\nDescription: Add post types for custom articles\nAuthor: Hostinger Dev\n*\/\n\/\/ Hook ht_custom_post_custom_article() to the init action hook\nadd_action( 'init', 'ht_custom_post_custom_article' );\n\/\/ The custom function to register a custom article post type\nfunction ht_custom_post_custom_article() {\n \/\/ Set the labels. This variable is used in the $args array\n $labels = array(\n 'name' => __( 'Custom Articles' ),\n 'singular_name' => __( 'Custom Article' ),\n 'add_new' => __( 'Add New Custom Article' ),\n 'add_new_item' => __( 'Add New Custom Article' ),\n 'edit_item' => __( 'Edit Custom Article' ),\n 'new_item' => __( 'New Custom Article' ),\n 'all_items' => __( 'All Custom Articles' ),\n 'view_item' => __( 'View Custom Article' ),\n 'search_items' => __( 'Search Custom Article' ),\n 'featured_image' => 'Poster',\n 'set_featured_image' => 'Add Poster'\n );\n\/\/ The arguments for our post type, to be entered as parameter 2 of register_post_type()\n $args = array(\n 'labels' => $labels,\n 'description' => 'Holds our custom article post specific data',\n 'public' => true,\n 'menu_position' => 5,\n 'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments', 'custom-fields' ),\n 'has_archive' => true,\n 'show_in_admin_bar' => true,\n 'show_in_nav_menus' => true,\n 'query_var' => true,\n );\n \/\/ Call the actual WordPress function\n \/\/ Parameter 1 is a name for the post type\n \/\/ Parameter 2 is the $args array\n register_post_type('article', $args);\n}<\/pre>Note that the code may vary depending on the custom post type. Once you finish writing the code, follow these steps to turn it into a plugin:<\/p>
- \n
- Copy and paste the code into a text editor. For example, we will use Windows Notepad<\/strong>.<\/li>\n\n\n\n
- Save the file. Name the file custom-post-type.php <\/strong>and select All Files <\/strong>from the Save as type <\/strong>dropdown menu.<\/li>\n\n\n\n
- Click Save<\/strong>.<\/li>\n<\/ol>
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/The-custom-plugin-code-saved-as-a-php-file-with-Notepad-1024x541.png\")
<\/a><\/figure>- \n
- Open your FTP client or hosting account’s file manager. For Hostinger users, go to your hPanel <\/strong>→ Hosting<\/strong> → Manage<\/strong> →<\/strong> Files →<\/strong> File Manager<\/strong>.<\/li>\n\n\n\n
- Inside the File Manager<\/strong>, navigate to public_html <\/strong>→ wp-content <\/strong>→ plugins<\/strong>.<\/li>\n\n\n\n
- Create a new folder and name it custom-post-type<\/strong>.<\/li>\n\n\n\n
- Paste the <\/strong>file into the folder.<\/li>\n<\/ol>
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/The-custom-plugin-php-file-inside-the-website_s-plugin-folder-1024x550.png\")
<\/a><\/figure>- \n
- Log in to your WordPress dashboard. Go to Plugins <\/strong>→ Installed Plugins<\/strong>.<\/li>\n\n\n\n
- Find the Custom Post Type <\/strong>plugin and click Activate<\/strong>.<\/li>\n<\/ol>
![\"Custom](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/Custom-post-type-plugin-activation-setting-1024x421.png\")
<\/a><\/figure>- \n
- Refresh the page. You should see the Custom Article <\/strong>post type on your WordPress admin menu.<\/li>\n<\/ol>
![\"A](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/A-custom-post-type-in-the-WordPress-sidebar-1024x292.png\")
<\/a><\/figure>You may create an unlimited number of custom post types. However, too many custom post types can slow the REST API<\/a> discovery and complicate the admin bar.<\/p>
How to Customize New Post Type<\/h2>
You may need to customize your new post type to differentiate it from other content. Before customizing, you should create template files in your active theme’s directory.<\/p>
You need two template files for customization – single-{post_type}.php <\/strong>and archive-{post_type}.php<\/strong>. These are templates for an individual post entry and the custom type’s archive page, respectively.<\/p>
WordPress will use the default single.php <\/strong>and archive.php<\/strong> if you don’t create these templates. Since all posts and archives refer to those two files, customizing them will change the entire site.<\/p>
The best way to create template files is to duplicate your theme’s existing single.php <\/strong>and archive.php <\/strong>files. This method keeps your site’s theme structure and sets up the required template tag, simplifying the customization process.<\/p>
Here are the steps to do so:<\/p>
- \n
- Access your FTP client or hosting account’s file manager.<\/li>\n\n\n\n
- Locate your currently active theme folder. In our case, it is in \/public_html\/wp-content\/themes\/twentytwentyone<\/strong>.<\/li>\n\n\n\n
- Copy the single.php<\/strong> and archive.php<\/strong> files and paste them outside that folder.<\/li>\n<\/ol>
![\"Single.php](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/Single.php-and-Archive.php-outside-the-active-theme-folder-1024x551.png\")
<\/a><\/figure>- \n
- Rename them based on parameter 1 of your register_post_type()<\/strong>. Since our parameter 1 is article<\/strong>, the names are single-article.php<\/strong> and archive-article.php<\/strong>.<\/li>\n\n\n\n
- Move the files back to the twentytwentyone<\/strong> folder.<\/li>\n<\/ol>
![\"Template](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/Template-files-inside-the-currently-active-theme-folder-1024x552.png\")
<\/a><\/figure>- \n
- Repeat the second and third steps for other custom post type templates.<\/li>\n<\/ol>
\n\n\n
Important!<\/strong> Themes with the same structure for posts and pages won’t have single.php<\/strong> and archive.php files. Such themes only use the singular.php file<\/strong>.<\/p><\/div>\n\n\n\n<\/p>
To customize the template files, download and edit them using a text editor. If you use Hostinger’s web hosting service<\/a>, edit them directly in the file manager.<\/p>
Once you save the files, the changes should apply only to the custom type’s archive page and individual entry.<\/p>
Adding a Meta Box to a Custom Post Type<\/h3>
The meta box is an editing screen window allowing users to add post metadata. It is useful for adding or modifying posts’ information, such as author details, publishing controls, and custom slug.<\/p>
While WordPress comes with default meta boxes, you may need a specific one for your custom post type. For example, the Movies <\/strong>custom post type may require the Genre <\/strong>meta box.<\/p>
Using a meta box helps you add metadata to your content more quickly. Instead of entering the value individually, you can click data from the meta box to input it.<\/p>
To create a custom meta box, edit your theme’s functions.php <\/strong>or site-specific plugin’s code. In this tutorial, we will add the new meta box’s custom code to the plugin’s file.<\/p>
Since the code varies depending on the meta box content and placement, refer to WordPress codex for more information. For this tutorial, we will explain how to build a custom Author <\/strong>meta box:<\/p>
- \n
- Locate the custom-post-type.php<\/strong> file in your hosting file manager or FTP client.<\/li>\n\n\n\n
- Double-click the file to open the editor screen. Alternatively, download and open the file in a text or code editor.<\/li>\n\n\n\n
- Create an empty custom meta box by entering the following code:<\/li>\n<\/ol>
\/\/ Add meta box \nadd_action(\"add_meta_boxes\", \"add_author_meta_box\");\n\nfunction add_author_meta_box()\n{\n add_meta_box(\n \"author_meta_box\", \/\/ Meta box ID\n \"Author Details\", \/\/ Meta box title\n \"author_meta_box_callback\", \/\/ Meta box callback function\n \"article\", \/\/ The custom post type parameter 1\n \"side\", \/\/ Meta box location in the edit screen\n \"high\" \/\/ Meta box priority\n); \n}\nfunction author_meta_box_callback()\n{ \n\twp_nonce_field(‘author-nonce’, ‘meta-box-nonce’);\nglobal $post;\nplaceholder\n}<\/pre>- \n
- Add the meta box’s content by replacing the placeholder<\/strong> value. For this tutorial, we will add the author name and ID fields using the following code.<\/li>\n<\/ol>
\/\/ Add meta box content \n ?>\n\t<th><label for=\"athor_name_field\">Author Name<\/label><th>\n\t<td><input \ntype=\"text\"\nid=\"author_name\" \nclass=\"regular-text\" \nname=“Author_Name” \nvalue=“” \n\/> \n <td> \n <th><label for=\"author_id_field\">Author ID<\/label><th>\n\t<td><input \ntype=\"text\" \nid=\"author_id\" \nclass=\"regular-text\"\nname=“Author_ID”\nValue=””\n\/> \n <td> \n\t<?php <\/pre>
- \n
- At the bottom of the code, add the following snippet to save the entered values:<\/li>\n<\/ol>
\/\/ Save meta box data\nadd_action ( 'save_post', 'author_save_postdata');\nfunction author_save_postdata( $post_id ) {\n\n\/\/ If this is an autosave, our form has not been submitted\nif ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) \nreturn $post_id;\n\n\t\/\/ Retrieve post id\n\tIf (‘article’ !== get_post_type() ) {\n\t\treturn $post_id\n}\n \t\/\/ Check the user's permissions\n \tif ( 'page' == $_POST['post_type'] ) {\n \nif ( ! current_user_can( 'edit_page', $post_id ) )\nreturn $post_id;\n \n} else {\n \nif ( ! current_user_can( 'edit_post', $post_id ) )\nreturn $post_id;\n}\n \n\/* OK, it is safe to save the data now. *\/\n \n\/\/ Sanitize user input.\n\n$mydata = sanitize_text_field( $_POST['Author_Name'] );\n\n$mydata = sanitize_text_field( $_POST['Author_ID'] );\n\n \n\/\/ Update the meta field in the database.\n\nupdate_post_meta( $post_id, 'Author_Name', $_POST['Author_Name'] ); \n\nupdate_post_meta( $post_id, 'Author_ID', $_POST['Author_ID'] ); \n }<\/pre>- \n
- In the file manager’s code editor, click the disk icon<\/strong> on the top right to save the change. If you edit the code locally, save and re-upload the updated file.<\/li>\n<\/ol>
The new meta box should appear if you open your custom post type’s edit screen.<\/p>
![\"A](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/A-custom-author-details-meta-box-in-WordPress-post-edit-screen-1024x432.png\")
<\/a><\/figure>To ensure the meta box works properly, enter texts into the designated field and update the post. The entered value should appear in the custom fields.<\/p>
If you need to become more familiar with PHP, use the Meta Box<\/a> plugin to automatically generate the code. Since it only generates the meta boxes’ content code, you must write the add_metabox () <\/strong>function yourself.<\/p>
After you download and install the plugin, follow these steps:<\/p>
- \n
- On the WordPress sidebar, go to Plugins <\/strong>→ Installed Plugins<\/strong>.<\/li>\n\n\n\n
- Find the Meta Box <\/strong>plugin and click About<\/strong> → Go to Online Generator<\/strong>.<\/li>\n<\/ol>
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/The-Meta-Box-plugin-in-WordPress_s-installed-plugins-menu-1024x337.png\")
<\/a><\/figure>- \n
- Create a custom meta box.<\/li>\n\n\n\n
- Click Generate Code<\/strong> → Copy<\/strong>.<\/li>\n<\/ol>
![\"Meta](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2020\/02\/Meta-Box-website_s-generate-custom-meta-box-code-button-1024x487.png\")
<\/a><\/figure>- \n
- Paste the code to your functions.php <\/strong>or custom-post-type.php <\/strong>file.<\/li>\n<\/ol>
\n\n\n
\nPro Tip<\/h4>\n
Use a plugin to add PHP code in WordPress posts or pages<\/a> directly via the admin dashboard. You don’t have to create template files or use a separate text editor, improving workflow and minimizing errors. <\/p>\n <\/div>\n\n\n\n<\/p>
How to Display Custom Post Types on the Front Page<\/h2>
WordPress custom post types are not displayed on the front page by default. To enable them, write a new function that calls the set method of WordPress’ WP_Query<\/a> object.<\/p>
Here’s an example:<\/p>
\/\/ Pin our custom function to the pre_get_posts action hook\nadd_action( 'pre_get_posts', 'add_article_to_frontpage' );\n\/\/ Alter the main query\nfunction add_article_to_frontpage( $query ) {\n if ( is_home() && $query->is_main_query() ) {\n $query->set( 'post_type', array( 'post', 'article' ) );\n }\n return $query;\n}<\/pre>In this function, $query->set()<\/strong> takes two parameters – the modified property and an array defining its value. In our case, the modified property is post_type<\/strong>, while the arrays’ values are post <\/strong>and article<\/strong>.<\/p>
The array includes ‘post<\/strong>’ to show the default post type on the front of your website. Removing it will display only the custom posts.<\/p>
The second parameter is ‘article<\/strong>’, which displays regular and all custom article posts on the front page.<\/p>
To enable the code, paste it to your theme’s functions.php <\/strong>or custom plugin’s file. We will show you how to paste it into the plugin:<\/p>
- \n
- Access your WordPress site files and go to your custom plugin’s folder. Ours is in the \/public_html\/wp-content\/plugins\/custom-post-type<\/strong>.<\/li>\n\n\n\n
- Open the
- Access your WordPress site files and go to your custom plugin’s folder. Ours is in the \/public_html\/wp-content\/plugins\/custom-post-type<\/strong>.<\/li>\n\n\n\n
- Paste the code to your functions.php <\/strong>or custom-post-type.php <\/strong>file.<\/li>\n<\/ol>
- Find the Meta Box <\/strong>plugin and click About<\/strong> → Go to Online Generator<\/strong>.<\/li>\n<\/ol>
- On the WordPress sidebar, go to Plugins <\/strong>→ Installed Plugins<\/strong>.<\/li>\n\n\n\n
- In the file manager’s code editor, click the disk icon<\/strong> on the top right to save the change. If you edit the code locally, save and re-upload the updated file.<\/li>\n<\/ol>
- At the bottom of the code, add the following snippet to save the entered values:<\/li>\n<\/ol>
- Locate the custom-post-type.php<\/strong> file in your hosting file manager or FTP client.<\/li>\n\n\n\n
- Move the files back to the twentytwentyone<\/strong> folder.<\/li>\n<\/ol>
- Copy the single.php<\/strong> and archive.php<\/strong> files and paste them outside that folder.<\/li>\n<\/ol>
- Find the Custom Post Type <\/strong>plugin and click Activate<\/strong>.<\/li>\n<\/ol>
- Inside the File Manager<\/strong>, navigate to public_html <\/strong>→ wp-content <\/strong>→ plugins<\/strong>.<\/li>\n\n\n\n
- Save the file. Name the file custom-post-type.php <\/strong>and select All Files <\/strong>from the Save as type <\/strong>dropdown menu.<\/li>\n\n\n\n
- Editing the theme’s functions.php file<\/strong> – doesn’t require an additional tool, but this method doesn’t preserve the data after the theme update.<\/li>\n\n\n\n
- Using a normal plugin<\/strong> – most simple, but the custom post type will be deleted if you uninstall or deactivate the plugin.<\/li>\n\n\n\n
- singular_name<\/strong> – the name for a single post of the custom type<\/li>\n\n\n\n
- public<\/strong> – changes WordPress custom post types’ visibility to authors and visitors. Choose TRUE<\/strong> to make it appear in the WordPress Dashboard and visitors’ custom query.<\/li>\n\n\n\n
- Pages<\/strong> – displays static content that is not listed by date.<\/li>\n\n\n\n