How we Do this!

Product Add-ons

After downloading and installing the plugin, all your products will now have an additional meta-box in the sidebar.  Take a look to the right to see what it will look like.  In our example I’m adding a Gift Wrap option to ALL of our products.

It only took a few lines of code to do this.  And best of all, the plugin gives you the non-serialized array you need to use for the script.  Seems like they thought ahead a bit.  Notice the highlighted array.  To see this information, simply click on the left bolded arrow that is directly to the right of the “+ Add New Product Add-on” link.

The Code

At first I wasn’t sure if I could easily do this but, after spending a few minutes trolling the database, I found all the necessary information to cook something up.  Check it out…

<?php
/**
 * Template Name: Update Product Addons
 */

global $wpdb;
$wpdb->show_errors();
$wpdb->print_error();

$productAddonArray = 'a:1:{i:0;a:6:{s:4:"name";s:9:"Gift Wrap";s:11:"description";s:0:"";s:4:"type";s:8:"checkbox";s:8:"position";s:1:"0";s:7:"options";a:1:{i:0;a:2:{s:5:"label";s:14:"Add Gift Wrap?";s:5:"price";s:4:"8.00";}}s:8:"required";s:1:"0";}}';

// Get all the posts that have a product post type
$SQL = "SELECT ID FROM `$wpdb->posts` WHERE `post_type` = 'product'";
$rs = $wpdb->get_results($SQL);

// Output all of our data
foreach ($rs as $r) {
	echo 'Product #' . $r->ID . ' is a WooCommerce Product and its addon data has been updated.' . '<br />' . "\n";
	update_post_meta( $r->ID, '_product_addons', unserialize($productAddonArray));
}

A few things to notice here.  The first is that this is actually a page template.  I created a page template so I could easily write this and not have to worry about bootstrapping WordPress’s loader.  One this template was created, I created a blank page in the admin section, applied the template to the page and then viewed the newly created page.

Another thing to notice is that we are unserializing our data before inserting it into our database.  Since WordPress automagically serializes post meta data during insertion or updating, we need to make sure that we’re handing off WordPress unserialized data.  Being that the string in $productAddonArray is already serialized,  we need to make sure that it isn’t serialized again.  If we didn’t, we’d have to use another function ( maybe_unserialize() ) to retrieve the data every time.

Aside from all that, the code is pretty basic.  Find the IDs of all the products based on their meta type and then update all the _product_addons post meta with gift wrap options.

Best thing is that now if we want to globally apply product add-ons, all we have to do is change the value in $productAddonArray and run the script again!

An easy code sample

The simplest way to use output buffering is to take whatever output you have, put it in a variable and then manipulate it to some degree.  Before we get to the code, we’ll need to understand how to use a few functions.  While the whole output buffering concept utilizes several functions, we’re only going to talk about two.

1. ob_start() - This function will start the output buffering session.
2. ob_get_clean() - This function will return (not echo) the contents from the output buffer and end the output buffering session.

<?php
// Let's start our output buffering session!
ob_start();
?>

<div class="col-300">
	<h3>My Recent Posts Widget</h3>
	<ul>
		<li>
			<a href="#">Recent Post 1</a>
		</li>
		<li>
			<a href="#">Recent Post 2</a>
		</li>
		<li>
			<a href="#">Recent Post 3</a>
		</li>
	</ul>
	<a href="#">See all posts »</a>
</div><!-- .col-300 -->

<div class="col-300">
	<h3>My Recent Comments Widget</h3>
	<ul>
		<li>
			<a href="#">Recent Comment 1</a>
		</li>
		<li>
			<a href="#">Recent Comment 2</a>
		</li>
		<li>
			<a href="#">Recent Comment 3</a>
		</li>
	</ul>
</div><!-- .col-300 -->

<?php
// Lets get our output and add some classes to it
$output = ob_get_clean();
$output = str_replace('col-300', 'col-300 recent widget coolfresh', $output);
echo $output;
?>

