How a WordPress Plugin Works

How a WordPress Plugin Works:
After placing a WordPress plugin into the “wp-content/plugins/” folder, the plugin should automatically be available to install. When a plugin is “Activated”, this tells WordPress to load your bit of code on “each” page (including admin pages). This is why if you have many plugins activated, your WordPress installation may be very slow due to the amount of code being included. Since WordPress loads your code automatically when the plugin is activated, you can take advantage of this by tapping into the WordPress Plugin Application Program Interface (API). You can also access the WordPress template tags or create your own.

I suggest reading into the WordPress loop if you plan on making changes to the post content or comments. The WordPress loop is the loop that displays your posts. Some template tags will not work outside of this loop, so it is imperative that you know exactly where your code is executing. You can control this by taking advantage of actions and filters, which will be explained in later posts.
Folder Structure:
All WordPress plugins will be installed in the wp-content/plugins directory. Some plugin authors simply include a PHP file for their plugin, but I recommend always creating a folder to store your plugin. I typically structure my plugin in this folder structure:
Plugin Folder Name (The name of your plugin with no spaces or special characters)
-> Main plugin php file
-> js folder (for JavaScript files)
-> css folder (for StyleSheet files)
-> php folder (for other PHP includes)
For example purposes, here is a sample structure I have created:
devlounge-plugin-series

-> devlounge-plugin-series.php
-> js
-> css
-> php
Within the devlounge-plugin-series folder, I would include just the main PHP file and put all other files in their respective folders. This structure will assist other plugin authors who look at your code to be able to tell what the main plugin file is and where all the supporting files are located.
WordPress also recommends placing images in their own directory and including a read  me file for your plugin.

