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¶m=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:
- Perform an anonymous function to fire immediately (this is the
jQuery(function()
wrapper. - 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). - 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:- The base admin url, using
admin_url()
- The current screen:
edit.php
- The post type:
?post_type=post
- A custom parameter, which you can listen for in another action to fire an event:
¶m=value
- The base admin url, using
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.