And we did this is just 4 lines of php.  Pretty easy right?  The new output would look like this.

<div class="col-300 recent widget coolfresh">
	<h3>My Recent Posts Widget</h3>
	<ul>
		<li>
			<a href="#">Recent Post 1</a>
		</li>
		<li>
			<a href="#">Recent Post 2</a>
		</li>
		<li>
			<a href="#">Recent Post 3</a>
		</li>
	</ul>
	<a href="#">See all posts »</a>
</div><!-- .col-300 recent widget coolfresh -->

<div class="col-300 recent widget coolfresh">
	<h3>My Recent Comments Widget</h3>
	<ul>
		<li>
			<a href="#">Recent Comment 1</a>
		</li>
		<li>
			<a href="#">Recent Comment 2</a>
		</li>
		<li>
			<a href="#">Recent Comment 3</a>
		</li>
	</ul>
</div><!-- .col-300 recent widget coolfresh -->

And that’s it!  Obviously there are many other uses for PHP output buffering but, this technique covers a vast ground.  Can you think of any other uses?  Maybe by utilizing regex?  Maybe we could even nest output buffering sessions?  Be creative!

Using Filters

The easiest way to fix WordPress from going crazy on your code snippets is to use a filter.  This is super easy to do and incredibly effective.  The example below is the code I use in my functions.php file.  However, please note that depending on what WordPress version you are using and what combination of plugins you are using, will effect what kind of code you’ll need to write in order to compensate.  The goal is to identify what characters are being changed to an incorrect sequence.  Anyway, on to the code!

<?php
function fixMyCode( $content ) {
	$content = str_replace ('&amp;', '&', $content);
	$content = str_replace ('&lt;br&gt;', "\n", $content);
	return $content;
}
add_filter('the_content', 'fixMyCode');
?>

And that’s it!  How simple was that?!  You’ll be able to find that mischievous code if you view the source of your web page.   Its definitely funky looking but, that’s the whole point of this filter.

Also note… That in the second text replacement that I’ve used double quotes for the \n character.  This is CRUCIAL as PHP will only parse the \n character as a new-line break if it appears in double quotes.  If you use single quotes are used PHP will just insert \n as a string.

Hopefully this tip will make your life as easier as its made mine!

I thought to myself, “How can I integrate this slideshow into the theme but, outside of the normal WordPress loop?”  I didn’t want to have to tell the client, “Well, we can put the slideshow in the page but, you have to go into HTML mode and add a div everytime you want to do this.”  That would be completely unacceptable.  After thinking about the problem for a  minute, I realized that using custom fields would be easy to implement and make the process super simple for the client.

Why Custom Fields?

Custom fields are a great way to add small bits of information to a page or post.  Even better, depending on the function used to access the custom field(s), you can put custom field data outside of the WordPress loop.  This makes it extremely easy to create powerful template that smoothly integrate with other plugins.

The Simple Code

Here’s what we’ve got:

<?php
$customfield = get_post_meta($post->ID, 'billboard', true);
the_uds_billboard($customfield);
?>

In the first line, we use the get_post_meta function to access the billboard variable.  The first parameter is the id of what page / post is currently being used.  The second parameter is the custom field variable we’re going to access.  The third parameter means that the function is going to output a single value.  In this situation, whatever the value of billboard is.

The second line is specific to the plugin I used.  In order to output the slideshow, the plugin just needed one parameter: the name of the slideshow.

And that’s pretty much it.  I know the code is abstract in this example but, the important thing is to understand the concept and how you can use it in your own implementations.

The Code

/**
 * jQuery AJAX File Template
 * @author New Leaf Web Solutions
 * @version 1.0
 */

