Category Archives: WordPress Plugin Development

Building a Custom WordPress Navigation Menu Plugin

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

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

Create a New Plugin

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

Register a New Menu Location with WordPress

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

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

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

menuLOC

Placing a new top nav in your theme

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

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

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

Customizing the WP Navigation Menu

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

 

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

menuLOC2

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

menustructure

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

Retrieve Menu and Sub Menu Items from WordPress Admin

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

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

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

The first line:

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

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

The second line reads:

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

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

$theNav = wp_get_nav_menu_items($menuID);

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

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

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

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

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

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

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

And replace it with the code we wrote above:

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

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

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

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

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

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

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

Make a Static Top Navigation Menu as a Demo

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

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

 

 

 

WordPress now has Post Templates

Great news for some WordPress developers, WordPress version 4.7 recently came out with an exciting new feature! They now allow post templates similar to the way page templates work.

Activating Post Templates

To activate the new post template feature all you have to do is add your first post template. The one requirement to make them show up in the admin area on the new or edit post screen is that you have to add the following lines to the very top of your new template files:

/*
* Template Name: Your Post Template Name Here
* Template Post Type: CPT, names
*/

That's all there is to it! Make up a template name for the first parameter and use the Custom Post Type name or names for the second parameter, Template Post Type:.

Lets say you created a custom post type named "movies" and you created a template named movie-posts.php, then your movie-posts.php file would start out like this:

/*
* Template Name: Movie Posts
* Template Post Type: movies
*/

Then go ahead and add your loop and other code to your template file and when you upload it you'll see a new "template" drop-down appear under the attributes heading in the right column of the edit posts and add new posts screen for that custom post type:

postemp

Summary:

Note that this also works with ACF plugin or Advanced Custom Fields Pro plugin. That should explain it all. I hope this becomes as useful for some of my readers as it already has for me!

The WordPress Loop

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

 

The Basic WordPress Loop

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

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

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

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

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

Fetching Data Inside a WordPress Loop

Post Title:

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

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

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

Post Content:

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

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

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

Using More Than One Loop

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

<?php rewind_posts(); ?>

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

 

Understanding IP Addresses

Have you ever needed to know how an IP Address works? Have perhaps just wondered how they worked? Well in my line of work it has eventually become necessary for me to fully understand exactly how IP addresses work and are made up. Therefore I aim to share my knowledge on such with anyone who cares to read about IP addresses here on my wonderful blog.

First of all it's important to know that IP addresses are displayed in what is known as dotted-decimal format. For example your current IP address is 54.161.249.135

For anyone Interested, I got your IP address using the following PHP code:

<?php
$ipaddress2 = $_SERVER[REMOTE_ADDR];
echo "<h3>Your Current IP Address: $ipaddress2</h3>";
?>

Just notice the format of the IP address above for now though.

Two Main Parts of an IP Address

While an IP address appears to have 4 parts due to the dotted-decimal format used, in reality, IP addresses are made up of only two main parts. They are "Network ID" and "Host ID". The two parts are not equal or consistent. The Network ID is defined first and the Host ID will be the remaining portion of the IP address.

IP Address Classes

IP addresses are divided into different classes. There are actually five IP classes, but only three are in common use, they are Classes A,B, and C. Classes D and E are reserved classes. Class D is Reserved for Multicasting. Class E is Experimental; used for research. The three main classes are shown in the following examples:

  • Class A - Class A IP addresses use 8 bits for the Network ID(8 bits = 1 byte or 1 segment in dotted-decimal format or 1 octet). Class A addresses only include IP addresses from 1.x.x.x to 126.x.x.x. The IP range 127.x.x.x is reserved for loopback IP addresses. Therefore a Class A IP address might look like 19.23.20.100. From what we know about the two parts of an IP address now, we know that the "19." portion of this example IP address defines the Network ID and the  remaining part(23.20.100) represents the Host ID.
  • Class B - Class B IP addresses use 16 bits for the Network ID(16 bits = 2 bytes or 2 segments in dotted-decimal format or 2 octets). The remaining 16 bits are used for the Host ID of course.
  • Class C - Class C IP addresses use 24 bits for the Network ID(24 bits = 3 bytes or 3 segments in dotted-decimal format or 3 octets). The remaining 8 bits are used for the Host ID in this case.

