3DN Technology Blog

New 3DN Techblog

wordpress — Wed, 12 May 2010 14:33:09 +0000

This is the first post on the Wordpress 3.0 MU server. http://wordpress.3dn.nl has now become a ‘site’ under the main blog http://3dn.nl. This is possible since 3.0 which now has the multi user functionality built in.

First there will be some transitioning stage where plugins I used on the old http://wordpress.3dn.nl will be enabled on this site, so it’s possible that this site will look off for a while. Please bear with me, I’m still trying to figure this out.

The migration was fairly simple. I probably could have done it even simpler by just starting with the old database and migrating that to 3.0 but I decided to have 3.0 running in parallel with 2.9 for a while when I tackle the Debian way. I first created a MU site called http://wordpress.3dn.nl and tested that to work. Then I went on to export (using Tools -> Export) in the wp-admin screen, which gave me an XML file. Then I imported this into wordpress.3dn.nl and checked the box to import attachments as well. The latter tries to fetch the attachments using the URL; since this has http://wordpress… in it, I had to temporarily leave the old server running. After it imported I renamed wordpress.3dn.nl and disabled the old wordpress.3dn.nl

I fully expect some plugins not to work. The first one I found not to work properly is the linkedin resume plugin. Peculiarly it failed at updating the settings. I also found EHT graphviz not to work, in fact it messed up the whole admin section.

There are still some major glitches on the site but I’ve decided to go for it as some problems may be related to having a different site name.

Add Ajax to Expertise Plugin

fred leeflang — Sun, 28 Feb 2010 07:43:32 +0000

Add Ajax to Expertise Plugin

The Expertise plugin is nearing completion now. We still need to give experts a method to sign up as experts for the 3DN expertise areas (or to sign out should they no longer want to act as expert). We will be using some Wordpress specific Ajax constructs for this.

One of the reasons we would like users to sign up and be logged in when they look at the expertise pages is so we can see right away if somebody who’s visiting the pages is an expert himself or not. This way we can decide what button to show and what action to attach to the button. We have two different buttons to choose from:

These are opt-in / opt-out buttons where a visitor can indicate whether he is or isn’t an expert on the expertise being viewed.

These buttons have a simple onclick javascript that gets executed when the user clicks on them; when the opt-in button is clicked a simple thickbox dialog asking for the user’s expertise level is displayed while the opt-out button simply shows an ‘are you sure’ question. In this article I’ll assume the reader is familiar with thicbox and how to pop-up a dialog.

Using SACK

SACK is the Simple Ajax Code Kit. We don’t want clicking the button on the popup dialog to cause a reload of the whole page so we’re using SACK to send an asynchronous page request to the server to handle the opt-in / opt-out.

To do this, we first need to tell Wordpress to include the SACK library javascript:

// Add SACK requirement to head
add_action ('wp_head', 'expertise_js_header');

