Usefull Wordpress code #2 - ajax call in back end with custom columns

I created custom posts with Custom Post Type UI plugin called events and they have custom fields defined in Advanced Custom Fields plugin. That works fine, but I would like to see what type of event it in the event list table is when I click on "All events" in the menu. Also, very useful for me would be which event is currently featured (has a feature checkbox active). This effects on how they are visible on my front end, and I won't get into that.

The code here is how to add columns in all posts table when viewing all posts, pages, or, in my case, custom posts called events.

My custom posts, events, can be either event entry defined by a date field or an announcement for an upcoming event, which does not have a date set. More about this later.

To add new columns to the "View all posts" table use this code. In my case I'm adding two columns, one's called Featured, and another Event type.

 

add_filter('manage_events_posts_columns', function($columns) {

return array_merge($columns, ['feature_it' => __('Featured?', 'textdomain'), 'entry_type' => __('Event type', 'textdomain')]);

});

 

To enable sorting on the custom columns add this code.

 

add_filter('manage_edit-events_sortable_columns', function($columns) {

$columns['feature_it'] = 'feature_it';

$columns['entry_type'] = 'entry_type';

return $columns;

});

 

This defines how the query will sort the posts. In this case it will sort them by meta key, either "feature_it" or "date_val" key.

 

add_action('pre_get_posts', function($query) {

    if (!is_admin()) {

        return;

    }

    $orderby = $query->get('orderby');

    if ($orderby == 'feature_it') {

        $query->set('meta_key', 'feature_it');

        $query->set('orderby', 'meta_value_num');

    }

else if ($orderby == 'entry_type') {

        $query->set('meta_key', 'date_val');

        $query->set('orderby', 'meta_value_num');

    }

});

 

Now I must define how the new columns in View all posts table will look. First column is "feature_it" and this column contains a check box to see if the event or announcement is featured on the front-end of the site or note. This is stored in post meta variables so I'm getting them by get_post_meta function. If an entry contains a data value, then it's an event in my case and if it doesn't have a date then it's an announcement. In this column I'm showing a checkbox with a text "Feature this event" or "Feature this announcement".

This checkbox input contains a custom data attribute data-id with post id.

Next, in the second column I'm just wanting to see what type of entry it is. I could have done this by using a second custom post type, but since both events and announcements are displayed on the same page on the front-end, I chose to do it this way.

Logic for this column is simple - if the entry has a date value, then just print that this is an event, otherwise print that this is an announcement.

 

add_action('manage_events_posts_custom_column', function($column_key, $post_id) {

if ($column_key == 'feature_it') {

$featured = get_post_meta($post_id, 'feature_it', true);

$date_val = get_post_meta($post_id, 'date_val', true);

if($date_val) $txt = "Feature this event";

else $txt = "Feature this announcement";

if ($featured) {

echo ' '.$txt.' ';

} else {

echo '  '.$txt.'  ';

}

}

if ($column_key == 'entry_type') {

$date_val = get_post_meta($post_id, 'date_val', true);

if ($date_val){

echo 'Event';

} else {

echo 'announcement';

}

}

 

}, 10, 2);

 

OK, that's that for showing the checkbox and type columns in the posts table. Next, and last, step is to update post meta when user changes checkbox status. I've done this using ajax function on the back end.

It's a simple ajax function and a good example how this works in Wordpress and in back end.�

I'm calling ajax from a jQuery function in the admin_footer. The jQuery detects when any of the checkboxes (named "feature_it") change its state. When a checkbox changes state then we check if the checkbox is checked. If it's checked then the variable set_it is set to 1, otherwise is 0. Next, we'll get post ID from the custom attribute, data-id.

dataVariable for ajax call is set, this variable contains action - that's the name of the php function ajax will trigger, then ident with the post ID and set_it with our 1 or 0 set_it variable.

/* ADMIN AJAX set featured */

add_action( 'admin_footer', 'estart_backend_ajax_funct' );

function estart_backend_ajax_funct() { ?>

     

   

}

 

This php function is very simple - get the data from dataVariable sent by ajax call (post ID, set_it variable) and simply update post meta for post with ID ident, meta key name is "feature_it" and the new value is stored id $set_it variable.

add_action("wp_ajax_admin_featured_events" , "admin_featured_events");

function admin_featured_events(){

    $ident = $_REQUEST['ident'];

$set_it = $_REQUEST['set_it'];

update_post_meta($ident, "feature_it", $set_it);

    wp_die();

}

 

That's it! I hope it helps!

Thanks to A white pixel - How to add custom columns in Wordpress admin for their post which helped me a lot in solving my problem.

 

Need Custom Web Development?

If you need custom WordPress plugins, themes, or advanced carousel solutions, I can help. Let's bring your project to life!

Contact Me Connect on LinkedIn