How to Determine IP Address Class

Determining whether an IP address belongs to class A, B or C can be a daunting task if you don't understand how IP addresses function. That is why I will explain it clearly here for you! First you need to realize that IP classes are determined by the first few bits of the IP address. Then you need to know that bits are not the same as the dotted-decimal format you are accustomed to! For example My IP address now shows as 173.6.69.165 if I open this post in my current browser. What class does 173.6.69.165 belong to? Well here is how I found out:

First, convert the dotted-decimal formatted IP address of 173.6.69.165 to its binary form and count the bits. Actually, you can do just the first octet or 173 in this case. Here is how to convert a decimal octet to a binary Byte:

You divide the number(173 in this case) by 2 and take the answer with the remainder and note both. Then divide the answer by two and note the answer and remainder again....do this eight times. Start at the top of a sheet of paper and move to a new line each time you start a new calculation.  Be sure to circle the remainder each time as those are the 8 bits that make up the Byte we are after. Here is my sloppy example of how I did it with my IP address that began with 173:

binarypaper_ink_li Notice that I circled the remainder after each division problem above. The final step is to start at the bottom and write each circled remainder down in order.

So from the image above, I get the binary number: 10101101

The first three bits of the binary 10101101 determine it's class. In my case, the first three bits are 101.

Then refer to the following table to determine your class:

  • CLASS A: the binary will begin with a zero.
  • CLASS B: the binary must start with 10.
  • CLASS C: the binary must start with 110.

So as you can see from the above table and the image above that, my IP address of 173.6.69.165 converts to a binary number of 10101101 and can then be identified as a CLASS B IP address because its binary form begins with 10. Alot to do to figure out the class of an IP, but it is mostly for learning purposes that I have explained it all like I have. Really, all you have to do is refer to the following table of information which will allow you to convert it to a class using just the first octet of the IP address(173 in my case):

Quick & Easy Method to Determine IP Class

  • CLASS A: First 3 digits of the IP address will be from 0 to 127.
  • CLASS B: First 3 digits of the IP address will be from 128 to 191.
  • CLASS C: First 3 digits of the IP address will be from 192 to 223.

So again, my IP(173.6.69.165) starts with 173 so I can use the above three lines of data to confirm that it is indeed a CLASS C IP address because 173 falls in between 128 and 191.

 

 

mysqli_result function to replace old mysql_result

Many of us are busy upgrading our PHP and MySQL code when migrating from PHP5 to PHP7. One of the first things you learn is that the MySQL functions have been depreciated and removed completely in PHP7, therefore can no longer be used! That's a major pain in the butt for many of us, but luckily the fix is not too difficult most of the time. Simply doing and find and replace replacing "mysql" with "mysqli" is often a good first step, but you will also need to add the connection variable as an argument to many of the mysqli functions as well. Then some functions, such as the mysql_result function, do not have a mysqli counterpart. That means there is no mysqli_function defined in PHP7! Real pain right? well copy and paste the following functino into your PHP code and you can now use the mysqli_result function effectively. Be sure to pass it the connection variable as most mysqli functions require even though mysql counterparts did not. Here's the function:

function mysqli_result($res,$row=0,$col=0){ 
    $numrows = mysqli_num_rows($res); 
    if ($numrows && $row <= ($numrows-1) && $row >=0){
        mysqli_data_seek($res,$row);
        $resrow = (is_numeric($col)) ? mysqli_fetch_row($res) : mysqli_fetch_assoc($res);
        if (isset($resrow[$col])){
            return $resrow[$col];
        }
    }
    return false;
}

How to change DNS settings on your local PC

Have you ever been working on a website, changed your DNS settings over to a different server and later needed to access that server again from the old domain name for some reason? Well if you are an active developer, this situation is somewhat common. I'll explain or you can skip the rest of this paragraph to quickly learn now to do it. Let's say you own the domain name example.com and a web server with an IP address of 111.111.111.111. Now assume you have a WordPress blog on that server that you had to move to another server with IP 222.222.222.222. Let's say you already changed the DNS settings for domain.com to point to the new server with IP 222.222.222.222 but you need to go back to the original WordPress site on the other server with an IP of 111.111.111.111. What do you do? We all know a WordPress site won't function properly with just the IP address, so that is out. What you need to do is repoint example.com to 111.111.111.111 in order to access that WordPress site again. What a PITA, right? Well read on and I'll show you a fast and easy way to make the site on the original server work with example.com even after you've pointed it to another IP address or web server! It's as simply as controlling a local host file on your local PC to make example.com route to 111.111.111.111 even though the internet routes it to 222.222.222.222! Here's how:

