Category Archives: HTML

Don’t Hard Code WP-Content Directory!

Plugin development tip of the day!
DO NOT HARD CODE wp-content Directory!

I made this mistake not realizing how many people change that directory as a security precaution.

Alternatives

The best alternative is probably the WP_CONTENT_DIR in my opinion. You can also use WP_CONTENT_URL, depending if you want a relative path or a full url.

Examples:
Here is an example of each followed by the output code:
<?php
echo WP_CONTENT_DIR;
echo "<br />";
echo WP_CONTENT_URL;
echo "<br />";
?>

/var/www/html/jafty.com/public_html/wp-content
http://jafty.com/wp-content

So now you know!

Want more? Here are some other ways to get similar paths or directories  from within a plugin file:

<?php
echo "<br>";
echo plugins_url( 'myscript.js', __FILE__ );
echo "<br>";
echo plugins_url();
echo "<br>";
echo plugin_dir_url(__FILE__) ;
echo "<br>";
echo plugin_dir_path(__FILE__) ;
echo "<br>";
echo plugin_basename(__FILE__) ;
?>

The above would output the following lines if it were ran from a plugin on jafty.com:

http://jafty.com/wp-content/plugins/jafty_plugin_tester/test_code/myscript.js

http://jafty.com/wp-content/plugins

http://jafty.com/wp-content/plugins/jafty_plugin_tester/test_code

//var/www/html/jafty.com/public_html/wp-content/plugins/jafty_plugin_tester/test_code/

jafty_plugin_tester/test_code/wp_content_url.php

PHP WordPress Large background Importer Code

My wonderful client wanted me to add a .CSV importer that imports posts into a Custom Post Type(CPT) in large quantities of around 10k to 50k at a time.

What a standard WordPress site can handle

From my experience building plugins and importers for WordPress over the past 20 years, I have learned to expect trouble if you try to import anything more than 4k to 5k posts into WP at a time. The main requirement for the importer that I am building now is that it is able to import 20k posts in under 15 minutes. Not too difficult, but a challenge none-the-less because the average WP site will timeout after the first 4k posts on average. I also wanted to accomplish this goal without using any bloated PHP Que libraries or Worker Libraries, so I'll be developing it completely from scratch, just like a grown up!

Step One, Break Large File into Smaller Chunks

The first thing I did while developing my large WP file import feature, was to handle the issue of having a huge .csv file with 20 thousand posts saved in it. What do you do? What I did was wrote a PHP script that reads in that huge file and breaks it up into manageable chunks and saves each chunk to its own separate .csv file. Kind of simple really, this is the easy part!

I created a file named file_split.php to handle this portion of the importer's code. Here are the contents of that file:

<?php
$chunk_size = 2000;//size of ea. chunk file given in the no. of lines written to the file(excluding the first line with headings that will be at the top of ea. chunk file created).
$max_files = 0;//it will stop after writing this many files, set to 0 for no limmit
$u = $uploadpath;//"double_accounts-test.csv";
//read a file line by line:
echo "<p>Opening $u to spit it into chunks......</p>";
$file = fopen($u, "r") or exit("Unable to open $u!");
//extract the first line from the file:
$first_line = fgets($file);
//Output a line of the file until the end is reached:
$i=0;
$ii=0;
$iii=0;
$chunk=$first_line;
while(!feof($file) &&($iii < $max_files||$max_files==0)) {
$i++;
$ii++;
$line = fgets($file);
//echo "$i) $line<br>";
//add line to lines that get written to files:
$chunk .= $line;
//once we get to chunk_size lines, write a new file
if($ii == $chunk_size){
$iii++;
//echo "<h3>Chunk #$iii:</h3>";
//echo $chunk;
//create dynamic filenames:
$fn = ABSPATH."wp-content/plugins/YOUR-PLUGIN/temp/chunk$iii.csv";
//echo "Writing file $fn....<br>";
$fh = fopen($fn, 'w') or die("can't open $fn file to overwrite");
fwrite($fh, $chunk);
fclose($fh);
$m = "<span style='color:green'>Chunk Written to $fn</span><br>";
//reset $ii var back to zero:
$ii = 0;
//empty the $chunk var and add first line to top of file content($chunk)
$chunk=$first_line;
//echo "<hr><span style='text-align:center;color:orange;font-weight:bold;width:100%;margin-right:111px'>End File #$iii</span>$m<hr>";
echo $m;
//add the file name to the fnames array:
$fnames[] = $fn;
}//end if $ii = $chunk_size
}
fclose($file);
//if $ii is greater than 0 and less then chunk_size, then there was a left over chunk at the end, so write it to a file too:
if($ii > 0 && $ii < $chunk_size){
$noof_files = $iii+1;
$fn = ABSPATH."wp-content/plugins/YOUR-PLUGIN/temp/chunk$noof_files.csv";
echo "Left over chunk of $ii lines remains, so writing it to final file named $fn....<br>";
//echo "Writing Final file $fn....<br>";
$fh = fopen($fn, 'w') or die("can't open $fn file to write final chunk!");
fwrite($fh, $chunk);
fclose($fh);
echo "<h3 style='color:green'>FINAL Chunk Written to $fn! DONE chunking $u file! Total files created: $noof_files</h3>";
//add final file name to fnames array:
$fnames[] = $fn;
}else{
echo "Wow! We broke even with no left over chunk of less than $chunk_size lines, so finished writing files! Final file is $fn.<br>";
}

?>

Put the file_split.php file up for now. We will include it in another file later when we have the rest of our import feature code written. You can test file_split.php easy enough by

How to Keep Custom wp-admin Nav Menu Items Open and Sub-menu Items Highlighted When Clicked

So, I spent a good 3+ hours doing what I thought would be a simple task today. I was working on a custom WordPress plugin named "Cultivate" for a client and made some additions to the admin menu in wp-admin. I added a Main menu item with the plugin name on it and there were 8 sub-menu items under it with links to various admin pages for the plugin.

The Problem

The problem is that the cultivate main menu item should stay open when someone clicks on one of the sub-menu items, but doesn't. So let me demonstrate with a couple of images of the admin area in WordPress. Here's an image of how the admin nav looks just after I clicked on the main menu item "Cultivate". As you can see in the below image, the Cultivate menu is open and you can see the 8 submenu items below it. When it is closed all you see if the "Cultivate" menu item, but here it is open:

MainMenu

Okay, that's all good and fine. You can see the sub-menu items and you can see "Cultivate" main menu item is highlighted because that page is now open. So, everything looks great! However, below is another image of how it looks after clicking on one of the sub-menu links below the "Cultivate" main menu item. In the next image, I have just clicked on the "Pods" sub-menu item under "Cultivate":

Submenu

Now do you see the problem? Not only is the main "Cultivate" menu item closed, but the "Pods" sub-menu item isn't even present. Pods should be visible and highlighted which is not possible without the sub-menu being opened! So, after hours of research and coding, I finally figured out how to make this custom wp-admin menu work as it should. Here is how it looks after clicking on "Pods" under "Cultivate" after I added my code which I'll show you shortly:

OpenSubmenu

See how in the above image, the main "Cultivate" menu remained open and the "Pods" sub-menu item is highlighted after going to the custom admin page?  That's how it should work! That's how it works after adding my custom PHP and jQuery code shown below.

The Solution

The solution is a block of PHP code added to your plugin file or functions.php file and a custom jQuery script for each sub-menu item. It might sound like a lot to make a separate .js file for each sub-menu item, but you only have to change one word in each file, so not a huge deal really.

The PHP Code

Here's the PHP code you can add to your main plugin file or to functions.php if you're adding it to a theme:

First we will just add the following PHP code, then below that you can see the complete script, but you'll want to run this partial script first to get your page names for the if statements to function properly:

add_action('admin_head', 'jafty_set_open_menu');
//Open the correct menu for taxonomy
function jafty_set_open_menu(){
    $screen = get_current_screen();
    $screenname = $screen->base;
    $screentax = $screen->taxonomy;
    $posttype = $screen->post_type;
    //uncomment next line to write name of page, post type and taxonomy to log:
    log_debug("\n\nOpened page: $screenname\nOpened Taxonomy: $screentax\nPost Type: $posttype\n\n");

}//end jafty_set_open_menu function by Ian L. of Jafty.com

//Custom function to write data to log file:
function log_debug($log){
    $pdir = plugin_dir_path( __FILE__ );//gets the directory of current file with trailing slash whether inside plugin or not!
    $myFile = $pdir."my_log.txt";
    $fh2 = fopen($myFile, 'a') or die("can't open file to append");
    fwrite($fh2, $log);
    fclose($fh2);
}//End log_debug PHP function

Now with the above code installed in your main plugin file or functions.php file, you'll also need to add a file to your plugin's main directory named my_log.txt and give it write permissions. This way it will write the page names and any possible taxonomy or post types you need to insert later in the script to the log file when you click on the admin nav links. So you click on a sub link, then see what was written to the log file. Repeat for ea. sub link. and write down the values written to the log file. Then you use what you wrote down to plan your PHP if statements correctly according to the page, post type and taxonomies used.

With that said, here's the entire script that worked for my Main menu item with 8 sub menu items below it"

//code to keep main menu open if submenu items are clicked:
add_action('admin_head', 'jafty_set_open_menu');
//Open the correct menu for taxonomy
function jafty_set_open_menu(){
    $screen = get_current_screen();
    $screenname = $screen->base;
    $screentax = $screen->taxonomy;
    $posttype = $screen->post_type;
    //comment out next line to stop writing the page and taxonomy names to log file:
    log_debug("\n\nOpened page: $screenname\nOpened Taxonomy: $screentax\nPost Type: $posttype\n");
    //next will be a separate block of code for ea. submenu item in the main menu to trigger the proper .js file to manipulate the nav menu properly for ea.:
    //code for the "People" submenu item:
    if($screenname === 'edit' && $posttype === 'people'){
        wp_enqueue_script( 'open-menu-parent_people', plugins_url('js/open_admin_menu_people.js', __FILE__ ), array('jquery') );
    }    
    //code for the "Pods" submenu item:
    if($screenname === 'edit-tags' && $screentax === 'pods'){
        wp_enqueue_script( 'open-menu-parent_pod', plugins_url('js/open_admin_menu_pod.js', __FILE__ ), array('jquery') );
    }
    //code for the "Touchpoints" submenu item:
    if($screenname === 'edit' && $posttype === 'touchpoints'){
        wp_enqueue_script( 'open-menu-parent_touchpoints', plugins_url('js/open_admin_menu_touchpoints.js', __FILE__ ), array('jquery') );
    }    
    //code for the "Campaigns" submenu item:
    if($screenname === 'edit-tags' && $screentax === 'campaigns'){
        wp_enqueue_script( 'open-menu-parent_campaigns', plugins_url('js/open_admin_menu_campaigns.js', __FILE__ ), array('jquery') );
    }    
    //code for "Forms" submenu item:
    if($screenname === 'cultivate_page_forms_admin_pg'){
        wp_enqueue_script( 'open-menu-parent_forms', plugins_url('js/open_admin_menu_forms.js', __FILE__ ), array('jquery') );
    }    
    //code for "Custom Fields" submenu item:
    if($screenname === 'cultivate_page_custom_fields_admin_pg'){
        wp_enqueue_script( 'open-menu-parent_custom_fields', plugins_url('js/open_admin_menu_custom_fields.js', __FILE__ ), array('jquery') );
    }        
    //code for "MailChimp Admin" submenu item:
    if($screenname === 'cultivate_page_mailchimp_admin_pg'){
        wp_enqueue_script( 'open-menu-parent_mailchimp_admin', plugins_url('js/open_admin_menu_mailchimp_admin.js', __FILE__ ), array('jquery') );
    }        
    
}//end jafty_set_open_menu function by Ian L. of jafty.com

Now the jQuery Code:

You'll need one .js file with the following contents for each sub-menu item you have in your admin nav. All you have to change in the text that reads "MailChimp Admin" in my example below to the link text of the sub-menu item for ea. separate .js file you use:

(function($) {
    // Close all the other parent menus
    $('.wp-has-current-submenu').removeClass('wp-has-current-submenu');

    // Open your specific parent menu
    $('.toplevel_page_cultivate_settings_pg')//set to menu name for cultivate menu
        .removeClass('wp-not-current-submenu')
        .addClass('wp-has-current-submenu wp-menu-open');
        

            $('.toplevel_page_cultivate_settings_pg .wp-submenu-wrap').find('li').each(function(){
                 var current = $(this);
                    if(current.text()=='MailChimp Admin'){
                        current.addClass('current');
                    }
        });

}(jQuery));

Summary

Nice huh? It took me forever to get this to work, but with the above code you should be able to do it in minutes.

WordPress Custom Post Type Meta Box with Form Validation

So I'm going to cover a lot in a little time in this tutorial so pay close attention and you'll learn fast I hope.

add_car

What You'll Learn

  • How to create a simple WordPress plugin
  • How to create a custom post type in WordPress
  • How to add custom fields to a custom post type
  • How to add meta boxes to wp-admin
  • How to save custom post type's custom fields
  • How to handle form validation for custom meta boxes
  • How to display errors in wp-admin

So while it might seem like a lot to cover, I will demonstrate all of the above points with a simple WordPress plugin that adds a custom post type to WordPress and validates the user's input.

Here are the steps you'll follow:

  1. Start a new plugin
  2. Add a new custom post type
  3. Add meta boxes to a custom post type
  4. Add WordPress Error Handler Functions
  5. Write PHP Function to Save Custom Fields Data Meta Boxes

Step One - Start a new plugin

Create a folder on your desktop, pick a name for your plugin and name the folder accordingly. Lets say for the purpose of making this tutorial, we'll name our plugin "Cars" so we created a folder named "cars" on our desktop. Then add a php file named cars.php and make enter the proper comments at the top of the cars.php file so WordPress will recognize your new plugin. Here's how I did it:

<?php
/**
 * Plugin Name: Cars
 * Plugin URI: http://jafty.com/blog/crash-course-on-wordpress-plugin-development/
 * Description: A custom Car plugin developed for WordPress car websites.
 * Version: 0.0.1
 * Author: Ian L. of Jafty.com
 * Author URI: http://jafty.com
 * License: GPL2
 */

?>

Feel free to change the name , Plugin URI, Description, etc to fit your desires.

Step Two - Add a Custom Post Type

Next we need to add code to cars.php that will create a new Custom Post Type or CPT in wordpress. Here's example code to create the cars CPT:

//Add cars Custom Post Type:
add_action('init', 'create_cars_cpt');
function create_cars_cpt() {
    $labels = array(    
      'name' => _x( 'cars', 'cars' ),
      'singular_name' => _x( 'car', 'cars' ),
      'add_new' => _x( 'Add New car', 'cars' ),
      'add_new_item' => _x( 'Add New car', 'cars' ),
      'edit_item' => _x( 'Edit car', 'cars' ),
      'new_item' => _x( 'New car', 'cars' ),
      'view_item' => _x( 'View car', 'cars' ),
      'search_items' => _x( 'Search cars', 'cars' ),
      'not_found' => _x( 'No cars found', 'cars' ),
      'not_found_in_trash' => _x( 'No cars found in Trash', 'cars' ),
      'parent_item_colon' => _x( 'Parent car:', 'cars' ),
      'menu_name' => _x( 'cars', 'cars' ),
   );
   
   
 $args = array(
      'labels' => $labels,
      'hierarchical' => false,
      'description' => 'cars',
      'supports' => array( 'title', 'author' ),//author adds the author metabox to cars CPT add car/edit car screens.
      'public' => true,
      'show_ui' => true,
      'show_in_menu' => true,
      'show_in_nav_menus' => true,
      'publicly_queryable' => true,
      'exclude_from_search' => false,
      'has_archive' => true,
      'query_var' => true,
      'can_export' => true,
      'rewrite' => array('slug' => 'car'),
      'map_meta_cap'  => true,
   );

    register_post_type( 'cars', $args );
    //flush_rewrite_rules();
}//end create_cars_cpt function

Simply add the above code in green to your cars.php file after the comment area but before then closing PHP tag and save the file.

Step Three - Add simple Meta Box to Our Plugin

Here is my code for reference which you may copy, paste and change as needed:

//Add the Cars Meta Boxes:
add_action( 'add_meta_boxes', 'add_cars_metaboxes' );
function add_cars_metaboxes() {
add_meta_box('create_car_metabox', 'Car Information', 'create_car_metabox', 'cars', 'normal', 'high');
}
      
//############################## Function to create the meta box: ########################
function create_car_metabox($p='') {
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__)) . '" />';

$car_year = get_post_meta($p, '_car_year', true);
$car_make = get_post_meta($p, '_car_make_time', true);
$car_model = get_post_meta($p, '_car_model_time', true);

if(isset($post->ID)){
//get post meta for car:
$car_year = get_post_meta($post->ID, '_car_year', true);
$car_make = get_post_meta($post->ID, '_car_make_time', true);
$car_model = get_post_meta($post->ID, '_car_model_time', true);
}//end if post ID is set

//add HTML for meta box form fields:
?>
<div style="float:left">
<span class='field-head'>Car Year:</span> <select name="car_year">
<option value="none">Select Year</option>
<option value="1990"<?php if($car_year=="1990")echo " selected";?>>1990</option>
<option value="1991"<?php if($car_year=="1991")echo " selected";?>>1991</option>
<option value="1992"<?php if($car_year=="1992")echo " selected";?>>1992</option>
</select>
</div>

<div style="float:left">
<span class='field-head'>Car Make:</span> <select name="car_make">
<option value="none">Select Make</option>
<option value="Ford"<?php if($car_make=="Ford")echo " selected";?>>Ford</option>
<option value="Chevy"<?php if($car_make=="Chevy")echo " selected";?>>Chevy</option>
<option value="Dodge"<?php if($car_make=="Dodge")echo " selected";?>>Dodge</option>
</select>
</div>

<div style="float:left">
<span class='field-head'>Car Model:</span> <select name="car_model">
<option value="none">Select Model</option>
<option value="1990"<?php if($car_model=="1990")echo " selected";?>>1990</option>
<option value="1991"<?php if($car_model=="1991")echo " selected";?>>1991</option>
<option value="1992"<?php if($car_model=="1992")echo " selected";?>>1992</option>
</select>
</div>
<?php

}//end create_car_metabox function to create car tabs

Paste the above code in your cars.php file right after the last line of PHP code but before the closing PHP tag.

Step Four - Add Error Handling Functions to Your Plugin:

Now we need a couple quick functions to handle errors later on, so copy and paste the following code into your cars.php file next just after the last code you added from step three above:

//Next we need two simple error handling functions:
//Error handling function for use with save_car_data function below it:
add_action('admin_notices', 'handle_car_errors');
/**
 * Writes an error message to the screen if error is thrown in save_car_data function
 *
 */
function handle_car_errors() {
  //If there are no errors, then exit the function
  if(!( $errors = get_transient('settings_errors'))) {
    return;
  }
  //Otherwise, build the list of errors that exist in the settings errors
  $message = '<div id="acme-message" class="error below-h2"><p><ul>';
  foreach($errors as $error) {
    $message .= '<li>' . $error['message'] . '</li>';
  }
  $message .= '</ul></p></div><!-- #error -->';
  //Write error messages to the screen
  echo $message;
  //Clear and the transient and unhook any other notices so we don't see duplicate messages
  delete_transient('settings_errors');
  remove_action('admin_notices', 'handle_car_errors');
}

function car_error($slug,$err){
    add_settings_error(
        $slug,
        $slug,
        $err,
        'error'
    );
    set_transient('settings_errors', get_settings_errors(), 30);
}//end car_error function by Ian L. of Jafty.com

Step Five - Save Meta Box Data in WordPress

Now that we have our error handling functions ready, we can write in our function to save the data. You can copy and paste my save_car_data function and it's action hook as follows:

//############### SAVE ALL ABOVE METADATA FROM META BOXES HERE: ##################
//hook to save the meta box data:
//add_action('save_post', 'save_touchpoint_data');
add_action('save_post_cars', 'save_car_data');
    
function save_car_data($post_id) {
    //get the car post's title title and verify it first:
    $ti = get_the_title($post_id);
    //if the title is blank, throw an error:
    if($ti=='')car_error('title_missing','Oops! You forgot to enter a title. Please enter a valid car title and click the update button.');

    //save the car's year:
    //first make sure they picked a year:
    $y = $_POST['car_year'];
    if($y == 'none'){
        car_error('missing_car_year','Opps! You have not selected a year for the car. Please select a year and click the update button to save it afterwards.');
    }else{
    update_post_meta($post_id, '_car_year', strip_tags($y));
    }
    
    //save the car's make:
    //first make sure they picked a make:
    $y = $_POST['car_make'];
    if($y == 'none'){
        car_error('missing_car_make','Opps! You have not selected a make for the car. Please select a make and click the update button to save it afterwards.');
    }else{
    update_post_meta($post_id, '_car_make', strip_tags($y));
    }
    
    //save the car's model:
    //first make sure they picked a model:
    $y = $_POST['car_model'];
    if($y == 'none'){
        car_error('missing_car_model','Opps! You have not selected a model for the car. Please select a model and click the update button to save it afterwards.');
    }else{
    update_post_meta($post_id, '_car_model', strip_tags($y));
    }
}//end save_car_data function

That's all there is to it! Copy and paste the above code into your cars.php file just before the closing PHP tag and save the file, then upload the entire cars folder to your site's plugins directory and navigate to wp-admin and click on "plugins" then find your new plugin and click "activate" to activate it and you will see the new custom post type, "Cars" appear in the main wp-admin nav that runs down the left side of the page.

Screen Shots:

Here is what it will look like if you just try to click on "Publish" when adding a new car without entering any values into the add new car page at all:

errors

Below is what the add new Car screen looks like:

add_car

Summary:

There you have it! A simple plugin with everything you need to get you started creating your own custom post types in WordPress that include custom fields, meta boxes and even error handling code! A WordPress beginner's dream! Good Luck with your next theme or plugin!

Developer’s Guide to Working With Contact Form 7

Today, I had the unfortunate pleasure of working with Contact Form 7. I must admit that it was a little refreshing to see such an under-developed WordPress plugin for a change. I've gotten used to the over-developed monstrosities of today, but CF7 is truly bare-bones when it comes to functionality. It does on basic task and, I assume, does it well, since its such a popular WordPress plugin today. Contact Form 7 allows you to set up a contact form on your website that will email specific information you set up in the form to collect. It is supposed to be simple and sometimes it is. If it works the first time out of the box, you're one of the lucky ones. I had issues. The issues I had were not necessarily the plugin's fault, however, they could have saved me some time with more complete documentation regarding what to do when it fails. My issue ended up being that PHP mail function wasn't functioning, so I downloaded an SMTP plugin to resolve the issue before continuing to develop the code in this guide.

How to retrieve information submitted in Contact Form 7 Forms

The goal of this guide is to teach you how to retrieve data submitted in CF7 forms and work with it in a plugin or from your functions.php file if you prefer it that way.

Why Retrieve Data from Contact Form 7 Forms?

There are a lot of good answers to this question, but it basically depends on your individual needs and desires. The best answer perhaps is to save the form data in a database or log file because CF7 doesn't store any data from form submissions! I've heard there are plugins or add-ons for CF7 that enable CF7 to store it's data in a database, but for the sake of learning how to retrieve data, we won't be using one of those plugins today. Actually, we won't even store the info in a database. Everybody should know how to do that if they are advanced enough to be attempting this guide, so we will save form data to a log file instead, just because, as far as I know, there is no guide available that tells you how to do that as of the time I am writing this guide.

Okay that's enough on why, you can think of your own reason why....let's get to the how!

Retrieving Data From CF7 Forms

The first thing we need to accomplish is to hook into the form when it is submitted somehow. I've found that the action hook named "wpcf7_before_send_mail" works great for this purpose. Here is how to use wpcf7_before_send_mail:

add_action( 'wpcf7_before_send_mail', 'process_contact_form_data' );
function process_contact_form_data( $contact_form ){

}

...that is your basic action and call back function set up. Now all we need is to add some code inside of the empty process_contact_form_data function. We need to gather data submitted in the Contact Form 7 form, so let's look at how we can do that, shall we?

An integral class used in retrieving form data since CF7 Version 3.9 is known as the "WPCF7_Submission" class which includes the "get_instance()" method used to fetch data arrays. To be complete you should check for the class and then use get_instance() to fetch the data like this:

function process_contact_form_data( $contact_form ){

if (!isset($contact_form->posted_data) && class_exists('WPCF7_Submission')) {
    $log .= "posted data set and class exists!\n";
        $submission = WPCF7_Submission::get_instance();
        if ($submission) {
            $log .= "submission exists!\n";
            $formdata = $submission->get_posted_data();
        }
    }

}//end process_contact_form_data function

What the above code does is puts the posted form data into an array named $formdata. To get a specific form field's data you need to use the field's name attribute as a key to the $formdata array. For example, if you used the default CF7 form setup, you would access the submitted name, email, subject and message like this:

$name = $formdata['your-name'];

$email= $formdata['your-email'];

$subj = $formdata['your-subject'];

$name = $formdata['your-message'];

The above code would go inside the above function just before the closing bracket, then you'll need code to write those variables to a log file as we discussed earlier. The basic code to write to a file from PHP looks like this:

$myFile = "/complete/path/cf7_log.txt";
$fh2 = fopen($myFile, 'a') or die("can't open file to append");
$stringData = "form ID: $form_id\n name:$name\n email: $email\n $log\n\n";
fwrite($fh2, $stringData);
fclose($fh2);

Okay! Now we just have to put all the pieces together inside the process_contact_form_data PHP function inside of your plugin file or functions.php file. To keep things safe, I suggest making your own little plugin for this, so that's what I'll do next, create a single file plugin that simply writes CF7 form data to a log file inside the plugin's main folder. Let's call our plugin CF7_logger.

You can easily make the plugin described by piecing together the code snippets in this guide, or you can purchase the entire tested and debugged version from me by emailing linian11@yahoo.com. Good Luck!

 

How to Send SMS Text Messages From PHP

In this PHP tutorial, I'll be showing you how to send text messages to cell phones from a website or app using PHP with a simple HTML form to collect the data. The only drawback to sending messages from PHP is that you typically need to know the receiving party's cell phone carrier in addition to their phone number. The only existing method of getting around having to know the person's cell phone carrier is to use a paid service to send SMS messages such as an SMSC or Short Message Service Center. One provider of SMS services is https://www.twilio.com/.

What are your SMS messaging needs?

This is an important question you should answer before proceeding because if you need to be able to send text messages  with just a phone number and the message content, then you'll need an SMSC like Twilio, otherwise, if you don't mind making the user enter their Cell Phone Carrier name in addition to their phone number in a form to send a text message to them, then the free solution I'm about to show you will work fine for you.

Sending Text Messages From PHP

The basic high level steps to building an application to send out text messages from a web form are as follows:

  1. Built an HTML form that submits to a PHP processing script and that collects the receiving party's phone number, cell carrier name and the text message content.
  2. Create the PHP processing script to receive and process the information gathered in the form and send out the text message, using an email service, to the receiving party.

The entire process in it's simplest form is outlined below:

Write the HTML form. I created a folder named "SMS" and put a new PHP file named "index.php" inside the folder, then added the HTML for the text messaging form as you see here:

<form method="post" action="">
Phone No.: <input type="text" id="ph" name="ph" value="1231231234" /><br />
<br />
Carrier: <select id="ca" name="ca">
<option value="">[Select a Provider]</option><option value="">--Popular Providers--</option><option value="alltel">Alltel Wireless</option>
<option value="@att.txt.net">AT&amp;T</option>
<option value="@myboostmobile.com">Boost Mobile</option>
<option value="@sms.mycricket.com">Cricket</option>
<option value="@messaging.nextel.com">Nextel</option>
<option value="@messaging.sprintpcs.com">Sprint</option>
<option value="@tmomail.net">T-Mobile / Voice Stream</option>
<option value="@tmomail.net">TracFone</option>
<option value="@vtext.com">Verizon Wireless</option>
</select>
<br />
<br />
<textarea rows="5" cols="65" id="msg" name="msg"></textarea>
<br />
<input type="submit" id="sbtsms" name="sbtsms" value="Send Text!" /><br />

</form>

Above is your HTML form, next write some PHP code to process the above form like so:

<?php
if(isset($_POST['ca'])){//if info was submitted, send sms msg:
$ca='';
$ph = $_POST['ph'];
$ca = $_POST['ca'];
$msg = $_POST['msg'];

//if carrier is still blank, set the default carrier(verizon is the most used carrier in the U.S., so....:
if($ca=='')$ca='@vtext.com';

//combine the phone number and the carrier to make the email address to send SMS messages to:
$send_to = $ph.$ca;
echo "Attempting to reach $ph via $ca carrier.....<br />";
echo "Sending Message to $send_to:<br />$msg<hr />";
$sent_sms = mail($send_to, '', $msg);
if($sent_sms){
echo "<h2 style='color:lime'>Message Sent!</h2>";
}else{
echo "<h3 style='color:red'>Oops! Something went wrong, try again later. Make sure you selected the right carrier and phone number.</h3>";
}
}//end if info was submitted, send msg
?>

...the above code goes right after the </form> tag from above, then save the file as sms.php and upload it to your server and try to send yourself a message. If you use a different carrier than the ones provided in the code, you may need to add some options. A complete list of carriers can be downloaded online from https://davidwalsh.name/demo/SMS-Carriers.pdf

Here is a ready to copy and paste version you can simply copy all the below code into a file and save it as a .php file and it should work out of the box for the carriers listed in the provided dropdown:

<!DOCTYPE html>
<html>
<head>
<title>SMS via PHP</title>
</head>
<body>
<h1>Send Text Messages Online for Free!</h1>
<p>Yes, you can send SMS or Text messages online for free using PHP and sendmail. You simply have to provide all of the information requested in the below form and click the send text button to deliver it to the phone number you entered. You must know the receiving party's phone carrier for this to work however.</p><p>Tip: you can usually get the carrier of someone's phone by looking at an email they have sent you and reading the part after the @ symbol in the "From" email in the header of the email you received.</p>

<form method="post" action="">
Phone No.: <input type="text" id="ph" name="ph" value="1231231234" /><br />
<br />
Carrier: <select id="ca" name="ca">
<option value="">[Select a Provider]</option><option value="">--Popular Providers--</option><option value="alltel">Alltel Wireless</option>
<option value="@att.txt.net">AT&amp;T</option>
<option value="@myboostmobile.com">Boost Mobile</option>
<option value="@sms.mycricket.com">Cricket</option>
<option value="@messaging.nextel.com">Nextel</option>
<option value="@messaging.sprintpcs.com">Sprint</option>
<option value="@tmomail.net">T-Mobile / Voice Stream</option>
<option value="@tmomail.net">TracFone</option>
<option value="@vtext.com">Verizon Wireless</option>
</select>
<br />
<br />
<textarea rows="5" cols="65" id="msg" name="msg"></textarea>
<br />
<input type="submit" id="sbtsms" name="sbtsms" value="Send Text!" /><br />

</form>

<?php
if(isset($_POST['ca'])){//if info was submitted, send sms msg:
$ca='';
$ph = $_POST['ph'];
$ca = $_POST['ca'];
$msg = $_POST['msg'];

//if carrier is still blank, set the default carrier(verizon is the most used carrier in the U.S., so....:
if($ca=='')$ca='@vtext.com';

//combine the phone number and the carrier to make the email address to send SMS messages to:
$send_to = $ph.$ca;
echo "Attempting to reach $ph via $ca carrier.....<br />";
echo "Sending Message to $send_to:<br />$msg<hr />";
$sent_sms = mail($send_to, '', $msg);
if($sent_sms){
    echo "<h2 style='color:lime'>Message Sent!</h2>";
}else{
    echo "<h3 style='color:red'>Oops! Something went wrong, try again later. Make sure you selected the right carrier and phone number.</h3>";
}
}//end if info was submitted, send msg
?>

</body>
</html>

Taking it further

The main drawback to this method is that you have to also know the cell phone carrier, but I've thought of a way to overcome that with a bit of extra coding.  I found this site that takes the phone number in three parameters so for my business line,(234) 650-2011, it would be like this:

http://fonefinder.net/findome.php?npa=234&nxx=650&thoublock=2011

I plan to write a PHP script to resolve the address and scrape the results to get the carrier name. It will be a little complicated because you'll need to get the carrier name and then translate it into the actual email for ea. carrier, but it is definitely possible with some work.

Summary:

That's all there is to it! You can definitely improve upon this version of course as it is just meant to get you started. There is no form authentication and only very limited cell phone carriers listed in the dropdown, but the resource is provided to add more carriers from https://davidwalsh.name/demo/SMS-Carriers.pdf, so feel free to build onto what I've started here and let us know what improvements you've made in a comment so others can learn from it!

 

How to Open and Close Windows with JavaScript from Parent and Child

Today I wasted a couple hours trying to figure out how to close a window that had been opened from a parent page with a button in the child window. I wrote this quick JavaScript tutorial on how to open and close windows from parent and child in hopes that it will help someone else figure it out faster than I did.

To keep it simple, we will use two HTML files in this example and we'll call them open_close_window.html and popup.html where open_close_window.html will be the parent and popup.html will be the child pop up window. open_close_window.html, the parent, will include two JS functions and a button while the child, popup.php will include nothing but a button to close itself. What I found a little odd was that in order to close the child window from within itself, I had to call a function from the parent. Here's how it is done. Below is the full contents of both files:

open_close_window.html content:

<html>
<head>
<script>
var myWin;
function openWin(){
myWin = window.open("popup.html", "myWindow", 'width=600,height=300');
}//end openWin JS function

function closeWin(){
myWin.close();
}//end closeWin JS function
</script>
</head>
<body>
<button type="button" onclick="openWin();">Open Window</button>
</body>
</html>

Notice that I set the var myWin in the first line of the JavaScript code above. It will not work if you do not place the myWin variable in the global scope like this. Also you can not simply name the window in the window.open function call like I thought I could at first, you have to use a variable to reference the window when closing it.

popup.html content:

<html>
<head>
</head>
<body>
<button type="button" onclick="opener.closeWin();">Close Window</button>
</body>
</html>

Summary

I hope you can see how this all works from this simple demonstration. You don't even need to upload the two files to a web server to test them since they are HTML files, simply place both on your desktop and open the parent, open_close_window.html from there and see how you can click the button to open the child window and then click the child's button to close itself by calling a close function in the parent. Odd, but that's how it's done!

Understanding ARIA Click Button to Show or Hide Content Example Code

Understanding ARIA

ARIA stands for "Accessible Rich Internet Applications". Also known as the WAI-ARIA standard, it is a standard developed to help coders to provide proper semantics for custom widgets and to make them accessible, usable, and interoperable with assistive technologies for people with disabilities. To be clear, ARIA doesn't add functionality to an object. It adds roles and states that assist in identifying the intent and state of an object. However, usually JavaScript code is still needed to add any dynamic action to that object. I state this clearly at the top of this post because at first, I was under the impression that ARIA also added certain functionalities to HTML objects and was seriously disappointed when I found out otherwise. For example, when ARIA is used on a button that hides and shows content in a div, it only defines the roles and states of the button and corresponding div. JavaScript is still needed to do that work of hiding and showing the div in question.

Example Code

Here is an example of correctly implementing ARIA controls when making a button that hides and shows a div on the click of your mouse. It also binds the space bar and enter key to the div as well, so pressing either of those keys toggles the visibility of the div as well. Without any further ado, the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Aria Examples</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
div.topic {
    display: none;
    margin-bottom: 1em;
    padding: .25em;
    border: black thin solid;
    background-color: #EEEEFF;
    width: 40em;
}
</style>
</head>
<body>

<p class="button">
    <button id="button1" class="buttonControl" aria-controls="t1" aria-expanded="false"><span>Show</span> Topic 1</button>
</p>

<div id="t1" class="topic" role="region" tabindex="-1" >
    Topic 1 is all about being Topic 1 and may or may not have anything to do with other topics.
</div>

<script>
$(document).ready(function() {

   var hs1 = new hideShow('button1');
  // var hs2 = new hideShow('button2');
  // var hs3 = new hideShow('button3');
  // var hs4 = new hideShow('button4');
 
}); // end ready()

//
// function hideShow() is the constructor for a hideShow widget. it accepts the html ID of
// an element to attach to.
//
// @param(id string) id is the html ID of the element to attach to
//
// @return N/A
//
function hideShow(id) {

   this.$id = $('#' + id);
   this.$region = $('#' + this.$id.attr('aria-controls'));

   this.keys = {
               enter: 13,
               space: 32
               };

   this.toggleSpeed = 100;

   // bind handlers
   this.bindHandlers();

} // end hidShow() constructor

//
// Function bindHandlers() is a member function to bind event handlers to the hideShow region
//
// return N/A
//
hideShow.prototype.bindHandlers = function() {

   var thisObj = this;

   this.$id.click(function(e) {

      thisObj.toggleRegion();

      e.stopPropagation();
      return false;
   });
}

//
// Function toggleRegion() is a member function to toggle the display of the hideShow region
//
// return N/A
//
hideShow.prototype.toggleRegion = function() {

      var thisObj = this;

    // toggle the region
    this.$region.slideToggle(this.toggleSpeed, function() {

      if ($(this).attr('aria-expanded') == 'false') { // region is collapsed

        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'true');

        // move focus to the region
        $(this).focus();

        // update the button label
        thisObj.$id.find('span').html('Hide');

      }
      else { // region is expanded

        // update the aria-expanded attribute of the region
        $(this).attr('aria-expanded', 'false');

        // update the button label
        thisObj.$id.find('span').html('Show');
      }
    });

} // end toggleRegion()
</script>
</body>
</html>

Thank you oaa-accessibility.org for providing me with enough knowledge to create and use the above example! They have the best example code for ARIA usage that I could find online after many Google searches. See their complete list of example ARIA examples at http://oaa-accessibility.org/

ARIA and WordPress

I noticed ARIA controls for the first time in the header.php file for my WordPress theme. I was trying to fix a mobile navigation menu and thought couldn't find the code that makes the menu appear on mobile devices when the button is clicked and thought ARIA had something to do with it. I was basically wrong. ARIA code was only present to mark the navigation menu and make it's role and states readily accessible. It is after all an accessibility feature.

Summary

So ARIA and the WAI-ARIA standard are used to enable more accessible HTML markup for disabled people. While it is a great initiative, it doesn't add much dynamic functionality to your HTML objects, JavaScript is still needed for that. ARIA combined with HTML, CSS and JavaScript can be used to make accessible web pages more user-friendly.

How to Add Custom Fields to WordPress Navigation Menu Items

The task of adding custom fields to WordPress navigation menus has come up a few times in my work, so I figured I should document the process which I have learned since it is fairly complex and not very well documented on the internet to this date. Kudos to those of you who have figured this out and documented it because it is one of the more advanced tasks involving WordPress that I have had to do. I am not sure why WordPress made it so complex to alter the navigation menu infrastructure, but to be a true WordPress expert, you do need to learn to work with it, so I aim to help others learn, as I have, how to manipulate the WordPress navigation menus with as much ease as possible.

This is by far one of the more advanced tutorials for WordPress, so if you don't feel like going through all of the steps below. I've already made a plugin for this that will be for sale on my site. If you want to get an advance copy of it email me at linian11@yahoo.com and I can help you out.

Adding custom Fields to WordPress Navigation Menu Items

To be perfectly clear, here is a screenshot of the default menu editing screen after I made my initial top navigation menu for my site, Jafty.com with no added custom fields:

nav1

In contrast, here is the same screen under appearance/menus after I have added two custom fields to it using the methods I'll describe below:

nav2

Notice in the above image, the addition of the "Icon URL" and "Custom Field #2" fields. These I added with my custom plugin. Read on to find out how to add similar fields and how to access them or display them on the front-end of your site.

On the front-end, I added two icons to the menu real quick so you can see what it looks like:

iconnav

The above image is a sub nav that pops up when you click on "Projects" and I added icons to the first two sub-links using the new "icon URL" field added with the method I'm about to show you...

THE CODE:

So to accomplish this, I started a new plugin called "Jafty Top Nav". I made a folder named jafty-top-nav and a file inside it named jafty-top-nav.php with the following contents:

<?php
/**
* Plugin Name: Jafty Top Nav
* Plugin URI: http://jafty.com/
* Description: A Plugin that adds a custom top navigation menu to WordPress. This also adds the icon menu option to the WordPress admin, allowing one to select an icon to appear before submenu items in submenu dropdowns.
* Version: 1.0
* Author: Ian L. of Jafty.com
* Author URI: http://jafty.com
* License: GPL2
*/

//adds the Primary Jafty Menu location to wp-admin:
add_action('after_setup_theme', 'register_jafty_menu');
function register_jafty_menu(){
register_nav_menu('jafty-top-nav', __('Primary Jafty Menu', 'jafty-top-nav'));
}

//includes the library used to add custom fields to menu items:
require_once dirname( __FILE__ ) . '/menu-item-custom-fields/menu-item-custom-fields.php';

//include 'http://jafty.com/wp-content/plugins/jafty-top-nav-plugin/menu-item-custom-fields.php';
include 'menu-item-custom-fields.php';

class Jafty_Walker extends Walker_Nav_Menu {

// Displays start of an element. E.g '<li> Item Name'
// @see Walker::start_el()
function start_el(&$output, $item, $depth=0, $args=array(), $id = 0) {
$object = $item->object;
$type = $item->type;
$title = $item->title;
$description = $item->description;
$permalink = $item->url;
$icon = get_post_meta($item->ID, 'menu-item-icon-url', true);
$output .= "<li class='" .  implode(" ", $item->classes) . "'>";

//Add SPAN if no Permalink
if( $permalink && $permalink != '#' ) {
$output .= '<img src="'.$icon.'" style="width:25px;float:left;margin-right:10px;margin-top:3px" /><a href="' . $permalink . '">';
} else {
$output .= '<span>';
}

$output .= $title;
if( $description != '' && $depth == 0 ) {
$output .= '<small class="description">' . $description . '</small>';
}
if( $permalink && $permalink != '#' ) {
$output .= '</a>';
} else {
$output .= '</span>';
}
}
}

?>

The most important portion of code above I put in red text. That is where I retrieve one of the custom fields in order to display it in the nav menu. You will notice below that I named the field "icon-url" in the "jafty-custom-nav-fields.php" file and above I reference it with "menu-item-icon-url", so take notice of this so you don't cause an error.

Then I created a second file inside the same "jafty-top-nav-plugin" folder named "jafty-custom-nav-fields.php" which has the following code:

<?php
/**
* Custom menu items metadata:
*/
class Jafty_Custom_Nav_Fields {

/**
* Holds our custom fields
*/
protected static $fields = array();

/**
* Initialize plugin
*/
public static function init() {
add_action( 'wp_nav_menu_item_custom_fields', array( __CLASS__, '_fields' ), 10, 4 );
add_action( 'wp_update_nav_menu_item', array( __CLASS__, '_save' ), 10, 3 );
add_filter( 'manage_nav-menus_columns', array( __CLASS__, '_columns' ), 99 );

self::$fields = array(
//note that menu-item- gets prepended to field names
//i.e.: field-01 becomes menu-item-field-01
//i.e.: icon-url becomes menu-item-icon-url
'icon-url' => __( 'Icon URL:', 'jafty_custom_nav_fields' ),
'field-02' => __( 'Custom Field #2', 'jafty_custom_nav_fields' ),
);
}

/**
* Save custom field value
*
* @wp_hook action wp_update_nav_menu_item
*
* @param int   $menu_id         Nav menu ID
* @param int   $menu_item_db_id Menu item ID
* @param array $menu_item_args  Menu item data
*/
public static function _save( $menu_id, $menu_item_db_id, $menu_item_args ) {
if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) {
return;
}

check_admin_referer( 'update-nav_menu', 'update-nav-menu-nonce' );

foreach ( self::$fields as $_key => $label ) {
$key = sprintf( 'menu-item-%s', $_key );

// Sanitize
if ( ! empty( $_POST[ $key ][ $menu_item_db_id ] ) ) {
// Do some checks here...
$value = $_POST[ $key ][ $menu_item_db_id ];
} else {
$value = null;
}

// Update
if ( ! is_null( $value ) ) {
update_post_meta( $menu_item_db_id, $key, $value );
echo "key:$key<br />";
} else {
delete_post_meta( $menu_item_db_id, $key );
}
}
}

/**
* Print field
*
* @param object $item  Menu item data object.
* @param int    $depth  Depth of menu item. Used for padding.
* @param array  $args  Menu item args.
* @param int    $id    Nav menu ID.
*
* @return string Form fields
*/
public static function _fields( $id, $item, $depth, $args ) {
foreach ( self::$fields as $_key => $label ) :
$key   = sprintf( 'menu-item-%s', $_key );
$id    = sprintf( 'edit-%s-%s', $key, $item->ID );
$name  = sprintf( '%s[%s]', $key, $item->ID );
$value = get_post_meta( $item->ID, $key, true );
$class = sprintf( 'field-%s', $_key );
?>
<p class="description description-wide <?php echo esc_attr( $class ) ?>">
<?php printf(
'<label for="%1$s">%2$s<br /><input type="text" id="%1$s" class="widefat %1$s" name="%3$s" value="%4$s" /></label>',
esc_attr( $id ),
esc_html( $label ),
esc_attr( $name ),
esc_attr( $value )
) ?>
</p>
<?php
endforeach;
}

/**
* Add our fields to the screen options toggle
*
* @param array $columns Menu item columns
* @return array
*/
public static function _columns( $columns ) {
$columns = array_merge( $columns, self::$fields );

return $columns;
}
}
Jafty_Custom_Nav_Fields::init();
?>

The most important part of the above code is the field names. I changed the text color for the field names to red. However you also need to be aware that you have to append "menu-icon-url" to the field names when you go to fetch them in your header.php theme file later on so icon-url would become icon-url-menu-icon-url" for example...see the note above the code as well.

Then I used two files created by  Dzikri Aziz and put them in their own folder named "menu-item-custom-fields" inside of the jafty-top-nav folder. Here are the names and content of those two files if you are copy and pasting as we go:

menu-item-custom-fields.php content:

<?php

/**
 * Menu Item Custom Fields
 */

if ( ! class_exists( 'Menu_Item_Custom_Fields' ) ) :
    /**
    * Menu Item Custom Fields Loader
    */
    class Menu_Item_Custom_Fields {

        /**
        * Add filter
        *
        * @wp_hook action wp_loaded
        */
        public static function load() {
            add_filter( 'wp_edit_nav_menu_walker', array( __CLASS__, '_filter_walker' ), 99 );
        }

        /**
        * Replace default menu editor walker with ours
        *
        * We don't actually replace the default walker. We're still using it and
        * only injecting some HTMLs.
        *
        * @since   0.1.0
        * @access  private
        * @wp_hook filter wp_edit_nav_menu_walker
        * @param   string $walker Walker class name
        * @return  string Walker class name
        */
        public static function _filter_walker( $walker ) {
            $walker = 'Menu_Item_Custom_Fields_Walker';
            if ( ! class_exists( $walker ) ) {
                require_once dirname( __FILE__ ) . '/walker-nav-menu-edit.php';
            }

            return $walker;
        }
    }
    add_action( 'wp_loaded', array( 'Menu_Item_Custom_Fields', 'load' ), 9 );
endif; // class_exists( 'Menu_Item_Custom_Fields' )

// Uncomment the following line to test this plugin
#require_once dirname( __FILE__ ) . '/doc/menu-item-custom-fields-example.php';

walker-nav-menu-edit.php content:

<?php

/**
 * Custom Walker for Nav Menu Editor
 *
 */
class Menu_Item_Custom_Fields_Walker extends Walker_Nav_Menu_Edit {

    /**
     * Start the element output.
     *
     * We're injecting our custom fields after the div.submitbox
     *
     * @see Walker_Nav_Menu::start_el()
     * @since 0.1.0
     * @since 0.2.0 Update regex pattern to support WordPress 4.7's markup.
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param object $item   Menu item data object.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   Menu item args.
     * @param int    $id     Nav menu ID.
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $item_output = '';

        parent::start_el( $item_output, $item, $depth, $args, $id );

        $output .= preg_replace(
            // NOTE: Check this regex from time to time!
            '/(?=<(fieldset|p)[^>]+class="[^"]*field-move)/',
            $this->get_fields( $item, $depth, $args ),
            $item_output
        );
    }

    /**
     * Get custom fields
     *
     * @access protected
     * @since 0.1.0
     * @uses add_action() Calls 'menu_item_custom_fields' hook
     *
     * @param object $item   Menu item data object.
     * @param int    $depth  Depth of menu item. Used for padding.
     * @param array  $args   Menu item args.
     * @param int    $id     Nav menu ID.
     *
     * @return string Form fields
     */
    protected function get_fields( $item, $depth, $args = array(), $id = 0 ) {
        ob_start();

        /**
         * Get menu item custom fields from plugins/themes
         *
         * @since 0.1.0
         * @since 1.0.0 Pass correct parameters.
         *
         * @param int    $item_id  Menu item ID.
         * @param object $item     Menu item data object.
         * @param int    $depth    Depth of menu item. Used for padding.
         * @param array  $args     Menu item args.
         * @param int    $id       Nav menu ID.
         *
         * @return string Custom fields HTML.
         */
        do_action( 'wp_nav_menu_item_custom_fields', $item->ID, $item, $depth, $args, $id );

        return ob_get_clean();
    }
}

Then finally, the last thing you have to do is edit your header.php file for your current WordPress theme to include something like this where your to site navigation code appears:

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Jafty Menu', 'jafty-theme' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-jafty-menu', 'walker' => new Jafty_Walker() ) ); ?>
        </nav><!-- #site-navigation -->

Summary

That's all there is to it. I know it's a lot, but if you start out by copy and pasting my code and following instructions carefully to recreate the above jafty-top-nav plugin, it should work fine. Afterwards, you can edit it to fit your own personal requirements as needed. Good luck!

 

I want to give credit for the help I got on this technique, but frankly I saw the same code in different areas online and don't know which is the correct site to link to, but in one of the files, the author gave his name, which was Dzikri Aziz, so I'd like to extend my thanks to Dzikri Aziz for helping me bring this code to life. If I find a link I'll post it or if anyone knows it, please comment and I'll make sure he gets the appropriate credit for his portion of the code I used in this article.

Get the Nth Weekday of Any Month and Year with JavaScript

In today's challenge for a client of mine, I had to write a JavaScript function that returns the Nth Weekday of any given month and year. For example it can tell you what the 1st Monday is in December, 2017. It can do past, present and future so if you needed to know the 4th Friday in August of 1910, this function can tell you. If you need to know what the second Sunday of January 2050 is going to be, this JavaScript function will tell you!

Without any further time wasting, here is the JavaScript code that can determine the first, second, third, fourth or even fifth Monday, Tuesday, Wednesday, Thursday, Friday, Saturday or Sunday for any month and year you pass it:

JavaScript Code Returns Nth Weekday for any Given Month & Year:

<script>
/* JavaScript getMonthlyWeekday Function:
 * Written by Ian L. of Jafty.com
 *
 * Description:
 * Gets Nth weekday for given month/year. For example, it can give you the date of the first monday in January, 2017 or it could give you the third Friday of June, 1999. Can get up to the fifth weekday of any given month, but will return FALSE if there is no fifth day in the given month/year.
 *
 *
 * Parameters:
 *    n = 1-5 for first, second, third, fourth or fifth weekday of the month
 *    d = full spelled out weekday Monday-Friday
 *    m = Full spelled out month like June
 *    y = Four digit representation of the year like 2017
 *
 * Return Values:
 * returns 1-31 for the date of the queried month/year that the nth weekday falls on.
 * returns false if there isn't an nth weekday in the queried month/year
*/
function getMonthlyWeekday(n,d,m,y){
var targetDay, curDay=0, i=1, seekDay;
    if(d=="Sunday") seekDay = 0;
    if(d=="Monday") seekDay = 1;
    if(d=="Tuesday") seekDay = 2;
    if(d=="Wednesday") seekDay = 3;
    if(d=="Thursday") seekDay = 4;
    if(d=="Friday") seekDay = 5;
    if(d=="Saturday") seekDay = 6;
while(curDay < n && i < 31){
    targetDay = new Date(i++ + " "+m+" "+y);
    if(targetDay.getDay()==seekDay) curDay++;
}
if(curDay==n){
targetDay = targetDay.getDate();
return targetDay;
}else{return false;}
}//end getMonthlyWeekday JS function
</script>
<a href="JavaScript:var dy = getMonthlyWeekday(1,'Sunday','March', 2017);alert('1st Sunday in March, 2017 falls on March, '+dy);">Get first sunday in March, 2017</a><br />
<a href="JavaScript:var dy = getMonthlyWeekday(2,'Sunday','March', 2017);alert('2nd Sunday in March, 2017 falls on March, '+dy);">Get second sunday in March, 2017</a><br />
<a href="JavaScript:var dy = getMonthlyWeekday(5,'Sunday','March', 2017);alert('5th Sunday in March, 2017 falls on March, '+dy);">Get fifth sunday in March, 2017</a><br />
<a href="JavaScript:var dy = getMonthlyWeekday(4,'Friday','April', 2017);alert('4th Friday in April, 2017 falls on April, '+dy);">Get 4th Friday in April, 2017</a><br />
<a href="JavaScript:var dy = getMonthlyWeekday(5,'Monday','April', 2017);alert('5th Monday in April, 2017 falls on April, '+dy);">Get 5th Monday in April, 2017</a><br />
<a href="JavaScript:var dy = getMonthlyWeekday(3,'Wednesday','October', 1995);alert('3rd Wednesday in October, 1995 falls on October, '+dy);">Get 3rd Wednesday in October, 1995</a><br />
<a href="JavaScript:var dy = getMonthlyWeekday(4,'Wednesday','October', 1995);alert('4th Wednesday in October, 1995 falls on October, '+dy);">Get 4th Wednesday in October, 1995</a><br />
<a href="JavaScript:var dy = getMonthlyWeekday(4,'Wednesday','May', 1975);alert('4rd Wednesday in May, 1975 falls on May, '+dy);">Get 4th Wednesday in May, 1975</a><br />

Summary

That will do the job! All you have to do is copy and paste the above code in green into a blank text file and name it something like weekdays.html or test.html and open it in any web browser to test the code. Then feel free to alter it to fit your exact needs. Have fun!

 

 

 

Including Responsive Videos in WordPress Posts

I've done a lot of things with WordPress to-date, but one thing I haven't done much with is videos. I was commissioned to build a plugin to embed responsive videos into WordPress posts. Naturally I started trying to figure out how to embed a simple Vimeo video into a post, this post right here in fact. I went to Vimeo.com and got the link for one of the videos my client is using. I am going to post just that plain text link on the next line below:

...and presto-magico! WordPress did most of the work for me! As you can see the video showed up just from me copy and pasting the Vimeo URL in the post! For example, I posted "https:// vimeo.com/ 155235235" without the quotes or spaces. I just added spaces so WordPress wouldn't make it a video like it did above.

Therefore, the only task left to me is to make the videos responsive.

How to make videos responsive in WordPress

The most basic method, which you may want to use if you only need to apply this fix to one or two videos on your site,  is to add a wrapper div to your video url when you insert it int o your blog post like this:

<div class="video-wrap"> VIDEO URL GOES HERE! </div>

Then add the following CSS to your theme's main style sheet, style.css:

.video-wrap{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrap iframe, .video-wrap object, .video-wrap embed, .video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

That's all you have to do if you don't mind making manual edits each time you add a video to your blog.

Making a Simple WordPress Plugin to Make Videos Responsive

The logical option to use if you regularly embed videos in your WordPress site, is to create a very simple plugin that hooks into WordPress while it embeds videos and automatically wraps the embed code inside of a div and then applies style to that div to accomplish the same effect we did above without having to make changes each time we add a new video. Here is how:

Add the following code to a new php file and name it whatever you want to call your custom plugin or call it jafty-responsive-video-embedder as I did here:

<?php
/*
Plugin Name: Jafty Responsive Video Embedder
Plugin URI: http://jafty.com

Description: Adds a wrapper div around embedded videos and applies mobile style to them so they are responsive at all times regardless of the surrounding HTML.

Author: Ian L. of Jafty.com
Author URI: http://jafty.com

Version: 1.0.0

License: GNU General Public License v2.0
License URI: http://www.opensource.org/licenses/gpl-license.php
*/

//Code to make Videos more responsive:
function make_video_responsive( $html ) {
    return '<div class="video-wrap">' . $html . '</div>';
}
 
add_filter( 'embed_oembed_html', 'make_video_responsive', 10, 3 );
add_filter( 'video_embed_html', 'make_video_responsive' ); // Jetpack

function add_video_css(){
wp_enqueue_style("videocss", "/wp-content/plugins/outer-gain-engine/video.css");
}

add_action('wp_enqueue_scripts', 'add_video_css');

?>

Then create a file named video.css and copy and paste the follocing CSS code into it:

.video-wrap{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrap iframe, .video-wrap object, .video-wrap embed, .video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Summary

That's all there is to it. A simple, yet handy, plugin or fix for your WordPress videos. Feel free to modify the code to fit your individual needs. Good Luck!

How to Use jQuery UI Elements In a WordPress Plugin or Theme

Today I found myself once again needing to use jQuery in a new WordPress plugin I am developing for a client. I won't lie, I often dread having to use jQuery within WordPress. It has been getting easier however, especially since WordPress version 3.3.x when they made many of the jQuery UI libraries part of the WordPress core. The trick is knowing that and knowing how to use them! For example I didn't know about the jQuery UI libraries being part of the WP core until recently, so was just hacking my own jQuery into WordPress. The problem with hacking in a jQuery UI or any other jQuery code, is that it will usually break some other jQuery code in WordPress. Therefore I am putting together a quick reference guide on how to include jQuery and jQuery UI scripts in WordPress plugins and themes for my own reference and for other developers who can profit from this information.

First, here is a list of 35 jQueryUI elements already available within WordPress as of version 3.3.x:

Name: Enqueue Value: Dependency:
jQuery UI Core jquery-ui-core jquery
jQuery UI Widget jquery-ui-widget jquery
jQuery UI Accordion jquery-ui-accordion jquery
jQuery UI Autocomplete jquery-ui-autocomplete jquery
jQuery UI Button jquery-ui-button jquery
jQuery UI Datepicker jquery-ui-datepicker jquery
jQuery UI Dialog jquery-ui-dialog jquery
jQuery UI Draggable jquery-ui-draggable jquery
jQuery UI Droppable jquery-ui-droppable jquery
jQuery UI Menu jquery-ui-menu jquery
jQuery UI Mouse jquery-ui-mouse jquery
jQuery UI Position jquery-ui-position jquery
jQuery UI Progressbar jquery-ui-progressbar jquery
jQuery UI Selectable jquery-ui-selectable jquery
jQuery UI Resizable jquery-ui-resizable jquery
jQuery UI Selectmenu jquery-ui-selectmenu jquery
jQuery UI Sortable jquery-ui-sortable jquery
jQuery UI Slider jquery-ui-slider jquery
jQuery UI Spinner jquery-ui-spinner jquery
jQuery UI Tooltips jquery-ui-tooltip jquery
jQuery UI Tabs jquery-ui-tabs jquery
jQuery UI Effects jquery-effects-core jquery
jQuery UI Effects – Blind jquery-effects-blind jquery-effects-core
jQuery UI Effects – Bounce jquery-effects-bounce jquery-effects-core
jQuery UI Effects – Clip jquery-effects-clip jquery-effects-core
jQuery UI Effects – Drop jquery-effects-drop jquery-effects-core
jQuery UI Effects – Explode jquery-effects-explode jquery-effects-core
jQuery UI Effects – Fade jquery-effects-fade jquery-effects-core
jQuery UI Effects – Fold jquery-effects-fold jquery-effects-core
jQuery UI Effects – Highlight jquery-effects-highlight jquery-effects-core
jQuery UI Effects – Pulsate jquery-effects-pulsate jquery-effects-core
jQuery UI Effects – Scale jquery-effects-scale jquery-effects-core
jQuery UI Effects – Shake jquery-effects-shake jquery-effects-core
jQuery UI Effects – Slide jquery-effects-slide jquery-effects-core
jQuery UI Effects – Transfer jquery-effects-transfer jquery-effects-core

As you can see in the above table, the first 22 items in the list only require jQuery as a dependency. For those, you probably will only need to enqueue the value from the "Enqueue Value" column to make use of the library in your plugin or theme. You often will need to enqueue style for the jQuery library separately as well because as far as I know, WordPress doesn't include many of the styles yet. the last dozen or so in the above table all require jquery-effects-core, so to use those, I believe you'll need to enqueue that as well for them to work. For a complete list of other jQuery scripts that are already within the WordPress core, please visit the following codex page:

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

That page also explains usage of the wp-enqueue-script function to  a degree, but not as detailed as my special-use case described here.

How to Enqueue jQuery UI Elements in WordPress Plugin or Theme

Next I'm explaining how to include a jQuery UI library into your own WordPress plugin or theme. If you're making a plugin, the code below will go into your plugin's main file and if you're working on a theme, then place the code below in the theme's functions.php file. In the following code examples, I'll demonstrate how to include both the jQuery UI element and the corresponding CSS file for using a datepicker in both the front-end and admin areas of WordPress. The code would be the same for any of the UI elements in the above table except that you would of course change the valuse to be enqueued for both the core jQuery file and the CSS file from googleapis.com.

PHP Code to use jQuery UI on the WordPress Front-End

function my_datepicker_function(){
//Enqueue date picker UI from WP core:
wp_enqueue_script('jquery-ui-datepicker');
//Enqueue the jQuery UI theme css file from google:
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('wp_enqueue_scripts', 'my_datepicker_function');

How to add PHP Code to Use jQuery UI on the WordPress Admin or Back-End

The PHP code to include the same datepicker UI in a WordPress back-end, admin page is nearly the same. The only difference is the hook we use in the add_action line at the end of the code is different. For front-end use, we used the wp_enqueue_scripts hook, but for admin use, we will use the admin_enqueue_scripts hook instead. That's all folks!

Then simply include your HTML and  script tag wherever you want to use your datepicker in this case like so:

<div class="wrap">
<input type="text" class="datepicker" name="datepicker" value=""/>
</div>

<script>
jQuery(function() {
    jQuery( ".datepicker" ).datepicker({
        dateFormat : "dd-mm-yy"
    });
});
</script>

Summary

the above example code is just for datepicker UI, but can easily be manipulated for any of the jQuery UI elements in the above table, so experiment and find the one that works for you. You will often need to google the jQuery UI element's name and view an online demo of how it is used without WordPress to get exact code and then simply incorporate the above technique into what you learn. I did this with the sortable UI and it worked great. Good luck!

 

How to Do Something Every Nth Iteration in a PHP Loop

If you're a PHP coder, you are sure to come across a scenario from time to time where you have a PHP loop and you need to execute specific code every other time the loop iterates or every four times the loop iterates etc.

Using the Modulus Operator

The key to making something happen every nth time in a loop is the modulus operator or %.

A common scenario where you would need to do something in a loop every fourth or fifth iteration only is when you are printing a series of HTML elements. Let's pretend we have 12 items in an array and we want to print them in groups of four per line. While printing the array you will need to print the <br /> tag every four iterations if you want four items on each line.  The code inside your PHP loop would look like this:

if($i % 4 == 0){echo "<br />";}

Now let's put this to the test with some test code using the above scenario. Below I fill an array with 12 words and print them out in a loop four per line:

<?php
$words = array('one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve');
$noof = count($words);
$i=0;
for($ii=0;$ii<$noof;$ii++){
    $i++;
    echo $words[$ii];
    echo " ";
    if($i % 4 == 0){echo "<br />";}
}//end for loop
?>

Noticed I used $ii in the for loop and set a second variable, $i for using with the modulus line. This is because $ii will start at zero and we need to start at 1 in this case. The results of the above code would be:

one two three four
five six seven eight
nine ten eleven twelve

Today however, I came across a more complex scenario where I was able to also use the modulus operator to save the day. This time I needed to print items from an array inside of HTML list elements. Lets modify the above scenario using lists instead of line breaks to display the array data:

<?php
$words = array('one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve');
$noof = count($words);
$i=0;
for($ii=0;$ii<$noof;$ii++){
    $i++;
    if($i % 4 == 1)echo "<ul>";
    echo "<li>";
    echo $words[$ii];
    echo "</li>";
    if($i % 4 == 0)echo "</ul>";
}//end for loop
?>

The output of the above PHP code would be:

  1. one
  2. two
  3. three
  4. four
  1. five
  2. six
  3. seven
  4. eight
  1. nine
  2. ten
  3. eleven
  4. twelve

 

The results were four separate ordered lists  as you can see. But how did we do this? Notice the difference in the modulus operator use for the opening <ol> tag and then for the closing </ol> tag.

The tricky part here is we can't use if($i % 4 == 0) on the opening <ol> tag because if you think about it you don't need <ol> printed on 4,8 and 12 which is what if($i % 4 == 0) would produce. In this case, we need to print an opening <ol> tag on iterations 1,5,9 and 13, so we try something else. Here is how I figured this problem out:

First a simple demo of the modulus operator as we first used it:

<?php
$i=0;
for($ii=0;$ii<20;$ii++){
    $i++;
    if($i % 4 == 0)echo "$i<br />";
}//end for loop
?>

The above code results in:

4
8
12
16
20

Which is fine for printing the end </ol> tags, but will not work for printing the opening <ol> tags as I explained earlier, so I tried this instead:

<?php
$i=0;
for($ii=0;$ii<20;$ii++){
    $i++;
    if($i % 4 == 1)echo "$i<br />";
}//end for loop
?>

This time the above code printed out:

1
5
9
13
17

So, if we used a one instead of a zero like if($i % 4 == 1), then it would execute the code in the if statement on iterations 1,5,9 and 13 just as we need! Just for fun, let's see what happens if we use a two instead of zero this time like if($i % 4 == 2). For example:

<?php
$i=0;
for($ii=0;$ii<20;$ii++){
    $i++;
    if($i % 4 == 2)echo "$i<br />";
}//end for loop
?>

This time the results would be:

2
6
10
14
18

so using a 2 to compare 4 modulus with results in the code executing on iterations 2,6,10....etc, but notice in each example where we use 4 as the first number, all the numbers are increments of 4 and when we use zero as the last number we get 4,8,12.... When we use 1 we get 1,5,9.... Finally if we use 2 we get 2,6,10.... From what we have learned I think it's safe to assume that we we used 3, the results would be 3,7,11,15....and so on.

Summary

I hope this article sheds some light on how to use the Modulus operator with PHP. Feel free to experiment by using other numbers in place of where I used 4 each time too! For example, if you want to do something every 5 times instead, you would use something like if($i % 5 == 0). Have fun with it!

 

Building a Custom WordPress Navigation Menu Plugin

This is a semi-advanced WordPress tutorial so you should have a little bit of existing knowledge of WordPress if you want to be able to understand the concepts involved. I will try to make it as easy to follow as possible none-the-less.

We are just going to dive right in a create a new Plugin. I'll be calling the plugin Jafty-Nav, you can follow suit if you wish to keep things simple or give it your own name if you feel comfortable making such changes.

Create a New Plugin

<?php
/**
* Plugin Name: Jafty Top Nav Plugin
* Plugin URI: http://jafty.com/blog/?p=9813
* Description: A Plugin that adds a custom top navigation menu to WordPress.
* Version: 1.0
* Author: Ian L. of Jafty.com
* Author URI: http://jafty.com
* License: GPL2
*/

Register a New Menu Location with WordPress

Add this PHP code to your plugin file you created above:

<?php
add_action('after_setup_theme', 'register_jafty_menu');
function register_jafty_menu(){
  register_nav_menu('jafty-top-nav', __('Primary Jafty Menu', 'jafty-top-nav-plugin'));
}
?>

Now that is actually enough to create a simple plugin. The plugin will add a menu location to wp-admin and that's it, but we'll build on it after we install it. So go ahead and install the plugin by putting it into a folder named "jafty-top-nav-plugin" and naming the file "index.php". Then upload to your WordPress plugins directory. Activate the Jafty Top Nav Plugin then go to your admin and click on "Appearance/Menus" then select the "Manage Locations" tab and you'll see the new menu location your plugin as added to the admin like in the image below.

menuLOC

Placing a new top nav in your theme

The next task is to edit your current WordPress theme to work with the Jafty Top Nav Plugin. You'll need to create a new header file and edit your page, post and/or home page templates to contain your new top navigation menu. Here is how:

  1. Go into your current theme's folder and download a copy of the header.php file to your desktop and rename it header-jafty.php.
  2. open header-jafty.php in notepad and find the section that looks something like this:<nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'outer-gain-dev' ); ?></button>
    <?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
    </nav>
  3. Inside the code within the Nav tag in your header-jafty.php file, change the theme_location value to 'jafty-top-nav' and save the file.
  4. Now upload your header-jafty.php file to your active theme's folder.
  5. Next you'll want to add the new header to your template files, Some templates you might want to do this too are front-page.php, single.php, page.php and any custom page templates in your theme or child theme you might have. The process is very similar for adding the new header to any of the files, so I'll just demonstrate on the home page template file, front-page.php. Open the template file in your notepad and near the top of the code you should see something like this:
    get_header();
    or you may have something like this instead:
    get_template_part('templates/header.php');
    Regardless which you have, replace the line with:
    get_header('jafty');
    and that will call your new header.jafty.php template into the page template so your customized header will be shown.
  6. Save and upload your altered template file and repeat for all necessary page and post templates until you have your new top nav menu at the top of all desired pages and/or posts throughout your entire WordPress site.

Now that we have more control of it, let's customize that ugly top nav!

Customizing the WP Navigation Menu

It's time to get down and dirty with some real-world customization of the top navigation menu in WordPress. We are not just doing some simple CSS changes here, we are talking about a complete rewrite of the navigation system. This is why I went with a plugin for this. Now I had to find what WordPress core functions I could use to alter the menu completely. My goal is to make a menu similar to the one at Stripe.com, which is not a WordPress site by the way. I just love the dynamic drop downs that fade in and out and their use of icons in the sub-menu items. I'll get to how I duplicated all of that later on, first we need to know how to rebuild the entire menu structure because the stripe.com style menu is nothing like a standard WordPress menu. Here's what I figured out:

 

First we need to be able to retrieve our custom navigation links from the WordPress backend. Remember earlier we created a menu location? Well, we need to retrieve the menu assigned to that particular location in WordPress. Therefore the first thing we want to do is make sure there is a menu assigned to the "Primary Jafty Menu". You could pick one from the drop down, but we want to make a new one that is sure to have both main menu items and sub menu items so we can adequately test our menu when it's complete. Therefore we locate the "Primary Jafty Menu" and click the link to the right of it that reads "Use New Menu" as I've circled in red in the below image:

menuLOC2

When creating the new Primary Jafty Menu, give it a name of "Jafty 1". It's best to do everything exactly as I have done just to be sure you don't have any conflicts. You can always change names and such after you have a completed working plugin. When creating the menu, make sure to add at least 2 main menu items with at least 2 sub menu items each so we can test the drop down effects. Here is an image of the one I made for testing. If you don't have enough pages or posts to make that many links, don't worry, just use two real links for the main menu items and click on "custom links" and create outside links for all of your sub menu items as I have done in the below image:

menustructure

In the above image, "site settings" and "Hello world!" represent our two main menu items and the sub links rest below them indented to show their sub-link status. Notice I have "Primary Jafty Menu" checked under "Menu Setings" too. Once you have your menu, be sure you save it. Now we can return to developing our plugin!

Retrieve Menu and Sub Menu Items from WordPress Admin

It is time to develop some custom WordPress code to extract out menu items and sub-menu items from the database. Lucky for us, WordPress has some built-in core functions to assist us. Here is the code I come up with to extract all menu and sub-menu items for the "Jafty Primary Menu" from the database to display them on the front-end:

<?php
      $menuLocations = get_nav_menu_locations(); // Get nav locations
      $menuID = $menuLocations['jafty-top-nav']; //menu assigned to Jafty Primary Menu
      $theNav = wp_get_nav_menu_items($menuID);
                
                    foreach ($theNav as $navItem) {
                        //get the url for the link:
                        $navURL = $navItem->url;
                        //get the nav link text/title:
                        $navTXT = $navItem->title;
                        //Get the nav link's ID:
                        $navID = $navItem->ID;
                        //Get menu item parent(will be 0 if main link or parent ID if it's a sub link):
                        $navParent  = $navItem->menu_item_parent;
                        echo "ID: $navID, $navTXT, $navParent, $navURL<br />";
                    //echo '<li class="has-dropdown gallery" data-content="about"><a href="'.$navURL.'" title="'.$navItem->title.'">'.$navTXT.'</a></li>';
                    }
 ?>

The above code will go in out header file named header-jafty.php. Lets examine the code so you understand what it does.

The first line:

$menuLocations = get_nav_menu_locations(); // Get nav locations

as the comment says afterwards, it gets the navigation menu locations stored in WordPress. We added one of these in the beginning of the tutorial using the register_nav_menu function.

The second line reads:

$menuID = $menuLocations['jafty-top-nav']; //menu assigned to 'Primary Jafty Menu'

This line fetches the ID of the menu currently assigned to the menu location we created in the plugin file, "Primary Jafty Menu". We then use the id in the next line that reads:

$theNav = wp_get_nav_menu_items($menuID);

We now have a WordPress menu object stored in $theNav. If you do a print_r($theNav) command in PHP, you would see that the menu object holds all sorts of information about the menu we created earlier. However, we only need four key pieces of information from the menu object. We need to get:

  1. The Link URL
  2. The Link Text
  3. The Link ID
  4. The Link's Parent ID in case it is a sub-menu item.

We can get the four pieces of information we need using a foreach loop on the $theNav object like so:

     foreach ($theNav as $navItem) {
                        //get the url for the link:
                        $navURL = $navItem->url;
                        //get the nav link text/title:
                        $navTXT = $navItem->title;
                        //Get the nav link's ID:
                        $navID = $navItem->ID;
                        //Get menu item parent(will be 0 if main link or parent ID if it's a sub link):
                        $navParent  = $navItem->menu_item_parent;
                        echo "ID: $navID, $navTXT, $navParent, $navURL<br />";
                    //echo '<li class="has-dropdown gallery" data-content="about"><a href="'.$navURL.'" title="'.$navItem->title.'">'.$navTXT.'</a></li>';
                    }

We now have all the information we need about the menu items after running the above foreach loop on the menu object. We have the link text, URL, ID and Parent ID. It's important to note that the parent ID will always be 0 if the link is a main menu item and we can determine if the link is a sub-menu item if the parent ID is anything other than zero. Then we know which link to put the sub-link under by matching the sub-link's parent ID to the ID of the main link item. Pretty simply really, once you get accustomed to it.

Now we need to open our header-jafty.php file and find the line that reads something similar to:

<?php wp_nav_menu( array( 'theme_location' => 'jafty-top-nav', 'menu_id' => 'primary-menu' ) ); ?>

And replace it with the code we wrote above:

<?php
$menuLocations = get_nav_menu_locations(); // Get nav locations
$menuID = $menuLocations['jafty-top-nav']; // Get the *primary* menu ID
$theNav = wp_get_nav_menu_items($menuID);

foreach ($theNav as $navItem) {
//get the url for the link:
$navURL = $navItem->url;
//get the nav link text/title:
$navTXT = $navItem->title;
//Get the nav link's ID:
$navID = $navItem->ID;
//Get menu item parent(will be 0 if main link or parent ID if it's a sub link):
$navParent  = $navItem->menu_item_parent;
echo "ID: $navID, $navTXT, $navParent, $navURL<br />";
//echo '<li class="has-dropdown gallery" data-content="about"><a href="'.$navURL.'" title="'.$navItem->title.'">'.$navTXT.'</a></li>';
}
?>

Now save your header-jafty.php file and upload it to your active theme's folder and refresh your home page. You should see the following information printed in the header area of your site instead of a top nav now:

ID: 47, Site Settings, 0, http://dev.outergain.com/site-settings/
ID: 49, Jafty Interactive, 47, http://jafty.com
ID: 50, Jafty Blog, 47, http://jafty.com/blog
ID: 48, Hello world!, 0, http://dev.outergain.com/2016/12/30/hello-world/
ID: 51, Yahoo Search, 48, http://yahoo.com
ID: 52, Google Search, 48, http://google.com

As you can see my site returned 6 lines of text in the header, one for each of the two main menu items and one for each of the four sub-menu items in the menu I created in wp-admin. Each of the lines above contains the main ID first, followed by the link text, then the parent ID and finally the link text. I highlighted the parent IDs in blue so you can see how the two main menu items have a parent ID of zero while the other four have parent IDs equal to the two main menu items with zero for parent ID. Make sense? I hope so:-)

For all you professional WordPress plugin developers, I can probably stop there. Now you have enough to make your own custom top navigation menu for your WordPress theme. You clearly don't need to do this as a plugin, in fact, it would normally done by adding the plugin code to functions.php in the current theme instead. I am making it a plugin just as a learning exercise.

You can use the information it printed in your header to figure out how to add in the HTML and CSS for any type of custom nav you desire, or you can read on to see how I recreated the stripe.com-like top nav for one of my clients.

Make a Static Top Navigation Menu as a Demo

Before we go about coding the menu into WordPress, I like to create a static version first. I created mine based on looking at the top nav found on Stripe.com. You can click the link to see what I mean. I didn't copy it by any means, but I did use it as a model for creating a similar one with similar transition effects. In the static demo, I didn't create great detail in the drop downs. Instead I concentrated on getting the transition effects and infrastructure perfect. I can worry about making the content of the dropdown boxes look pretty when I code it into the actual WordPress site. Here is my static demo: http://jafty.com/nav_demo

I won't post all of the code to my static navigation menu demo here but you may feel free to use the link provided and use your browser's view source option to see how I made it and copy it if you so desire.

 

 

 

The WordPress Loop

Today I finally decided to dedicate a single tutorial on the wonderful WordPress loop. I will demonstrate how to create a basic loop and show several examples of the loop in action. The loop is what gets post and/or page data in WordPress template files, so if you ever have a need to make a custom page or post template, you'll need to understand how the loop works.

 

The Basic WordPress Loop

Most often you will see the loop look something like this:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<!------------This is where you present your post data....-------------->

<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

The above example doesn't contain the middle part of the loop in order to demonstrate where the loop typically begins and ends. That way you can find the loop in your current theme and work with it by knowing where it starts and stops at least.  Next we'll discuss what to put in between where it says <!------------This is where you present your post data....-------------->.

Fetching Data Inside a WordPress Loop

Post Title:

First I'll show you how to display the Title as a link to the Post's permalink.

<h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Just place the above code example where it says you present your post data in the the loop example above.

Post Content:

You can display the Post's content in a div with the following code inside of your loop:

<div class="entry">
<?php the_content(); ?>
</div>

Again, use the above code in between the starting and ending loop code explained above and this will display the general content of the post as entered into the standard WYSIWYG editor in the WordPress admin.

Using More Than One Loop

If you need to use two more more loops in the same template file, then you will have to reset the WordPress loop with rewind posts function like this:

<?php rewind_posts(); ?>

Just use the above line before your second loop and any loops afterwards and they will reset and be ready to function again.

 

Cron Job Not Working

Cron jobs seem to be one of the things I have to do often that give me trouble. That's why I'm putting together this guide full of troubleshooting tips for people having problems with cron jobs.

Just today, for example, I wasted several hours figuring out why my cron job didn't seem to be working and here is what happened:

I set up my cron job exactly as I always do according to my own tutorial I posted here:

Linux Cron Job Tutorial

however, it didn't seem to be working so I tried chaing the shebang, changing the php location, etc. with no luck at all.

The Solution

Finally after hours of wasting time, I figured out that the output of my cron job was not going where I thought it would go. For example, my test script created a file and wrote a line to that file to show the cron job ran. My cron test PHP file looked like this:

crontest.php:

<?php

#!/usr/bin/php
<?php
$myFile = "cronresults.txt";
$fh2 = fopen($myFile, 'a') or die("can't open file to append");
$stringData = "appended text from cron job...\n";
fwrite($fh2, $stringData);
fclose($fh2);
?>

Simple, right? well the trick is the $myFile variable works as expected in that it creates the file in the same directory as crontest.php when crontest is called from a web browser. So when I opened up Firefox and went to mysite.com/crontest.php, it worked fine, it would create a file named cronresults.txt in my public_html folder and write a simple line of text to it. However. HERE IS THE TRICKY PART! I call the script in crontest.php from a cron tab by adding the following line in crontab -e:

* * * * * /usr/bin/php   /var/www/mysite.com/public_html/crontest.php

but when I call it that way and look for the cronresults.txt file or look for the line of text it added to the file if it already exists, there is nothing so it appears as if the cron job didn't work! Oh damn! I say. Then I try everything I can think of to fix it. The problem is that is was never broken! When you call a PHP script from a cron job and you do not specify the file path of the results file, it assumes the current users home folder! Therefore, it was working the whole time, but was creating and writing to a file in my /home/root directory because that's the directory I called crontab -e from! THerefore my solution was as simply as replacing the $myFile line with this:

$myFile = "/var/www/mysite.com/public_html/cronresults.txt";

WHEN YOU USE THE ENTIRE PATH IT WORKS AS EXPECTED! I can't over emphasize the importance of this because I wasited several hours due to not knowing this.

Cron Job Troubleshooting Tips

  • Always use a simple test script to test cron jobs for the first time on a new server. You can use my example crontest.php script above, but be careful to set the $myFile variable with the entire path to the output file or you'll have the same problem I wrote about above in this post.
  • Always use a very simple command line in crontab when first testing your cron job. You can customize it after you get it working. I use something like:                               * * * * *  /usr/bin/php  /path/to/cron/crontest.php      then crontest.php will be executed every minute so you can quickly see if it is working. This makes testing and debugging much easier.
  • Can't figure out your Shebang or don't know where PHP is on your server? Then simply go to a command prompt on your server using putty remotely or any command prompt if you are on your own server and type the following command: "which php" without the quotes. That will give you the path to php for both your shebang and your crontab file, like where it says /usr/bin/php in my examples above.

Working with WordPress Advanced Custom Fields Image Repeater Fields

My latest WordPress project deals with remote updating of custom post types that use the Advanced Custom Fields Plugin. From here on out, I'll simply refer to this plugin as ACF since it is such a long name and ACF is the generally accepted name among WordPress developers...

I am writing this post mostly because when working with ACF and repeater fields that have a sub field type of image, I wasn't able to find sufficient documentation on the subject to complete my project. I did complete the project with a lot of trial and error and piecing together of bits of info from many sources. My goal is to document the subject as much as possible here in order to make life easier for anyone attempting to do similar tasks as I have done.

The Challenge:

My particular challenge was that I had to create a WordPress plugin that would sync posts that used a custom post type and ACF. The basic requirement was that the plugin would update several client sites with posts from a single master site. So, the master site had a custom post type named "farms" that had several ACF fields including a couple repeater fields, one of which used the "image" sub-field type which is the focus of this article. The main challenge for me was basically writing code to insert images into a post that used a repeater field that had two sub-fields(image and alt_tag) the image sub-field stored image data in an array and the alt_tag sub-field stored custom alt tag content for the image tag. Some of you might already be thinking: Why do you have an alt_tag sub-field when alt tag content is already stored in the image data array. Well, that is true. However, it was a requirement of the project, so that's what I did.

 

The solution:

How to add WordPress Advanced Custom Fields(ACF) Image Repeater Fields with PHP Code

Today's challenge is to add values to an ACF image repeater field from within a plugin or theme file using PHP code. I had a difficult time figuring this out myself due to not being able to find enough documentation on the subject, so I decided to document my findings here. I used a custom post type named "farms" with my example. You can use a regular post, page or any custom post type for your own project. Just note that wherever you see "farms" it is my custom post type and should be replaced with your own value.

Export one or more of the posts in question

A logical first step to solving this problem for me was to create an XML export file of one of the posts that I wanted to add repeater field values to. in order to accomplish this, first create a test post of the custom post type you will be working with and make sure that the repeater field is all set up using the ACF plugin. Be sure to add a minimum of two images under the repeater field so you can examine the data via the XML export file. See the image below for an example of my own test custom post type which was set up with proper data to export:

post

Now it's time to export the post you just edited. To do this from wp-admin, click on "tools/export" and select the name of your custom post type. In my case, I select "farms" and click to export the posts as in the following image:

export

Open your XML file you downloaded and search for the post by title. Once you find the title, you could extract just that one post's data by copying everything in between <item> and </item> and pasting it in a new  XML file. That makes it easier to read just the one post you are concerned with if you have a lot of posts and a long XML file to work with. Of course, this is an optional step. I have extracted my relevant post and also deleted some of the XML that wasn't relevant to the task and here are the results:

<item>
...
<wp:postmeta>
<wp:meta_key><![CDATA[your_own_farm_pics]]></wp:meta_key>
<wp:meta_value><![CDATA[2]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[_your_own_farm_pics]]></wp:meta_key>
<wp:meta_value><![CDATA[field_57ab934d407ed]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[your_own_farm_pics_0_image]]></wp:meta_key>
<wp:meta_value><![CDATA[1862]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[_your_own_farm_pics_0_image]]></wp:meta_key>
<wp:meta_value><![CDATA[field_57ab934d407ee]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[your_own_farm_pics_0_alt_tag]]></wp:meta_key>
<wp:meta_value><![CDATA[first alt tag]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[_your_own_farm_pics_0_alt_tag]]></wp:meta_key>
<wp:meta_value><![CDATA[field_57ab934d407ef]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[your_own_farm_pics_1_image]]></wp:meta_key>
<wp:meta_value><![CDATA[1861]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[_your_own_farm_pics_1_image]]></wp:meta_key>
<wp:meta_value><![CDATA[field_57ab934d407ee]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[your_own_farm_pics_1_alt_tag]]></wp:meta_key>
<wp:meta_value><![CDATA[second alt tag]]></wp:meta_value>
</wp:postmeta>
<wp:postmeta>
<wp:meta_key><![CDATA[_your_own_farm_pics_1_alt_tag]]></wp:meta_key>
<wp:meta_value><![CDATA[field_57ab934d407ef]]></wp:meta_value>
</wp:postmeta>
</item>

Once you've located your post's XML, you will want to find the portion that is relevant to your particular ACF repeater field. To do this, simply do a search for the repeater field slug name. My field was named "your own farm pics", so the slug name I would search for would be "your_own_farm_pics". The first instance you find of the repeater field name/slug will look something like this:

<wp:postmeta>
<wp:meta_key><![CDATA[your_own_farm_pics]]></wp:meta_key>
<wp:meta_value><![CDATA[2]]></wp:meta_value>
</wp:postmeta>

Due to the use of CDATA , the above may look a little more complex than it really is. For what we are doing, we can simply ignore all of the CDATA stuff so that the above would become more like this:

<wp:postmeta>
<wp:meta_key>your_own_farm_pics</wp:meta_key>
<wp:meta_value>2</wp:meta_value>
</wp:postmeta>

Basically what's in between the XML tags is this:
<![CDATA[your_own_farm_pics]]>
The part you want is in between the opening and closing brackets after the word, CDATA. The rest can be ignored. In this case, all we want is: your_own_farm_pics.

Then, to show one more example of extractig data from CDATA, the next line looks like:
<wp:meta_value><![CDATA[2]]></wp:meta_value>
and the only part we want is the part after "CDATA[", which is simply: 2

So examining the first poroption of relevent .xml code we can gather that the value of "your_own_farm_pics" is "2".

Lets look at the next portion of XML that reads:
<wp:postmeta>
<wp:meta_key><![CDATA[_your_own_farm_pics]]></wp:meta_key>
<wp:meta_value><![CDATA[field_57ab934d407ed]]></wp:meta_value>
</wp:postmeta>
...okay, from what we've learned, this is what you should extract from the above XML:
field name(or key): _your_own_farm_pics
value: field_57ab934d407ed
I hope this part is clear to you. If it is not, then you'll probably need to study an XML tutorial first to understand. But one thing you need to notice here is that the field name or key starts with an underscore, therefore it is different from the first meta key(_your_own_farm_pics instead of your_own_farm_pics).

Let's go ahead and extract all of the relevant data from the .xml file. Basically you should be able to extract something similar to the following key/value pairs from the relevant portion of XML code:

your_own_farm_pics
2

_your_own_farm_pics
field_57ab934d407ed

your_own_farm_pics_0_image
1862

_your_own_farm_pics_0_image
field_57ab934d407ee

your_own_farm_pics_0_alt_tag
first alt tag

_your_own_farm_pics_0_alt_tag
field_57ab934d407ef

your_own_farm_pics_1_image
1861

_your_own_farm_pics_1_image
field_57ab934d407ee

your_own_farm_pics_1_alt_tag
second alt tag

_your_own_farm_pics_1_alt_tag
field_57ab934d407ef

As you can see there are 4 pieces of data for each image in the repeater field. This is because there are two sub-fields in this repeater field and each sub-field uses two key/value pairs. Notice the incremented numbers starting at 0. There is only a 0 and a 1 in this example because there are two images stored in our repeater field. so all the key names containing _0_ are one image's data and then all the ones with key names containing _1_ are the second image's data.

There are three parts to each key name. Each key either starts with the repeater slug or the repeater slug preceded by an underscore. Then there is a incremented number starting at zero. Finally we have the sub-field name. Here's the pattern these sub-field key names follow:

repeater_field_name + incremented number + sub-field name

Above is the pattern for the data key. Below is the very similar patter for the field key:

underscore + repeater_field_name + incremented number + sub-field name

So knowing that, you should be able to know exactly how to read these XML files now. This also gives you a huge clue on how data is stored in the database as the key/value pairs in the XML file are exactly what is stored in the database. Therefore the values are exactly what needs to be written to the database in order to insert repeater images into a post or custom post type.

Let's examine some PHP code now. Knowing what we do about the XML file, we know what data needs inserted into the database now, so our PHP code for the example XML file above should look like this in order to insert two images into a repeater field for a single post:

Note that the below code is for adding two sets of repeater field values. The repeater field is set up with two sub fields, one image sub-field and one simple text sub-field named alt_tag.

<?php

$post_id = "1902";
//first two key/value pairs are for the repeater field name:
$key = "your_own_farm_pics";
$value = "2";
add_post_meta($post_id, $key, $value);

$key = "_your_own_farm_pics";
$value = "field_57ab934d407ee";
add_post_meta($post_id, $key, $value);

//next eight key/value pairs are for the two repeater field sub-field names:
//There are four key/value pairs for the first image and four more for the second:
//Start image one data:
$key = "your_own_farm_pics_0_image";
$value = "1867";
add_post_meta($post_id, $key, $value);

$key = "_your_own_farm_pics_0_image";
$value = "field_57ab934d407ee";
add_post_meta($post_id, $key, $value);

$key = "your_own_farm_pics_0_alt_tag";
$value = "Alt tag content for image 1";
add_post_meta($post_id, $key, $value);

$key = "_your_own_farm_pics_0_alt_tag";
$value = "field_57ab934d407ef";
add_post_meta($post_id, $key, $value);

//Start image two data:
$key = "your_own_farm_pics_1_image";
$value = "1869";
add_post_meta($post_id, $key, $value);

$key = "_your_own_farm_pics_1_image";
$value = "field_57ab934d407ee";
add_post_meta($post_id, $key, $value);

$key = "your_own_farm_pics_1_alt_tag";
$value = "Alt tag content for image 2";
add_post_meta($post_id, $key, $value);

$key = "_your_own_farm_pics_1_alt_tag";
$value = "field_57ab934d407ef";
add_post_meta($post_id, $key, $value);

?>

Of course the above PHP code would go in a custom plugin and wouldn't work as standalone php code, but you should get that if you have any experience with writing WordPress plugins and if you do not, then this topic is far to advanced for you anyway. Try one of my starter tutorials for WordPress plugin developers instead.

 

Code explained:

First, you should notice the $postid variable that gets set to the post id you want to update with repeater fields.

Then you see three lines of code setting the $key variable to "your_own_farm_pics" which you will change to the name of your own repeater field name. The value of this needs to be equal to the number of repeaters you want to add. In this case, we are adding 2 images, so we set the value to 2.

Next you see the key of _your_own_farm_pics. This is the field value that is set in the database and is crucial in identifying the repeater field correctly, so be sure to get this right. Do an export of the database and search for the repeater field name to find the value for this if you have to. All you have to do it export the database as  XML and do a text search for the field name and you'll see the value right below it. The code above uses the XML example code posted above in this post.

The next important section of code, where the comment says "//next eight key/value pairs are for the two repeater field sub-field names:", is where you will have eight  sections with 3 lines of code each for the two image repeaters you add.  The important part to notice here is the numbering system used. Notice that the the first four sections of code have a zero in the keys, for example:

$key = "your_own_farm_pics_0_image";

So the value of the $key variable in the above example is made up of three parts:

  1. repeater field name: your_own_farm_pics
  2. incremented number: 0
  3. sub-field name: image

In this example, my repeater field name is "your_own_farm_pics",  the numbers start at 0 and go as high as the total number of repeater fields you add, the sub-field name in this case is "image".

Then, skip down three more lines to where you see the code:

$key = "your_own_farm_pics_0_alt_tag";

this is the second sub-field for the first repeater. so we follow the same principle as we did with the first sub-field which was image. The second sub-field name in this case is alt_tag, so we have:

  1. repeater field name: your_own_farm_pics
  2. number: 0
  3. sub-field name: alt_tag

That covers the first repeater field with it's two sub-fields. Then we want to add another repeater field with the code starting at the comment that reads: "//Start image two data:".

Notice that the number in the two $key variables has incremented to 1 in the second image's code because the numbering starts at 0 and this is the second repeater or image added.

 Summary

I hope this article sheds some light on this dimly illuminated topic dealing with Advanced Custom Fields plugin and programming your own plugin to work with it. I had a very difficult time digging up enough information to piece the above code together myself, so I truly hope this helps someone attempting to do the same thing.

 

 

Passing PHP Variables to File included with get_template_part WordPress Function

Today I had a problem where I had a WordPress page template that used get_template_part to include a section of the page like WordPress themes often do. My problem was that I did some custom coding to the theme and found it necessary to pass a variable to the file included using get_template_part.

The Problem

Let's say you have a custom page template for showing search results called special-search.php. Now let's also say that the actual search results are displayed using another template file named content-searching.php. inside of special-search.php we would normally include the content-searching.php file something like this:

get_template_part( 'template-parts/content', 'searching' );

What's wrong with that? Well, nothing unless you need to use PHP variables from special-search.php inside of content-searchnig.php. Then we have a problem. Read on for the simple solution!

Making it Possible to Pass PHP Variables to Template Parts:

The solution is actually to simply not use the get_template_part function! We can very effectively replace get_template part with a combination of the common PHP include function and the WordPress locate_template function like this:

include(locate_template('template-parts/template-name.php', $load, $require_once));

As you can see the locate_template function is called inside of the include function and locate_template takes three parameters. While, you really only need to use the first parameter in many cases, it is good to know what the other two do as well, so here are all three parameters defined:

  1. 'template-parts/template-name' - will be changed to the path and filename to your template file you used to include with get_template_part. In our example case above, this parameter would get set to 'template-parts/content-searching.php'.
  2. $load - is an optional Boolean parameter that would be set to either true or false, but which is set to false by default which is the desired setting in this case. This parameter tells the function whether or not to load the template file. We don't want the template to be loaded by locate_template since it will get loaded by the include function in this case. So if we include this parameter, we would set it to false.
  3. $require_once - is the third parameter which is also optional and set to true by default. It simply determines whether we use require_once or require to include the template file. true = requrie_once and false = require.

Example Usage:

Still using our test case scenario from above, here is how we would use the include and locate_template function together to replace get_template_part and hence be able to use variables defined in the parent file inside of the template part file. Above we said we had a template file named special-search.php that used get_template_part to include a template part file named content-searching.php. Below I will demonstrate the change that would need to be made:

Change this line:

get_template_part( 'template-parts/content', 'searching' );

into this line:

include(locate_template('template-parts/content-searching.php'));

Notice how get_template_part doesn't use the actual whole filename due to it's unique naming convention rules, but our second method however must use the whole filename. Both cases call the same file however. If you change get_template_part into the include statement shown in our example, then you will now be able to use variables defined in special-search.php within content-searching.php. Problem solved!

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 our 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.