The first draft just slid up a background sprite to reveal the tab. My co-workers did not like this as it looked awkward.

This is where LabsTab 1.0 was created.

The Goal

In a perfect world the tab would slide up, the text would fade from grey to white and everyone would be happy. My initial goal is to have the text use Cufon to replace the text but it will require some keen thinking and a bit of Cufon.refresh();

The Current State

Right now the tab is split into 2 background images.

The Tab Background & The Text

When the user rolls over the link, the tab slides up. This is good. The bad part is the text background doesn’t fade into the new background because by default jQuery wants to animate the background position.

Also it is very poorly coded, I’ve moved from MooTools to jQuery so I’m still a tad unfamiliar with things.

The Code

I’ve uploaded the entire project to github so feel free to fork it and make it better!

http://github.com/envex/LabsTab

Twitter @Anywhere is an easy to deploy solution for bringing the Twitter communication platform to your own site. Add follow buttons, hovercards, linkify @usernames, and build deeper integrations with “Connect to Twitter.” @Anywhere promotes a more engaged user base for your site.

Just installed Twitter’s new @anywhere service. Just hover over my name @envex to test it out!

I’ve written a class based on some basic functions of Digg.com that I’m planning on using for a tutorial. I wouldn’t be a very good teacher if I released a shoddy class out to the masses.

This is where you come in. I would like anyone and everyone to take this class and tear it apart. Call me an idiot for doing something a certain way, praise me for a chunk of code or make changes in silence. I want this to be a learning experience for everyone.

You can fork it, download it or copy it from my gist account or use the big button below!

You can either contact me on gist, leave a comment or send me an email, either way lets try and make this a kick ass class!

DigDug Icon is copyright Gedeon Maheux & The IconFactory

DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.

Luckily, we can write our own comment function, using our own code, to make styling the comments 100% easier and 50% more fun

The Function

In your WordPress theme folder (root/wp-content/themes/your-theme/) there will be a file called functions.php. This is the first file we are going to edit, so open it up. Add this code to the bottom of functions.php.

<?php

function envex_comments($comment, $args, $depth) {

$GLOBALS['comment'] = $comment;

//grab the commenter id
$user_id = $comment->user_id;
$user = new WP_User( $user_id );

//set the current role of that commenter to the role variable
//most of the time, you'll just be worrying about you, the administrator
$role = isset($user) ? $user->roles[0] : ''; ?>

<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

<div>
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '45'); } ?>
<p><strong><?php comment_author_link() ?></strong><br /><?php comment_date('m/d/y \@ h:m a') ?></p>

</div> <!-- comment_grav -->

<div>
<?php comment_text() ?>
</div> <!-- comment_text -->

<div>
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>

<?php
if ($comment->comment_approved == '0') : ?>
<p><em>Your comment is awaiting moderation.</em></p>
<?php
endif; ?>

</li>

<?php
/* Changes every other comment to a different class */
$oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : '';

}

?>

In a nutshell, WordPress is going to run this function for each comment.

We’ve created an li element that will hold all of our comment info.

The Gravatar

The first div, comment_grav, will display a gravatar is the current commenter has one setup. We use get_avatar($comment, ’45′) and pass 2 variables to it. The first one being the comment info and the second is the size of our gravatar.

You can read more about gravatars over at their website!

The Comment Text and The Reply Link

These next 2 functions are pretty straight forward. To display the comment text we use comment_text().

To display the reply link we use the comment_reply_link(). The arguments that are being passed are to deal with threaded comments (*if they’re enabled).

*Threaded comments are enabled in Admin panel –> Settings -> Discussions.

The Approval

We don’t want to show any unapproved comments, so we check to see if $comment->comment_approved is false. If it’s false we display that it’s awaiting moderation.

The Template

Now that we’ve created our own comments function, we need to tell our theme to use it instead of the WordPress one. Open comments.php and find wp_list_comments(). It should be around line 29.

We are going to pass a few arguments to this function.

wp_list_comments(array('reply_text'=>'Reply to this Comment','type'=>'comment','callback' => 'envex_comments'));

These arguments tell the wp_list_comments() function to use envex_comments() to display our comments.

Conclusion

You now have the basic structure for some new comments on your blog/cms. All that’s left is to style them up to match your site, and i’m going to leave that up to you!

I’m working on a project and have to generate the same template on 4 different pages. I was also using javascript to create the same template on the fly. Needless to say this wasn’t the most efficient way of doing things because if I needed to change 1 aspect of the template, I needed to edit 4 different files.

I tried to write a little function, inspired by CakePHP, that would take an array of information, open up a template, replace any text and then return the new content.

This means I can use 1 template over and over again throughout the app and not have to worry if I made changes to all the files.

The Function

//grab an element to use as a template
function show_element($name, $array, $path = null){

//add .php do the end of the name, by default it looks for a relative path
//unless $path is avaiable, then it'll check the path
$name = $path . $name.'.php';

//open up the file
$content = fread($fp = fopen($name, 'r'), filesize($name)); fclose($fp);

//loop through the file and replace any content that's needed
//inside the template $array['name'] is {NAME}
foreach($array as $a => $b){

//just in case, uppercase the array name
$el = '{' . strtoupper($a) . '}';

//replace the content
$content = preg_replace("/$el/", $b, $content);

}

//return the content, woop woop
return $content;

}

Simple Usage

element.php
We have our element file called element.php. Inside we have wrote out a simple line of text. We want the product name as well as the price to change depending on the information that we’ve passed through our function. Curly braces are our friends, so we wrap our variables in them. {NAME} will become the product name and {PRICE} the price.

NOTE: All the variable names in the template file must be uppercase and wrapped in curly braces or else they will not be replaced.

<p>By this product <strong>({NAME})</strong> for the awesome price of ${PRICE}</p>

index.php
Our second file we have our $products array with 4 simple products. We are looping though each product and using our show_element() function to replace the variables in our template file with our product information.

$products = array(
array('name' => 'awesome shoes', 'price' => '99.99'),
array('name' => 'awesome pants', 'price' => '9.99'),
array('name' => 'awesome hats', 'price' => '19.99'),
array('name' => 'awesome woop woops', 'price' => '3459.99')
);

foreach($products as $product){

echo show_element('element', $product);

}

Now we have a super simple, but very helpful template system that’s easy to use and install in any project!

Learning something new is always easier when it’s put into real world terms. In this example we are going to use the foreach loop to tell the user is a store is currently open, or closed.

Filling the Store

To start, we are going to create a simple array of stores. We are going to name it stores.

When working with foreach, as well as arrays, I like to keep the names plural. It makes it easier to scan the code once you reach hundreds of lines.

<pre>

<?php

$stores = array('My Shoes','My Shirts','My Hats','My Pants');

?>

</pre>

We’ve wrapped our entire script in <pre> tags so that we don’t have to render out <p> tags to format our code. Instead we can just use /n to create a new line, but this will come in the next example.

Now that we have our stores array we can loop out the name of each store using our foreach loop.

In a nutshell the foreach loop is taking each array item (store name) and executing some code that we set. For each store we are going to show the user the name of the store.

foreach($stores as $store){

echo "$store \n";

}

What’s going on?

We told PHP that foreach $stores item (our stores) we want to create a new variable of $store which holds the name of our store. Inside the foreach loop is the code that we want to execute for each store. In this example we are echoing out the value of $store which currently holds our store name. If you ran this script right now you should see something like:

My Shoes
My Shirts
My Hats
My Pants

Open 24/7

Now we can make some quick changes to our array and foreach loop to tell the user if the store is open or closed.

$stores = array(
'My Shoes' => 'Open',
'My Shirts' => 'Closed',
'My Hats' => 'Open',
'My Pants' => 'Open'
);

We’ve modified our $stores array and added a new key to each array item. All this is doing is saying My Shoes holds a value of Open. We can now make 2 changes to our foreach loop to reflect these changes.

foreach($stores as $store => $status){

echo "$store is currently $status \n";

}

*Updated foreach loop. Thanks to Mark Skilbeck

We’ve added a $status variable to our foreach loop to pass our value of either Open or Close to the $status variable. We can now echo out the value of $status to display the current status of our store. Run the script and it should look like:

My Shoes is currently Open
My Shirts is currently Closed
My Hats is currently Open
My Pants is currently Open

To wrap everything up, the foreach loop takes our array ($stores) and shows the user the name ($store) and status ($status) of each store in $stores. This can be extremely useful when you have a large list of items that need to be shown to the user, or formatted in some way. The possibilities are endless!

If/Else If

Let’s say you are looping out some table rows and you want to make alternating rows different colors. Inside your while loop you’d be checking to see if a variable is even or odd.

if($i % 2){

     $alt = 'even';

}else{

     $alt = 'odd';

}

As you can see, that can be a lot of unnecessary code. Let’s shorten it up a little bit.

Using some short hands, we can reduce the 6 lines of code to 1 single line.

$alt = $i % 2 ? 'even' : 'odd';

What just happened? First we are setting our variable of $alt. The next part we are setting a condition. If $i is divisible by 2, making it even, we are setting the value of alt to even, if not, we set the value to odd.

Are You Talkin’ To Me?

The last quick tip is a shorthand for echo. Normally, an echo would look like:

<?php echo 'Hey Guys'; ?>

If you have short_open_tag set to 1 in your php.ini you can use the example below. If you don’t have it included, you can include this one line of code to enable it.

//set short_open_tag to true to make sure your server allows shorthands

ini_set('short_open_tag', '1');

<?= 'Hey Guys' ?>

Now, lots of people over the internet will either tell you this shorthand is the greatest thing since sliced bread, and the other will say it’s degraded and won’t be included in newer version of PHP. It’s basically all up to you.

Personally, I like to create a nice little function like the one below to take care of echoing out my text. It keeps it semi-future proof while cutting down on code writing!

function e($a){

echo $a;

}

*heavily inspired by the CakePHP e() function. In fact it’s probably identical

UPDATE: November 5, 2009

It seems that some user are a little bit confused about the e() function. Here is a quick usage example.

//normal php echoing
<?php echo 'Hey Guys'; ?>
//returns Hey Guys

//shorthand on a shorthand enabled server
<?= 'Hey Guys'; ?>
//returns Hey Guys

//e() function
<?php e('Hey Guys'); ?>
//returns Hey Guys

As you can see each example returns the exact same thing, but the amount of code required is a bit less with the final 2 examples. The upside to using the e() function is that we don’t have to write alot of code and it works on servers that don’t have shorthands enabled (which is good if you’re writing scripts for distribution).

Another pro to using the e() function is that you can also format the text before it’s echo’d out. This includes striping slashes or running regular expressions.

I hope you found this useful and as always, if you notice anything that needs changing or have improvements, please leave a comment and let me know!

When most people think about WordPress, they think about blogs. If you look at the front page of WordPress.org, they talk a lot about blogging as well. What they don’t tell you is that WordPress can also double as a very powerful CMS; you just have to set it up properly. It can be a bit tricky to get setup and working the way that you want; but this is where I come in.

In this 3-part tutorial + screencast series, I’m going to take you through the three steps of using WordPress as a CMS.

View the 3-Part Tutorial/Screencast

This tutorial is now owned by NetTuts+, I’m just the author.

It was only a quick 5 minute tutorial so it didn’t go into much detail and after implementing it into one of my projects it needed some tweaking.

The main problem was there was the potential for your site to create thousands of indistinguishable error logs. My solution was to create folders to house daily log files. This makes your error logs live inside a nice folder structure broken down by year, month and day.

This was a quick script that I threw together so if you have any improvements please leave a comment and lets try and make this a bulletproof little function!

//log any php errors to a folder on the server
function log_errors(){

	$log_folder = MAIN_PATH . '/_logs';
	$file = null;
	$current_folder = null;

	//we need to find out if a month folder has been created
	$year = date('Y');
	$month = date('m');
	$day = date('d');

	//set the current folder path to your/site/path/_logs/2009
	$current_folder = "$log_folder/$year";

	//create the year folder if it's not already created
	if(!is_dir($current_folder)){ mkdir($current_folder); }

	//month
	$current_folder .= "/$month";
	if(!is_dir($current_folder)){ mkdir($current_folder); }

	//day
	$current_folder .= "/$day";
	if(!is_dir($current_folder)){ mkdir($current_folder); }

	//set the file that we want to create
	$file = $current_folder . '/' . date('G:i:s') . '.txt';

	ini_set('display_errors', 1);
	ini_set('log_errors', 1);
	ini_set('error_log', $file);
	error_reporting(E_ALL);

}

Be sure to check out jeffrey’s site for more interesting articles!

UPDATE: Thanks to Ryan for pointing out that we should switch to minutes with leading zeros (i) instead of using (m) which would check for the month

After the initial move to Mootools I was frustrated with the lack of community support and ended up moving back to prototype immediately. After I was more comfortable with working with frameworks I moved back to Mootools and haven’t looked back.

With this tutorial, I’m going to try to make sure that you have a great beginning to the Mootools framework. I’m going to walk you through getting everything downloaded and setup as well as some of the basic elements of mootools. After that I’m going to spend some time walking you through how to use the Mootools Docs, which is a site that you’ll be visiting very often during the use of Mootools.

View the Tutorial/Screencast

This tutorial is now owned by NetTuts+, I’m just the author.