jQuery(document).ready(function($){
	/**
	 * Perform Initial Load Tasks
	 */
	function onLoad() {
		// Do stuff
	}

	/**
	 * A Click Event Handler Script
	 */
	function myClickEventHandler() {
		/**
		 * Sample AJAX Call
		 */
		var mydata = $('#myajaxform').serialize();
		$.ajax({
			url: "myurl.php",
			async: true,
			cache: true,
			type: "POST",
			data: mydata,
			beforeSend: function(jqXHR, settings) {

			},
			error: function(jqXHR, textStatus, errorThrown) {

			},
			success: function(data, textStatus, jqXHR) {

			},
			complete: function(jqXHR, textStatus) {

			}
		});
	}

	/**
	 * A Change Event Handler Script
	 */
	function myChangeEventHandler() {
		// Do stuff
	}

	/**
	 * Bind Events
	 */
	$('.myclickelement').click(function(){
		myClickEventHandler();
	});

	$('.mychangeelement').change(function(){
		myChangeEventHandler();
	});

	// Run the initial load event
	onLoad();
});

Explanation

The idea here is simple.  Bind all the events and create functions for their processing.  You might ask… “Why not just the code directly inside the event handler?”.  Great question.  The reason is because using this method the code becomes more modular.  Almost every time I write jQuery I run into the situation where I have to write similar code for multiple event handlers.  That being said, this method sets you up for easy refactoring.  Not to mention it keeps the code looking super clean and makes everything easy to find.

While this process is in no means set in stone, I’ve found that it works extremely well and keeps me in the zone the entire time. You should experiment and find something that works for you. If you aren’t sure where to start in your own personal process, this is a good starting point.

General Rules

I’ve found that while working on anything, there are several things to keep in mind.  Following these principles keeps the flow going, helps you avoid the “what should I do next” question and eliminates feeling overwhelmed by our never ending task lists.

Leave Emotions Behind – This can one of the hardest things to do while working.  Its easy to wonder off in a day dream about your last vacation or remember the scorn of a bad breakup.  The simplest way to get over this is to simply tell yourself not to think about it when you catch yourself wandering off.

Create An Awesome Work Environment – You will be more productive an environment that you feel most comfortable in.  Look at some of the workspaces other professionals have created.  Some are utterly amazing.  Not to mention, its all a big write-off at the end of the year

Eliminate Distractions – Identify what diverts your attention and remove it.  Even when working in a team environment, there should be a time for collaboration and a time to put your head down.  Avoid being reactive towards situations that occur on a daily basis; this could mean not answering your phone right away, not jumping to respond to an email and telling people no or that your busy.  Although our days never play out exactly the way we want them to, staying agile and integrating daily surprises into our workflow almost never have to be dealt with the second they appear.

Establish Priorities – Knowing what to work on and in what order will keep you constantly moving.  When faced with many tasks, it can sometimes be difficult to decide on what should come first.  If this happens, it usually means that the tasks in front of you have the same priority.  In that case, it doesn’t matter what comes next on your list, just that something comes next and that there is no lag in making a decision.

Set Reasonable Goals – I always have at least 10 different things to accomplish, both on a high and low level.  It can be very overwhelming thinking about what I need to do.  Try and set daily, weekly and monthly goals.  This will free your mind and allow you concentrate on what’s important now.

Focus and Keep Moving – Computers are fantastic multi-taskers.  Even the best multi-tasking humans are not by comparison.  I’ve found that keeping your head locked in on one task yields higher quality work and the satisfaction of being able to cross something off your to-do list.  Only move on to another task when you have finished what you are working on or if you’ve hit a road block.  Most of the time, freeing yourself from a problem and coming back to it later with a fresh perspective will result in a solution.

Coding Process

Being primarily a web development firm, this process represents our industry specific process.

XHTML / HTML 5 – Create a document with ALL the XHTML / HTML 5 in it first.  Setup your entire page structure from top to bottom.  This includes attaching all ids, classes and such to all the page elements that require them.

