Created
June 10, 2023 14:16
-
-
Save krystyna93/4c51c63af659b5dfd4f9125fc5969272 to your computer and use it in GitHub Desktop.
Custom WordPress Metabox: Relation between two CPT's
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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