We will build a plugin to look at using the available filters and hooks to change the admin panel post columns. Add, delete and populate them with content.
When thinking of WordPress development, the most common things I find that come to mind are theme and plugin functionality and implementation to make a simple idea work and look the way you want it to. With a backend page and some or a lot of settings here and there.
WordPress API flexibility goes way beyond the things that you might have been familiar with.
Step 1 The Plan
Before we even start doing anything, we must understand what we are going to accomplish, what our final result is going to be. We are going to build a plugin that is going to manage admin panel post columns and their content. To build a plugin we need an idea that will fit our needs, so for this tutorial our plugin is going to slightly turn the posts functionality into a very simple price and currency management interface. To be even more specific, we are going to:
- Add 3 items in the post edit page as a meta box, those 3 items will be a price box, a quantity box and a currency radio button
- We are going to make that meta box function
- The items will be saved as custom posts for easier management later
- Add 4 columns in the posts page list in the admin panel with the price, currency, and quantity, also an extra field, picture
- Get the values of each of the previous columns and post them accordingly
- Show the featured image of the post in the picture column content
And that's it, in a nutshell, everything that this tutorial is about. Again, we are talking about implementing this in the admin panel post management pages only. As part of the plan, it is implied that you know how a basic WordPress plugin is created and works, but still, I am going to mention that we are going to create a directory in the plugins folder of WordPress by the name of productA and a file inside it called productA.php. I guess it's obvious now that our plugin is named Product A, I think that is a good name for a simple plugin with the above features for the purposes of this tutorial.
Step 2 Plugin Headers
This is a fun easy part, creating the first most necessary parts of the plugin, namely the stuff that identifies it to WordPress as a plugin and runs the file in order for our plugin to function properly. So we go ahead and create our Plugin Name, plugin Description, Author name and plugin Version header values that are commented at the top of the plugin file source code, just like in the following example:
<?php /* Plugin Name: Product A Description: Product A Description Goes here Author: Ciprian Turcu Version: 1.0 */
Step 3 Implementing Required Actions and Filters
The first thing that we are going to do is to add the meta-box functionality in our plugin. We want to add a custom made metabox in our edit post page, somewhere at the top of the right sidebar. In order to do this we must create an action (or hook) the functionality of which we will take care of a little later but let's see how the hook is called and implemented in this step first:
The Meta Box Hook
function pA_admin_init() {
add_meta_box('pA_metaid', __('quantity/price', 'pA_textdomain'), 'pA_inner_custom_box', 'post', 'side', 'high');
}
add_action('admin_init', 'pA_admin_init');
First we add a new action at the bottom of our file that we are going to use for a first parameter, the action tag of admin_init in order to call this function whenever a user accesses the admin area. The second parameter is the callback function name that is to be implemented when the hook is activated. We are going to call this function pA_admin_init and it looks like the above.
The pA_admin_init function contains the method that creates the meta box we need, generated by the function add_meta_box with the following variables:
-
pA_metaid– for a unique identifier of the meta-box -
__('quantity/price', 'pA_textdomain')– a string that represents the title of the meta-box -
'pA_inner_custom_box'– the callback function -
'post'– a string representing the post type (because we are working on posts, we are going to set the string value to 'post' -
'side'– a string representing the screen position of where we want our meta box to be on, we can use 'normal', 'advanced' or 'side'. We are using 'side' as we want it to show on the right side of our content -
'high'– the position amongst the other meta box elements of the page content side
This would be pretty much it for the first step of the meta-box action.
Saving the Meta Box Post Data Hook
At some point the data introduced into the meta box needs to be saved, in order to save it we need to add another hook to the list, this time with a different, specific tag as a first parameter.
add_action('save_post', 'pA_save_postdata');
The above example implements the much needed hook. As you can see, the tag parameter used in this case is save_post in order to get to the point where the post is submitted, all the form elements are sent to PHP and saved in the database, so that we can save our data exactly when the form is submitted and WordPress processes it. The callback function that does all the work is named pA_save_postdata, we will create this function a little later in the tutorial when we will take care of all the aspects of the meta box.
Working With the New Column Post Data
Because we are trying to create extra columns in our post page list we must populate the rows with the data of those new columns. To do this we are going to use the following code:
add_action('manage_posts_custom_column', 'pA_manage_posts_custom_column', 10, 2);
The tag used is manage_posts_custom_column and the callback function pA_manage_posts_custom_column, function that we are going to build in a few moments.
Column Filter
Last but not least, we want to add and remove a few columns from the posts page list. To do this we must filter the existing ones and remove or add as we wish by calling a filter like in the next example:
add_filter('manage_posts_columns', 'pA_manage_posts_columns');
The filter, just like the actions has main parameters that we use, one is the tag, in this case a string by the name of 'manage_posts_columns' and a callback function, also as a string but with the name of 'pA_manage_posts_columns'. We are building and using this function in one of the next steps.
Step 4 Meta Box
As we want to create a meta box and we already set the hooks and functions to get to a callback method that generates it, we need to write the code for it.
First we are going to take a look at the pA_inner_custom_box function. This function has very basic code inside it that generates and manages a form with data. First, there are 3 variables $pA_price, $pA_quantity, and $pA_currency to hold the values of our 3 elements we want to insert in the meta tag and posts list. To do this, we are going to get them from the custom fields where we are going to save them next in the save_post action. Then we create the HTML form fields that we are going to use to post the data when the post is updated or published, again, using the save_post callback function action. All this code is available fully here:
function pA_inner_custom_box() {
global $post;
$pA_price = get_post_meta($post->ID, 'pA_price', true);
$pA_quantity = get_post_meta($post->ID, 'pA_quantity', true);
$pA_currency = get_post_meta($post->ID, 'pA_currency', true);
?>
<table>
<tr>
<td align="center">
<label>quantity:</label><br />
<input type="text" name="pA-quantity" style="width:50px;" value="<?php echo $pA_quantity; ?>" />
</td>
<td align="center">
<label>price:</label><br />
<input type="text" name="pA-price" style="width:50px;" value="<?php echo $pA_price; ?>" />
</td>
</tr>
<tr>
<td>
currency:
</td>
<td>
<input <?php
if ($pA_currency == "USD") {
echo " checked ";
}
?> type="radio" name="pA-currency" value="USD" />USD /
<input <?php
if ($pA_currency == "GBP") {
echo " checked ";
}
?> type="radio" name="pA-currency" value="GBP" />GBP /
<input <?php
if ($pA_currency == "EUR") {
echo " checked ";
}
?> type="radio" name="pA-currency" value="EUR" />EUR
</td>
</tr>
</table>
<input type="hidden" name="pA-hidd" value="true" />
<?php
}
Now, firstly, why are we using custom fields? For easy management and for any future easy sorting, filtering inside the posts query. Second, we are using two textboxes for each of the price and quantity values and radio buttons with USD, GBP and EURO options for the currency values. Each of these form elements are given the values of the variables that we previously filled with values from specific custom fields.
That's it for this part, when the user updates or publishes a post these values will be sent to the next callback function of our tutorial.
Saving the Submitted Data
The second and very crucial part of the meta box functionality is saving the data we are submitting. At the beginning of the tutorial we implemented a function that manages the post submitted data. Now we are going to take a look at how its callback function works.
First, because we need a way to identify the post we need to include the global variable $post in order to get the id value of the currently submitted post. Then we will check if a hidden variable that we created as a form element was submitted or not. If it was submitted, we start extracting the values of custom fields from the database for each element we are interested in: price, quantity and currency. We will use the get_post_meta function to get the custom field meta key values using the $post->ID variable value as an identifier and the meta key name that we are interested in. We need these values to set the previous value parameter in our next piece of code from this function that handles the data update.
The data is saved as custom fields under a specific metakey name pA_quantity for quantity, pA_price for price and pAcurrency for currency values. The new data is extracted from the $_POST variable that contains submitted data.
function pA_save_postdata() {
global $post;
if ($_POST['pA-hidd'] == 'true') {
$pA_price = get_post_meta($post->ID, 'pA_price', true);
$pA_quantity = get_post_meta($post->ID, 'pA_quantity', true);
$pA_currency = get_post_meta($post->ID, 'pA_currency', true);
update_post_meta($post->ID, 'pA_quantity', $_POST['pA-quantity'], $pA_quantity);
update_post_meta($post->ID, 'pA_price', $_POST['pA-price'], $pA_price);
update_post_meta($post->ID, 'pA_currency', $_POST['pA-currency'], $pA_currency);
}
}
This concludes the meta box implementation in our plugin.
Step 5 Filtering Posts Columns
Finally we have reached the main part of this tutorial, well, at least one of the main parts. I say main parts because this next thing is what the tutorial is all about, still, it cannot function without all the other parts previously done. We are going to take a look now at how to remove and add new post columns to the posts page in the admin panel.
Because we have extra values especially added to the post, things like price, currency and quantity, we want in this part to have extra columns in the posts page with these names and the related values. Let's clean things up a bit, first, we want to remove author, tags and comments from the columns as for the purpose of this tutorial we want to learn how to do this and we do not need those columns since we are trying to act like the posts page handles a product with things like price and quantity.
function pA_manage_posts_columns($columns) {
global $wp_query;
unset(
$columns['author'], $columns['tags'], $columns['comments']
);
$total = 0;
foreach ($wp_query->posts as $post) {
$total += get_post_meta($post->ID, 'pA_price', true) * get_post_meta($post->ID, 'pA_quantity', true);
}
$columns = array_merge($columns, array('price' => __('price'), 'currency' => __('currency'), 'quantity' => __('quantity'), 'featured_image' => __('Image'), 'total' => __('Total: ' . $total)));
return $columns;
}
Looks simple enough, right? I'm of course talking about the above callback function for the manage_posts_columns filter tag that handles the management of post columns, just like the name says. There are just a few lines of code there but this part is actually more complicated than any previous part in this tutorial (and those parts are not that hard so this one should not be that hard to understand either).
Firstly, the callback function of the previously mentioned filter has a parameter that holds all the columns inside it as an array. We are setting this parameter under the name $columns so that we can use it in a few moments. Next we need to integrate a global variable into the function, namely $wp_query. We are also going to use this shortly.
Removing Columns
Since the $columns parameter is an arrray that contains all the columns of the posts page, all we have to do in this case is remove the array parameters that we wish. To do this, we just use the unset PHP function and we separate the array names that we want to remove by commas. Easy.
Calculating Totals
Because we are using price and quantity as values that we are working with dynamically, we want to make a total of those values in a special extra row that we will add in a moment. To calculate this, we need to extract the values of all the prices and quantities of each post, multiply them and add the results up. The result will be a total of all the posts item values multiplied by their quantity. The sum of this we want to post in the title of the column when we add the column on the next part. So we retrieve the values of the price and quantity custom fields of each post using the get_post_meta function, and make a total using an incremented $total variable. To create the loop with our required data we will use the integrated $wp_query global variable.
Adding Columns
To add columns, we are going to use the approach we used in removing them only in a different way, namely not the unset function for removing but the array_merge PHP function for adding the new columns. The columns are added as arrays in this order and by these names: price, currency, quantity, featured image and Total.
All that's left to do now is to return the $columns variable and the callback function will do its magic. The end result is something that should make the posts page have the head table titles look like this:
Step 6 New Columns Data
The final step of this tutorial is about the custom column values. After creating the columns previously we need to show the values of those prices, currencies and so on, in the posts list we need to add the corresponding values of the custom values to the list properly. To do this we are going to use a previously implemented hook that has the callback function with the name of pA_manage_posts_custom_column. The function has two parameters, a column parameter containing the name tag of the column we are in, used by us to identify where we are, and the post ID as a second parameter.
First we need a switch condition to check the $column variable for what type of post we are in. Of course, we are interested only in our custom created columns, so we will put the cases only to those values.
Price, Currency and Quantity
These three column types that we created have a common meta key data type, a simple string that is a custom column that we can get by using the get_post_meta function with the appropriate variables, more precisely $post_id for identifying the post, meta key for identifying the custom field and a boolean variable set to true for getting the data as an echoed string or as an array.
There is one extra column that we added that is a little different and not really mentioned previously. I am talking about the featured_image column that will show the featured picture's HTML tag from the the post inside the row of the current post. To get the featured image we are using the get_post_thumbnail function with the post id as an identifier and a size string.
One last column value is the total. The total of each post is calculated by extracting the custom fields using the same method as before (get_post_meta function) of price and quantity and multiplying them. The total is the result we are looking for.
function pA_manage_posts_custom_column($column, $post_id) {
switch ($column) {
case 'price':
$pA_val = get_post_meta($post_id, 'pA_price', true);
break;
case 'currency':
$pA_val = get_post_meta($post_id, 'pA_currency', true);
break;
case 'quantity':
$pA_val = get_post_meta($post_id, 'pA_quantity', true);
break;
case 'featured_image':
if (has_post_thumbnail())
$pA_val = get_the_post_thumbnail($post_id,'thumbnail');
break;
case 'total':
$pA_price = get_post_meta($post_id, 'pA_price', true);
$pA_quantity = get_post_meta($post_id, 'pA_quantity', true);
$pA_val = $pA_price * $pA_quantity;
break;
}
}
The above example is the way the function we discussed previously should be implemented to work properly, you can check the above code to understand this section of the tutorial. As a visual result, the hello world post was given a few values for price, currency and quantity and a random print screen was uploaded as a featured image. With our plugin installed the posts admin page looks like this:
Conclusion
WordPress is becoming more and more powerful and flexible with lots of new features and posibilities that not only we did not have but we might not even realise how useful they are. This tutorial has the purpose of helping you understand how you can easily manage columns for posts in the admin area. You can choose to use this information how you wish for any project you might think of that would make it useful. Just think of the possibilities you can create with these simple steps!
What are some other underrated WordPress features you think people often overlook? Let us know in the comments!
Comments