Using hosts file to override DNS settings for your PC

A lot of people don't realize that when you make a request to the Internet using your local computer it first checks a local copy of the hosts file for an entry and only if one isn’t present it goes out to the Internet DNS servers. Therefore there's an opportunity present for you to redirect example.com only for your own PC if you wanted to! Here are the easy steps:

  1. Open file explorer and navigate to C:\Windows\System32\drivers\etc.
  2. Open the file named "hosts" in notepad or another text editor that could be used as a code editor such as Notepad++, which is what I use.
  3. Now simply add a line to the end of the hosts file that contains the IP address of the server you want to route the domain name too followed by a space and then the domain name you want to reroute. So in our example scenario above, you would enter a new line that reads simply: 111.111.111.111 example.com
  4. Save the hosts file and open your browser and navigate to the domain which in our example was example.com. Note that there is a difference between example.com and www.example.com, so if you want it to work with www, you have to add another entry for www.example.com.

If you're using Notepad++ or similar as I was, you'll need to open it in administrator mode in order to be able to save the hosts file. Good luck! That's all there is to it.

How to change local DNS settings on a Mac

If you're on a Mac, the instructions are basically the same but do this instead:

From the terminal, type:

nano /private/etc/hosts
and then add the IP and domain name as described above, so the only real difference between Mac and a PC when it comes to changing DNS settings is that you will use a different editor and the hosts file is located in different places.

 

 

wp_redirect Causing Page Isn’t Redirecting Properly Error

I was working on a client's WordPress website today and had to do a redirect after successful login to his WordPress site. I tried to use wp_redirect with several different hooks including init, wp, wp_login, wp_redirect....etc. and none worked. I kept getting an error in Firefox that looked like this saying "The page isn't redirecting properly....Firefox has detected that the server us redirecting the request for this address in a way that will never complete:

redirecterr

The Solution

So, in short Here is my solution. While I'm sure there may be another better way, this is the only one I found after two hours of trying to use wp_redirect. I simply used this line in place of where I would normally use wp_redirect:

echo "<script>document.location = '/my-account/';</script>";

So I essentially insert a JavaScript redirect into the page using PHP. Hackish? Yes, but it works and hopefully this post will save someone hours of wasted time trying to get wp_redirect to work!

 

Cron Job Not Working

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

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

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

Linux Cron Job Tutorial

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

The Solution

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

crontest.php:

<?php

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

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

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

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

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

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

Cron Job Troubleshooting Tips

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

How to Use PHP SESSION Variables in a WordPress Plugin

I was writing a WordPress plugin today that required me to use PHP SESSION variables so the app could save variables across multiple runs of the application. So at first, I tried using SESSION variables in my PHP code just like I would with any other PHP application outside of WordPress, but it failed. So read on for the solution I found that works perfectly and is as simple as adding three lines of code to your plugin or functions.php file.

Add this code to your main plugin file or theme's functions.php file:

function register_session(){
    if(!session_id()) session_start();
}
add_action('init','register_session');

Those four magic lines of code was all I had to add to my main plugin file to make the following code work:

<?php
// Start the session
session_start();

    if(isset($_SESSION['timesran'])){
        $_SESSION['timesran']++;
        $runno = $_SESSION['timesran'];
    }else{
        $runno = 1;
        $_SESSION['timesran'] = 1;
    }
    echo "Run number $runno<br />";
    ?>

So each time the WordPress plugin's application is ran, it increments the timesran session variable successfully as long as I have already added the previous code snippet above to my plugin's main file. The register_session function is needed for sessions to work and should be in your plugin's index.php file or whatever file is your plugin's main file. You can then use PHP session variables in any file within your plugin.

 

How to Restart a Web Server with PHP

Today, I had the task of having to write a PHP script that restarts a web server. This is not allowed by default. It should be noted before I continue, that it is not allowed because it opens a security hole. It makes possible a server attack that would lock up your server by constantly restarting it from PHP. However, now that you're aware of the risk, if you still wish to continue. Here is how it is done:

PHP Code:

    if(exec("sudo service nginx restart")) {
            echo "server restarted!<br />";
        }else{
            echo "ERROR! Server failed to restart!<br />";
        }

Test the above code. NOTE: it is likely not to work because normally you will have to edit the sudoers file on the server.

Edit the Sudoers File to Allow PHP to Use the Restart Command

On the Linode/Nginx server I am working on currently the sudoers file can be found at /etc/sudoers. It can be found in a similar location on most Linux servers. In order to edit the sudoers file on a Linux NGINX server, simply open the file and add the following to the end of the file and save it before restarting the web server:

www-data ALL=(ALL) NOPASSWD: /usr/sbin/service nginx start,/usr/sbin/service nginx stop,/usr/sbin/service nginx restart

Note that your server may require you to edit the sudoers file with visudo.

 

 

Find and Replace All Occurrences of a File on Linux Server from Command Line

Today I was given the challenge of providing a client with a command line command that would allow my client to replace all occurrences of any file named this-file.php with a new file with the same name that resides in the server's root directory. Here is how I accomplished the challenge with a single line command from the Linux command prompt:

find . -name "this-file.php" -print -exec cp this-file.php {} \;

What we have there is basically two commands in one. First is the command to find all occurrences of this-file.php on the server and display the results. I have it displaying results so you can verify what files were replaced in the end. So, the command to just find all files named this-file.php and list them is:

find . -name "this-file.php" -print

Type the above command at your Linux command prompt and you'll get a list of paths found to files with the name this-file.php.  However, it should be noted that the above command is the command to use if you are in the base directory of your server, otherwise you will want to specify the root directory. In the above command, the '.' (period) means to search in current directory. So if you're not in the curent directory, use something more appropriate such as a / instead of a . so it forces it to search all directories above and including /. Try this:

find / -iname "this-file.php"

That is a safer command than the first because it doesn't matter what directory you call it from. Notice we also didn't use the -print parameter at the end this time. It is actually moot because it will print the results anyway. It was included in the first example to explain it's use in the find and replace command, but is not needed when find is used by itself.

The second part of the challenge was to replace all those files listed with a new version of the file stored in the root directory. Therefore, before we go any further, we need to change into the root directory or whatever directory you will use to store the new file that will be used to replace all of the other files with. So change directories with the cd command like this:

cd /

That changes you into the root directory where you can go ahead and upload your new file if you haven't done so already.

Next is the command to copy this-file.php and overwrite the old version of the file. As long as you use the same file name, this works out-of-the-box with Linux. The simple command to copy a file from the root directory to a website's sub-directory might look something like this:

cp this-file.php /var/www/amykukuck.com/public_html/wp-content/themes/oily-sites-wide/templates/this-file.php

Combining two Linux Commands into One Line

The final part of our challenge is to combine the two commands we have learned above into one simple command to find and replace all occurrence of the file named this-file.php with a new version of it stored in the root directory that has the same file name. Here are the two commands combined:

find . -name "this-file.php" -print -exec cp this-file.php {} \;

Notice the find command which ends with -print looks the same. Then the find command is followed by -exec and then the cp command. Finally the combined command ends with {} \;. That last part has two functions. The brackets, {}, are used to replace what is found by the find command each time it finds something. The \; part lets Linux know the command is done and it can stop. Please note that for this to work the way it is written here, you must change directories into the directory that contains the new file in which will replace all instances of the file with the same name elsewhere on your server. So, be sure to execute the combined command only after changing into the correct directory which contains your new file!

 

 

Extending WordPress XML-RPC Functions

XML-RPC is a great, somewhat little-known feature of WordPress that is perfect for accomplishing many remote tasks with WordPress. I have found it to be a valuable asset during plugin development. While there are numerous function built in to the XML-RPC WordPress library already, we are going to focus solely on extending the XML-RPC library to accomplish almost any remote WordPress tag you wish to. The focus of this article is going to be on using XML-RPC as a communication layer between two WordPress sites on different servers. The two sites could be on the same server, but it is important to know that they do not have to be.

