Add custom buttons to your WordPress admin tables

Getting Started

WordPress does not offer a quick way to add buttons with a per post type filter, but you can add one with the admin_head filter and a little bit of jQuery:

<?php
add_action('admin_head', function() {
    $admin_url = admin_url();
?>
    <script>
        jQuery(function() {
            jQuery("body.post-type-post .wrap h1").append(
                '<a href="<?php echo $admin_url; ?>/edit.php?post_type=post&param=value" class="page-title-action">Click Me</a>'
            )
        })
    </script>
<?php
});

The admin_head function fires inside of the HTML head tag, and we’re using that to perform some jQuery, which does the following:

1. Perform an anonymous function to fire immediately (this is the jQuery(function() wrapper.
2. Find the page’s h1 tag, using the post type class name (you can see the class names on the body by using your web browser’s code inspector).
3. Append a link right after the heading with a class of page-title-action (so it will look like a WordPress styled button), and a href value with the following:
   1. The base admin url, using admin_url()
   2. The current screen: edit.php
   3. The post type: ?post_type=post
   4. A custom parameter, which you can listen for in another action to fire an event: &param=value

If you want to have a button that goes off site (a support link, etc), you can ,make the href value whatever link you want. However, if you are staying in site the settings above are important. The post type option ensures the user stays on the same post type (by default, edit.php goes to the Posts screen).

Performing an action

With the param = value part of the link, you can check if the page url includes a $_GET request for the parameter in your plugin or functions.php file:

<?php
if(isset($_GET['param'])) {
    add_action('wp_loaded', 'my_function');
}

function my_function() {
    // do something here
}

Showing a success or error notification

Finally, it’s recommended that you let the user know that something was run on the page refresh. In your my_function call, after you perform the work you want to do, you can use the admin_notices action to show a notification at the top of the screen:

<?php
function my_function() {
    // do something here

    // show a notification for the user
    add_action( 'admin_notices', function() { 
?>
        <div 
        class="
            notice 
            notice-success 
            is-dismissible 

            notice--fired-custom-code
        ">
            <p>Custom code was successfully run!</p>
        </div>
<?php
    });
}

Note: the notice--fired-custom-code class is a custom class we added to the notification and will use in the next section.

The notice classes on the div are provided by WordPress for styling and interactivity. The available styles are:

• notice-error
• notice-warning
• notice-success
• notice-info

Dismissing the notification

The is-dismissable class provides an X to dismiss the notification but it won’t remove the custom parameter from your URL. This means a page refresh will run your custom code and show the message again. To make the X actually dismiss the notification, go back to your admin_head action and add:

<?php
add_action('admin_head', function() {
    $admin_url = admin_url();
?>
    <script>
        jQuery(function(){
            // previous code
						
            jQuery('body').on('click', '.notice--fired-custom-code .notice-dismiss', function(e) {
                e.preventDefault();

                window.location = '<?php echo $admin_url; ?>/edit.php?post_type=post'
            })
        })
    </script>
<?php
}

We listen for a click on our custom notice--fired-custom-code class that we added to the notification and then reload the page without our custom parameter.

Adding buttons in Index

Index provides a filter to add buttons to any Index powered post type. To use it, just add your custom button to the list of actions with the blt-{$post_type}-actions filter:

<?php
add_filter('blt-post-actions', function($actions) {
    $actions[] = array(
        'label' => 'Click Me', 
        // atts is any number of regular HTML attributes you want to add to the button
        'atts' => array(
            'href' => '#',
            'id' => 'custom-button'
        )
    );

    return $actions;
});

Index does not require you to add any additional classes to style your button and you can set your button to go to another website or use the same param = value option like in standard WordPress. Or you can get fancy and perform your work in Javascript.