Creating Custom Post Types in WordPress using the Query Loop

Creating custom post types in WordPress is super powerful and helps you customize your WordPress Website to your needs. Whether you’re a beginner, intermediate or advanced user, understanding how to use custom post types will make a big difference in how you manage and display content. For instance, if you have a restaurant website you might want to create a custom post type for “Menu Items” to showcase your dishes.

In this guide we’ll take you through the whole process of creating custom post types and displaying them using the WordPress Query Loop. We’ll cover both manual coding and plugin based methods so everyone can follow along. Plus, we will help you know how Cloudways WordPress Managed Hosting Platform can help you optimize your WordPress experience.

Understanding Custom Post Types

In order to know more about Custom Post Types, let’s get into the basics first.

What Are Custom Post Types?

Custom post types are specialized content types that extend the default offerings of WordPress, which typically include posts and pages. They allow you to create unique categories for your content, making it easier to organize and display information that fits your website’s purpose.

Why Use Custom Post Types?

Using custom post types offers several benefits:

• Improved Organization: They help you categorize content effectively.
• Better User Experience: Custom post types make it easier for visitors to find their way around your site.
• Flexibility: You can customize the functionality and look of each content type to your needs.

Setting Up Custom Post Types

Let’s get into the methods in order to learn how we can set up the custom post types against our website. We are covering 2 methods here, one is manual and one is via using Plugin.

Method 1: Manual Registration

• If you’re comfortable with coding, manually registering a custom post type gives you full control over its features. Follow these steps:
• Locate Your Functions File: Go to your WordPress installation directory. Then navigate to wp-content/themes/your-theme-name/functions.php.

• Open the Functions File: Use a text editor or an IDE (like VSCode) to open the functions.php file. Add the following code and pasteit at the end of the file.

function create_custom_post_type() {
register_post_type('menu_item',
array(
'labels' => array(
'name' => __('Menu Items'),
'singular_name' => __('Menu Item')
),
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'thumbnail'),
'show_in_rest' => true,
)
);
}
add_action('init', 'create_custom_post_type');

• Save Changes: Save the functions.php file and upload it back to your server if you’re using FTP.
• Check Your Dashboard: Go to your WordPress admin area. You should see “Menu Items” in the sidebar menu.

Method 2: Using a Plugin

If coding isn’t your thing or you prefer a more straightforward approach, using a plugin like Custom Post Type UI is a great option. Here’s how:

Install the Plugin

• Log in to your WordPress dashboard.
• Then go to Plugins > Add New.
• You can search for “Custom Post Type UI.”
• Click Install Now, then click Activate.

Add a New Custom Post Type

In order to add New Custom Post Type via Plugin, navigate to CPT UI > Add/Edit Post Types in your dashboard. Then fill out the following fields:

• Post Type Slug: Enter a unique slug (e.g., “menu_item”).
• Plural Label: Enter “Menu Items.”
• Singular Label: Enter “Menu Item.”

Configure Additional Settings (optional)

Adjust settings like visibility or REST API options as needed. Then click on Add Post Type. After filling out the necessary information, click on the button to add your new custom post type. Now once the above steps are followed as instructed, you can verify the Custom Post Type you just created.

• Go back to your WordPress admin area.
• You should now see “Menu Items” in the sidebar menu.

Utilizing the Query Loop

Now that you have your custom post type created, let’s display it using the WordPress Query Loop.

Displaying Custom Post Types with WP_Query

To display your custom post types on your website, follow these steps:

• Open Your Template File, decide where you want to display your custom post type (e.g. on a page template or in a sidebar).
• Open the corresponding template file in your theme directory (e.g. page.php, single.php or archive.php).
• Add the Following Code Where You Want the Posts Displayed:

$query = new WP_Query(array(
'post_type' => 'menu_item',
'posts_per_page' => 10,
));

if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
echo '<h2>' . get_the_title() . '</h2>';
echo '<div>' . get_the_content() . '</div>';
echo '<p>Price: ' . get_post_meta(get_the_ID(), '_price_key', true) . '</p>'; // Assuming you have a price meta field
}
}
wp_reset_postdata();

• Save the template file after adding the code.
• Now view your site or the page where you added this code. You should see a list of menu items displayed with their titles and content.

Extending the Default WordPress Loop

If you want your custom post types to appear alongside regular posts on key pages like home or archive pages, follow these steps:

• Open Your Functions File Again.
• Go back to functions.php in your theme directory.
• Add This Code at the End of Your Functions File:

function add_custom_post_types_to_loop($query) {
if (!is_admin() && $query->is_main_query()) {
if (is_home() || is_archive()) {
$query->set('post_type', array('post', 'menu_item'));
}
}
}
add_action('pre_get_posts', 'add_custom_post_types_to_loop');

• Save Changes Again: Save functions.php after adding this code.
• Check Your Home or Archive Page: Visit your homepage or any archive page.

You should now see both standard posts and your custom “Menu Item” posts displayed together.

Why Choose Cloudways for Your WordPress Hosting?

When it comes to hosting your WordPress site with custom post types and complex queries, consider using Cloudways for several compelling reasons:

• Performance Optimization: Cloudways has full page caching via Varnish and Cloudflare integration so your dynamic content loads fast.
• Scalability: Scale resources as your site grows without any downtime or hassle.
• User-Friendly Platform Management: With an intuitive control panel managing servers and applications is a breeze even for beginners!

Cloudways also has managed backups, automated updates and excellent customer support so it’s perfect for both beginners and professional developers.

Conclusion

Creating custom post types in WordPress is straightforward and incredibly beneficial for organizing diverse content types on your site. Whether you choose to code manually or use plugins like Custom Post Type UI, both methods empower you to tailor your website according to your needs.
For those looking for optimal performance while hosting their WordPress sites with custom functionalities, Cloudways stands out as an excellent choice. Cloudways robust features ensure that your site runs smoothly while providing excellent 24/7 support whenever needed.

Salwa Mujtaba

Salwa Mujtaba is a Technical Content Writer at Cloudways. With a strong background in Computer Science and prior experience as a team lead in Cloudways Operations, she brings a deep understanding of the Cloudways Platform to her writing. Salwa creates content that simplifies complex concepts, making them accessible and engaging for readers. When she's not writing, you can find her enjoying good music, reading a book, or spending quality time with her family.

Get Connected on: Twitter Community Forum