Learning WooCommerce API Manger

What is WooCommerce API Manger?

WooCommerce API Manger is used to secure your software with API License Key activation, deactivation and automatic updates of WordPress plugins and/or themes. However it can also be used for some applications outside of WordPress as well, but we will be talking mostly about how to use it with a custom WordPress plugin.

Prerequisites

You need to at least make sure you have at least PHP Version 7.00. Here’s how you can check from the linux command line:

php -v

Type the above command and press enter and you should get results that look similar to this:

php-v

 

Alternative Solution to WooCommerce API Manager

You may have noticed this article isn’t complete. That is because I decided to go with a different system for selling WordPress plugins on my site with API keys, WooCommerce didn’t provide the level of support I needed and their documentation was poor. I discovered Easy Digital Downloads which was much simpler to deploy. Easy Digital Downloads(EDD) in combination with the EDD Software Licensing add-on and the EDD Instant Updater for plugins that I developed myself, became the ultimate solution for selling WordPress plugins outside of WordPress.org. If anyone is interested in how I did it, email me at linian11@yahoo.com and I can assist you.

 

 

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.

Getting Unterminated String Literal Error When Using Newlines In JavaScript Variable

Nothing like a good Unterminated String Literal Error to fog up your day huh? Well I found a neat little trick to squash this nasty bug with JavaScript today!

The Problem

The problem in my case is that I wanted to place the contents of a PHP variable, filled with data from a database table, into a JavaScript variable which I thought could be easily done like in  the following JavaScript code example:

var sc = “<?php echo $email_content; ?>”;

WRONG! I discovered that when the PHP variable holds text with newline characters in it, like you’ll often encounter when retrieving data from a database or from a textarea, or even a file, JavaScript throws the nasty old “Unterminated string literal” error! I’ve learned to hate this general JavaScript error over the years, but today, I stumbled upon a small, yet useful, trick that makes this error go away in cases like this.

The Solution:

Believe it or not, the solution is as simply as replacing quotes in the JavaScript code with backticks. If you don’t know what a backtick is, read on, otherwise your JavaScript code should look like this after replacing quotes with backticks:

var sc = `<?php echo $email_content; ?>`;

What is a Backtick?

A backtick is the little character that looks like a slanted single quotation mark that normally calls the key above the tab key home on a normal English keyboard. Otherwise known as the Marigold key, grave accent or backquote, the character is a tricky one simply because no one knows what to call it. However, in the land of computer programming, it is commonly referred to as the backtick character, so that’s what we’ll call it. Cool? Okay!

 

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!

Sorting Multi-Dimensional Associative Arrays in PHP

Learning  how to sort a multi-dimensional associative array in PHP was a bit difficult for me to figure out, so I hope documenting it here will help others figure it out a little faster.

In many cases, sorting multi-dimensional arrays is used to sort data retrieved from a database. For this exercise, let’s say we have the following database structure:

db

The above image is from a database I was working on for a client while building a custom WordPress plugin in PHP. I needed to present the data from the table in order according to two fields, “term” and “qty”. The task in my case was extra difficult because it also had to be sorted with a custom function. First we will do a simple sort with built in functions and then I’ll explain how I solved my custom sorting issue.

Fetching Data From WordPress Database to Build an Associative Array

I was building a WordPress plugin when I encountered the need for this code, so that is what I’m using as an example, but the code is basically the same if you do it outside of WordPress also. The only difference would be how you do the database query. I am leaving the WordPress code in tact in case some of my readers could benefit from it. We have to build the array first. I’ll provide test code below to build an array without having to query the database for those of you who may need it.  Here is the PHP code I wrote to fetch data from a custom table in WordPress

<?php
global $wpdb;
$table_name = $wpdb->prefix . ‘table_name’;
$where_clause = “WHERE campaign=’$t_name'”;
$query=”SELECT * FROM $table_name $where_clause”;
$results = $wpdb->get_results($query);
$rowcount = $wpdb->num_rows;
echo “<p>Rows Found: $rowcount</p>”;
if($rowcount > 0){//only continue if there are rows found!
    foreach($results as $r){
        $db_id = $r->id;
        $stp = $r->touchpoint;//saved touchpoint name will be same as $tp
        //get type, qty, term, relative_to and date:
        $typ = $r->type;
        $qty = $r->qty;
        $trm = $r->term;
        $rel_to = $r->relative_to;
        $dat = $r->date;
        //add ea. of the 5 values and an associative array for ordering later on:
        //build an associative multi_dimensional Array of data:
        $assoc_array[$stp][‘type’] = $typ;
        $assoc_array[$stp][‘qty’] = $qty;
        $assoc_array[$stp][‘term’] = $trm;
        $assoc_array[$stp][‘order’] = $order;
        $assoc_array[$stp][‘relto’] = $rel_to;
        $assoc_array[$stp][‘date’] = $dat;
    }//and foreach result
}//end if there were rows of data found
?>

Building a Multi-Dimensional Associative Array in PHP

For those of you not interested in the WordPress part of this exercise, I’ve also included another way to build the same associative multi-dimensional array in simple PHP code below:

$assoc_array[“call owner”] = Array
(
“type” => “Relative”,
“qty” => 2,
“term” => “hours”,
“order” => “a”,
“relto” => “last”,
“date” => “none”
);

$assoc_array[“email tommorow”] = Array
(
“type” => “Relative”,
“qty” => 1,
“term” => “days”,
“order” => “b”,
“relto” => “last”,
“date” => “none”
);

$assoc_array[“yearly touchpoint”] = Array
(
“type” => “Relative”,
“qty” => 1,
“term” => “years”,
“order” => “e”,
“relto” => “last”,
“date” => “none”
);

$assoc_array[“Welcome Email”] = Array
(
“type” => “Relative”,
“qty” => 1,
“term” => “hours”,
“order” => “a”,
“relto” => “last”,
“date” => “none”
);

Sorting an Associative Multi-Dimensional Array by Two Keys or Values

We can use the PHP function, array_multisort, to sort multi-dimensional arrays by two fields as follows:

<?php

//Make a $tempArr of sort columns and their data to pass to array_multisort function  
    $tempArr = array();

    foreach($assoc_array as $key=>$val) {
        $tempArr[‘order’][$key] = $val[‘order’];
        $tempArr[‘qty’][$key] = $val[‘qty’];
    }
// sort by order asc and then qty asc
    array_multisort($tempArr[‘order’], SORT_ASC, $tempArr[‘qty’], SORT_ASC,$assoc_array);

?>

Sum It Up!

This was a relatively short ans sweet tutorial on PHP arrays as far as such things often go. There is however a lot more to learn when it comes to working with arrays in PHP. To see all of the PHP array related functions in one place, check out this link:

http://php.net/manual/en/array.sorting.php

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!

 

WordPress Permalinks Not Working

I had this issue today after migrating a WordPress website to a new server using backupbuddy and wanted to post the quick solution here in case it might help anyone else as it did me. It can sometimes take hours to solve simple problems like this. This fix applies to apache2 servers that won’t work with WordPress permalinks when they are set to something like “Post Name” as mine were. I’ll post two simple solutions that will fix most situations when this happens:

Save Permalinks

The first thing you want to try is simply going to wp-admin and clicking on “settings/permalink” and selecting the correct setting if not selected already and clicking the “Save Settings” button to re-save the settings(even if they were correct), Then refresh the page where links failed before and try them again. If that didn’t work and you are on a Apache or Apache2 server, move on to the next fix below.

Edit Config File

Next try going to etc/sites-available and find the file named after your site which will look something like example.com.conf and open it for editing either using VI editor from command line or by downloading to your desktop and editing with note pad. My file that failed to work had the following content:

<Directory /var/www/html/dev.jafty.com/public_html>
    Require all granted
</Directory>
<VirtualHost *:80>
    ServerName dev.jafty.com
    ServerAlias www.dev.jafty.com

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/dev.jafty.com/public_html

    ErrorLog /var/www/html/dev.jafty.com/logs/error.log
    CustomLog /var/www/html/dev.jafty.com/logs/access.log combined
</VirtualHost>

The problem was right up at the top where you see the line:

      Require all granted

I simply added the following two lines above that one line and saved it to my server then restarted the server from command prompt with:”service apache2 restart” and the permalinks began working! Here are the two lines to add above “Require all granted”:

        Options Indexes FollowSymLinks MultiViews
        AllowOverride All

Then simply save the file and restart your server and try permalinks again and they should work! The final .conf file should look like this:

<Directory /var/www/html/dev.jafty.com/public_html>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
</Directory>
<VirtualHost *:80>
    ServerName dev.jafty.com
    ServerAlias www.dev.jafty.com

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/dev.jafty.com/public_html

    ErrorLog /var/www/html/dev.jafty.com/logs/error.log
    CustomLog /var/www/html/dev.jafty.com/logs/access.log combined
</VirtualHost>

Hope that helps! Good Luck!

 

Get Current Plugin’s URL with and without a Trailing Slash

This quick WordPress tutorial will demonstrate how to get the plugin folder path to your plugin from within a plugin file. We are building a plugin named WP-PW-sync in our examples and the code in question will be inside a the main plugin file named WP-PW-sync.php, but could be in any file within the plugin’s folder(WP-PW-sync folder). I will  demonstrate two methods for getting the current plugin’s directory path, one that includes a trailing slash at the end of the URL and one that does not.

NOTE: if you want a path instead of a URL(/var/www/example.com/path instead of http://www.example.com/path), then skip down about half way down this page to the section regarding paths instead of URLs.

How to Get Plugin URL Without a Trailing Slash

To get the current plugin’s url without a trailing slash, I often use the plugins_url WordPress function like this:

$pluginURL1 = plugins_url(”,__FILE__);//this plugin’s URL without trailing slash

So, if I then typed “echo $pluginURL1;“, it would output something like:

http://example.com/wp-content/plugins/WP-PW-sync

Note that the plugins_url function takes two parameters and is typically used for other uses when using the first parameter as I will explain below.

plugins_url parameters:

plugins_url($path, $plugin);

$path
(string) (optional) Path to the plugin file of which URL you want to retrieve, relative to the plugins or mu-plugins directory or to $plugin if specified.

Default: None
$plugin
(string) (optional) Path under the plugins or mu-plugins directory of which parent directory you want the $path to be relative to.

Default: None

How to Get Plugin URL Including the Trailing Slash

To get the current plugin’s URL with a trailing slash at the end, I typically use the plugin_dir_url WordPress function like so:

$pluginURL2 = plugin_dir_url(__FILE__);//this plugin’s URL with trailing slash

Then if I were to type “echo $pluginURL2;” it would output something similar to this:

http://example.com/wp-content/plugins/WP-PW-sync/

plugin_dir_url Parameters:

The plugin_dir_url WordPress function only has one parameter:

plugin_dir_url($file);

$file
(string) (required) The filename of the plugin (__FILE__)

Default: None

Notice the / at the end of the URL, that’s the only difference in the two examples above.

Next we’ll go over how to get a path instead of a URL!

How to Get the Current Plugin’s Path with Trailing Slash

Okay, maybe you don’t want a URL, but a path like “/var/www/example.com/wp-content/plugins/your-plugin/ instead. If so, you’re in the right part of the tutorial! Here’s how to get your current plugin’s path including a trailing slash at the end from within the main plugin file, WP-PW-sync/WP-PW-sync.php(in out example case):

$pluginPATH = plugin_dir_path( __FILE__ );//this is the plugin’s PATH with a trailing slash at end

If you were to add “echo $pluginPATH;” to your script, it would output something similar to this:

/var/www/public_html/wp-content/plugins/your-plugin/

plugin_dir_path function  parameters

The plugin_dir_path function only takes a single parameter, $file:;

plugin_dir_path($file);

$file

(string) (Required) The filename of the plugin (__FILE__).

How to Get a Plugin’s Path Without the Trailing Slash

Unlike at the top of this tutorial, when we were working with complete URLs, there is not a separate WordPress function for with and without the trailing slash, so I like to incorporate the use of the untrailingslashit function to get the path without the slash at the end like so:

$pluginPATH = plugin_dir_path( __FILE__ );//this is the plugin’s PATH with a trailing slash at end
$pluginPATH2 = untrailingslashit($pluginPATH);//this is the plugin’s path without the trailing slash

Now if we were to add “echo $pluginPATH2;” to our script, it would out something like this:

/var/www/public_html/wp-content/plugins/your-plugin

Notice that there is no longer a slash at the end of the output in the above case.

It is also noteworthy that the untrailingslashit function can be used to remove a slash from the end of any string, so it has many other uses other than simply removing the slash from the end of the plugin’s directory path as we have done here. HAPPY CODING!

 

 

How to Search and Replace File Names

A lot of times I am required to rename large quantities of files according to various rules. Sometimes this task can take hours to complete. Today I had a job requiring me to rename all files in a program that contained “xi” with “nap”. The program had thousands of files in a dozen different directories. It would have taken days for me to go through them all manually and replace ea. occurrence of “xi” in the file names with “nap”, so I tested several tools to help me do the job. The most capable tool I found was named simply “ReNamer” and can be downloaded from:
https://www.den4b.com/products/renamer

I downloaded the “portable” version of ReNamer version 6.7 Here is a screenshot of ReNamer’s simply UI:
ReNamer

How to Download and Open ReNamer for First Use

First things first, so here is how to get started:

Use the link https://www.den4b.com/products/renamer to download the portable version of ReNamer and it will download a zip file to your PC. Place the file on your desktop and right click it and select “Extract All”. Windows will extract the files and probably open the folder for you. Then click on renamer.exe to start the app. You will see the UI as in the above image. I like using this portable version because it is very light-weight and can be used on any PC. When I’m done using it, I simply delete the entire unzipped folder but I save the .zip folder I downloaded so I can use it again when needed and it doesn’t waste any space on my PC when it’s not in use. Next time I need it, I simply extract the files again and use it. Then I delete the folder when done again.

Find and Replace Text in File Names of Many Files at Once

It is easy as pie to use too! It only took me a couple of test runs to achieve the renaming rules I needed to do the job at hand. Just  click where it says “Click here to add a rule” and add a rule. I needed to find and replace text in the file names, so in my case, I clicked on “replace” in the left panel so the add rule screen looks like this:

renamerules

 

All I had to do was simply enter “xi” in the “find” field and “nap” in the “replace” field and click the “Add Rule” button to save your new rule. Then all you have to do is drag the folder containing all the files you want to rename into the UI as in the first image above, where it says “Drag Your Files Here”. Then it gives you a preview of what files it will rename. Once you are happy with how it’s doing the renaming, click the “Rename” button in the upper right corner of the UI and it will rename all of the files just like it showed you. If you have tested any of the other features of this tool, please comment below and describe your experience!

How to Create a WordPress Child Theme

In this tutorial we will learn a simple step by step process for creating a WordPress child theme.

Why make a child theme?

The answer is simple. We make a child theme in so we don’t mess up the main theme. Also when WordPress decides it is time to update your theme, you won’t loose all of your custom code because it will be protected inside your own child theme which isn’t effected by parent theme updates!

Tools you will need:

  1. FileZilla or another FTP application running on your desktop.
  2. Notepad++, Notepad or another plain text editor.

Step by Step Instructions for Making a WordPress Child Theme

  1. Name your child theme by appending “-child” to the name of it’s parent theme. In this example, we will make a child theme for the twentyseventeen theme, so we will name it “twentyseventeen-child”. To lock in the name, create a new folder on your desktop(right-click on desktop and select new/folder in Windows) and name it “twentyseventeen-child”.
  2. Using your text editor application, create a new file in the folder you created on your desktop in step one and name it style.css. Then copy and paste the code below under the “Style Sheet Code” heading into the twentyseventeen-child/style.css file and save it. When doing so, make sure the template: setting is set to the directory name of the parent theme.
  3. Create a second file in your twentyseventeen-child folder on your desktop named “functions.php” and copy and paste the code below under the “Functions.php Code” heading. Save it.
  4. Upload the twentyseventeen-child folder to your site’s wp-content/themes directory, activate it and check several pages of your site to make certain everything looks the same as it used to as we have not made any changes yet. See the section below entitled “Troubleshooting” if it doesn’t look exactly like the parent theme at this point or if you have any other issues.
  5. Once you have a working child theme identical to it’s parent, start modifying it! You can over-ride any file of the parent theme by including it in the child theme’s folder and altering the code.

 

Style Sheet Code

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://jafty.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Ian L. of Jafty.com
 Author URI:   http://jafty.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-seventeen-child
*/

Functions.php Code

<?php
function my_theme_enqueue_styles() {

    $parent_style = ‘twentyseventeen-style’; // This needs to be set to the value from the parent theme’s wp_enqueue_style line in the parent functions.php file

    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
        get_stylesheet_directory_uri() . ‘/style.css’,
        array( $parent_style ),
        wp_get_theme()->get(‘Version’)
    );
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>

Troubleshooting

  • Styles do not match that of parent site before making style changes. If you have this issue then it is likely that your parent theme didn’t include all of it’s styles inside of the standard style.css file. Look in the parent theme’s functions.php file and search for “wp_enqueue_style” and carefully include any other enqueued styles besides style.css into your child theme’s functions.php as well. If you copy the lines from parent to child, be certain you change “get_stylesheet_directory_uri” to “get_template_directory_uri” and it should work fine.
  • Some pics don’t show up in child theme that showed up in parent theme. If this happens, re-enable the parent theme and find the images that were not working and make a note of their URL(right click on image and click view image). The images that were not working are likely to have been included inside the parent theme, so duplicate their path inside the child theme and make a copy of the images there. For example, if the images were in twentyseventeen/assets/media/pics in the parent theme, then create those folders in the child theme like twentyseventeen-child/assets/media/pics and copy the images there as well. That’s the easy way. If you want more of a challenge and don’t want to cpy the images, find and edit the path in the code for ea. image that is not displaying.

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.

How to Remove Slugs for a Custom Post Type in WordPress

So, back in the day, not to long ago, one could remove slugs in a CPT(Custom Post Type), simply by adding the following line to the arguments array when calling the register_post_type function:

‘rewrite’ => array(‘slug’ => ”),//NOT THE SOLUTION!

However, that no longer works as of WordPress version 4.7.?, so I put together the following two function from various other solutions I’ve seen. This solution works for a single post type or multiple post types. I am publishing it because I haven’t seen any elsewhere that could handle more than one CPT at a time. I wrote this to remove slugs for two CPTs, but you could us it for one or as many as you want, the two functions are as follows and can be added to functions.php or, as I do, to a plugin file, below the register_post_type functions:

<?php

//Two functions to remove slug from team_member and event CPTs:
function remove_evil_slugs($post_link, $post, $leavename) {

    if(‘team_member’ != $post->post_type || ‘event’ != $post->post_type ||’publish’ != $post->post_status) {
        return $post_link;
    }

    $post_link = str_replace(‘/’ . $post->post_type . ‘/’, ‘/’, $post_link);

    return $post_link;
}
add_filter(‘post_type_link’, ‘remove_evil_slugs’, 10, 3);

function  parse_evil_slugs($query) {

    if(!$query->is_main_query() || 2 != count($query->query) || !isset($query->query[‘page’])) {
        return;
    }

    if(!empty($query->query[‘name’])) {
        $query->set(‘post_type’, array(‘post’, ‘team_member’, ‘event’, ‘page’));
    }
}
add_action(‘pre_get_posts’, ‘parse_evil_slugs’);

?>

Those are the two functions that accomplish the goal. Simply replace all occurrences of “team_member” and “event” with the names of your own custom post types. If you use any rewrite rules in the args parameter for the register_post_type function, comment it out. For example if you see anything that looks like this:

‘rewrite’ => array(‘slug’ => ”),

or

‘rewrite’ =>false,

…either comment it out of delete it all together from the function that creates the custom post type(CPT).

Update 3-27-2017

I’ve noticed that on some servers, the above solution no longer works, so I was able to program a new solution for NGINX servers. If your server is not an NGINX server, I found a solution here that should work for all even though it is a bit outdated: https://github.com/jonbish/remove-slug-from-custom-post-type. The code below is code I wrote based on that link but updated for nginx servers:

<?php
class JAFTY_CPT_SlugKiller{
    
    static $_s = null;
    private $htaccess_tag = ‘SLUG KILLER REMOVE SLUG RULES’;
    
    public function __construct() {
        $this->rewrite_rules();
        
        add_action(‘wp_insert_post’, array(&$this, ‘post_save’));

        add_filter(‘post_type_link’, array(&$this, ‘remove_slug’), 10, 3);
        
    }
    
    
    static public function init() {
        if (self::$_s == null) {
            self::$_s = new self();
        }
        return self::$_s;
    }
    
    static public function flush_rewrite_rules() {
        $jafty_o = self::init();
        $jafty_o->rewrite_rules(true);    
        //$jafty_o->add_rules_htaccess();
    }

    public function post_save($post_id) {
        global $wp_post_types;
        $post_type = get_post_type($post_id);
        foreach ($wp_post_types as $type=>$custom_post) {
            if ($custom_post->_builtin == false && $type == $post_type) {
                $this->rewrite_rules(true);
                //$this->add_rules_htaccess();
                flush_rewrite_rules();
            }
        }
    }
    
    public function remove_slug($permalink, $post, $leavename) {
        global $wp_post_types;

        foreach ($wp_post_types as $type=>$custom_post) {
            if ($custom_post->_builtin == false && $type == “team_member”) {
                $custom_post->rewrite[‘slug’] = trim($custom_post->rewrite[‘slug’], ‘/’);
                $permalink = str_replace(get_bloginfo(‘url’) . ‘/’ . $custom_post->rewrite[‘slug’] . ‘/’, get_bloginfo(‘url’) . “/”, $permalink);
            }
        }
        return $permalink;
    }
    
    public function rewrite_rules($flash = false) {
        global $wp_post_types, $wpdb;
        foreach ($wp_post_types as $type=>$custom_post) {
            if ($custom_post->_builtin == false && $type == “team_member”) {
                $querystr = “SELECT {$wpdb->posts}.post_name
                                FROM {$wpdb->posts}
                                WHERE {$wpdb->posts}.post_status = ‘publish’
                                        AND {$wpdb->posts}.post_type = ‘{$type}’
                                        AND {$wpdb->posts}.post_date < NOW()”;
                $posts = $wpdb->get_results($querystr, OBJECT);
                foreach ($posts as $post) {
                    $regex = “{$post->post_name}\$”;
                    add_rewrite_rule($regex, “index.php?{$custom_post->query_var}={$post->post_name}”, ‘top’);            
                }
            }
        }
        if ($flash == true)
            flush_rewrite_rules(false);
    }
    
    
    private function add_rules_htaccess() {
        global $wp_post_types;
        $suffix = get_option(‘jafty_permalink_customtype_suffix’);
        $write = array();
        $htaccess_filename = ABSPATH . ‘/.htaccess’;
        if(is_readable($htaccess_filename)){
            $htaccess = fopen($htaccess_filename, ‘r’);
            $content = fread($htaccess, filesize($htaccess_filename));
            foreach ($wp_post_types as $type=>$custom_post) {
                $rewrite_rule = (!empty($suffix))
                            ? “RewriteRule ^{$custom_post->query_var}/(.+)/\$ /\$1\.{$suffix} [R=301,l]”
                            : “RewriteRule ^{$custom_post->query_var}/(.+)/\$ /\$1 [R=301,L]”;
                if (strpos($content, $rewrite_rule) == false && $custom_post->_builtin == false)
                    $write[] = $rewrite_rule;
            }
            fclose($htaccess);
        }else{
            add_action(‘admin_notices’, array(&$this, ‘compatibility_notice’));
            return;
        }
        
        if (!empty($write) && is_writable($htaccess_filename)) {
            $new_rules = ‘# BEGIN ‘ . $this->htaccess_tag . PHP_EOL;
            $new_rules .= str_replace(‘$’, ‘\\$’, implode(PHP_EOL, $write)) . PHP_EOL;
            $new_rules .= ‘# END ‘ . $this->htaccess_tag;
            if (strpos($content, “# BEGIN {$this->htaccess_tag}”) === false) {
                file_put_contents($htaccess_filename, $new_rules . PHP_EOL . PHP_EOL . $content);
            }
            else {
                $pattern = “/# BEGIN {$this->htaccess_tag}.*?# END {$this->htaccess_tag}/ims”;
                $content = preg_replace($pattern, $new_rules, $content);
                file_put_contents($htaccess_filename, $content);
            }
        }else if(!is_writable($htaccess_filename))
            add_action(‘admin_notices’, array(&$this, ‘compatibility_notice’));
    }//end add_rules_htaccess function

    
    public function compatibility_notice() {
        global $wp_post_types;
        $rules = ”;
        foreach ($wp_post_types as $type=>$custom_post) {
            if ($custom_post->_builtin == false && $type == “team_member”) {
                $slug = str_replace(‘/’, ”, $custom_post->rewrite[‘slug’]);
                $rules .= ‘RewriteRule ^’ . $slug . ‘/(.+)$ /$1 [R=301,L]<br />’;
            }
        }
        
        echo ‘<div class=”error fade” style=”background-color:red;”><p><strong>Remove Slug Custom post type error!</strong><br />.htaccess is not writable, please add following lines to complete your installation: <br />’.$rules.'</p></div>’;
    }
}//End JAFTY_CPT_SlugKiller class to remove slugs from team_member CPT

//actions and hooks for above class to remove slug from team_member CPT:
add_action(‘init’, array(‘JAFTY_CPT_SlugKiller’, ‘init’), 99);
//the following two lines make it so you don’t have to manually go to settings/permalinks and re-save settings for links to work:
register_activation_hook( __FILE__, array(‘JAFTY_CPT_SlugKiller’, ‘flush_rewrite_rules’) );
register_deactivation_hook( __FILE__, array(‘JAFTY_CPT_SlugKiller’, ‘flush_rewrite_rules’) );
//END CODE TO ENABLE NO SLUG FOR team_member CPT

?>

The above code can be added to a plugin file or your themes functions.php.

NOTE: although the above code hasn’t been thoroughly tested on non-nginx servers, it should work if you un-comment the two lines that call the add_rules_htaccess function. Simply do a search for “add_rules_htaccess” and remove the “//” before it in two occurrences and this code should work on any server as long as your .htaccess file is writable.

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. My search brought me to this website: makewebvideo.com/en/templates/logo-stings. Albeit I didn’t really find what I was looking for, I did learn a great deal about videos on it. I also 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!

Programmatically Add Page from a WordPress Plugin

In this tutorial, I’ll show you how to make your WordPress plugin automatically create a WordPress page when the plugin is activated from wp-admin.

Let’s just dive right in to the PHP code this time!

//Add Events page on activation:
function install_events_pg(){
        $new_page_title = ‘Events’;
        $new_page_content = ‘This is your page content that automatically gets inserted into the Events page!’;
        $new_page_template = ”; //ex. template-custom.php. Leave blank if you don’t want a custom page template.
        //don’t change the code below, unless you know what you’re doing
        $page_check = get_page_by_title($new_page_title);
        $new_page = array(
                ‘post_type’ => ‘page’,
                ‘post_title’ => $new_page_title,
                ‘post_content’ => $new_page_content,
                ‘post_status’ => ‘publish’,
                ‘post_author’ => 1,
        );
        if(!isset($page_check->ID)){
                $new_page_id = wp_insert_post($new_page);
                if(!empty($new_page_template)){
                        update_post_meta($new_page_id, ‘_wp_page_template’, $new_page_template);
                }
        }
}//end install_events_pg function to add page to wp on plugin activation

register_activation_hook(__FILE__, ‘install_events_pg’);

That’s really all there is to it. Of course, you’ll want to edit the $new_pg_title to contain the title of your own custom page and you’ll want to edit $new_pg_content to contain html elements for your page content, but this will get you started. Just by copy and pasting the above code into your plugin’s main file, you will see the “Events” page added when you activate the plugin. If your plugin is already activated, simply deactivate and acti

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 get Locations in a 50 Mile Radius with Google Maps API v.3

In this post, I will demonstrate how to make getting locations within a given radius simple. In order to make everyone understand, I will break it down into smaller, easy to read steps.

The Distance-Matrix

The key to creating a solution that gets all locations within a given distance radius is to use the Google Maps API Distance-Matrix. Let’s examine a simple example request to the Distance-Matrix Json API:

Single Destination URL Example:

https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=44311&destinations=45735&key=Your_API_Key

copy and paste the above URL into a web browser and replace the text, Your_API_Key, with your google Maps V.3 API key. If you don’t have an API key yet, they are surprisingly easy to obtain from https://developers.google.com/maps/web-services/

The Response:

The URL above will return a Json response of:

{
   "destination_addresses" : [ "Guysville, OH 45735, USA" ],
   "origin_addresses" : [ "Akron, OH 44311, USA" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "166 mi",
                  "value" : 267653
               },
               "duration" : {
                  "text" : "2 hours 30 mins",
                  "value" : 8989
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

Notice that I only used zip codes for orgin and destination in my example URL. You can use any acceptable address format instead of just a zip code of you like, but I find that for getting distances, zip codes work quite efficiently. Examples of acceptable addresses include:

  • Cleveland, OH
  • 593 Brown Street, Akron, Ohio
  • 44319
  • Akron, Ohio 4319
  • 593 Brown Street, Akron, Ohio 44311
  • USA
  • Amsterdam

Those are just a few acceptable addresses that could be used for either the destination or orgin parameters in the URL used for an API request to the Distance-Matrix.

 

Multiple Destination URL Example:

One thing that’s important to know about the Distance-Matrix API is that there are limits on it’s free usage. At the time of writing this post, the limits were 2500 elements per day. A single request may take up several elements however, so be careful. However it is much more practical to include several destination addresses in a single request because it will make your script run significantly quicker. Here is a simple example that will return a response with two destination distances using just zip codes for addresses again:

https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=44311&destinations=45735|44319&key=Your_API_Key

This the json response will include the distances for both zip codes or addresses passed in the URL. Here is the response from the above URL with two destinations:

{
   "destination_addresses" : [ "Guysville, OH 45735, USA", "Akron, OH 44319, USA" ],
   "origin_addresses" : [ "Akron, OH 44311, USA" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "166 mi",
                  "value" : 267653
               },
               "duration" : {
                  "text" : "2 hours 30 mins",
                  "value" : 8989
               },
               "status" : "OK"
            },
            {
               "distance" : {
                  "text" : "8.9 mi",
                  "value" : 14385
               },
               "duration" : {
                  "text" : "14 mins",
                  "value" : 836
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

Parsing Json data with PHP

The next task is to fetch a response from PHP and parse the Json data in your PHP code. Lets look at a practical example using our first URL example above that has a single zip code as the destination address and also a single zip code for the orgin. Here is the PHP code to make the request, get a Json response and parse the distance from that response:

<?php
$url = “https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=44311&destinations=45735&key=Your-API-Key”;

    //fetch json response from googleapis.com:
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $response = json_decode(curl_exec($ch), true);
    //If google responds with a status of OK
    //Extract the distance text:
    if($response[‘status’] == “OK”){
        $dist = $response[‘rows’][0][‘elements’][0][‘distance’][‘text’];
        echo “<p>Dist: $dist</p>”;
    }
?>

Now lets have a look at how we would modify the above code for a request with two destination addresses instead of one:

<?php
$url = “https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=44311&destinations=45735|44319&key=Your-API-Key”;

    //fetch json response from googleapis.com:
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $response = json_decode(curl_exec($ch), true);
    //If google responds with a status of OK
    //Extract the distance text:
    if($response[‘status’] == “OK”){
        $dist = $response[‘rows’][0][‘elements’][0][‘distance’][‘text’];
        echo “<p>Dist: $dist</p>”;
        $dist2 = $response[‘rows’][0][‘elements’][1][‘distance’][‘text’];
        echo “<p>Dist2: $dist2</p>”;
    }
?>

If you insert your own API key in the above code and run it from your own server, the response would look like this:

Dist: 166 mi

Dist2: 8.9 mi

Notice the difference in the $dist and $dist2 variable values. The key of the elements is different. The first distance is stored in elements[0] while the second is stored in elements[1]. If we had three destinations in the request, the third would be in elements[2] and so on…

How to figure out the values

So, what if you want more than just distance from the returned json element? Lets examine the returned data and figure out how to get it into PHP variables. In the example code above, try placeing this code right after the line that reads “if($response[‘status’] == “OK”){” and it will show you what the PHP array looks like after the Json response was converted to a PHP object:

        echo “<pre>”;
        print_r($response);
        echo “</pre>”;

The above code inserted into the last code example would look like:

<?php
$url = “https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=44311&destinations=45735|44319&key=Your-API-Key”;

    //fetch json response from googleapis.com:
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $response = json_decode(curl_exec($ch), true);
    //If google responds with a status of OK
    //Extract the distance text:
    if($response[‘status’] == “OK”){
        echo “<pre>”;
        print_r($response);
        echo “</pre>”;
        $dist = $response[‘rows’][0][‘elements’][0][‘distance’][‘text’];
        echo “<p>Dist: $dist</p>”;
        $dist2 = $response[‘rows’][0][‘elements’][1][‘distance’][‘text’];
        echo “<p>Dist2: $dist2</p>”;
    }
?>

Again, replace “Your-API-Key” in the URL variable with your own key and run the code. You should see results like this:

Array
(
    [destination_addresses] => Array
        (
            [0] => Guysville, OH 45735, USA
            [1] => Akron, OH 44319, USA
        )

    [origin_addresses] => Array
        (
            [0] => Akron, OH 44311, USA
        )

    [rows] => Array
        (
            [0] => Array
                (
                    [elements] => Array
                        (
                            [0] => Array
                                (
                                    [distance] => Array
                                        (
                                            [text] => 166 mi
                                            [value] => 267653
                                        )

                                    [duration] => Array
                                        (
                                            [text] => 2 hours 30 mins
                                            [value] => 8989
                                        )

                                    [status] => OK
                                )

                            [1] => Array
                                (
                                    [distance] => Array
                                        (
                                            [text] => 8.9 mi
                                            [value] => 14385
                                        )

                                    [duration] => Array
                                        (
                                            [text] => 14 mins
                                            [value] => 836
                                        )

                                    [status] => OK
                                )

                        )

                )

        )

    [status] => OK
)

Dist: 166 mi

Dist2: 8.9 mi

First you see the array printed out from the response after it’s converted from Json to a PHP array, then you see the two distances printed to the screen in the last two lines. Examine the array closely and you can figure out the correct keys to use to pick out specific values from the array in your PHP code.

More info on the Distance-Matrix can be found at https://developers.google.com/maps/documentation/distance-matrix/start

How to Make a Simple Pure JavaScript Popup Window

If you are a minimalist like me, you may appreciate this technique of making a simple JavaScript pop up window with nothing but HTML, CSS and JavaScript. It has no JQuery or other code other than those just mentioned.

See it Live

Here is a live version with just a little extra Style added:

http://jafty.com/pop.html

The Code

Now here is the simple code without much extra CSS style to keep it simple. If you copy and paste this into a blank HTML document, you will get a simple JavaScript working popup window:

<!DOCTYPE html>
<html>
<head>
<title>Pure JavaScript Popup</title>
</head>
<body>

<!–This is the popup code for when the div is clicked:–>
<script>
function iconPop(){
    document.getElementById(‘popcontent’).innerHTML=”You may click the X in the lower right corner to close this window or you may click outside of this window to close it as well.”;
    document.getElementById(‘thepopup’).style.display=”block”;
    document.getElementById(‘blackoutdiv’).style.display=”block”;
}//end iconPop JS function

function iconUnPop(){
    document.getElementById(‘thepopup’).style.display=”none”;
    document.getElementById(‘blackoutdiv’).style.display=”none”;
}
</script>
<!–this is the blackout div that blacks out the rest of the page when popup is popped:–>
<div onclick=”iconUnPop();” id=”blackoutdiv” style=”position:absolute; width:100%; height:100%; top:0px; left:0px;background-color:#222;opacity:0.6;z-index:9999;display:none”></div>

<!–this is the popup html:–>
<div id=”thepopup” style=”position:absolute; width:300px; height:150px; top:150px; left:50%; margin-left:-155px;border: 5px solid orange;background-color:white;z-index:99999;padding:15px;-webkit-border-radius:5px;border-radius:5px;display:none;”><span onclick=”iconUnPop();” style=”position:absolute;bottom:5px;right:5px;color:red;font-weight:bold;cursor:pointer” title=”Close Window!”>-X-</span><span id=”popcontent”></span></div>
<!–End pop up code when icon’s clicked–>

    
    <!–this is the div that when clicked, causes the popup window to appear:–>
    <div onclick=”iconPop();” style=”position:relative;top:75px;left:50%;margin-left:-170px;width:300px;height:200px;border:5px solid orange;-webkit-border-radius:5px;border-radius:5px;padding:30px;background-color:yellow;color:black”>Click this div to open the Pure JavaScript Popup!</div>

</body>
</html>

Summary

That’s really all there is to it. If you like the live version better, you can right click on the demo and select “view-source” and copy and paste that code into your own blank HTML document.

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!