Main Plugin File:
When you start a new plugin file, the first seven lines are the lines that describe your plugin.
PHP:
1.  <?php
2.  /*
3.  Plugin Name: Your Plugin Name Here
4.  Plugin URI: Your Plugin URI
5.  Version: Current Plugin Version
6.  Author: Who Are You?
7.  Description: What does your plugin do?
Line 3 allows you to name your plugin. Line 4 allows you to point a user to the web location of your plugin. Line 5 allows you to specify the current version. Line 6 allows you to specify the author of the plugin. Line 7 allows you to describe your plugin.
Shown below is an example of the code filled out:

PHP:
1.  <?php
2.  /*
3.  Plugin Name: Devlounge Plugin Series
4.  Plugin URI: http://www.devlounge.net/
5.  Version: v1.00
6.  Author: Ronald Huereca
7.  Description: A sample plugin for a Devlounge series.
Set Up a Class Structure:
You don’t have to be incredibly familiar with PHP Classes to develop a WordPress plugin, but it sure helps. A class structure is necessary in order to avoid naming collisions with other WordPress plugins. If someone out there sets up the same function name as yours in a plugin, an error will result and WordPress will be rendered inoperable until that plugin is removed. To avoid naming collisions, it is imperative that all plugins incorporate a PHP class structure. Here is some bare-bones code that will allow you to set up a class structure.
PHP:
1. if (!class_exists(“DevloungePluginSeries”)) {
2.     class DevloungePluginSeries {
3.        function DevloungePluginSeries() { //constructor
4.
5.        }
6.
7.     }
8.
9. } //End Class DevloungePluginSeries
What the above code does is checks for the existence of a class named DevloungePluginSeries. If the class doesn’t exist, the class is created.
Initialize Your Class The next bit of code will initialize (instantiate) your class.
PHP:
1. if (class_exists(“DevloungePluginSeries”)) {
2.     $dl_pluginSeries = new DevloungePluginSeries();
3. }
All the above code checks for is if the class DevloungePluginSeries has been created. If it has, a variable called $dl_pluginSeries is created with an instance of the DevloungePluginSeries class.
Set Up Actions and Filters:
The next bit of code sets up a place holder for WordPress actions and filters (which I will go over in a later post).
PHP:
1. //Actions and Filters
2. if (isset($dl_pluginSeries)) {
3.     //Actions
4.
5.     //Filters
6. }
7.
8. ?>
The above code checks to make sure the $dl_pluginSeries variable is set. If it is (and that’s only if the class exists), then the appropriate actions and filters are set up.

After placing a WordPress plugin into the “wp-content/plugins/” folder, the plugin should automatically be available to install.
When a plugin is “Activated”, this tells WordPress to load your bit of code on “each” page (including admin pages). This is why if you have many plugins activated, your WordPress installation may be very slow due to the amount of code being included. Since WordPress loads your code automatically when the plugin is activated, you can take advantage of this by tapping into the WordPress Plugin Application Program Interface (API). You can also access the WordPress template tags or create your own.

I suggest reading into the WordPress loop if you plan on making changes to the post content or comments. The WordPress loop is the loop that displays your posts. Some template tags will not work outside of this loop, so it is imperative that you know exactly where your code is executing. You can control this by taking advantage of actions and filters, which will be explained in later posts.
Folder Structure:
All WordPress plugins will be installed in the wp-content/plugins directory. Some plugin authors simply include a PHP file for their plugin, but I recommend always creating a folder to store your plugin.
I typically structure my plugin in this folder structure:
Plugin Folder Name (The name of your plugin with no spaces or special characters)
-> Main plugin php file
-> js folder (for JavaScript files)
-> css folder (for StyleSheet files)
-> php folder (for other PHP includes)
For example purposes, here is a sample structure I have created:
devlounge-plugin-series
-> devlounge-plugin-series.php
-> js
-> css
-> php
Within the devlounge-plugin-series folder, I would include just the main PHP file and put all other files in their respective folders. This structure will assist other plugin authors who look at your code to be able to tell what the main plugin file is and where all the supporting files are located.
WordPress also recommends placing images in their own directory and including a read  me file for your plugin.

Main Plugin File:
When you start a new plugin file, the first seven lines are the lines that describe your plugin.
PHP:
1.  <?php
2.  /*
3.  Plugin Name: Your Plugin Name Here
4.  Plugin URI: Your Plugin URI
5.  Version: Current Plugin Version
6.  Author: Who Are You?
7.  Description: What does your plugin do?
Line 3 allows you to name your plugin. Line 4 allows you to point a user to the web location of your plugin. Line 5 allows you to specify the current version. Line 6 allows you to specify the author of the plugin. Line 7 allows you to describe your plugin.
Shown below is an example of the code filled out:

PHP:
1.  <?php
2.  /*
3.  Plugin Name: Devlounge Plugin Series
4.  Plugin URI: http://www.devlounge.net/
5.  Version: v1.00
6.  Author: Ronald Huereca
7.  Description: A sample plugin for a Devlounge series.

Set Up a Class Structure:
You don’t have to be incredibly familiar with PHP Classes to develop a WordPress plugin, but it sure helps. A class structure is necessary in order to avoid naming collisions with other WordPress plugins. If someone out there sets up the same function name as yours in a plugin, an error will result and WordPress will be rendered inoperable until that plugin is removed. To avoid naming collisions, it is imperative that all plugins incorporate a PHP class structure. Here is some bare-bones code that will allow you to set up a class structure.

PHP:
1. if (!class_exists(“DevloungePluginSeries”)) {
2.     class DevloungePluginSeries {
3.        function DevloungePluginSeries() { //constructor
4.
5.        }
6.
7.     }
8.
9. } //End Class DevloungePluginSeries
What the above code does is checks for the existence of a class named DevloungePluginSeries. If the class doesn’t exist, the class is created.
Initialize Your Class The next bit of code will initialize (instantiate) your class.

PHP:
1. if (class_exists(“DevloungePluginSeries”)) {
2.     $dl_pluginSeries = new DevloungePluginSeries();
3. }
All the above code checks for is if the class DevloungePluginSeries has been created. If it has, a variable called $dl_pluginSeries is created with an instance of the DevloungePluginSeries class.
Set Up Actions and Filters:
The next bit of code sets up a place holder for WordPress actions and filters (which I will go over in a later post).

PHP:
1. //Actions and Filters
2. if (isset($dl_pluginSeries)) {
3.     //Actions
4.
5.     //Filters
6. }
7.
8. ?>

The above code checks to make sure the $dl_pluginSeries variable is set. If it is (and that’s only if the class exists), then the appropriate actions and filters are set up.

Javascript will work within WordPress and Using Javascript in WordPress

Javascript will work within WordPress. If used within the template files, most Javascript will work fine. Using them within a post is another matter, though.

Once you enter the world of PHP, it is really hard to go back to using Javascript, but they still serve their purpose. If you can replace a Javascript with PHP code, tags, or script in WordPress, do so. Your life will be much easier. If not, here are a few tips to make your Javascript work in WordPress.
Javascript in Template Files

This page is somewhat misleading. See this function’s page for better info:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

And here are some good tutorials:

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

http://digwp.com/2009/06/use-google-hosted-javascript-libraries-still-the-right-way/

To use Javascript repeatedly within your site, you can either set the call for the Javascript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using Javascript in any HTML page. To “load” the Javascript file into your site, in the head, add something like this:

If your custom Javascript isn’t working after including the previous line of code in your header.php template file, use the following line of code.

<script type="text/javascript" src="/pathto/yourscript.js”>

Include the leading forward slash “/” even if your file is located in the root of your theme.

Be sure that you define the type correctly, as your site will not validate without it.

In the spot where you wish to use the Javascript, set the call for the Javascript. For example, you are using a Javascript that sets a link for users to “email this page” to a friend and you want it to be under the post title. It might look like this:

<a href="” rel=”bookmark”>

Javascript in Posts

To use Javascript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary.

For the occasional or one time use of Javascript, you need to put the script into a Javascript file and then call it out from within the post. Make sure that each script is defined by its function name such as:

function updatepage(){var m=”Page updated “+document.lastMo…….}

To include a Javascript inside a post, you need to combine both the call to the script file with the call to the Javascript itself.

If the src attribute of your javascript tag is being stripped out you need to turn off the rich editor (from the dashboard go to Users > Personal Options). If you are using the rich editor the javascript tag’s src attribute may be stripped out even when manually editing in the HTML popup window.
Creating a Multiple Script File

You might have a collection of scripts that you call from time to time, like a scripts which calculate time zones or distance, or maybe scripts that create some effect or accent on your page. For recurring Javascripts, consider grouping them together into one file.

For this example, name the group Javascripts file scriptfile.js (choose whatever you want) and say it contains the updatepage, emailpage, and caltimezone scripts. As you copy each Javascript into the file, make sure it has a unique function name such as with this condensed version:

function updatepage() {var m=”Page updated “+document.lastMo…….}
function emailpage() {mail_str = “mailto:?subject=….}
function caltimezone() {var timerID ; function tzone(tz, os, ds, cl) {this.ct =……}

Place the script file of all the Javascripts in the head of the header.php template file between the meta tags and the style sheet link. It will just sit there, loaded into the browser’s memory, waiting for one of the scripts inside to be called.

In the spot in your post where you would like to use the Javascript, call it as follows:

Using Multiple Javascript Files inside one post or page

When using functions lying in multiple Javascript files, write all the Javascript references in the header.php. If you really need to write the script reference in the body of the post or page, make sure that the URL to the javascript file starts with the forward-slash (“/”) which is your webserver’s document root (the “htdocs” directory in the case of Apache webserver). This is called a fixed URL. If you do not specify the starting slash (“/”), it becomes a relative URL (“../../relative/path/to/javacripts/file.js”) and is calculated relative to the current location in the directory structure. If you do this, you will almost surely need to maintain several versions of this reference because different parts of the displayed content are generated from different locations. For example, pages are created from .php template files in the WordPress root directory (note that this is not the webserver’s document root) while posts are created from .php template files in the chosen theme’s directory (“/path-to-wordpress-root/wp-content/themes/yourtheme/partofpost.php”). These are two different paths.
Troubleshooting Javascript

If you are having trouble with including Javascripts inside a post, use the Text Control Plugin which allows you to control on a global or per post basis the ability to turn off WordPress’ automatic formatting features which can quickly turn code into something readable instead of executable. Set the options on the post that you will be using the Javascript on to have No Formatting or Markup or nl2br and No Character Formatting. You may have to experiment to get it to work. As a reminder, when using the Text Control Plugin, you must first Save and Continue Editing the post in order to see the Text Control Plugin options.

If you choose No Formatting, your post’s text will run together, so you will have to add paragraph tags and other HTML tags in order to format your page as WordPress normally does that for you.

If your Javascript does not work, triple check that you have not made any errors during the cut and paste into a group or single file. Be sure you used a text editor and not a word processing program to create the Javascript file. Check the name of the function in the script file as well as on your site. Not all Javascripts may work, and could possibly conflict with your PHP commands, but this is very rare.

Using Javascript in WordPress

Once you enter the world of PHP, it’s really hard to go back to Javascripts, but they still serve their purpose. If you can replace a Javascript with PHP code, tags, or script in WordPress, do so. Your life will be much easier. If not, here are a few tips to make your Javascript work in WordPress.

You can only use Javascript in full different versions of WordPress. WordPressMU driven sites like wordpress.com have set the tag filter to strip out all use of javascripts in posts, along with all CSS styles and many HTML tags for “security reasons”. You can therefore only use Javascript in the full version of WordPress, from within the posts and template files.
Using Javascript in WordPress Template Files

A lot of people want to put clocks, forms, calculations, and other widgets and gadgets driven by Javascript on their WordPress full version site. While I recommend you try to find a PHP script or Plugin replacement for the Javascript, you can still use Javascripts in WordPress templates.

If you have a lot of javascripts that you will be using consistently in your WordPress template files, then first try to put all the scripts into one group Javascript file rather than a bunch of small files. Even if you don’t use the scripts for every single page or post on your site, they can still just sit there in the single Javascript file until called.

Make sure that each script is defined by its function name such as:

function updatepage(){var m=”Page updated “+document.lastMo…….}

Let’s assume that you called your group javascripts file scriptfile.js and it contains the updatepage script. When you want to use the example updatepage Javascript in a WordPress template file, add a link to the Javascript file in the header.php between the meta tags and the style sheet link in the head section. Here is an exmaple of what to add for your Javascript file link, changing the name to your script file name:

Be sure that you define the type correctly, as your site will not validate without it.

In the place on your index.php, single.php, sidebar.php, or whichever template file you want to activate the Javascript, place the following code in exactly this format, changing the name to the function call of the script:

Be sure and thoroughly test the generated pages with the script to make sure it works.
To Include Javascript Inside a WordPress Post

WordPressMU and wordpress.com users could include Javascripts inside of posts, but the developers have decided that this poses a security risk and so all javascript and many CSS and HTML tags will be automatically stripped from your post contnet. But you can use this technque within the post of the full version of WordPress.

To include a Javascript inside a post, you need to combine both the call to the script file with the call to the Javascript itself.

If your Javascript doesn’t work, triple check that you haven’t made any errors during the cut and paste into a group or single file. Be sure you used a text editor and not a word processing program to create the Javascript file. Check the name of the function in the script file as well as on your site. Not all javascripts may work, and could possibly conflict with your PHP commands, but this is very rare.

If you are using the full version of WordPress and having trouble with including a lot of javascripts inside a post, try using the Text Control Plugin. This allows you to control WordPress’ automatic formatting features on a global or per post basis the ability, turning them on and off. The WordPress automatic formatting features can quickly turn a code into something readable instead of executable. To use this plugin, the entire post must be setup in HTML tags using paragraph tags and such as they will be turned off by the lack of formatting, and set the plugin options on the post that you will be using the Javascript on to have No Formating and No Character Formating. As a reminder, when using the Text Control Plugin, you must first Save and Continue Editing the post in order to see the Text Control Plugin options. This is only to be used by the brave as it is a lot of extra work.

DO NOT PASTE JAVASCRIPT CODE INTO THE COMMENTS!

They will be stripped automatically by WordPress.com. The issue to solving your problems with using Javascript inside of a post of Page in WordPress is not the Javascript code itself. Showing it to me won’t help anyone. The problem is with WordPress. You MUST follow the instructions above to the exact letter. Then it will work. Javascripts will not work in WordPress.com blogs, no matter what you do.