Monthly Archives: April 2016

How to add Custom Admin Meta Boxes to a WordPress Custom Post Type

I decided to write this detailed tutorial on how to add custom field meta boxes to the WordPress admin mostly because I couldn't find a decent description of how to do it anywhere online. Hopefully this will help others having trouble trying to learn how to add admin meta boxes with custom fields for a custom post type in WordPress. It is an essential step to learning WordPress plugin development.

Let's dive in and learn some code because I believe that is the quickest and easiest way to learn this advanced WordPress method. I say it is an advanced subject because it is a little complex for beginners. If you are not sure how to start your own plugin yet in WordPress, then this topic may be too advanced for you. You should at least learn how to make a very basic WordPress plugin first, so feel free to read one of my more basic WordPress plugin tutorials first.

First of all, I'll show you how to add a single meta box with a single field in it. It is also important to know that you can have more than one field inside a single meta box. It is equally important to know that you can have more than one meta box. Each meta box can have one or more fields in them. It just depends on your individual needs. Below is the basic code for how to add a custom post type with a custom field inside of an admin meta box. I'll also include a basic plugin heading so you may follow along and create a working example to work from:

Adding a Custom Post Type to WordPress Plugin

<?php
/**
 * Plugin Name: Jafty Metabox Example Plugin
 * Plugin URI: http://jafty.com/blog/crash-course-on-wordpress-plugin-development/
 * Description: A Plugin that adds metaboxes to your WordPress blog or site.
 * Version: 1.0
 * Author: Ian L. of Jafty.com
 * Author URI: http://jafty.com
 * License: GPL2
 */
 

 //Add new Custom Post Type named videos:
add_action('init', 'create_video_posttype');
function create_video_posttype(){
    register_post_type('videos',
        array(
            'labels' => array(
            'name' => __('Videos'),
            'singular_name' => __('Video')
            ),
        'public' => true,
        'has_archive' => true,
        'rewrite' => array('slug' => 'video'),
        )
    );
}//end create_video_posttype function

?>

Okay, now start a .php file and add the above code in green to the start of it. Name the file "jafty-metabox-example-plugin.php" and save it. Please NOTE: it is important to go into wp-admin/settings/permalinks and re-save those settings after activating a plugin with a custom post type or after adding a custom post type to a plugin. If you do not do this, the custom post type posts will not show up on the front end of your blog.

At this point, you should be able to upload the jafty-metabox-example-plugin.php file to your WordPress site's plugins folder and activate it. If it works, you'll see a new "Video" option in the left navigation menu of wp-admin as in the following photo:

videoCPT

Add a Metabox with a Custom Field to your CPT

Now here is the code to add to the end of the file you started above(just before the closing PHP tag) that will add a meta-box with a custom field inside of it to your plugin. It adds a field to the wp-admin edit screen for the videos CPT(custom post type):

//Add custom admin Meta Boxes:
add_action('add_meta_boxes', 'add_ians_metaboxes');
function add_ians_metaboxes(){
//add meta box for Video type and description:
add_meta_box('meta_box_html_id', 'Video Details', 'video_details_function', 'videos', 'normal', 'high');
}

//##################### Video Details Metabox: ################
function video_details_function() {
global $post;  
//Noncename needed to verify where the data originated
echo '<input type="hidden" name="eventmeta_noncename" id="eventmeta_noncename" value="' .
wp_create_nonce(plugin_basename(__FILE__)) . '" />';

//Get video description data if its already been entered
$video_desc = get_post_meta($post->ID, '_video_desc', true);
    
//Start video Description text field HTML:
?>
Video Description:
<input type="text" name="video_desc" value="<?php echo $video_desc; ?>" class="widefat" />
<?php
}//end video_details_function

Save the "jafty-metabox-example-plugin.php" file and update it on your site and click on the "Video" link in wp-admin and then click on "Add New" to see the add/edit screen for your new CPT. You will notice your  custom meta-box with the heading of "Video Details". You will also notice the meta-box contains a custom field named "Video Description". You can see both near the bottom of the photo below:

customField

Saving Custom Field Data

Your not quite done however. While the code above will display the metaboxes, it does not save the data as I soon discovered. To save the data, you'll need to add this code directly after your video_details callback function:

//hook into save_post to save the meta box data:
add_action ('save_post', 'save_video_desc');

function save_video_desc($post_id) {
//verify the metadata is set
     if (isset( $_POST['video_desc'])) {
     //save the metadata
     update_post_meta ($post_id, '_video_desc', strip_tags($_POST['video_desc']));
     }
}

 

 Adding Multiple Meta-Boxes and Custom Fields

Next I'll show you what out final plugin file would look like if we were to add another custom field to our meta-box and then another meta-box with yet another custom field inside of it. This way you can see how more than one meta-box is added and also how to add more than one field inside of a single meta-box. Here is the complete plugin code containing a total of two meta-boxes and three total custom fields:

<?php
/**
* Plugin Name: Jafty Metabox Example Plugin
* Plugin URI: http://jafty.com/blog/crash-course-on-wordpress-plugin-development/
* Description: A Plugin that adds metaboxes to your WordPress blog or site.
* Version: 1.0
* Author: Ian L. of Jafty.com
* Author URI: http://jafty.com
* License: GPL2
*/

//Add new Custom Post Type named videos:
add_action('init', 'create_video_posttype');
function create_video_posttype(){
register_post_type('videos',
array(
'labels' => array(
'name' => __('Videos'),
'singular_name' => __('Video')
),
'public' => true,
'has_archive' => true,
'rewrite' => array('slug' => 'video'),
)
);
}//end create_video_posttype function

//Add custom admin Meta Boxes:
add_action('add_meta_boxes', 'add_ians_metaboxes');
function add_ians_metaboxes(){
//add the first meta box for Video type and description:
add_meta_box('meta_box_html_id', 'Video Details', 'video_details_function', 'videos', 'normal', 'high');
//add a second meta box for Video Rating
add_meta_box('meta_box_html_id2', 'Video Rating', 'video_rating_function', 'videos', 'normal', 'high');
}
//################## Video Details Metabox: ####################
function video_details_function() {
global $post;

//Noncename needed to verify where the data originated
echo '<input type="hidden" name="eventmeta_noncename" id="eventmeta_noncename" value="' .
wp_create_nonce(plugin_basename(__FILE__)) . '" />';

//Get the video type  if its already been entered
$video_type = get_post_meta($post->ID, '_video_type', true);
// Get the video description if its already been entered
$video_desc = get_post_meta($post->ID, '_video_desc', true);

//Start type select field HTML:
?>
Video Type: <select name="video_type">
<option value="DVD"<?php if($video_type=="DVD")echo " selected";?>>DVD<option>
<option value="Blueray"<?php if($video_type=="Blueray")echo " selected";?>>Blueray<option>
</select><br />
<?php
// Start video description field HTML:
?>
Video Description:
<input type="text" name="_location" value="<?php echo $video_desc; ?>" class="widefat" />
<?php
}//end video_details_function
//##################### Video Rating Metabox: ###################
function video_rating_function() {
global $post;

//Noncename needed to verify where the data originated
echo '<input type="hidden" name="eventmeta_noncename" id="eventmeta_noncename" value="' .
wp_create_nonce(plugin_basename(__FILE__)) . '" />';

//Get the start_month data if its already been entered
$video_rating = get_post_meta($post->ID, '_video_rating', true);

//Start type select field HTML:
?>
Video Type: <select name="_video_rating">
<option value="R"<?php if($video_rating=="R")echo " selected";?>>R<option>
<option value="PG"<?php if($video_rating=="PG")echo " selected";?>>PG<option>
</select><br />
<?php
}//end video_rating_function
?>

//add your save data hook and function to save all fields here:

//hook into save_post to save the meta box data:
add_action ('save_post', 'save_video_data');

function save_video_data($post_id) {
//verify the metadata is set
     if (isset( $_POST['video_desc'])) {
     //save the metadata
     update_post_meta ($post_id, '_video_type', strip_tags($_POST['video_type']));

    update_post_meta ($post_id, '_video_desc', strip_tags($_POST['video_desc']));

    update_post_meta ($post_id, '_video_rating, strip_tags($_POST['video_rating']));
     }
}

That's it! Save the above code in a PHP file and name it the same name as before and allow it to overwrite the original plugin file if you were following along and it will add another meta-box and a couple more custom fields to your custom post type. Now you should have enough information to be able to make your own custom admin meta-boxes and fields for your next WordPress plugin or theme. Here is an image of the two meta-boxes from when I tested the above code myself:

metaboxes

Summary

Now you should know more than enough to make your own plugin or custom theme with its own admin meta-boxes and custom fields for any custom post types you may have. It is important to know that you can also use any other type of form element in the above examples. Feel free to experiment and use textareas, radio buttons, checkboxes etc in your own code.

 

How to Include a CSS Style Sheet for a WordPress Page Within a Plugin

For years I used to simply include CSS styles in WordPress plugins that I made for myself by doing it the same ways that you would for a pure HTML website like:

The Wrong Way:

<style>
p{
font-family: arial;
}
</style>

Or I would do it like this with an external stylesheet:

<link rel='stylesheet' href='http://jafty.com/wp-content/plugins/plugin-name/css/frontend-style.css' type='text/css' media='all' />

But I found out later when I started making professional plugins for clients that there is a more correct way to do it when using WordPress.

The Right Way to Include CSS Styles in a WordPress Plugin:

The right way to include a style sheet in a custom WordPress frontend page generated by a plugin you are making is to create the style sheet in an external CSS file and include it like this:

In your plugin's main PHP file include:

<?php

//Add frontend styles for the calendar page:
$pluginURL = plugins_url("",__FILE__);
$CSSURL = "$pluginURL/CSS/frontend-style.css";//change to your filename and path
wp_register_style( 'frontend_CSS', $CSSURL);

?>

Then,  wherever you want your style to show up, include this:

wp_enqueue_style('frontend_CSS');

I include the wp_enqueue_style function call write after wp_head normally in my custom page's header.

I normally like to have a folder inside my main plugin folder named "CSS" or "style" where I put all my CSS style sheets for the plugin. You can see I used "CSS" in the above example. You would of course alter the URL according to the folder you placed the CSS file in. The plugins_url function used with the __FILE__ definition as the second parameter will give the full URL to the plugin when it is called within the main plugin file. I normally name the main plugin file after the plugin name or sometimes i name it index.php, but regardless, the code would be the same as long as it is within the main plugin file.

In the abov example my style sheet was named frontend-style.css, yours could be named anything you like.

Using CSS Media Queries in Responsive Web Design

That's right! The post of the day is going to be on how to use CSS media queries to make a responsive web page or application. The project I'm working on requires me to create a responsive events calendar application that looks good in all sized browser windows as well as mobile devices including iPhone and Android phones and tablets. This can be done very well with CSS media queries and a basic understanding of HTML and CSS. Making today's task a little more challenging is the fact that we will be using HTML table elements. If you have any experience with HTML tables, you probably know that they can be tricky to size according to specific requirements most times. We will overcome the table cell sizing limitations in this article however.

Common Screen Sizes

One of the most important things to take into consideration when developing a fully responsive web application for both computers and mobile devices is your users screen size. What are your users likely to be using? Some will be on a PC, some on a tablet, others on an iPhone and yet others will be on an Android or other device. The ugly truth is that there are a lot of possibilities. I have found from experience that it's best to take into consideration the most commonly used screen sizes. I program for the most common and try to make it work resonably well in the uncommon sized screens as well because roughly up to 3% of your users could be using an odd sized screen that you haven't programmed for. While 3% may not sound very significant, think of it like this: If your site has 1000 visitors a day like mine does, then that means up to 30 people a day are viewing your site on a less-common screen size. 30 is 3% of 1000. Here are some of the latest statistics I could find on common screen sizes used:

First I want to show you common screen sizes of Mobile Devices since they are probably the fasting growing segment of 2016:

2016 Total iOS* Android Windows Others
February 5.15 % 1.08 % 3.49 % 0.42 % 0.16 %
January 5.38 % 1.17 % 3.69 % 0.37 % 0.15 %

The above information was collected by the website w3schools.com. The data represents the users of their website according to information collected by thier servers. It shows that only slightly greater than 5% of thier website viewers view thier site on a mobile device, but your site could have more because I think the w3schools website is one that developers reference a lot and developers do their work on a computer more often than on a mobile device. That may account for some of the low figures for mobile users. Now lets look at the most commone screen sizes according to rapidtables.com:

Common screen resolutions of rapidtables.com visitors (2/2014):

Screen resolution Display
ratio
Usage Screen size / type
1366x768 16:9 19.1% 14'' Notebook / 15.6'' Laptop / 18.5'' monitor
1920x1080 16:9 9.4% 21.5'' monitor / 23'' monitor / 1080p TV
1280x800 8:5 8.5% 14'' Notebook
320x568 9:16 6.4% 4'' iPhone 5
1440x900 8:5 5.7% 19'' monitor
1280x1024 5:4 5.5% 19'' monitor
320x480 2:3 5.2% 3.5'' iPhone
1600x900 16:9 4.6% 20'' monitor
768x1024 3:4 4.5% 9.7'' iPad
1024x768 4:3 3.9% 15'' monitor
1680x1050 8:5 2.8% 22'' monitor
360x640 9:16 2.3%
1920x1200 8:5 1.7% 24'' monitor
720x1280 9:16 1.6% 4.8'' Galaxy S
480x800 3:5 1.1%
1360x768 16:9 0.9%
1280x720 16:9 0.9% 720p TV

If you study the numbers above, they suggest that rapidtables.com visitors are much more likely to be on a smaller screen size device or mobile device than are w3scools.com users. I guess from reading the above data that their website has roughly up to 12% of their users using smaller screened devices such as iPhones, Androids and other mobile devices.

CSS Media Queries

I choose to use one simple type of CSS media queries in this challenge. I like to call it the max-width technique for sizing web pages at various sizes. This is due to the fact that the technique uses ony the max-width media query as you will see with the demonstration code below.

From studying the more common screen sizes, I've come up with a simple plan to make my calendar application look good on just about any possible screen size. Here is my rudimentary logic:

I plan to set the maximum with of the calendar to 1000 pixels and centering it on the page. By doing this I eliminate the need for any media queries for screens over 1000 px wide! As you can see from the charts above,  there are 17 screen sizes represented and 11 of them are over 1000px wide! We have already made our work a lot easier since we only have 4 other screen widths to worry about(because 3 of them have 320px wide screens). Obviously 320px is of great concern as it is one of the most common widts on mobile phones, but I'll also take into considertion the widths of 360px, 480px, 720px and 768px. However, some will be taken care of by the same media queries as you'll soon discover. Here are the basic rules we will go by when making out calendar application:

  • web page will be no wider than 1000px and centered.
  • first media query will be set for max-width of 800px meaning that if the page size is under 800px wide the styles inside of the media query definition will be altered.
  • A second media query set for a max-width of 500px will apply changes for any screen size under 500px down to the next media query.
  • A third media query set for a max-width of 400px will account for any screen between400px and the next media query.
  • A forth and final media query set for max-width of  320px will account for the common screen sizes of 320px and under which are the smallest group of mobile phones, so no other media queries after this one will be required.

I have outlined my logic above, now I can add my media queries to my CSS style sheet as follows:

/*add styles for screen sizes of 800px and up. These don't need to be inside of a media query because the table's width for the calendar will be set to 1000px and centered. Tables are generally flexible enough to be reduced from 1000 to 800px without any problems given it is styled and tested correctly.*/

@media(max-width: 800px) {
//add styles for screen sizes from 500 to 800px:
}

@media(max-width: 500px) {
//add styles for screen sizes from 400 to 500px:
}

@media(max-width: 400px) {
//add styles for screen sizes from 320 to 400px:
}

@media(max-width: 320px) {
//add styles for screen sizes 320px and under:
}

The above is a good way to start your CSS style sheet for a resposive design. You may find that you may not need to use one or more of the media query definitions. You may also find yourself adding one or two media query definitions. None-the-less, this is a good start.

Writing and Testing your CSS Code

When I make a responsive web page, I first make the basic page with basic CSS and no media queries. Then when the basic page is complete, I start testing it at different screen sizes by making my browser window smaller and larger and seeing how the page looks at every possible width and height. Then I add styles to media queries and edit them until the page looks good at every possible size. Finally I test on actual devices such as an iPhone, Android phone and a tablet while making final adjustments according to how the page looks on the actual devices.