Basic code to extend WordPress XML-RPC

function wp_testXMLRPC() {
$returnme = "XML-RPC is working!";
return $returnme;
}//end wp_testXMLRPC extended XML-RPC function

function wp_extend_xmlrpc_methods($methods) {
    $methods['wp.testXMLRPC'] = 'wp_testXMLRPC';
    return $methods;   
}//end wp_extend_xmlrpc_methods
add_filter('xmlrpc_methods', 'wp_extend_xmlrpc_methods');

That's it! Add that code to your plugin file or theme's functions.php file and you have successfully extended WordPress' XML-RPC capabilities by adding a test function to test communication between two WordPress websites. Next I'll show you how to use this code from another WordPress site. We can call the wp_testXMLRPC function from another WordPress website and it will return "XML-RPC is working!" if the XML-RPC functions are currently working on both WordPress sites involved.

Calling an XML-RPC function from another WordPress website

To call our custom extended XML-RPC function above from another WordPress site, we would make a custom page template or plugin file and add the following code where you want to display the results of the test_XMLRPC function:

<?php

$rpcurl = "http://example.com/xmlrpc.php";//URL of site with custom XML-RPC function
$request = xmlrpc_encode_request('wp.testXMLRPC');//wp_testXMLRPC = wp.testXMLRPC
$ch = curl_init();
curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
curl_setopt($ch, CURLOPT_URL, $rpcurl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 1);
$results = curl_exec($ch);
curl_close($ch);

echo "<p>Results of XML-RPC wp_testXMLRPC function: $results</p>";//output results

?>

That's really all there is to it. However this is a simple function. It is also possible to create functions that accept and return parameter data and do complex WordPress actions etc.

How to pass parameters to an extended XML-RPC function and return values

The real power of XML-RPC becomes clear when you add the ability to pass values back and forth from one WordPress website to another! Soon we will examine how to pass a single parameter to an XML-RPC extended function. First, let's look at how to make the function for WordPress site one:

<?php

function wp_sayHi($arg) {
// Array of WP_User objects.
$yourName = $arg[0];
$returnme = "Hello $yourName!";
return $returnme;
}//end wp_sayHi extended XML-RPC function

?>

Then we have to add the code to extend the methods:

<php

function wp_extend_xmlrpc_methods($methods) {
    $methods['wp.sayHi'] = 'wp_sayHi';
    return $methods;   
}//end wp_extend_xmlrpc_methods
add_filter('xmlrpc_methods', 'wp_extend_xmlrpc_methods');

?>

The above two sections of code need to get added to your functions.php or plugin file on the first WordPress site, the one you want to retrieve the data from. On the second WordPress site, the one you pass the data from, you would add the following code wherever you wanted to present the results of the XML-RPC function we made:

<?php

$your_name = "Ian Lin";

$rpcurl = "http://example.com/xmlrpc.php";
$argparam = array($your_name);
$request = xmlrpc_encode_request('wp.sayHi',$argparam);
$ch = curl_init();
curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
curl_setopt($ch, CURLOPT_URL, $rpcurl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 1);
$results = curl_exec($ch);
curl_close($ch);

echo $results;

?>

The above code would print "Hello Ian Lin" to the screen wherever the code was called in a custom page template file or plugin file. Notice how we passed the $your_name vaiable as a parameter for the wp_sayHi function in lines 3 and 4 of the code above. $argparam puts the $your_name variable into a simple array before passing it to the $request made in the next line. Yes, XML-RPC functions accept arrays as parameters. Now let's look at what to do if you wanted to pass two or more values to an XML-RPC function.

Passing Two or More Values to an extended XML-RPC Function

Here is a valuable nugget I'll pass on to my readers that allows you to reset a user's password on WordPress site one from WordPress site two! Yes, it allows you to reset a password from another site. The function takes two parameters to work. It needs the user_login name and the new password. Here's the code that would go on WordPress site one:

<?php

function wp_syncPasswords($args) {
// Array of WP_User objects.
$userArg = $args[0];//gets user_login value passed in $args
$passArg = $args[1];//gets password from $args
//get user ID by login:
$userget = get_userdatabylogin($userArg);
$usergot = $userget->ID;//gets id of passed user
//update password:
wp_set_password($passArg, $usergot);
$returnme = $usergot."~".$userArg."~".$passArg;
return $returnme;
}//end wp_syncPasswords extended XML-RPC function

