Building Structured Content: How to Create a Custom Post Type with Custom Fields in WordPress (Using Free Plugins)

WordPress is renowned for its flexibility, largely thanks to its powerful content management capabilities. While standard “Posts” and “Pages” cover a wide array of content needs, many websites require more structured, specialized content types – think of a portfolio, testimonials, team members, or, in our example, detailed book reviews. This is where Custom Post Types (CPTs) come into play, allowing you to extend WordPress beyond its default structure.

As an expert educator, I’ll guide you through the process of creating a custom ‘Book Review’ post type complete with specific fields like Author, Publisher, and Rating. We’ll achieve this using two incredibly popular and free plugins: Custom Post Type UI (CPT UI) for defining the CPT itself, and Advanced Custom Fields (ACF) for adding the specific data fields. By the end of this tutorial, you’ll have a robust system for managing highly organized content, ready for display on your site.

Why Use Custom Post Types?

Imagine you want to showcase book reviews on your website. You could use standard WordPress posts, but then you’d have to consistently remember to add the author’s name, publisher, and rating within the post’s main content, perhaps with manual formatting. This quickly becomes messy, inconsistent, and hard to query or display uniformly.

A Custom Post Type for ‘Book Reviews’ solves these problems by:

• Structuring Data: Each review gets dedicated fields for author, publisher, rating, etc., ensuring consistency.
• Ease of Management: All book reviews are neatly organized under their own menu item in the WordPress admin.
• Custom Display Options: You can design unique layouts for individual book reviews and archives, separate from your regular blog posts.
• Improved Search and Filtering: Easier for visitors to find specific types of content.

This tutorial focuses on the creation and population of CPTs and their associated custom fields. While we’ll touch upon display, understanding how to flexibly display custom fields often depends on your theme or page builder, which we’ll discuss.

Prerequisites:

• A functioning WordPress website.
• Administrator access to your WordPress dashboard.
• A basic understanding of how to install and activate WordPress plugins.

Step 1: Install and Activate Necessary Plugins

Our journey begins with installing the two essential plugins that will empower our custom content creation.

1. Log in to your WordPress dashboard.
2. Navigate to ZEALTERCODE0 in the left-hand sidebar.

1. Install Custom Post Type UI (CPT UI):

• In the search bar, type “Custom Post Type UI”.
• Locate the plugin by WebDevStudios (it has a distinct orange icon).
• Click the “Install Now” button.
• Once installed, click “Activate”.
• You should now see a new menu item called “CPT UI” in your dashboard sidebar.

1. Install Advanced Custom Fields (ACF):

• In the same ZEALTERCODE0 screen, search for “Advanced Custom Fields”.
• Locate the plugin by WP Engine (it has a dark blue icon).
• Click “Install Now”.
• Once installed, click “Activate”.
• You should now see a new menu item called “Custom Fields” in your dashboard sidebar.

Tip: Always ensure you’re installing plugins from reputable developers with good reviews and frequent updates. CPT UI and ACF are industry standards and widely used.

Step 2: Define Your Custom ‘Book Review’ Post Type with CPT UI

Now that we have the tools, let’s create our ‘Book Review’ post type.

1. Navigate to ZEALTERCODE0 in your WordPress dashboard.

1. Basic Settings:

• Post Type Slug: This is the unique, internal identifier for your post type. It must be lowercase, no spaces, and typically uses underscores.
• Enter ZEALTERCODE0.
• Explanation: This slug is used in URLs (e.g., ZEALTERCODE0) and for WordPress queries. Choose it carefully, as changing it later can break existing links.
• Plural Label: This is how your post type will appear in the admin menu and on the front end when referring to multiple items.
• Enter ZEALTERCODE0.
• Singular Label: How it will appear when referring to a single item.
• Enter ZEALTERCODE0.

1. Additional Labels (Optional but Recommended):

• Scroll down to the “Additional Labels” section. While CPT UI auto-generates many labels based on your plural and singular entries, it’s good practice to review them. For a ‘Book Review’, labels like “Add New Book Review,” “Edit Book Review,” “View Book Review,” etc., should be intuitive. If you want more specific phrasing, you can customize them here.