CSS / Styling – After you’ve written some rock solid markup, work on the visuals.  This should come quickly if you’ve structured your markup correctly.  There are great tools out there to help with this process.  Google Chrome has a fantastic set of development tools available for rapidly developing CSS.  If you are set on using Firefox, use tools like Firebug or Web Developer.

Server-Side – After your page looks nice, start implementing any server-side code.  While some people may disagree with this approach and say this should be done more towards the beginning of the work flow, remember that this is a top down approach.  Besides, part of making your site / application work the right way is to have a good UI / UX.

AJAX – While every project doesn’t use this technique, it is becoming increasingly difficult to find projects that don’t.  Being that AJAX is a combination of front-end and server-side code, this step should come last.  Just as with the previous steps of this process, work on doing the font-end tasks first.  This means writing all of your JavaScript first and then worrying about the actual AJAX calls last.  Also, if you’re not using a framework, stop wasting time and go grab one.  I’ve tried out several including Yahoo User Interface Library, MooTools and Prototype but, since discovering jQuery 3 or so years ago haven’t looked back.

So Now What?

Time to get to work!  Hopefully these tips and process will help you squeeze more out of your already limited availability.  I also want to thank my good friend Anais Disla for her wise words on the subject.  Check her out on put link here.  Alright!  Now get to work!

Saying Hello

While emailing can be invasive, emailing under the right and proper scenarios is usually highly effective.  With that said here is the concept: email the admin when activating your plugin.  This way the admin has a handy reference of where to find your plugin and its support community.  Not that putting that information in other places in your plugin isn’t an effective way of communication but, once again going that extra mile is always a help.

The Code

This is actually almost a no brainer.  Being a two part process, the first part of the idea is as follows: register the activation hook.

<?php
register_activation_hook( __FILE__, 'my_plugin_activation_hook_function' );
?>

See!?  Pretty simple right?  I sure hope!  Moving along, the second part: create the corresponding function.

<?php
/**
* Plugin activation hook
*/
function my_plugin_activation_hook_function() {
	// Send email to the adminstrator of the site
	$adminemail = get_option('admin_email');
	$subject = "Thank you for installing My Plugin!\n";
	$message = "Dear Administrator,\n";
	$message.= "Thank your for installing My plugin.  Please visit this plugin's site at http://yoursite.com/myplugin/\n\n";
	$message.= "All the best,\n";
	$message.= "Your Web Developer";
	wp_mail( $adminemail, $subject, $message );
}
?>

And there it is!!  Pretty simple eh?  Take as much liberty to customize this process to your liking.  Also as a challenge… See if you can make this work so that the plugin sends out the welcome on the FIRST time it is activated and first time ONLY.  I have done this with my plugins.  Lets see if you can

While this is a good starting point at the moment, I expect that it will continue to expand as I continue to write plugins.  Eventually it will expand into a full featured plugin framework.  See below for the code.  Note how the majority of the code has been taken directly from the WordPress codex.

