Services Custom Post Type with Page Template Design Using GeneratePress & GenerateBlocks

Creating custom post types with advanced custom fields and populating them with dynamic content using GeneratePress and GenerateBlocks is a powerful way to streamline your website design process. Here’s a step-by-step breakdown of what we covered in this tutorial:

Step 1: Install Necessary Plugins

• GeneratePress and GenerateBlocks: Ensure you have GeneratePress Premium and GenerateBlocks installed and active.
• Advanced Custom Fields (ACF): Install and activate this plugin to add custom fields to your post types.
• Custom Post Type UI (CPT UI): Install and activate this plugin to create custom post types.

Step 2: Create a Custom Post Type

1. Go to CPT UI > Add/Edit Post Types.
2. Enter the plural and singular labels for your post type (e.g., Services).
3. Choose a menu icon that represents your post type.
4. Under “Supports,” ensure that Custom Fields is checked.
5. Click Add Post Type.

Step 3: Add Custom Fields

1. Go to Custom Fields > Add New.
2. Create a new field group for your service pages (e.g., Service Fields).
3. Add the necessary fields like Service Tagline, Service Description, Main Image, and Feature Titles/Descriptions.
4. Set each field as required and ensure they are linked to your custom post type (Service).
5. Use the Wrapper Attributes to create a more user-friendly layout in the editor (e.g., setting width to 33%).

Step 4: Design the Service Page Template

1. Go to Appearance > Elements > Add New.
2. Choose a Block Element and set it as a Content Template.
3. Build your service page template using containers, grids, and dynamic content blocks in GenerateBlocks.
4. Insert Dynamic Data from the custom fields to populate the template with content (e.g., Service Tagline, Description, Images).
5. Style your page with background colors, shapes, and other design elements.

Step 5: Set Display Rules

1. Set the location of your content template to apply only to your Service custom post type.
2. Ensure all users can see the template.

Step 6: Create a Layout Element

1. If your design isn’t displaying correctly (e.g., sidebar issues), create a new Layout Element.
2. Set the content to Full Width, No Sidebars and apply it to your custom post type.

Step 7: Populate Your Services

1. Go to Services > Add New and start filling in the custom fields with your content.
2. Publish the page and review it to ensure the dynamic data is pulling through correctly.

Conclusion

With these steps, you can easily create dynamic and visually appealing service pages (or any other custom post types) that are easy to manage and update in the future. This method ensures consistency in design and functionality, whether for your own website or for a client.