1. Settings (Crucial Configurations):

• Scroll down to the “Settings” section. This is where you define how your CPT behaves.
• Public: Set to ZEALTERCODE0. This makes your post type visible to the public (i.e., not just in the admin area).
• Publicly Queryable: Set to ZEALTERCODE0. Allows you to retrieve and display content from this post type on the frontend.
• Show UI: Set to ZEALTERCODE0. This ensures the post type appears in the WordPress admin menu.
• Show In Nav Menus: Set to ZEALTERCODE0. This allows you to easily add individual book reviews or the ‘Book Reviews’ archive page to your site’s navigation menus.
• Delete With User: ZEALTERCODE0 (usually). If a user associated with a CPT entry is deleted, should the CPT entry also be deleted? Typically, you want to keep the content.
• Exclude From Search: ZEALTERCODE0 (usually). You likely want your book reviews to appear in site search results.
• Has Archive: Set to ZEALTERCODE0. This creates an archive page for all your book reviews (e.g., ZEALTERCODE1).
• Archive Slug: (Appears after “Has Archive” is ZEALTERCODE0) You can leave this blank to default to your CPT’s plural label (ZEALTERCODE1), or define a custom slug like ZEALTERCODE2. Let’s leave it blank for now.
• Hierarchical: ZEALTERCODE0. This makes your book reviews behave like standard posts (no parent/child relationships). If you were creating a “Documentation” CPT, you might set this to ZEALTERCODE1 for nested articles.
• Supports: This defines what default WordPress editor features your ‘Book Review’ will have. Select the following:
• ZEALTERCODE0 (for the book’s title)
• ZEALTERCODE0 (for the main review content)
• ZEALTERCODE0 (for the book cover image)
• ZEALTERCODE0 (for a short summary)
• ZEALTERCODE0 (even though we’re using ACF, enabling this is good general practice)
• Optionally, consider ZEALTERCODE0 to track changes.
• Menu Position: You can choose where your ‘Book Reviews’ menu item appears in the dashboard sidebar. A value like ZEALTERCODE0 places it typically below ‘Pages’.
• Menu Icon: Pick an appropriate icon from the WordPress Dashicons library. A book or a star might be suitable. Type ZEALTERCODE0 or ZEALTERCODE1.

1. Click the “Add Post Type” button.

You should now see a new menu item in your WordPress dashboard sidebar, labeled “Book Reviews” (or whatever plural label you chose). Congratulations, your custom post type is created!

Tip: Thoroughly review all settings, especially “Publicly Queryable” and “Has Archive.” These are common stumbling blocks for beginners if not set correctly, impacting frontend visibility.

Step 3: Add Custom Fields for ‘Book Reviews’ using Advanced Custom Fields (ACF)

Now that we have our ‘Book Review’ post type, we need to add the specific data fields that make it truly custom, like “Book Author,” “Publisher,” and “Rating.”

1. Navigate to ZEALTERCODE0 in your WordPress dashboard.
2. Click “Add New Field Group”.

1. Field Group Title:

• Enter ZEALTERCODE0.
• Explanation: This title is for your internal organization in the admin area and will be displayed above your custom fields when editing a ‘Book Review’.

1. Add Your Custom Fields:

• Click the “+ Add Field” button.
• Field 1: Book Author
• Field Label: ZEALTERCODE0
• Field Name: ZEALTERCODE0 (ACF automatically generates this from the label, typically good as is; lowercase, no spaces, underscores).
• Field Type: ZEALTERCODE0 (for a simple line of text).
• Required: ZEALTERCODE0 (if you want to ensure every review has an author).
• Placeholder Text: ZEALTERCODE0
• Click “+ Add Field” again.
• Field 2: Publisher
• Field Label: ZEALTERCODE0
• Field Name: ZEALTERCODE0
• Field Type: ZEALTERCODE0
• Required: ZEALTERCODE0 (optional if a book might be self-published).
• Click “+ Add Field” again.
• Field 3: Publication Date
• Field Label: ZEALTERCODE0
• Field Name: ZEALTERCODE0
• Field Type: ZEALTERCODE0 (provides a calendar interface, ensuring consistent date format).
• Required: ZEALTERCODE0
• Display Format/Return Format: You can choose how the date is displayed in the admin and returned in code (e.g., ZEALTERCODE0 or ZEALTERCODE1). ZEALTERCODE2 (e.g., “January 23, 2023”) is often user-friendly.
• Click “+ Add Field” again.
• Field 4: Rating
• Field Label: ZEALTERCODE0
• Field Name: ZEALTERCODE0
• Field Type: ZEALTERCODE0
• Required: ZEALTERCODE0
• Minimum Value: ZEALTERCODE0
• Maximum Value: ZEALTERCODE0 (for a 1-5 star rating system).
• Placeholder Text: ZEALTERCODE0
• Click “+ Add Field” again.
• Field 5: Buy Link
• Field Label: ZEALTERCODE0
• Field Name: ZEALTERCODE0
• Field Type: ZEALTERCODE0 (ensures the input is a valid URL).
• Required: ZEALTERCODE0
• Placeholder Text: ZEALTERCODE0

1. Location Rules (Crucial for Field Group Visibility):

• Scroll down to the “Location Rules” section. This tells ACF where to display this group of custom fields.
• Set the rule to: ZEALTERCODE0.
• Explanation: This ensures these fields only appear when you’re creating or editing a ‘Book Review’ entry, not a regular post or page.

1. Settings (Optional):

• High (after title): This places the custom fields box high on the edit screen, often right after the title. This is generally a good choice.
• Style: ZEALTERCODE0 or ZEALTERCODE1. Seamless can look cleaner if you prefer.
• You can also hide default WordPress editor elements if they’re redundant (e.g., if you only want custom fields and no main content editor). For ‘Book Review’, we want the main ZEALTERCODE0 and ZEALTERCODE1 to remain.

1. Click “Save Changes”.

Your custom fields are now defined and ready to be populated!

Tip: Choose the correct field type for your data (e.g., “Number” for ratings, “URL” for links, “Date Picker” for dates). This not only helps with data integrity but also provides a better user experience in the admin.

Step 4: Create Your First ‘Book Review’ Entries

Now it’s time to put your new custom post type and fields to use by adding some content.

1. Navigate to ZEALTERCODE0 in your WordPress dashboard.

1. Add Standard Content:

• Title: Enter the title of the book you are reviewing (e.g., “The Hitchhiker’s Guide to the Galaxy”).
• Main Content: Use the main editor block to write your detailed review.
• Featured Image: Set the book’s cover as the featured image. This will serve as the primary visual for your review.
• Excerpt: Add a short summary or teaser of your review.

1. Fill in Custom Fields:

• Scroll down, and you will see your “Book Review Details” meta box containing all the custom fields you created: “Book Author,” “Publisher,” “Publication Date,” “Rating,” and “Buy Link.”
• Fill in the appropriate information for each field. Notice how the date picker and URL fields provide specific input types.

1. Publish Your Review:

• Once satisfied, click the “Publish” button.

1. Create More Reviews: Repeat this step a few times to create 2-3 additional book reviews. This will give you more content to work with when we consider display options.

Tip: Always preview your content before publishing. This allows you to catch any errors and ensure everything looks as expected in the admin.

Step 5: Understanding How to Display Your Custom Post Type Content on the Frontend

You’ve successfully created your ‘Book Review’ custom post type and populated it with custom fields. Now, how do we show this beautiful, structured content to your website visitors? This step outlines the common approaches, as displaying custom fields dynamically often requires specific theme features or additional plugins.

A. Viewing Individual Custom Post Type Entries

Every ‘Book Review’ you create will have its own unique URL (permalink).

• For example, if your site is ZEALTERCODE0 and your book title is “The Hitchhiker’s Guide to the Galaxy,” its URL might be ZEALTERCODE1.
• You can find this URL by hovering over the ‘View Book Review’ button after publishing or by clicking “View Post” from the admin list.

Default Theme Behavior: When you visit an individual ‘Book Review’ page, most WordPress themes will automatically display:

• The Title (the book’s title).
• The Featured Image (the book cover).
• The content from the main Editor block (your detailed review).

Important Note on Custom Fields (ACF): While CPT UI and ACF make it easy to create and store your custom field data, they do not automatically display this data on the frontend without further instruction. Your theme’s default ZEALTERCODE0 template is designed to display the standard post content, not custom fields. This is a common point of confusion for beginners.

To display your ACF fields (like Author, Publisher, Rating, etc.) on the frontend, you generally need one of the following methods:

B. Methods for Displaying Custom Fields and CPT Archives

1. Using a Theme Builder or Page Builder:

• No-Code Solution: Many modern themes (like Kadence, Astra, GeneratePress, Blocksy with their Pro versions) and page builders (Elementor Pro, Beaver Builder, Divi Builder, Bricks Builder) offer powerful Theme Builder functionalities. These allow you to create custom single templates for your CPTs (e.g., ZEALTERCODE0) entirely visually, dragging and dropping modules or blocks that can dynamically pull and display ACF field values.
• This is often the most user-friendly, “no-code” way to get a fully customized display for your custom post types and fields.

1. Gutenberg Block Editor with Query Loop and Theme/Plugin Blocks:

• Query Loop Block: WordPress’s native Query Loop block allows you to display a list of your ‘Book Reviews’ on any page.
• Create a new Page (e.g., “All Book Reviews”).
• Add a ZEALTERCODE0 block.
• Choose your ZEALTERCODE0 post type from the settings.
• Inside the loop, you can add ZEALTERCODE0, ZEALTERCODE1, and ZEALTERCODE2 blocks.
• Displaying Custom Fields in Query Loop: The native Query Loop block currently does not natively support displaying ACF fields without additional blocks provided by your theme (e.g., Kadence Blocks, GenerateBlocks Pro) or specific plugins (e.g., ACF Blocks, or dynamic content features from page builders if you embed them).
• If your theme or a block plugin offers dynamic blocks that can pull ACF data, you can build your single review layout or archive listing within the block editor.

1. Dedicated Display Plugins:

• There are plugins specifically designed to display custom post types and custom fields in lists or grids. Examples include “WP Show Posts,” “Content Views,” or “Post Grid.” These plugins often provide shortcodes or custom blocks that allow you to select your CPT, filter it, and specify which ACF fields to display, all without coding. Search the WordPress plugin repository for “display custom post type” or “acf display.”

1. Custom Theme Templates (For Developers):

• For those comfortable with PHP, the most flexible approach is to create custom template files within your child theme:
• ZEALTERCODE0 (for individual book review pages)
• ZEALTERCODE0 (for the page listing all book reviews)
• Within these files, you would use standard WordPress template tags and ACF’s provided PHP functions (e.g., ZEALTERCODE0) to retrieve and display your custom field data exactly where you want it. This offers the most control but requires coding knowledge.

For this tutorial’s “no coding required” promise, your best bet for displaying custom fields fully on the frontend is to investigate if your current WordPress theme or any page builder you use (e.g., Elementor, Divi) has built-in dynamic content features that support Advanced Custom Fields. Alternatively, explore dedicated “display CPT with ACF” plugins.

Conclusion

You’ve now mastered the foundational steps of extending WordPress’s content capabilities! By leveraging Custom Post Type UI and Advanced Custom Fields, you can transform your site from a simple blog into a powerful, structured content hub. You learned how to:

1. Install and activate the essential plugins.
2. Define a completely new content type (‘Book Review’) with CPT UI, including its administrative and public settings.
3. Add specific, structured data fields (Author, Publisher, Rating, etc.) to your new content type using ACF.
4. Populate these new custom post types with content, utilizing both the standard WordPress editor and your newly created custom fields.
5. Understand the various approaches to display this rich, structured content on the frontend of your website.

This knowledge opens up a world of possibilities for managing diverse content types on your WordPress site, ensuring consistency, enhancing usability, and laying the groundwork for more advanced display options.

TAGS: WordPress, Custom Post Type, ACF, Custom Fields, CPT UI, Structured Content, Content Management, Website Development CATEGORIES: WordPress Tutorials, Content Management