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.

How to Use CSS Sprites in Fireworks and Dreamweaver

Ever wondered how to use CSS Sprites in your own web projects? In this tutorial Tom Green is going to walk through how to create CSS sprites in Fireworks and then put them to use in Dreamweaver.