?>

There you have an XML-RPC function that allows you to actually change a user's password remotely! Pretty neat huh?

Take notice of the $returnme variable in the above wp_syncPasswords function. It returns 3 values in a string separated by a tilde character. You could use any special character to separate the values, but I find the tilde to be safe and reliable, so that's what I use a lot. I do this because you cannot return an array of values in an XML-RPC response. If I'm wrong, someone please enlighten me, but that's what I've learned from my experience anyway. Then we would simply parse out the values in the response on WordPress site two when we call the function and get $results.

Of course next to have to extend the XML-RPC methods just like we did earlier. Please note that if you already have other XML-RPC functions in your functions.php or plugin file, then you wouldn't rewrite the entire block of code to add additional functions as methods, you can simply add on to your previous functions. For example, here we'll add on to our last extended XML-RPC function from above:

<php

function wp_extend_xmlrpc_methods($methods) {
    $methods['wp.sayHi'] = 'wp_sayHi';

$methods['wp.syncPasswords'] = 'wp_suncPasswords';
    return $methods;   
}//end wp_extend_xmlrpc_methods
add_filter('xmlrpc_methods', 'wp_extend_xmlrpc_methods');

?>

Notice that this time, since we already had the wp_sayHi function extending XML-RPC previously, all we had to do is add the highlighted line to the wp_extend_xmlrpc_methods function above to make our new function valid and ready to call from another website such as WordPress site two.

Calling the wp_syncPasswords Function from a Remote WordPress Site Passing Two Parameters via XML-RPC

<?php

$userlog = "admin";//set WordPress user name
$new_pass ="YOUR_PASSWORD_HERE";//set new password
$rpcurl = "http://example.com/xmlrpc.php";
$argparam = array($userlog,$new_pass);
$request = xmlrpc_encode_request('wp.syncPasswords',$argparam);
$ch = curl_init();
curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
curl_setopt($ch, CURLOPT_URL, $rpcurl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_TIMEOUT, 1);
$results = curl_exec($ch);
curl_close($ch);
}//end my_profile_update function by Ian L.

?>

Running the code above would change the password of the admin user to YOUR_PASSWORD_HERE, so be sure to change admin to an existing username on WordPress site one and change YOUR_PASSWORD_HERE to the value of the new password you want to set from WordPress site two. This code could go in a WordPress plugin, but probably not appropriate for a page template, however it is possible.

Notice in the above PHP code, how we passed two parameters by setting the value of $argparam to array($userlog, $new_pass). Then we pass $argparam array to WordPress site one in the XML-RPC request in the next line. It's important to note how we pass one, two, or more parameters to XML-RPC functions. Now you should know how!

Some of you might be saying, "Hey, what about the returned results?" Well, you got me, I left them out to keep the code simple. It will work as it is above, but if you wanted to show the results returned you could do so by parsing the three values from the $results variable using something like this:

<?php

$myArray = explode("~", $results);

$remoteUserID = $myArray[0];

$remoteUserLogin = $myArray[1];

$remoteUserPassword = $myArray[2];

echo "<h2>User id: $remoteUserID with user login: $remoteUserLogin has had their password reset to $remoteUserPassword on WordPress site one!</h2>";

?>

That just about covers everything you need to know about extending the XML-RPC functionality of WordPress. You can do just about anything you want with this tool of you are good with writing custom WordPress code. Happy coding!

Working with WordPress Advanced Custom Fields Image Repeater Fields

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

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

The Challenge:

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

 

The solution:

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

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

Export one or more of the posts in question

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

post

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

export

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

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

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

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

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

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

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

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

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

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

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

your_own_farm_pics
2

_your_own_farm_pics
field_57ab934d407ed

your_own_farm_pics_0_image
1862

_your_own_farm_pics_0_image
field_57ab934d407ee

your_own_farm_pics_0_alt_tag
first alt tag

_your_own_farm_pics_0_alt_tag
field_57ab934d407ef

your_own_farm_pics_1_image
1861

