Modify a Themes Appearance >> Header admin screen from a plugin

Question

Ok, after a bunch of stabbing in the dark, I have successfully added a link to the Appearance >> Header admin screen: and, when clicked on, the link triggers a jquery .post() ajax request that calls a function in my main plugin file. I am going to share a basic example of what I did so as not to divulge my secret plugin functionality 😉

The first part was getting a link into the admin screen. Originally I thought there might be a wordpress way to do this, but I ended up using jquery to actually write the link when I activate the Custom Header functionality with add_theme_support() ‘admin-head-callback’. It works like this:

add_theme_support('custom-header', array(
                    'default-image' => get_template_directory_uri() . '/images/headers/shore.jpg',
                    'width' => 1000,
                    'height' => 288,
                    'header-text' => false,
                    'uploads' => true,
                    'admin-head-callback' => 'customThemeSetup_admin_header' // run callback function in admin head of custom header screen
                ));

Next up I had to create the above callback function and make it add a jquery script that writes an anchor link into the custom header admin screen. The link uses JQuery’s .post() method to send a request to wordpress:

function customThemeSetup_admin_header()
{
        $myPluginFile = plugin_dir_path(__DIR__);

        <script type="text/javascript" charset="utf-8">
                jQuery(document).ready(function($){
                    $('.available-headers:last').append("<a id='testLink' href="#">Trigger plugin function with AJAX</a>");
                    $('#testLink').click(function(e){
                        e.preventDefault();

                        $.post(ajaxurl, {
                            action: 'test_ajax' // the action for triggering plugin function will be wp_ajax_test_ajax
                        }, function(response, status){
                            if(status == "success")
                            {
                                 alert(response);// returns text in die() at the end of my plugin function(...next step)
                            }
                        });
                    });

                });
            </script>
 }

Finally I needed to tell wordpress to run my plugin function, when it detects the ajax request above with action: ‘test_ajax’. That looks like this:

add_action('wp_ajax_test_ajax', 'testAjax');// when wordpress detects the action wp_ajax_test_ajax, it will trigger my plugin function testAjax() below
function testAjax()
{
die("Function triggered with AJAX!");// text sent back to alert(response) from previous step
}

I can see that the reason I got no help was that the process was broader than I had originally imagined: but, hopefully this helps someone else in the future. Please feel free to suggest, or add any modifications as this was my first time doing such a thing.

Related Posts: