Tip: Make sure to enqueue jQuery! We will need it later on.

Freebee

If you wish to have a more complete version of this plugin go to our main site and grab your copy. The freeplugin is based on this tutorial but has a more complete list of the most wanted & popular shortcodes.

step 1. Create a new plugin

For this quick tip we will quickly create a new plugin, so in the plugin folder create a new folder named custom_editor_button and in that folder create a new file named index.php. In that file add the following comment block to the file.

 <!--?php <br ?--> /*
 Plugin Name: thickerbox example
 Plugin URI: http://cmstutorials.org
 Description: A simple plugin to add a button to the editor which will open a thickerbox window
 Author: CMS tutorials
 Version: 1.0
 Author URI: http://cmstutorials.org
 */
 

This is the required infor for every WordPress plugin. WordPress won’t recognize the plugin without this info.

step 2. Create the actions

We now need to create 2 actions, the first one will add a button to the editor and the second one will provide the content of the thickerbox modal window.

 add_action('media_buttons', 'thickbox_shortcodes', 11);
 add_action('admin_footer', 'thickbox_content');
 

The second parameter links to functions which we still have to create

step 3. Create the functions

The first function to create is thickbox_shortcodes, this will add the button to the editor. We talk about a button but it is actually nothing more than an image with a link.

 function thickbox_shortcodes() {
     ?>
 <a id="thickbox_shortcode_button" title="Available Shortcodes" href="#TB_inline?width=670&inlineId=thickbox_shortcode_window">
         <img src="<?php echo bloginfo('url'); ?>/wp-admin/images/media-button-other.gif" alt="" width="18px" height="18px" />
     </a>
 <!--?php  }  

  function thickbox_content(){  ?></pre>
<div id="thickbox_shortcode_window" style="display: none;">    <!-- thickerbox content here --></div>
<pre>
 <!--?php <br ?--> }
 

the id of the div must match the inlineId specified in the href of the button.

Step 4. add list of shortcodes

Now let’s add some content to the thickerbox modal window. We will add a list of simple shortcodes that once clicked will be added in the wordpress editor. Very usefull if you need a quick shortcode but don’t remember the exact syntac or the number of attributes it provides.

Replace <!– thickerbox content here –> with

</pre>
<table cellspacing="0" cellpadding="5">
<tbody>
<tr>
<th>Shortcode</th>
<th>Description</th>
</tr>
<tr>
<td><a id="test1" href="javascript:void(0);">Test shortcode</a></td>
<td>Click to insert the test shortcode</td>
</tr>
<tr>
<td><a id="test2" href="javascript:void(0);">Test2 shortcode</a></td>
<td>Click to insert the test2 shortcode</td>
</tr>
<tr>
<td><a id="test3" href="javascript:void(0);">Test3 shortcode</a></td>
<td>Click to insert the test3 shortcode</td>
</tr>
</tbody>
</table>
<pre>
<script type="text/javascript">// <![CDATA[
 jQuery(function($){
 //javascript code here
 });

// ]]></script>
 

Step 5. insert shortcodes in editor on click

Now that we have our shortcode list let’s add the nescessary javascript. What we want to do is insert the shortcode when we click on the link.

 //we use unbind to prevent the click event to fire multiple times
 $('.insert_shortcode').unbind('click').bind("click",function() {
 //prepare shortcode variabel
 var shortcode = '';

 //get the id of the clicked element and load the correct shortcode
 switch(this.id){
 case 'test1':
 shortcode = '[test1 param="tester"]Content for shortcode test1[/test1]';
 break;
 case 'test2':
 shortcode = '[test2 param="tester"]Content for shortcode test2[/test2]';
 break;
 case 'test3':
 shortcode = '[test3 param="tester"]Content for shortcode test3[/test3]';
 break;
 }

 //check if visual editor is active or not
 is_tinyMCE_active = false;
 if (typeof(tinyMCE) != "undefined") {
 if (tinyMCE.activeEditor != null) {
 is_tinyMCE_active = true;
 }

 }

//append shortcode to the content of the editor
 if ( is_tinyMCE_active ) {
 tinymce.execCommand('mceInsertContent', false, shortcode);
 } else {
 var wpEditor = $('.wp-editor-area');
 wpEditor.append(shortcode);
 }
 return false;
 });
 

Let’s go over the code

• We track the click event on the class insert_shortcode. We added an unbind event to prevent the click event to fire multiple times on one click
• We then get the id using this.id and use it in a switch to get the corresponding shortcode
• We add a quick check to see if the visual editor is being used or not
• We finally write the shortcode to the editor. For the non visual editor we used the jQuery .append() to avoid overwritting the complete content of your post. but feel free to use whatever method you want
• Finally we return false to disable the default behaviour of a link.

