Beyond Posts
Extending WordPress Like a Pro
Samuel Nzaro
Samuel Nzaro
Developer for the web all the time
Cosplaying security devops at night�Currently architecting and developing solutions for a small company
Architect
Beyond Posts
Customising WordPress with Custom Post Types & Integrations
Workshop Agenda
Custom post types?
Key features and benefits
custom content containers that extend the default "Posts" and "Pages" to organize and manage different types of structured content. Instead of mixing unique content like products, portfolios, or testimonials with regular blog posts, CPTs provide a dedicated section in the admin dashboard for each content type, complete with its own fields, templates, and taxonomies for better organization and display
Why Custom Post Types?
Perfect For:
Events
Products
Portfolio Items
Team Members
Testimonials
Any structured content
Benefits:
Organized content
Custom admin UI
Specific taxonomies
Better SEO
Clean URLs
Scalable architecture
Custom Content Types?
An entity similar to CPT that allows you to create a separate table in the WordPress database to store its fields. You can configure the structure and add an interface to the admin panel to view, edit, and export data stored in this table.
All the data of each custom content type is stored as a separate row in a database, so there’s no need to retrieve any data from other DB tables or rows.
Youtube
Ask some Questions
Let’s get started
We will use LocalWP�Be free to use any developer tools of your liking
Registering a Custom Post Type
Taxonomies help organize and filter your custom content
register_post_type('event', [
'labels' => [
'name' => 'Events',
'singular_name' => 'Event',
],
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-calendar-alt',
'supports' => ['title', 'editor', 'thumbnail'],
'rewrite' => ['slug' => 'events'],
'show_in_rest' => true, // Enable block editor
]);
Custom Meta Boxes
When a user edits a post, the edit screen is composed of several default boxes: Editor, Publish, Categories, Tags, etc. These boxes are meta boxes. Plugins can add custom meta boxes to an edit screen of any post type.
The content of custom meta boxes are usually HTML form elements where the user enters data related to a Plugin’s purpose, but the content can be practically any HTML you desire.
add_meta_box(
'event_details',
'Event Details',
'render_event_meta_box',
'event',
'normal',
'high'
);
function render_event_meta_box($post) {
$start_date = get_post_meta($post->ID, '_event_start_date', true);
?>
<label>Start Date:</label>
<input type="datetime-local"
name="event_start_date"
value="<?php echo $start_date; ?>">
<?php
}
Custom REST API Endpoints
REST API endpoints are specific Uniform Resource Locators (URLs) that represent a particular resource or function within a Representational State Transfer (REST)Application Programming Interface (API). They serve as the entry points for client applications to interact with a server and access its data or services.
register_rest_route('event-manager/v1', '/submit', [
'methods' => 'POST',
'callback' => 'handle_event_submission',
'permission_callback' => '__return_true',
]);
function handle_event_submission($request) {
$params = $request->get_json_params();
$event_id = wp_insert_post([
'post_title' => $params['title'],
'post_type' => 'event',
'post_status' => 'pending',
]);
return ['success' => true, 'event_id' => $event_id];
}
Frontend Event Submission
REST API endpoints are specific Uniform Resource Locators (URLs) that represent a particular resource or function within a Representational State Transfer (REST)Application Programming Interface (API). They serve as the entry points for client applications to interact with a server and access its data or services.
<form id="event-form">
<input type="text" name="title" required>
<textarea name="description"></textarea>
<input type="datetime-local" name="start_date">
<button type="submit">Submit Event</button>
</form>
<script>
document.querySelector('#event-form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const response = await fetch('/wp-json/event-manager/v1/submit', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(Object.fromEntries(formData))
});
const result = await response.json();
alert(result.message);
});
</script>
Custom Single Event Template
This allows us dictate the appearance (look & feel) of the custom post type
add_filter('template_include', function($template) {
if (is_singular('event')) {
$custom = plugin_dir_path(__FILE__) . 'single-event.php';
if (file_exists($custom)) {
return $custom;
}
}
return $template;
});
Best Practice
Keep calm and raise the bar
Real world applications?
Events Platform
Manage conferences, meetups, workshops with RSVPs and reminders
Booking System
Restaurant reservations, appointments, availability tracking
Real Estate
Property listings with tours, inquiries, CRM integration
Course Manager
Online learning platform with lessons, quizzes, certificates
Questions?
Let's discuss your WordPress customization needs!
Resources & Links
WordPress Developer Resources: developer.wordpress.org
REST API Handbook: developer.wordpress.org/rest-api
Plugin Handbook: developer.wordpress.org/plugins
Complete code available at: https://github.com/mevolkan/events-manager-pro