function expertise_js_header () {
 wp_print_scripts ( array ('sack') );

The only thing somewhat complicated for using SACK is that we need to figure out what page to post the AJAX requests to; Wordpress comes with a /wp-admin/admin-ajax.php script for this. It’s a unified Ajax handler script that can be used for all AJAX requests. We only need to tell it about a callback function to use depending on which action the page receives. First we define our own actions, handle_signup and handle_signout:

// Configure AJAX callback
add_action ('wp_ajax_handle_signup', "signup_callback");
add_action ('wp_ajax_nopriv_handle_signup', "signup_callback");
add_action ('wp_ajax_handle_signout', "signout_callback");
add_action ('wp_ajax_nopriv_handle_signout', "signout_callback");

Then in our button javascript we use these action names in the SACK initialization:

// Define custom Javascript function
?>


New 3DN Techblog
Add Ajax to Expertise Plugin
Checking Comments for Requests
Adding sendmail/SMTP to experts plugin
Periodic Expertise Events
Or in the Coding category:
Add Ajax to Expertise Plugin
Checking Comments for Requests
Adding sendmail/SMTP to experts plugin
Periodic Expertise Events
Expertise Shortcode
If you have any questions regarding Wordpress, check out our         Wordpress page or our         Programming page. Note: The code I’m writing about is constantly under development. I can’t write about every little change I make but I try. I’m learning as I go because this is my first Wordpress plugin. If you’re interested in the latest code you can always look in SVN through my public Trac server.

Periodic Expertise Events

fred leeflang — Tue, 16 Feb 2010 11:37:21 +0000

Periodic Expertise Events

Earlier I wrote a few articles on creating the expertise plugin and how to add shortcodes to it. Today I want to add scheduled events to the plugin. When somebody posts a question to the expertise page, we could probably write a trigger that checks immediately who’s the expert for the section and send a notice in an email. However, I think it’s also nice to illustrate making a timed even that will check all expertise pages at once for new messages and send out all notifications right away.

Activation Code

One thing we have not yet added to the plugin is a decent activation/deactivation section. We should do this first, we’ll see why later on. In Wordpress, a plugin can be activated and deactivated through the administrative plugin menu. These events can be trapped with the register_activation_hook() and register_deactivation_hook() functions. Typically these hooks get used to create extra database tables needed by a plugin, set default values for the plugin etc.

Another thing that can be done in an activation/deactivation section for a plugin is to create / remove a timed event for the plugin:

register_activation_hook(__FILE__, 'expert_activate');
add_action ('expert_msgcheck', 'hourly_msgcheck');

register_deactivation_hook(__FILE__, 'expert_deactivate');

function expert_activate () {
 wp_schedule_event(time(), 'hourly', 'expert_msgcheck');
}

function expert_deactivate () {
 wp_clear_scheduled_hook('expert_msgcheck');
}

function hourly_msgcheck () {
}

The above code snippet sets this all up; The add_action() call at first seems kind of pointless here as there’s no point in time where the Wordpress core will execute this action. This all changed when an administrator chooses to activate the Expertise plugin. Through the register_activation_hook function expert_activate() will be called. This function in turn calls wp_schedule_event() which schedules the action expert_msgcheck (and thus the function hourly_msgcheck()) to be executed hourly, starting immediately.

Work with Me

Let’s add some code to the hourly_msgcheck() function. We know that we want it to send email eventually, so to check if the mechanism works we’ll simply let the function send us an email every hour. On my setup I need to use an SMTP mailer as I’m using Google Apps for email. This requires some settings we might as well initialize on activation of the plugin:

function expert_activate () {
 wp_schedule_event(time(), 'hourly', 'expert_msgcheck');
 add_option('expert_settings', array(
 'onpost' => 1,
 'smtp_user' => '',
 'smtp_password' => '',
 'smtp_server' => 'smtp.gmail.com'));
}

function expert_deactivate () {
 wp_clear_scheduled_hook('expert_msgcheck');
 unregister_setting('experts-settings-group', 'expert_settings');
 delete_option('expert_settings');
}

I’ve changed my earlier approach here from a variable expert_onpost to adding all related options into an array. Just learning as I go, and reading over Handling Plugins Options in WordPress 2.8 with register_setting() many times to see if I could figure out what’s going on there.

Remember we used the new API’s register_setting() call in a previous article? Well that’s still compatible with add_option() so it’s safe to set default values for the options with this. I have included the deactivation code though, just to show that you still need to use delete_option() as unregister_setting() does not take care of this for you.

I also added a parameter validation function:

register_setting( 'experts-settings-group', 'expert_settings','expert_onpost_validate');

function expert_onpost_validate ($input) {
 // Our first value is either 0 or 1
 $input['onpost'] = ($input['onpost'] == 1 ? 1 : 0);
 return $input;
}

This simply checks whether the variable onpost is actually a boolean. I haven’t included any validation checks on the other variables yet.

So with the registered variables in place it becomes really very easy to do the actual form building / handling:

function expert_settings_page() {
?>

Experts

 
 
 
 
 On Post in Expertise Section
 
  /> Do Nothing  /> Send Email
 
 
 
 SMTP username
 
 
 
 
 
 SMTP password
 
 
 
 
 
 SMTP server

Notice that there is no form handling in the plugin itself anymore! That’s all done by Wordpress itself.

So now that we can actually set some required options, let’s add this send_email() function:

function send_email () {
 // PHP Mailer Variables
 if (!class_exists("phpmailer")) {
 require_once(ABSPATH.'wp-includes/class-phpmailer.php');
 }
 $expert_settings = get_option("expert_settings");
 $mail = new PHPMailer();
 $mail->Mailer   = "smtp";
 $mail->Username = $expert_settings['smtp_user'];
 $mail->Password = $expert_settings['smtp_password'];
 $mail->Host     = $expert_settings['smtp_server']
 $mail->SMTPSecurity = "tls";
 $mail->Post     = 465;
 $mail->SMTPAuth = true;
 $mail->CharSet  = "utf-8";
 $mail->Encoding = "quoted-printable";
 $mail->FromName = "3DN Techblog <3dn@3dn.nl>";
 $mail->AddReplyTo = "Fred Leeflang ";
 $mail->Subject  = "Test Email";
 $mail->Body     = "Testing gmail functionality";
 $mail->AddAddress("fredl@dutchie.org");
 if ($mail->Send()) {
 return 1;
 } else {
 return 0;
 }
}

And add a call to this function in the hourly_msgcheck() function just to see if it works:

function hourly_msgcheck () {
 send_email();
}

If you find this article interesting you might want to read some more articles in the Wordpress category:

Or in the Coding category:

If you have any questions regarding Wordpress, check out our Wordpress page or our Programming page. Note: The code I’m writing about is constantly under development. I can’t write about every little change I make but I try. I’m learning as I go because this is my first Wordpress plugin. If you’re interested in the latest code you can always look in SVN through my public Trac server or simply download the latest development copy.

Expertise Shortcode

fred leeflang — Mon, 15 Feb 2010 13:25:35 +0000

Expertise Shortcode

Wordpress has a mechanism for adding ‘shortcodes’ authors can use in their articles through a plugin. In an earlier article I described how to get started with writing your own Wordpress plugins. In this article I’ll show how to add a handy shortcode to the plugin that generates code in the expert pages which allows people to register as experts in a certain area of expertise.

Functionality

Every time I create a new expertise page I try to write a brief introduction to the subject. I also want to add a button to this page. When people click on the button they should get a little popup window where they’re asked to indicate their expertise level. This button is mostly repetitive code which only differs in a few parameters (like ‘which expertise page are we on right now’)

Wordpress’ shortcode mechanism is not the best mechanism to get this done but I want to add it this way mostly for educative purposes.

Adding the Shortcode

It’s real simple to add the shortcode to our plugin:

add_shortcode('expertise', 'expertise_shortcode');

That’s really all there is to adding the shortcode. Ofcourse we still need some code to implement expert_shortcode():

function expertise_shortcode ($att) {
 $expert = <<
EOM;
 return $expert;
}

After we added this code to our Expertise plugin, inserting [expertise] into our articles/pages should display a very basic button. Why you still see [expertise] in this article even though the plugin is currently active is because I used double [['s in the article.

The above is ofcourse the easiest thing I could think of to make an introduction from.

Hyperlinks

Besides adding a button on the expertise page, we could also use this shortcode to link to the expertise page from withing an article. We could ofcourse make an entirely new shortcode for that but it's not neccesary at all; We can add attributes to the shortcode. Let's agree first that we'll give every expertise page it's own 'expertise' custom field which holds the name of the expertise. Custom fields are easy to add in the 'Edit Page' screen. As the value for this 'expertise' field we choose a simple name like 'Linux'.

Now we'll add an attribute link to the expert shortcode so we can use it like [expertise link=Linux]. The expertiselink attribute is optional so if we don’t add it we’ll still get the ugly button but if we do add it, the plugin will look in Wordpress’ database to find the URL of the page that has custom field ‘expertise’ set to ‘Linux’ and display code for a hyperlink to that page with all the titles etc.

function expertise_shortcode ($atts) {
 global $wpdb;

 // Extract attributes and set defaults if not present.
 extract(shortcode_atts(array(
 'link' => 0,
 ), $atts));

 if ($link) {
 $expertpost = $wpdb->get_row("
 SELECT wposts.*
 FROM $wpdb->posts wposts, $wpdb->postmeta wpostmeta
 WHERE wposts.ID = wpostmeta.post_id
 AND wpostmeta.meta_key='expertise'
 AND wpostmeta.meta_value='$link'
 AND wposts.post_status='publish'
 AND wposts.post_type='page'
 ", ARRAY_A);
 $url = get_permalink ($expertpost['ID']);
 $expert = <<{$expertpost['post_title']}
EOM;
 } else {
 $expert = <<
EOM;
 }
 return $expert;
}

That code looks a bit more complex already. First of all we’re using the shortcode_atts() function to check if the attribute link is set in $atts. If it’s not set, it gets the default value of 0. So whether link is set or not becomes an if-then-else construct that determines whether to show the ugly button or an equally ugly link. When $link is set it will be set to ‘Linux’ or something along those lines. We should also do some filtering on this later as it’s value is put into a SQL query and we don’t really want to encourage SQL-injection.

The SQL query uses $wpdb, hence the global $wpdb declaration at the top of the function. If everything works well the query should return a row with all the wp_posts columns set. This sample code doesn’t have error checking yet, which it really should have as the query could also return 0 rows (if the author made a typo, or the expertise page administrator has forgotten to add the expertise custom field).

Finally here’s an example using [expertise link=Wordpress], please go see our Wordpress page!

If you liked this article, maybe you want to read more in the Wordpress category:

Or if you have any questions about this article or Wordpress in general you might want to visit our Wordpress page.

Adding an Expertise Section to Wordpress

fred leeflang — Mon, 15 Feb 2010 07:16:55 +0000

Adding an Expertise Section to Wordpress

I’ve been thinking about a way to get people to add links to our blog on their site. A friendly way to do this is by adding an ‘expertise’ section to the site where people can go after they sign up. Here people can ask questions which will be emailed to the section maintainer(s) so they can answer any questions involving their expertise as timely as possible.

This is not a standard Wordpress functionality however so I’m going to write my own Wordpress plugin for this.

Requirements

I first created an ‘Expertise’ page to the blog. This page is freely accessible without having to log in. Then I created some pages with the Expertise page as it’s parent page. We need to have the ‘Member Access‘ plugin installed on the blog in order to make the separate expertises member-only. The first three expertise pages I set up were for ‘Linux/Unix’ (maintainers: FredLeeflang, TigerP), ‘Programming’ (maintainers: FredLeeflang, TigerP) and ‘IPv6′ (maintainers: TigerP).

I manually added the ‘maintainers’ custom field to each of the separate expertise pages to get started. When the plugin is done this field should be added automatically.

Getting Started with the Plugin

Creating a plugin for Wordpress is easy. Simply go inside the wp-contents/plugin directory, create a new directory there and some files and you’re on your merry way. I also took some effort to import the directory into my public subversion server:

svn import experts https://secure.dutchie.org:444/svn/trunk/experts

So you should also be able to check out the source while I’m developing it by:

cd wp-contents/plugins
svn co https://secure.dutchie.org:444/svn/trunk/experts

So all I did to get the plugin to show up with some meaningfull information was to add a file experts.php and a readme.txt. The expert.php has a header in it:

/*
Plugin Name:    Experts
Plugin URI:     http://wordpress.3dn.nl/experts/
Description:    This plugin allows you to add experts to several pages on your site. Experts will get notified when a comment on the page is posted, allowing them to quickly respond even though they don't check the site every day.
Author:         Fred Leeflang
Version:        0.1
Author URI:     http://wordpress.3dn.nl/

Setup:
 1) Install the plugin.
 2) Go to the admin menus, and in the "Options" panel, select "Expers".
 4) Configure the plugin if you need.

*/

Which by itself is sufficient to make the plugin show up like this in the admin -> Plugins section:

Obviously this doesn’t make the plugin do anything yet but it just goes to show that having a header in a file makes the plugin show up with the correct description etc. in the plugin admin screen, ready to be activated!

Got Admin Options?

First we want to make a basic admin page. This is easily done with:

add_action('admin_menu', 'expert_ap');

function expert_ap() {
 //create new submenu under 'Settings'
 add_submenu_page('options-general.php', 'Expertise Settings','Expertise Settings', 'administrator', __FILE__, 'expert_settings_page');

 //call register settings function
 add_action( 'admin_init', 'register_expertsettings' );
}

function register_expertsettings() {
 //register our settings
 register_setting( 'experts-settings-group', 'onpost', 'intval' );
}

This is not complete yet but this shows two important mechanism; adding a submenu to an existing (eg. ‘Settings’) menu and registering settings for our plugin.

The add_submenu_page() function links our settings menu under Wordpress’ settings (through using options-general.php), gives it a label, sets which capability is required and sets which PHP function must be called when the user selects the menu (expert_settings_page() which we have not added yet).

The add_action() function adds the function register_expertsettings() to the admin_init section of the page. There’s actually some pretty tricky stuff going on in register_expertsettings(), people who have coded plugins ‘the good old way’ will find out what I mean later. Essentially the register_setting() call adds a variable and a variable validation to a pulldown we’ll design later on. There will be no $_POST processing, HTML filtering etc, Wordpress will do all that for us. We just need to make sure that the form POST’s to options.php and make sure that the variables we want to get from the form get registered with register_setting().

The Form

Because of letting Wordpress handle our variables, we only need to build the form itself in expert_settings_page().

function expert_settings_page() {
?>

Experts


 
 
 
 On Post in Expertise Section

On Post in Expertise Section

Sample Expertise Area

I’ve set up a sample expertise area for Wordpress Expertise. While I’m developing this plugin further I’ll post some more followup in there and probably later on I’ll add one or more articles about the development so stay tuned!

If you enjoyed reading this article you might also like other articles in the Coding category:

Or in the Wordpress category:

Both older and newer articles in the Coding category will be listed here. Should you need (free!) Wordpress Expertise, please feel free to check out our Wordpress Expertise area.

Robot Desktop Vacuum

tracy leeflang — Sun, 14 Feb 2010 17:38:13 +0000

If you’ve got messy eaters in the house, cleaning up the kitchen table after every meal can be a real pain. But with this cute little guy, that chore can become a pleasure. Available in different cheery colors at a reasonable price of $18.99, the Robot Desktop Vacuum may just make your day a little bit brighter.

Grab yours here at boystomengifts.com

If you want to see some more awesome 3DN gadget finds:

Adding Facebook Detail

fred leeflang — Wed, 10 Feb 2010 19:18:31 +0000

Adding Facebook Detail

Recently I published a short article on how to create your own Facebook application and a somewhat longer article on implementing some basic code into it. Today I’ll tell you how to get some more Facebook gadgets in the application to make it more enticing for people to share it with others. I’ve touched up the HTML and added to the functionality since the most recent article and won’t be describing much about that process as I assume that most people reading this will be familiar with PHP but are more eager to learn about embedding Facebook functionality in their own PHP application.

Facebook Hooks

So we now have a contest that allows people to enter project names, change their suggestions, vote on suggestions or change their votes. All of these events are potentially interesting to people who participate in the contest. Additionally, when people suggest a projectname, they may want to let their friends know they did and invite their friends to vote for their suggested project name. While it’s very easy to develop an application that does these things on a facebook server itself I’ve chosen to let my application to run in an iframe. This makes it considerably more difficult to get it to work as we need to enable something called XFBML for this.

Setting up XFBML is not very hard to do as there’s an excellent writeup on the Facebook Wiki called ‘Connect/Setting up your Site‘ but I still found it somewhat tricky to do so I’ll describe the initial setup in some more detail in this article such that it’s very specific for this application instead of the general setup on the Wiki page. After we’ve setup Facebook Connect it gets much more comprehensible to do things with it.

Modify Your Application

First, the Facebook application I created on Facebook Developer needs to be configured to use XFBML. You need to go into ‘Application Settings’ -> ‘Edit’ for this. By default you will be shown the ‘Basic’ tab but you need to go to the ‘Connect’ tab. The most important thing to set there is the ‘Connect URL’ which I set to http://wordpress.3dn.nl.

To be quite honest I’m not sure what it’s intended for! Something that needs to be set up after this is an xd_receiver.htm file and at first I thought it would need to be in the ‘Connect URL’, however this is not the case as the location of the xd_receiver.htm file gets specified elsewhere later on.

So the xd_receiver.htm file is just a small file that has these contents:

There’s nothing site specific about this file as you can probably tell. The next thing to do is to modify the HTML header. As you may have noticed if you checked out my sources from Subversion (https://secure.dutchie.org:444/svn/trunk/idmcontest) I set up my HTML header for all the files I serve in a single file called head.inc.php so this was fairly easy to do and it’s all in here:

$page = <<

The next thing that needs to be done is equally simply done in the head.inc.php file, which is including Facebook’s API library’s feature loader script:

$page .= "";
 $page .= <<

EOM;

Finally we get to the point where we tell Facebook where out xd_receiver.htm really sits by running a function from the above mentioned API library. This call needs to be made from the bottom of the page and it will render the XFBML code in the body of the document to have actual contents instead of just the markup. As you may have guessed from me using a head.inc.php there’s also a foot.inc.php from which I will run this function call:

$page .= <<

So that’s quite a bit of stuff to do to get this all to work! However, after this it’s easy to do some really nice things with the quite powerfull XFBML.

Adding an Invite

So one of the reasons for me to try and rewrite this application as a Facebook application is the potential that people will ask their friends to vote on their suggestion. As long as the method to vote is easy enough, most people will be likely to do so.

This is actually relatively simple to do with the XFBML configured, it almost looks exactly like FBML:

if ($addinvitefriends) {
 // Retrieve array of friends who've already authorized the app.
 $fql = 'SELECT uid FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1='.$user_id.') AND is_app_user = 1';
 $_friends = $facebook->api_client->fql_query($fql);

 // Extract the user ID's returned in the FQL request into a new array.
 $friends = array();
 if (is_array($_friends) && count($_friends)) {
   foreach ($_friends as $friend) {
     $friends[] = $friend['uid'];
   }
 }

 // Convert the array of friends into a comma-delimeted string.
 $friends = implode(',', $friends);

 // Prepare the invitation text that all invited users will receive.
 $content =
   " has started using 3DN IdM Contest and " . $invitemsg .
   "get_add_url()."\" label=\"Put 3DN IdM Contest on your profile\"/>";
 $page .= <<
   
 

EOM;
}

The $addinvitefriends variable is set when a new project name is suggested so that’s when we want to display the invite box. Line 2 through 15 actually connect to Facebook’s database using the fql_query() method, so it does a SQL select to find out which friends are already using the application so as to prevent invites to be send repeatedly. Frequently Facebook itself will impose a maximum on the number of friends you can invite but it’s possible to invite more people the next day.

Posting Updates on somebody’s Wall

In the next and last article in this series I’ll describe how posting a vote or a new contest leader on somebody’s wall could entice people to ask more of their friends to vote.

If you enjoyed reading this article you might enjoy reading the following articles in the Coding section as well:

Add Ajax to Expertise Plugin - February 28, 2010
Checking Comments for Requests - February 20, 2010
Adding sendmail/SMTP to experts plugin - February 17, 2010
Periodic Expertise Events - February 16, 2010
Expertise Shortcode - February 15, 2010

3DN Technology Blog

New 3DN Techblog

Add Ajax to Expertise Plugin

Add Ajax to Expertise Plugin

Using SACK

Periodic Expertise Events

Periodic Expertise Events

Activation Code

Work with Me

Experts

Read More

Expertise Shortcode

Expertise Shortcode

Functionality

Adding the Shortcode

Hyperlinks

Read More

Adding an Expertise Section to Wordpress

Adding an Expertise Section to Wordpress

Requirements

Getting Started with the Plugin

Got Admin Options?

The Form

Experts

Sample Expertise Area

Read More

Robot Desktop Vacuum

Adding Facebook Detail

Adding Facebook Detail

Facebook Hooks

Modify Your Application

Adding an Invite

Posting Updates on somebody’s Wall

Read More

On Post in Expertise Section	/> Do Nothing /> Send Email
SMTP username
SMTP password
SMTP server