WordPress plugin to add og:image to pages and posts using Media Library selector. Requires tb_add_og_description.php plugin

tb_add_og_image.php

<?php
/**
 * Plugin Name: OG Image Custom Post Meta
 * Description: Allows setting an OG Image in pages and posts using the media library.
 * Version: 1.1
 * Author:  Thomas Beutel
 * License: GPL2
 */

/**
 * DISCLAIMER: This script is provided "as is" without any warranties, 
 * expressed or implied, including but not limited to the implied 
 * warranties of merchantability or fitness for a particular purpose. 
 * Use at your own risk. The author assumes no responsibility for 
 * errors, omissions, or damages resulting from its use.
 */

// Add meta box to set OG Image on posts and pages
function add_og_image_meta_box() {
    add_meta_box(
        'og_image_meta_box',
        __('OG Image'),
        'render_og_image_meta_box',
        ['post', 'page'],
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'add_og_image_meta_box');

// Render the OG Image meta box
function render_og_image_meta_box($post) {
    $og_image_id = get_post_meta($post->ID, '_og_image_id', true);
    $og_image_url = $og_image_id ? wp_get_attachment_image_url($og_image_id, 'thumbnail') : '';

    wp_nonce_field('save_og_image_meta_box', 'og_image_meta_box_nonce');

    echo '<div id="og-image-container">';
    if ($og_image_url) {
        echo '<img id="og-image-preview" src="' . esc_url($og_image_url) . '" style="max-width: 100%; margin-bottom: 10px;" />';
    } else {
        echo '<img id="og-image-preview" src="" style="max-width: 100%; margin-bottom: 10px; display: none;" />';
    }
    echo '<input type="hidden" id="og-image-id" name="og_image_id" value="' . esc_attr($og_image_id) . '" />';
    echo '<button type="button" class="button" id="og-image-upload">' . __('Select OG Image') . '</button>';
    echo '<button type="button" class="button" id="og-image-remove" style="margin-top: 10px;" ' . ($og_image_id ? '' : 'hidden') . '>' . __('Remove Image') . '</button>';
    echo '</div>';
}

// Enqueue the necessary scripts and styles
function enqueue_og_image_scripts($hook_suffix) {
    if (!in_array($hook_suffix, ['post.php', 'post-new.php'])) {
        return;
    }

    wp_enqueue_media();
    wp_enqueue_script('og-image-script', plugin_dir_url(__FILE__) . 'og-image.js', ['jquery'], '1.0', true);
}
add_action('admin_enqueue_scripts', 'enqueue_og_image_scripts');

// Save the OG Image meta box data
function save_og_image_meta_box($post_id) {
    if (!isset($_POST['og_image_meta_box_nonce']) || !wp_verify_nonce($_POST['og_image_meta_box_nonce'], 'save_og_image_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    $og_image_id = isset($_POST['og_image_id']) ? intval($_POST['og_image_id']) : '';
    update_post_meta($post_id, '_og_image_id', $og_image_id);
}
add_action('save_post', 'save_og_image_meta_box');

// Add og-image.js file
file_put_contents(__DIR__ . '/og-image.js', "(function($) {\n\n$(document).ready(function() {\n    $('#og-image-upload').click(function(e) {\n        e.preventDefault();\n        const frame = wp.media({\n            title: 'Select or Upload OG Image',\n            button: { text: 'Use this image' },\n            multiple: false\n        });\n\n        frame.on('select', function() {\n            const attachment = frame.state().get('selection').first().toJSON();\n            $('#og-image-id').val(attachment.id);\n            $('#og-image-preview').attr('src', attachment.sizes.thumbnail.url).show();\n            $('#og-image-remove').show();\n        });\n\n        frame.open();\n    });\n\n    $('#og-image-remove').click(function(e) {\n        e.preventDefault();\n        $('#og-image-id').val('');\n        $('#og-image-preview').hide();\n        $(this).hide();\n    });\n});\n\n})(jQuery);\n");