_your_own_farm_pics_1_image
field_57ab934d407ee

your_own_farm_pics_1_alt_tag
second alt tag

_your_own_farm_pics_1_alt_tag
field_57ab934d407ef

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

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

repeater_field_name + incremented number + sub-field name

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

underscore + repeater_field_name + incremented number + sub-field name

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

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

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

<?php

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

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

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

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

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

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

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

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

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

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

?>

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

 

Code explained:

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

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

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

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

$key = "your_own_farm_pics_0_image";

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

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

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

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

$key = "your_own_farm_pics_0_alt_tag";

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

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

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

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

 Summary

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

 

 

Passing PHP Variables to File included with get_template_part WordPress Function

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

The Problem

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

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

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

Making it Possible to Pass PHP Variables to Template Parts:

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

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

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

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

Example Usage:

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

Change this line:

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

into this line:

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

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

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

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

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

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

Adding a Custom Post Type to WordPress Plugin

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

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

?>

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

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

videoCPT

Add a Metabox with a Custom Field to your CPT

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

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

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

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

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

customField

Saving Custom Field Data

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

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

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

 

 Adding Multiple Meta-Boxes and Custom Fields

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

metaboxes

Summary

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

 

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

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

The Wrong Way:

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

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

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

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

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

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

In your plugin's main PHP file include:

<?php

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

?>

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

wp_enqueue_style('frontend_CSS');

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

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

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

Using CSS Media Queries in Responsive Web Design

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

Common Screen Sizes

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

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

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

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

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

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

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

CSS Media Queries

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

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

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

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

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

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

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

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

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

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

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

Writing and Testing your CSS Code

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

How to Stop Admin Emails Upon New User Registration in WordPress

It took me quite a bit of messing around to stop admin emails on new user registration to my WordPress site today, so I'm documenting the final solution here. The key is the pluggable function named wp_new_user_notification, but simply replacing the function in your theme's functions.php file does not always(or maybe ever) work, so the final solution I found to work was to replace the pluggable wp_new_user_notification function inside a very simply light-weight plugin. Simply copy and paste the code below into a file and name it Disable_User_Notifications_To_Admin.php. Then upload it to your site's plugins directory and go to wp-admin and activate it. Simple, easy, quick and DONE!

 

<?php
/**
 * @package Disable_User_Notifications_To_Admin
 * @version 1.0
 */
/*
Plugin Name: Disable User Notifications To Admin
Plugin URI: http://jafty.com/blog
Description: This is just a simple plugin to stop those annoying admin emails each time a new user registers to your site. simply change the value of linian11@yahoo.com in the main plugin file with the email you do not want to recieve notifications at and it will block them.
Version: 1.0
Author URI: http://jafty.com
*/
/*
change the value of linian11@yahoo.com below with the email you do not want to recieve notifications at and it will block them.
*/
if(!function_exists('wp_new_user_notification')) :

function wp_new_user_notification($user_id, $plaintext_pass = '') {
    $user = get_userdata($user_id);
    $blogname = wp_specialchars_decode(get_option('blogname'), ENT_QUOTES);

    if ( empty($plaintext_pass) )
        return;

    $message  = sprintf(__('Username: %s'), $user->user_login) . "\r\n";
    $message .= sprintf(__('Password: %s'), $plaintext_pass) . "\r\n";
    $message .= wp_login_url() . "\r\n";
if($user->user_email != "linian11@yahoo.com")
    wp_mail($user->user_email, sprintf(__('[%s] Your username and password'), $blogname), $message);

}
endif;

?>

Summary

That's pretty much guaranteed to work if nothing else has.

 

Get WordPress Current Version Number with PHP

Today I wrote a great little PHP script that fetches the Current release number of WordPress. It goes like this:

<?php
//WP Version checking by Ian L. of Jafty.com:
$url='https://api.wordpress.org/core/version-check/1.7/';

$contents = file_get_contents($url);
$contents = utf8_encode($contents);
$obj = json_decode($contents);

$upgrade = $obj->offers[0];
$WPversion = $upgrade->version;
echo "WP Version: $WPversion<br />";
?>

 

Also you will find the following link very useful for hiding various notifications in WordPress:

http://www.wpoptimus.com/626/7-ways-disable-update-wordpress-notifications/