Skip to content

Instantly share code, notes, and snippets.

@krystyna93
Created June 10, 2023 14:16
Show Gist options
  • Save krystyna93/4c51c63af659b5dfd4f9125fc5969272 to your computer and use it in GitHub Desktop.
Save krystyna93/4c51c63af659b5dfd4f9125fc5969272 to your computer and use it in GitHub Desktop.
Custom WordPress Metabox: Relation between two CPT's
<?php
/*
To create a relationship metabox between two custom post types in WordPress, you'll need to use the add_meta_box() function
and the WP_Query class. Here are the steps you can follow:
Create a custom post type using the register_post_type() function for both post types.
In the functions.php file of your theme or plugin, add the following code to create a metabox:
*/
function my_relationship_metabox() {
add_meta_box(
'my-relationship-metabox',
'Related Posts',
'my_relationship_metabox_callback',
array('post_type_1', 'post_type_2'),
'side',
'default'
);
}
add_action( 'add_meta_boxes', 'my_relationship_metabox' );
/*
This code will create a metabox titled "Related Posts" on the edit screen of both custom post types.
Next, define the callback function my_relationship_metabox_callback that will generate the content of the metabox.
In this function, you can use a WP_Query object to get the related posts. Here is an example of how to do this:
*/
function my_relationship_metabox_callback( $post ) {
$args = array(
'post_type' => 'post_type_1',
'meta_query' => array(
array(
'key' => '_related_post_id',
'value' => $post->ID,
'compare' => '=',
),
),
);
$query = new WP_Query( $args );
// Display the related posts
}
/*
In this example, we're querying all posts of post type 1 that have a custom field _related_post_id matching the current post's ID.
Finally, you'll need to add some JavaScript to handle the selection of related posts.
You can use the WordPress built-in wp_enqueue_script() function to register and enqueue your custom script.
*/
function my_admin_scripts() {
wp_enqueue_script( 'my-admin-js', plugin_dir_url( __FILE__ ) . 'js/my-admin.js', array( 'jquery' ), '1.0', true );
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
In this example, we're registering and enqueuing a script called my-admin.js.
In the my-admin.js file, you can use jQuery to add an autocomplete input field that will allow users to search for related posts. Here is an example of how to do this:
jQuery(document).ready(function($) {
$('#related_posts').autocomplete({
source: ajaxurl + '?action=my_relationship_metabox_search',
minLength: 2,
select: function(event, ui) {
event.preventDefault();
// Add the selected post to the related posts list
}
});
});
/*
In this example, we're using the autocomplete() function from the jQuery UI library. We're also specifying an AJAX URL that will
trigger a server-side function to search for related posts based on user input.
Finally, you'll need to define the my_relationship_metabox_search function that will handle the AJAX request and return the
search results. Here's an example of how to do this:
*/
function my_relationship_metabox_search() {
$term = $_GET['term'];
$args = array(
'post_type' => 'post_type_1',
's' => $term,
);
$query = new WP_Query( $args );
$results = array();
foreach ( $query->posts as $post ) {
$results[] = array(
'id' => $post->ID,
'label' => $post->post_title,
'value' => $post->post_title,
);
}
wp_send_json( $results );
}
add_action( 'wp_ajax_my_relationship_metabox_search', 'my_relationship_metabox_search' );
/*
In this example, we're using WordPress's AJAX API to handle the request. We're also using the s parameter to search for posts
that match the user's input.
That's it! With these steps, you should have a working relationship metabox between two custom post types in WordPress.
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment