How to add custom javascript to WordPress Admin?

📝 Title: Adding Custom JavaScript to WordPress Admin: A Simple Plugin Solution ✨🔌

👋 Hey there, WordPress admin wizards! We've got a cool trick up our sleeves today to help you add some custom JavaScript to the Edit Post page in a simple and plugin-friendly way. No more hacking admin template files! 💪💻

🔍 Problem Statement: So, you're itching to add that cool jQuery code to show a div when someone presses "Publish" on the Edit Post page. But here's the catch - you want to achieve this using a plugin, not by tinkering with admin template files. Don't worry, we got you covered!

💡 The Solution: A Plugin Magic ✨✨ You can achieve this customization easily by creating a custom plugin that injects your desired JavaScript code. Let's break it down into simple steps:

1. 📂 Create a New Plugin: Start by creating a new folder in your WordPress wp-content/plugins/ directory. Give it a catchy name like custom-javascript-admin-plugin. Inside this folder, create a new file called custom-javascript-admin-plugin.php.

2. ✍️ Add Plugin Headers: Open custom-javascript-admin-plugin.php in your favorite code editor and add the following plugin headers:

<?php
/**
 * Plugin Name: Custom JavaScript Admin Plugin
 * Description: Add custom JavaScript code to WordPress admin.
 * Version: 1.0.0
 * Author: Your Name
 * Author URI: https://yourwebsite.com
 */

1. 🛠 Enqueue Your JavaScript: We'll now add a function to enqueue your custom JavaScript code. Add the following code to custom-javascript-admin-plugin.php:

<?php
function custom_javascript_admin_enqueue_scripts() {
    $screen = get_current_screen();

    // Target the Edit Post screen
    if ($screen->id === 'post') {
        wp_enqueue_script(
            'custom-javascript-admin-script',
            plugin_dir_url(__FILE__) . 'js/custom-javascript-admin.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }
}
add_action('admin_enqueue_scripts', 'custom_javascript_admin_enqueue_scripts');

1. ⚡️ Create Your JavaScript File: Inside your plugin folder, create a new folder called js. In this js folder, create another file called custom-javascript-admin.js. This is where you'll write your jQuery code to show the desired div when the "Publish" button is pressed.

jQuery(document).ready(function ($) {
    $('#publish').click(function () {
        $('#your-div').show();
    });
});

1. 🚀 Activate Your Custom Plugin: Once you've completed all the steps, simply log in to your WordPress admin area, navigate to the "Plugins" page, and activate your "Custom JavaScript Admin Plugin".

✨ Voila! That's it! Now, whenever someone presses the "Publish" button on the Edit Post page, your custom div will magically appear. No more hacking, just pure plugin magic! 🎩✨

📣 Call to Action: Try this simple plugin solution today and customize your WordPress admin like a pro! Don't forget to share your experience and other cool customizations in the comments below. Happy coding! 💻🎉

👀 Example Use Case: Let's say you have a website where you frequently collaborate with other authors. You can create a custom div that shows a message like "Collaboration Request Sent!" when you hit the "Publish" button. This simple JavaScript addition can help streamline your collaboration process and keep everyone in the loop. Isn't that neat?

Note: If you're looking to add JavaScript code to the frontend of your WordPress website, check out our blog post on "How to Add Custom JavaScript to WordPress Theme" for the complete guide.

💡 TL;DR (Too Long; Didn't Read): Avoid hacking admin template files and create a custom plugin to add JavaScript code to the WordPress Admin. Follow our easy steps: create a new plugin, enqueue your JavaScript, create a JavaScript file, and activate the plugin. Voila! Your custom JavaScript will work like a charm. Happy coding! 💪💻

🔥 Enjoyed this blog post? We have more amazing WordPress tips and tricks waiting for you! Subscribe to our newsletter for regular updates and be the first to know about all the cool things you can do with WordPress. 💯💌

📝 Note: Feel free to adapt this blog post according to your writing style and the target audience of your tech blog. Add relevant images, GIFs, or even emojis to make it more engaging and share-worthy. Happy writing! 🚀✍️