Conclussion

There you go, in only a few steps we added a button to the editor which opens a thickbox modal window from where you can insert shortcodes to the wordpress editor. This is of course only an example of what you can do. The next step for you is to extend this using form elements to, for example, create the shortcode attributes dynamicly. Or you could use it to add something completely different than a shortcode.

Don’t forget to download our freebee based on this tutorial. It contains a list of the most popular shortcodes.

Title here

In this series you will be using Node to create a simple blog engine to give you a real feel for how Node.js works.

Enjoy this code and if you have any questions drop us a comment below. You can download the entire code as a twentyten child theme.

At the top of your functions.php add:

//define your color pickers
$colorPickers = array(
array('ID' => 'color_1', 'label' => 'Color 1', 'default_color' => '#002c84'),
array('ID' => 'color_2', 'label' => 'Color 2', 'default_color' => '#002c84'),
array('ID' => 'color_3', 'label' => 'Color 3', 'default_color' => '#002c84'),
array('ID' => 'color_4', 'label' => 'Color 4', 'default_color' => '#002c84'),
);

The Markup:

<?php
foreach($colorPickers as $colorPicker):
$colorOption = get_option($colorPicker['ID']);
if (empty($colorOption) || $colorOption == ''):
add_option($colorPicker['ID'], $colorPicker['default_color']);
endif;
?>
<div>
<label for="<?php echo $colorPicker['ID']; ?>"><?php _e($colorPicker['label']); ?></label>
<input type="text" id="<?php echo $colorPicker['ID']; ?>" value="<?php echo get_option($colorPicker['ID']); ?>" name="<?php echo $colorPicker['ID']; ?>" />
<div id="<?php echo $colorPicker['ID']; ?>_color"></div>
</div>
<hr />
<?php endforeach; ?>

The jQuery:

var colorPickers = $('.color-picker');
for (e in colorPickers) {
if (colorPickers[e].id != undefined ) {
var colorPickerID = colorPickers[e].id;
$('#'+ colorPickerID + '_color').farbtastic('#' + colorPickerID);
}
}

The function to save it all in the DB:

function color_picker_option_update()
{
global $colorPickers;
foreach($colorPickers as $colorPicker) {
update_option($colorPicker['ID'], esc_html($_POST[$colorPicker['ID']]));
}
}

First of all we will quickly add some links in the sidebar so we can navigate throught the pages more quickly.

<ul>
<li><a href="index.php">Homepage</a></li>
<li><a href="articles.php">Articles</a></li>
<li><a href="addarticle.php">Add article</a></li>
</ul>

Now open the articles.php file. Under your article (within the while loop) add a delete link:

<a href="<?php echo $_SERVER['PHP_SELF']; ?>?action=delete&article_id=<?php echo  $row['id']; ?>">Delete</a>

Let’s go to the top of the page (but under the header include line) and catch our parameters. First we will see if there is a query parameter ‘action’ and if it is the delete action. We also prepare our trycatchto check if an error occured.

if(isset($_GET['action']) && $_GET['action'] == 'delete')
{
	try{
		//check if an id was given and if it's a number
		//delete record
	}
	catch(Exception $e){
		echo '<div class="feedback error">' . $e->getMessage() . '</div>';
	}
}

We first check for the id and make sure it is a number, if not we throw an exception. (place this in the trycatch)

//if it does not exist
if(!isset($_GET['article_id']))
{
//throw an exception
	throw new exception('No id given');
}
//if it's a number
if(is_numeric($_GET['article_id'])){
	//store it in a variable
	$id = mysqli_real_escape_string($link, $_GET['article_id']);
} else {
	//else throw an exception
	throw new exception('The given id is not valid, only numbers!');
}

Now that we have the id of the article to delete we can create our query.

if(!mysqli_query($link, 'DELETE FROM article WHERE id = ' . $id)){
	//if there was a problem executing the query throw an exception
	throw new exception('Could not delete record from the database');
} else {
	//display a success message
	echo '<div class="feedback success">Query successfully deleted.</div>';
}

When you click the delete action you should now see a success message.

You can then add some styling for the error/success message

/*ERROR MESSAGE*/
.error
{
padding: 8px 0px 8px 40px;
margin:5px 0px;
-moz-border-radius:4px;
border:1px solid #BF0008;
background:#FFDFDE url("../images/single_images/delete.png") no-repeat;
background-position:10px 10px;
color: #BF0008;
}

.error span
{
	font-weight:bold;
}

.error a:link, .error a:visited
{
color:#BF0008;
font-weight:bold;
text-decoration:underline;
}

.error a:hover, .error a:active
{
color:#FFF;
background:#BF0008;
font-weight:bold;
text-decoration:underline;
}

/*SUCCES MESSAGE*/
.succes
{
padding: 8px 0px 8px 40px;
margin:5px 0px;
-moz-border-radius:4px;
border:1px solid #057100;
background:#DFFFDE url("../images/single_images/check.png") no-repeat;
background-position:10px 10px;
color: #057100;
}

.succes span
{
	font-weight:bold;
}

.succes a:link, .succes a:visited
{
color:#057100;
font-weight:bold;
text-decoration:underline;
}

.succes a:hover, .succes a:active
{
color:#FFF;
background:#057100;
font-weight:bold;
text-decoration:underline;
}

From PSD to HTML: Building a Set of Website Designs Step by Step

This tutorial will take you through the entire process of converting a design in Photoshop to completed HTML template.

How to use Lookaheads and Lookbehinds in your Regular Expressions

This tutorial will teach you how to use positive & negative lookahead and lookbehinds in your regular expressions.

Advanced WordPress Queries, Part 1

Throughout this series, we’re going to take a look at the advantages of advanced queries, how we interface with the WordPress database, and how we can retrieve, update, and insert new and existing data.

A Beginner’s Guide to the WordPress Loop

Today, we’re going to lay a foundation for everyone who’s new to the loop or has ever wanted to know a little bit more about exactly how it works.

Uploading Files with AJAX

Today, I’m going to show you how to do something that—until the last while—has been almost unprecedented: uploading files via AJAX.

A brief word about wp_enqueue_script()

I actually found this when looking at the wp_enqueue_script(); in the wordpress codex. When I scrolled down I saw an entire list of javascript libraries that are already present in wordpress, which you could then easily load using the wp_enqueue_script();. I strongly advice you have a look at all the libraries you can include. And who knows, just like me, you might find out you are including a javascript or jQuery library that is already present in wordpress.

Before getting started

Before we start let’s add a simple link into the theme menu block in the admin area which links to a page which will contain the color picker. Just add the following code in the functions.php of your theme:

add_action('admin_menu', 'themeoptions_admin_menu'); //action to display the menu
function themeoptions_admin_menu()
{
add_theme_page('color picker', 'color picker', 'read', 'color_picker_option', 'color_picker_option_page');
}
function color_picker_option_page()
{

}

color_picker_option_page() is the function we specified to show the color pickers.

Add the color picker

First of all we need to load the farbtastic javascript library and style. Add the following code to your functions.php of your theme:

add_action('init', 'load_theme_scripts');
function load_theme_scripts() {
    wp_enqueue_style( 'farbtastic' );
    wp_enqueue_script( 'farbtastic' );
}

We then add a simple form in our color_picker_option_page() function:

<form method="POST" action="">
     <input type="text" id="color1" value="<?php echo get_option('color1'); ?>" name="color_picker_color1" />
     <div id="color_picker_color1"></div>
     <p><input type="submit" name="update_options" value="Update Options" /></p>
</form>

Now all that remains is to call the frabtastic function and specify where the color picker should be loaded and which input field will be used to dynamicly update the color value once you select another color. Add the following code in the color_picker_option_page() :

<script type="text/javascript">
        jQuery(document).ready(function($){
            $('#color_picker_color1').farbtastic('#color1');            
        });
    </script>

You should now have a working color picker:

Saving the color

The last thing to do is to store the color value in a wordpress option. At the top of the color_picker_option_page() function add:

if ( isset($_POST['update_options'])) { color_picker_option_update(); }

So when the form is submitted the color_picker_option_update() function will be called. So let’s create that function and save the color value:

function color_picker_option_update()
{
update_option('color1', esc_html($_POST['color_picker_color1']));
}

So we get the color value using $_POST and we filter it using esc_html() (always filter submitted data!!) and finally it is saved. Update_option() will create the new option if it doesn’t exist yet.

Adding a second color picker

First of all copy/paste a second row for the second color picker

<tr valign="top">
	<th width="200px" scope="row">Color 2</th>
	<td>
		<input type="text" id="color2" value="<?php echo get_option('color2'); ?>" name="color_picker_color2" />
		<div id="color_picker_color2"></div>
	</td>
</tr>

Add a second call to the farbtastic plugin

$('#color_picker_color2').farbtastic('#color2');

Finally save the new color picker value in the update functions using the update_option() function

update_option('color2', esc_html($_POST['color_picker_color2']));

The see the final code download the twentyeleven child theme at the top of this article.

That’s it!

So that’s all there is to do. Pretty easy, no? Much easier and faster than using jPicker which I introduced in my previous tutorial.