<?php
/**
* Plugin Name: Plugin Name Here
* Plugin URI: http://yoursitehere.com/plugin-name
* Description: Plugins brief description here.
* Version: 0.1
* Author: Your Name Here
* Author URI: http://yoursitehere.com/
* License: GPL2
*
* Copyright 2011 PLUGIN_AUTHOR_NAME (email : plugins@yoursitehere.com)
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License, version 2, as
* published by the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
 
define('PLUGIN_VERSION', 1);
define('PLUGIN_URL', rtrim(plugin_dir_url(__FILE__)));
define('PLUGIN_DIR', rtrim(plugin_dir_path(__FILE__)));
 
// Hook for adding admin menus
add_action('admin_menu', 'mt_add_pages');
 
function mt_add_pages() {
// Add a new top-level menu (ill-advised):
add_menu_page(__('Test Toplevel','menu-test'), __('Test Toplevel','menu-test'), 'manage_options', 'mt-top-level-handle', 'mt_toplevel_page' );
 
// Add a submenu to the custom top-level menu:
add_submenu_page('mt-top-level-handle', __('Test Sublevel','menu-test'), __('Test Sublevel','menu-test'), 'manage_options', 'sub-page', 'mt_sublevel_page');
 
// Add a second submenu to the custom top-level menu:
add_submenu_page('mt-top-level-handle', __('Test Sublevel 2','menu-test'), __('Test Sublevel 2','menu-test'), 'manage_options', 'sub-page2', 'mt_sublevel_page2');
}
 
// mt_toplevel_page() displays the page content for the custom Test Toplevel menu
function mt_toplevel_page() { ?>
	<div class="wrap">
		<div id="icon-options-general" class="icon32"></div>
		<h2><?php echo __( 'Test Toplevel', 'menu-test' ); ?> </h2>
		<p>Content here.</p>
	</div>
<?php }
 
// mt_sublevel_page() displays the page content for the first submenu
// of the custom Test Toplevel menu
function mt_sublevel_page() { ?>
<div class="wrap">
	<div id="icon-options-general" class="icon32"></div>
	<h2> <?php echo __( 'Test Sublevel', 'menu-test' ); ?> </h2>
	<p>Content here.</p>
</div>
<?php }
 
// mt_sublevel_page2() displays the page content for the second submenu
// of the custom Test Toplevel menu
function mt_sublevel_page2() { ?>
	<div class="wrap">
		<div id="icon-options-general" class="icon32"></div>
		<h2> <?php echo __( 'Test Sublevel2', 'menu-test' ); ?> </h2>
		<p>Content here.</p>
	</div>
<?php }
?>

Step 1: Editing the wp.config file

All that needs to happen here is that this code goes into the top of the wp-config.php file.  Obviously you’ll have to replace the mysiteA.com, mysiteB.com and session variables with values of you choice but that’s still pretty simple.  Let’s check it out.

<?php
session_start();
$url_host = $_SERVER['HTTP_HOST'];

if (!isset($_SESSION['domainReferrer']))
	if ($url_host == 'mysiteA.com' || $url_host == 'www.mysiteA.com') {
		$_SESSION['domainReferrer'] = 'Site A';
		define('WP_SITEURL', 'http://mysiteA.com');
		define('WP_HOME', 'http://mysiteA.com');
	}

	else {
		$_SESSION['domainReferrer'] = 'Site B';
		define('WP_SITEURL', 'http://mysiteB.com');
		define('WP_HOME', 'http://mysiteB.com');
	}

else {
	if ($url_host == 'mysiteA.com' || $url_host == 'www.mysiteA.com'){
		$_SESSION['domainReferrer'] = 'Site A';
		define('WP_SITEURL', 'http://mysiteA.com');
		define('WP_HOME', 'http://mysiteA.com');
	}

	else {
		$_SESSION['domainReferrer'] = 'Site B';
		define('WP_SITEURL', 'http://mysiteB.com');
		define('WP_HOME', 'http://mysiteB.com');
	}
}
?>

Step 2: Conditionally Controlling Presentation / Functionality

In almost every situation, my code looked something like the code below to conditionally control what was being display.

if ($_SESSION['domainReferrer']=='Site A') {
// Put Site A Logic Here
} else {
// Put Site B Logic Here
}

Step 3: Configuring Your Server’s Virtual Hosts

This part is going to be different for everyone but basically the idea is to have a main mysiteA.com as the virtual host that has PHYSICAL hosting on your server and then to map mysiteB.com as a domain alias of mysiteA.com.  The good thing though is that it doesn’t matter which site (either mysiteA.com or mysiteB.com) has the physical hosting and which is the domain alias.  This is because they are pretty much the same thing.

Well, that’s about it!!!  I hope this little hack comes in useful for someone!!

Anything in my opinion that saves time is a winner!

http://simpledream.net/2010/10/19/wordpress-auto-updates-svn/