Hello, fellow WordPress lovers! Today, I need to share with you an thrilling journey I took whereas constructing Honeymoons.com. It’s a dynamic web site that makes use of Advanced Custom Fields (ACF) and Custom Post Types.
As a journey firm specializing in dreamy honeymoon locations, it was essential for us to showcase our accommodations and locations in a user-friendly and visually interesting method.
ACF and CPTs proved to be the proper answer for attaining our aim of offering an immersive and customized expertise for our customers.
Creating a customized submit sort for each Destinations and Hotels allowed us to simply categorize these particular sorts of content material. Advanced Custom Fields allowed us to complement the Custom Post Types with particular metadata that may be dynamically displayed all through the web site.
What Are Custom Post Types?
WordPress Custom Post Types are a robust function that lets you lengthen the default performance of WordPress past the usual posts and pages. They allow you to create and handle various kinds of content material, every with its personal set of attributes and functionalities.
Custom Post Types are important for organizing and presenting particular content material varieties, similar to merchandise, portfolio objects, testimonials, occasions, recipes, and extra in a structured and environment friendly method.
By default, WordPress comes with two fundamental submit varieties:
Posts
These are normal weblog posts which might be usually displayed in reverse chronological order on the weblog web page.
Pages
These are static pages which might be usually used for static content material like About Us, Contact Us, or a Privacy Policy web page.
However, when you should create content material that does not match into the default submit or web page construction, Custom Post Types come into play.
You can register your customized submit varieties with their very own set of attributes, taxonomies, and template recordsdata. This lets you handle and current numerous content material in a extra organized and user-friendly method.
For occasion, on honeymoons.com, we created a Custom Post Type known as “Destinations” to showcase honeymoon locations.
To create Custom Post Types, you possibly can both write customized code utilizing the register_post_type() operate or use plugins that make the method extra user-friendly, like “Custom Post Type UI” or “Toolset Types.”
WordPress comes with performance to simply configure the submit varieties to your particular wants by updating the capabilities.php file inside your theme.
The particular code we used to create the Destinations submit sort is right here:
//Destinations
register_post_type('vacation spot', // Register Custom Post Type
array(
'labels' => array(
'identify' => __('Destinations', 'vacation spot'), // Rename these to swimsuit
'singular_name' => __('Destination', 'html5blank'),
),
'public' => true,
'hierarchical' => true, // Allows your posts to behave like Hierarchy Pages
'has_archive' => false,
'menu_icon' => 'dashicons-palmtree',
'show_in_nav_menus' => true,
'helps' => array(
'title',
'editor',
'excerpt',
'revisions',
'page-attributes',
'thumbnail'
), // Go to Dashboard Custom HTML5 Blank submit for helps
'rewrite' => array (
'slug' => '/locations',
'with_front' => false,
'hierarchical' => true
),
'can_export' => true, // Allows export in Tools > Export
'taxonomies' => array(
'experiences',
'areas'
) // Add Category and Post Tags assist */
));These Custom Post Types will seem within the wp-admin sidebar along with your Posts and Pages:
Custom Post Types have change into a necessary device for builders and content material creators, as they provide the flexibleness to tailor WordPress web sites to particular wants, making it a flexible and strong content material administration system.
What are Advanced Custom Fields for WordPress?
Advanced Custom Fields (ACF) is a well-liked WordPress plugin that enhances the content material creation and administration expertise by offering a user-friendly interface for including customized fields to posts, pages, and customized submit varieties. It permits web site builders and content material creators to simply lengthen the default WordPress submit editor with further enter fields, enabling the creation of extra structured and dynamic content material.
With ACF, you possibly can outline numerous sorts of customized fields, similar to textual content fields, picture add fields, choose dropdowns, date pickers, repeater fields, and extra. These customized fields can be utilized so as to add further info to your content material, making it extra versatile and tailor-made to particular necessities.
Key options and advantages of Advanced Custom Fields (ACF) embody:
- Custom Field Creation: ACF lets you create customized fields via an intuitive graphical interface throughout the WordPress admin space. You can select from numerous subject varieties and configure their settings to fit your wants.
- Field Groups: You can group associated fields collectively into units known as “Field Groups.” These teams can then be assigned to particular submit varieties or pages, offering a modular and arranged strategy to content material administration.
- Conditionals and Logic: A strong function of ACF is the power to set conditional logic for fields. You can present or disguise particular fields based mostly on the values of different fields, making content material creation extra environment friendly and user-friendly.
- Repeater Fields: ACF’s repeater subject lets you create units of sub-fields that may be repeated as wanted. This is particularly helpful for managing dynamic content material like lists, galleries, and versatile content material sections.
- Frontend Integration: ACF makes it simple to show the customized subject knowledge on the frontend of your web site. You can use easy template tags or ACF capabilities to retrieve and show the customized subject values inside your theme recordsdata.
- Extensibility: ACF may be prolonged via third-party add-ons and customized code, permitting builders to create much more superior and specialised customized fields and functionalities.
- User-Friendly Experience: ACF simplifies the content material creation course of for non-technical customers. It reduces the necessity for customized coding and makes it simpler for content material editors so as to add and handle content material with structured fields.
ACF has gained recognition amongst WordPress builders and designers for its flexibility and ease of use. It allows the creation of dynamic and customised web sites with out the necessity for advanced customized growth, making it a invaluable device for each small-scale web sites and huge, advanced tasks.
How to Create Custom Templates to Display ACF Content
To dynamically present knowledge utilizing Advanced Custom Fields (ACF) and customized templates in WordPress, we’ll stroll via the steps with an instance from Honeymoons.com utilizing a Custom Post Type of Hotels.
We’ll create customized fields for metadata such because the variety of rooms, common worth, and the lodge URL, after which show this knowledge dynamically on the frontend utilizing a customized template.
Step 1: Install and Activate Advanced Custom Fields Plugin.
First, make sure that the Advanced Custom Fields plugin is put in and activated in your WordPress web site. You can discover the plugin within the WordPress Plugin Repository and set up it from the admin dashboard.
Step 2: Create Custom Fields for Hotel Post Type.
Next, we’ll create customized fields for the Hotel submit sort utilizing ACF.
1. Go to “Custom Fields” within the WordPress admin sidebar and click on on “Add New.”
2. Create a brand new subject group for Hotels and add the next customized fields:
- Hero Image (Image)
- TripAdvisor.com Link (URL)
- Number of Rooms (Number)
- Number of Rooms (Number)
- Price – Low (Number)
- Price – High (Number)
- Price – Average (Number)
- Guest Rating (Number with a most worth of 10)
- Star Rating
- Website (URL)
- Display URL (Text)
3. Assign Field Group to Hotel Post Type
After creating the customized fields, we have to assign the sector group to the Hotel submit sort.
Step 3: Displaying the Custom Fields within the Custom Template
Now, we’ll create a customized template for the Hotel submit sort, the place we are able to dynamically retrieve and show the metadata.
Create a brand new PHP file in your theme folder and identify it “single-hotel.php” (assuming you might have a customized submit sort template hierarchy in your theme). Replace “lodge” with no matter your customized submit sort is called.
In “single-hotel.php,” begin with the common template code for the header, footer, and submit loop. You can begin with a replica of single.php.
Use ACF capabilities to retrieve the customized subject values and show them within the template. Use PHP, HTML and CSS to show the content material.
You can retrieve the Advanced Custom Fields like this:
$number_of_rooms = get_field(‘number_of_rooms’);
$average_price = get_field(‘average_price’);
$hotel_url = get_field(‘hotel_url’);
And show the content material like this:
echo ‘
Number of Rooms: ‘ . $number_of_rooms . ‘
‘;
echo ‘
Average Price: $’ . $average_price . ‘
‘;
echo ‘
‘;
By capturing metadata with Advanced Custom Fields and displaying that content material with Custom Templates and Custom Post Types, you possibly can set up and show knowledge in your WordPress web site in a way more dynamic and user-friendly method.
Your WordPress web site is not going to look “out-of-the-box” and your web site will present rather more useful and arranged info to the person.
Conclusion
Thanks to ACF and Custom Post Types, Honeymoons.com now boasts a dynamic web site that provides customized experiences to our customers.
Our collaboration with ACF and CPTs has empowered us to create beautiful lodge and vacation spot pages that captivate guests and assist them plan their dream honeymoon effortlessly.
I hope our case research has impressed you to discover the huge potential of ACF and CPTs for constructing dynamic WordPress web sites tailor-made to your particular wants. Happy coding!
