A peel ad is often a great way to advertise a chosen product. It doesn’t matter if it’s your own product or a affiliate product. This type of ad is one of the most successful when it comes to get the users attention. The installation is fairly simple and it can be set up in just 5 min.

If you are the lazy type just like me, go ahead and download this plugin, it does the same thing. If you would like to find out how to code your peel ad here is how to do it:

Download the source files

In order for the ad to work you will need the peel files, that you need to upload to your web server. The best place to upload the peel file is wp-content/themes/your_current_theme/.

Edit the javascript file

Now we need to edit the peel.js javascript file. Open it in your favourite text editor and change the following files:

1. jaaspeel.ad_url – URL you intend to point the ad.
2. jaaspeel.small_path – Path to small.swf
3. jaaspeel.small_image – Path to small.jpg
4. jaaspeel.big_path – Path to large.swf
5. jaaspeel.big_image – Path to large.jpg

Here you have a actual example of how it can be done.

jaaspeel.ad_url = escape('http://www.designstrike.net'); 
jaaspeel.small_path = 'http://www.designstrike.net/wp-content/themes/simplified/peel/small.swf'; 
jaaspeel.small_image = escape('http://www.designstrike.net/wp-content/themes/simplified/peel/small.jpg'); 
jaaspeel.big_path = 'http://www.designstrike.net/wp-content/themes/simplified/peel/large.swf'; 
jaaspeel.big_image = escape('http://www.designstrike.net/wp-content/themes/simplified/peel/large.jpg');

What files you need to edit

The small image file is the image that the users sees when no hover is applied. You can change this according to your background.

The large image file is the actual ad image that the user sees when it hovers the ad and the peel is released. This can be edited accordingly.

Upload

Upload the entire peel folder inside your theme file. Be shure to specify the paths correctly.

Code insertion inside your theme

Ok, we need to add a little javascript call in your head section of the theme. To do this navigate to your header.php file and insert the following code before the ending head tag.

<script src="<strong>http://www.domain.com/peel.js</strong>" type="text/javascript"></script>

And there you go, instant peel ads without the help of any plugin.

This simple technique will allow your article authors to display a bio and a Twitter link at the end of every article they write. The process is fully automatic, and the authors only need to fill in the required fields on their registration.

This is a simple and effective way to give authors that link love that they deserve for writing on your blog. The tutorial include some simple steps and code to set up. The tutorial is about setting up a author description and bio along with a Twitter link, and finally showing them inside a author box in WordPress.

Let`s get to work

Open up your functions.php and paste in the following code. This code will make a Twitter field that authors need to fill inside the user edit screen of WordPress.

<tr>
    <th><label for="twitter">Twitter</label></th>
 
    <td>
        <input type="text" name="twitter" id="twitter" value="<?php echo esc_attr( get_the_author_meta( 'twitter', $user->ID ) ); ?>" class="regular-text" /><br />
        <span class="description">Please enter your Twitter misname.</span>
    </td>
</tr>

And this is the actual result

Keep in mind that if you want to display something else besides the Tiwtter link, the only thing you need to do is to copy the Twitter code and change every twitter instance inside the code into something unique.

Now we need to save the links

To allow wordpress to save your Twitter link you need to pop this code inside the functions.php file just below the Twitter code we inserted before.

add_action( 'personal_options_update', 'my_save_extra_profile_fields' );
add_action( 'edit_user_profile_update', 'my_save_extra_profile_fields' );
 
function my_save_extra_profile_fields( $user_id ) {
 
    if ( !current_user_can( 'edit_user', $user_id ) )
        return false;
 
    /* Copy and paste this line for additional fields. Make sure to change 'twitter' to the field ID. */
    update_usermeta( $user_id, 'twitter', $_POST['twitter'] );
}

Now, we need to set up the actual author box we will display at the end of every post that author writes. Here is how you can achieve this:

Paste in the following code inside the functions.php file.

function my_author_box() { ?>
    <div class="author-profile vcard">
        <?php echo get_avatar( get_the_author_meta( 'user_email' ), '96' ); ?>
 
        <h4 class="author-name fn n">Written by <?php the_author_posts_link(); ?></h4>
 
        <p class="author-description author-bio">
            <?php the_author_meta( 'description' ); ?>
        </p>
 
        <?php if ( get_the_author_meta( 'twitter' ) ) { ?>
            <p class="twitter clear">
                <a href="http://twitter.com/<?php the_author_meta( 'twitter' ); ?>" title="Follow <?php the_author_meta( 'display_name' ); ?> on Twitter">Follow <?php the_author_meta( 'display_name' ); ?> on Twitter</a>
            </p>
        <?php } // End check for twitter ?>
    </div><?php
}

Next, let`s add the code inside our single.php file for our author box to show. So open up your single.php and paste the following code just before the comments code:

<?php my_author_box(); ?>

And that is the whole thing. Furthermore you can stylize the author box by adding some extra CSS code inside your style.css. This is my actual code and you can customize it to fit your own needs.

.author-profile    {
padding:10px;
background-color:#c5ecfb;
border: 1px solid #0c529b;
}
 
.author-profile img    {
float:left;
margin-right: 15px;
}
 
.author-name {
font-size:1.9em;
font-family:Georgia,"Times New Roman",Times,serif;
margin-bottom:2px;
}
 
.author-description {
color:#333333;
font-family:Verdana,Geneva,sans-serif;
font-size:13px;
margin-top:5px;
}
 
.twitter a {
font-size:1.4em;
color:#005ec1;
text-decoration:underline;
font-weight:bold;
}

And this is the actual result:

Often when I find myself developing a new “something” for anyone, I have serious problems in IE, especially in IE6. As much as I would want IE6 to die in excruciating pain, I still have to develop and provide support for it.

Here is how you can have multiple instances of IE installed on the same machine, without the lack of productivity from IE8.

How can I get that darn thing?
IE6 was released in 2001, a long long time ago, so if you are probably a developer you upgraded to IE8. There is a little tool out there that can install multiple instances of Internet Explorer on the same machine. This means that you will have IE6 and IE7 and IE8 on the same computer.

Download Multiple IE installer

Do you want to run it inside vista?
Here is a post that details the current progress in making Internet Explorer 6 run native under Windows Vista.

CAPTCHA – a familiar term to some of us but also a weird word for others, nonetheless CAPTCHA is one of those thing everybody comes in contact somehow. Like the name tells it CAPTCHA is a acronym for Completely Automated Public Turing test to tell Computers and Humans Apart. Basically it`s whole purpose is to tell if you are a human or a bot.

The system is a security feature first implemented by Yahoo, and soon spreaded on a big number of systems to improve security. The CAPTCHA is a representative image containing squiggly words that asks the user to type the word inside a form. A thing that a machine cannot possibly do.

How can CAPTCHA protect you?
There is a number of ways that it can protect you. Here are some of the places that users tend to come across squiggly images:

• Protecting a web registration form from automated registrations
• Preventing automatic posting of advertising comments by robots on blogs or other similar applications.
• Protection of voting systems from robots that try to fraud the results.
• Preventing spam on contact forms.

At the moment, there are a vast variety of free or commercial solutions to a CAPTCHA system, but the down side is that because of the variety of the forms, the easier is for the bots to adapt. Sometimes the images are to similar, the letters are to understandable and the list can go on. We will make a simple system, that makes robot adaptation as hard as possible, so your system is protected at all times.

Server requirements

• PHP 4.1.0 or recent (PHP 5.x.x for blur)
• FreeType library
• GD 2.0.1 or recent

In the config file, we will define the paths to the image and font used by the CAPTCHA system, you can specify your own images and font. Note: all of the fonts used in this tutorial are free fonts.

Fonts used in this tutorial
Images used in this tutorial

Let`s build the form

First step, creating the config file

We will create a config file (config.php) in which we will define the parameters of the code. The generated code must be available to the script that renders the user`s input of the form.

You can use a variety of systems like temp files, sessions or databases. In this tutorial we will use sessions, because they are the easiest to implement.

Thus we will first define the variable name in witch we will keep the code:

$sessionVar = 'myCaptcha';

Next step is to define the allowed characters

$allowedChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';

Note that we skiped the number 0 (zero) to avoid confusion between zero and the letter “O” (capital o).

Now, we will make the lenght random, thus creating a more secure form.

$minCodeLength = 4;
$maxCodeLength = 6;

We know that a same letter size captcha is cracked more easily, so in the next markup we will randomize the letter height. The size will be measured in pixels.

$minFontSize = 24;
$maxFontSize = 32;

Another thing that influences CAPTCHA recognition for robots is the linear placement of the letters, so we will move them around the middle line.

$maxVerticalDisplacement = 15;

Now, we will rotate the letters a bit.

$maxRotationLeft  = 15;
$maxRotationRight = 15;

Now, we will be adjusting the padding of the letters

$textPadding = 5;

Ok, now we will change the colours of the background

$bgColor = array(255, 255, 255);

Next, we will define an array on the allowed color hex tags for the letters

$textColor = array(    
        '200, 0, 0',
        '30, 200, 0',
        '150, 0, 200',
        '150, 150, 0',
        '100, 100, 100',
        'ff0099',
        '99ff00'
        );

Different fonts for each letter? Never been so easy. Here is how you can do it. Keep in mind that you need the FreeType library fr the GD to work. You can find free fonts on the DaFont website.

$fontsFolder = 'my_fonts/';
$fontFiles   = array(  
        'elektra.ttf',
        'episode1.ttf',
        'lcd2bold.ttf',
        'optimusprinceps.ttf',
        'sams_town.ttf',
        'steinerlight.ttf',
        'turn_table.ttf'
        );

Now let`s set up the background images

$backgroundsFolder = 'my_backgrounds/';
$backgrounds = array(
        'bg_1.png',
        'bg_2.png',
        'bg_3.png',
        'bg_4.png'
        );

Don’t forget to replace the paths and names of the fonts and images with your own.

Enough with the config, lets create something. Create a new php file, let`s say show_code.php that we will call like an ordinary image call.

<img src="show_code.php" alt="myCaptcha" />

Next, include the starting command and the config file:

session_start();
include_once('config.php');
$_SESSION[$sessionVar] = '';

Next, we will need a function that will return the occupied space of a letter:

function getCharSize($fontFile, $char, $size, $angle=0){
        if( is_file($fontFile) && strlen($char) == 1 && $size > 0){
                $corners = @imagettfbbox( $size, $angle, $fontFile, $char );
                $left    = ($corners[0]>$corners[6])?$corners[6]:$corners[0];
                $right   = ($corners[2]>$corners[4])?$corners[2]:$corners[4];
                $top     = ($corners[5]>$corners[7])?$corners[7]:$corners[5];
                $bottom  = ($corners[1]>$corners[3])?$corners[1]:$corners[3];
                $width   = $right - $left + 4;
                $height  = abs($top - $bottom) + 4;
                $return  = array(
                                'width'  =>$width,
                                'height' =>$height,
                                'bottom' =>$bottom,
                                'right'  =>$right,
                                'top'    =>$top,
                                'left'   =>$left
                                );
        }else{
                $return = false;
        }
        return $return;
}

Next we will need a functions that will return values in a single form, regardless of the hexadecimal colors of the letters:

function hex2decColor($color){
        if(substr_count($color, ',') == 2){
                list($red, $green, $blue) = array_map('trim', explode(',', $color));
        }else{
                $red   = hexdec($color[0].$color[1]);
                $green = hexdec($color[2].$color[3]);
                $blue  = hexdec($color[4].$color[5]);
        }
        return array('red'=>$red, 'green'=>$green, 'blue'=>$blue);
}

Now we will set the image size to 0 and generate code lenght based on the configured maximum and minimum lenght.

$imgWidth = 0;
$imgHeight = 0;
 
$codeLength = rand($minCodeLength, $maxCodeLength);

Next, we will generate $codeLength times a character and it`s properties.

for($c = 1; $c <= $codeLength; $c++){
        $char[$c]['char']   = $allowedChars[rand(0, strlen($allowedChars)-1)];
        $char[$c]['color']  = hex2decColor($textColor[rand(0, count($textColor)-1 )]);
        $char[$c]['displacement'] = rand(0, $maxVerticalDisplacement*2) - $maxVerticalDisplacement;
        $char[$c]['font']   = $fontsFolder.$fontFiles[rand(0, count($fontFiles)-1 )];
        $char[$c]['size']   = rand($minFontSize, $maxFontSize);
        $char[$c]['angle']  = rand(0, $maxRotationLeft + $maxRotationRight) - $maxRotationRight;
        $char[$c]['space']  = rand($minLetterSpacing, $maxLetterSpacing);

We find out the dimensions of the current character, using one of the functions defined earlier.

        $properties = getCharSize($char[$c]['font'], $char[$c]['char'], $char[$c]['size'], $char[$c]['angle']);
        $width  = $properties['width'];
        $height = $properties['height'];

After we found the width of the character, we add it to the image total width along with the distance to the next character.

        $imgWidth += $width;
        if($c != $codeLength)
                $imgWidth += $char[$c]['space'];

If the image height is smaller than the current character height, then we set it the correct height.

        if( ($height + abs($char[$c]['displacement'])) > $imgHeight )
                $imgHeight = $height + abs($char[$c]['displacement']);

We add the current character to the row that forms our code

        $_SESSION[$sessionVar] .= $char[$c]['char'];
}

Next we add the padding

$imgWidth  += $textPadding * 2;
$imgHeight += $textPadding * 2 + $maxVerticalDisplacement;

Now, that we set the dimensions, let’s create the image and calculate the background image position. The images can be different textures or landscapes on a higher resolution than our image, so we will need only a portion defined randomly:

$img = imagecreatetruecolor($imgWidth, $imgHeight);

We choose a random image and read the dimensions:

$bg = rand(0, count($backgrounds)-1);
list($bgWidth, $bgHeight) = getimagesize($backgroundsFolder.$backgrounds[$bg]);

We set position where the portion of the image begins to be used as background and copy it in our image:

$bgX = rand(0, $bgWidth-$imgWidth);
$bgY = rand(0, $bgHeight-$imgHeight);
 
$bgImg = imagecreatefrompng($backgroundsFolder.$backgrounds[$bg]);
imagecopy($img, $bgImg, 0, 0, $bgX, $bgY, $imgWidth, $imgHeight);
imagedestroy($bgImg);

Next is the code markup inside the image

$cursor = $textPadding;

We set the previously generated color for the current character:

for($c = 1; $c <= $codeLength; $c++){
        $color = imagecolorallocate($img, $char[$c]['color']['red'], $char[$c]['color']['green'], $char[$c]['color']['blue']);

We calculate the vertical character, depending on its size and the amount of displacement from the center generated for him:

  $properties = getCharSize($char[$c]['font'], $char[$c]['char'], $char[$c]['size'], $char[$c]['angle']);
        $width  = $properties['width'];
        $height = $properties['height'];
        $bottom = $properties['bottom'];
 
        $y = $char[$c]['displacement'] + $maxVerticalDisplacement + $height - $bottom;

We write the current character and move the cursor to the right:

imagettftext($img, $char[$c]['size'], $char[$c]['angle'], $cursor, $y, $color, $char[$c]['font'], $char[$c]['char']);
        $cursor += $width + $char[$c]['space'];
}

We have left but to apply the Gaussian Blur filter, if the system allows:

if(function_exists('imagefilter')){
        imagefilter($img, IMG_FILTER_GAUSSIAN_BLUR);
}

At this point, our image is ready and we have to only serve it to a browser, and specify that the image should not be cached by the headers and the format is PNG (can be as good GIF, JPEG or any other format supported by the GD library), then release the resources on the server:

header( 'Cache-Control: no-store, no-cache, must-revalidate' );
header( 'Cache-Control: post-check=0, pre-check=0', false );
header( 'Pragma: no-cache' );
header( 'Content-type: image/png' );
imagepng($img);
imagedestroy($img);

Verify! Inside the file that the POST data is sent, we need to open the session using session_start(); and verify that our input data is exactly the same with the saved data. This goes something like this:

if($_SERVER['REQUEST_METHOD'] == 'POST'){
        if($_POST['myCaptcha'] == $_SESSION['myCaptcha']){
                // The rest of the data is being processed
        }else{
                // Wrong Code! Try Again or Go Away!
        }
}

God, I`m finished

Tips&Triks
To give visitors the opportunity to generate another code without needing to reload the entire page, display the image using the following code:

<img src="show_code.php" alt="myCaptcha" onclick="javascript:this.src += '?';" />

And this is how to create a simple captcha using PHP inside your system.

A few days back I was asked by a client to set up a hotel reservation form in his WordPress powered website. The problem is easy to solve and implement. This tutorial consists of setting up a WordPress custom page template and some php for a Hotel reservation page.

By the end of this tutorial you will know hot to set up a hotel reservation page, a restaurant reservation page or anything that requires a reservation inside WordPress.

Step #1 – Set up a WordPress custom page template

This is fairly easy to do. Go inside your WP theme root and simply duplicate the page.php file and name it anything you want. I renamed my file reservation.php.

Next you need to delete everything in the page loop. So head over open up your reservations.php and delete this:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
 
				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
 
			</div>
		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

The next thing to do is to tell WordPress there is a custom page template named reservations.php. To do this simply copy and paste the following before the get_header(); tag.

<?php
    /*
    Template Name: RESERVATION
 
    */
    ?>

So you got something like this:

    <?php
    /*
    Template Name: REZERVARI
 
    */
    ?>
 
<?php get_header(); ?>

Next go inside your WordPress dashboard and add a new page, on the right you will have a option to select a custom page template. Select RESERVATIONS like in the image below.

Step #2 Setting up the reservation php code

Now the only place you will need to work is the reservation php file. Go and edit the file and copy/paste this code where the page loop was.

<script>
function checkform2 ( form )
{
 
  if (form.nume.value == "") {
    alert( "Va rugam completati campul: Nume!" );
    form.nume.focus();
    return false ;
  }
 
  if (form.prenume.value == "") {
    alert( "Va rugam completati campul: Prenume!" );
    form.prenume.focus();
    return false ;
  }
 
  if (form.telefon.value == "") {
    alert( "Va rugam completati campul: Telefon!" );
    form.telefon.focus();
    return false ;
  }
 
 
 
  return true ;
}
</script>
		<h2>Online Reservation</h2> 
<form name="tstest" method="post" action="/reservation" onsubmit="return checkform2(this)">
 
 
To make a online reservation to one of our hotel rooms please fill out the form below:
 
 
                    <table class="BodyTXT" border="0" cellpadding="1" cellspacing="1" width="100%">
 
                      <tbody><tr>
 
                        <td width="22%"><div align="left">First Name:*</div></td>
 
                        <td><input name="nume" id="nume" type="text"></td>
 
                        </tr>
 
                      <tr>
 
                        <td><div align="left">Last Name:*</div></td>
 
                        <td><input name="prenume" id="prenume" type="text"></td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Phone:*</div></td>
 
                        <td><input name="telefon" id="telefon" type="text"></td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">E-mail:</div></td>
 
                        <td><input name="email" id="email" type="text"></td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Room number:</div></td>
 
                        <td>
 
						<select name="nr_camere" id="nr_camere">
							<option selected="selected" value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
						</select>						</td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Room: </div></td>
 
                        <td>
						<select name="camera">
							<option value="Double">Double</option>
							<option value="Matrimoniala">Apartment</option>
							<option value="Matrimoniala cu jacuzzi">Apartment with jacuzzi</option>
						</select>						</td>
                      </tr>
 
                      <tr>
 
                        <td><div align="left">Arrival date: </div></td>
 
                        <td width="47%"><input name="data_intrare" id="data_intrare" type="text"><script language="JavaScript">
	var o_cal = new tcal ({
		// form name
		'formname': 'tstest',
		// input name
		'controlname': 'data_intrare'
	});
 
	// individual template parameters can be modified via the calendar variable
	o_cal.a_tpl.yearscroll = false;
	o_cal.a_tpl.weekstart = 1;
 
	</script></td>
                        </tr>
 
                      <tr>
 
                        <td><div align="left">Departure Date: </div></td>
 
                        <td width="47%"><input name="data_iesire" id="data_iesire" type="text"><script language="JavaScript">
	var o_cal = new tcal ({
		// form name
		'formname': 'tstest',
		// input name
		'controlname': 'data_iesire'
	});
 
	// individual template parameters can be modified via the calendar variable
	o_cal.a_tpl.yearscroll = false;
	o_cal.a_tpl.weekstart = 1;
 
	</script></td>
                        </tr>
 
                      <tr>
 
                        <td><div align="left">Other comments: </div></td>
 
                        <td><textarea name="observatii" cols="40" rows="4" id="observatii"></textarea></td>
                        </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td>* required fields</td>
                        </tr>
 
                      <tr>
 
                        <td></td>
 
                        <td><input name="trimitecontact" id="trimitecontact" value="yes" type="hidden">
 
 
                            <input name="Submit" class="RedButton" value="Send" type="submit"></td>
                        </tr>
                    </tbody></table>
 
 
      </form>
 
 
 <?
if ($_POST['trimitecontact'] == "yes")
{
	$nume = $_POST['nume'];
	$prenume = $_POST['prenume'];
	$telefon = $_POST['telefon'];
	$email = $_POST['email'];
	$cam = $_POST['nr_camere'];
	$tip = $_POST['camera'];
	$di = $_POST['data_intrare'];
	$die = $_POST['data_intrare'];
	$mesaj = $_POST['observatii'];
 
	$message = "This reservation is from:\n" .
	"------------------------------------------------------------\n" .
	"First Name: $nume\n" .
	"Last Name: $prenume\n" .
	"Phone: $telefon\n" .
	"Email : $email\n".
	"Room Number: $cam\n" .
	"Room: $tip\n" .
	"Arrival Date: $di\n" .
	"Departure Date: $die\n" .
	"Other Comments : $mesaj\n".
	"\n\n------------------------------------------------------------\n" ;
	$uself = 1;
	$subject = "New room reservation at your hotel";
$headersep = (!isset( $uself ) || ($uself == 0)) ? "\r\n" : "\n" ;
$http_referrer = getenv( "HTTP_REFERER" );
$mailto = 'CHANGE@THIS.TOYOUREMAIL' ;
$ip = getenv(REMOTE_ADDR);
mail($mailto, $subject, $message,
	"From: \"$nume\" <$email>" . $headersep . "Reply-To: \"$nume\" <$email>" . $headersep . "X-Mailer: chfeedback.php 2.08" );
echo '<strong> Quote sent</strong>';				
}
?>
 
   <span class="text_contact">
 
The reservation will be considered after receiving payment.
                  </span>

And this is the result:

Note: You must set the action=”/reservation” of the form imput to match your custom page php name. Ex. if I have a custom page php called joomla.php i would rename the action to action=”/joomla”.

Remember to chage the $mailto = ‘CHANGE@THIS.TOYOUREMAIL’ ; to your desiered email where the messages will come.

Some really devoted design people are ready to take it up to the next level, and write a on-line or off-line resource to help others in the quest for the perfect design.

The costs are very low in addition to the valuable knowledge the books offer so, head on over and preorder/order/download the best design books the community has to offer.

SmashingMag design book

The book has 300 paperback pages, full-color images on coated paper, free shipping to the US and Germany, reduced shipping costs to other countries, 30-day 100% money-back guarantee and you can preorder now and save 20%.

What are the books main topics?

The book covers these particular topics:

• The Art And Science Of CSS Layouts
• User Interface Design In Modern Applications
• Web Typography: Rules, Guidelines And Common Mistakes
• Usability Principles For Modern Websites
• The Guide to Fantastic Color Usage In Web Design and Usability
• Performance Optimization For Websites
• Design To Sell: Increasing Conversion Rates
• How To Turn A Site Into A Remarkable Brand
• Learning From Experts: Interviews And Insights
• The Smashing Story

These being said, head on over and preorder the SmashingBook now and save 20% of the price. This is a great off-line design resource and if you are a web developer you don’t want to miss this one.

31 days to build a better blog

This is a must have ebook. Written by the founder of problogger.net Darren Rowse, he can guarantee that in 31 days you will have a better blog.

This book is about completing dayli tasks on your blog to increase it`s readers, popularity and interaction. You are to complete 1 task a day for 31 days.

By the end of the 31 day period of reading the book you have:

* written a variety of different types and styles of posts
* learned techniques for coming up with new post ideas
* promoted your blog in a variety of ways
* built relationships with readers
* reached out to and developed working relationships with other bloggers
* developed an editorial calendar for your blog going forward
* discovered ways to be more connected to your niche/topic
* designed a plan for the next month of your blogging

This book is perfect for those who have just started a blog but who don’t know what to do next, those who have had a blog for a while but it’s stalled in its growth and bloggers with bloggers block and lacking inspiration.

Go on and download the book for a small price of $19.95.

Free Report: How To Make Money From The Envato Marketplace

This is a free book that covers how can you make money using a affiliate network with wordpress. This is more a free report than a book, ut it covers the main concepts clearly. If found it as one of the best money making books around.

You can find out how can you make thousands of dollars in commissions using few simple steps. You can download the ebook here.

When you develop a new blog, often, the big question that comes in to the mind is where and how can you get readers and trusted visitors to read your blog posts. Well, recently I found a great plugin for WordPress that helps you achieve and increase your blog readers.

WP Greet Box is a wordpress plugin that greets your blog visitors on every post page based on what place they are coming from.

This is how it works: let`s say a visitor comes from google on one of your blog posts, then the plugin enables a message to be displayed informing the google user to subscribe to the RSS feed to stay updated.

Here is one of the messages for a Google visitor:

There are different types of greeting messages based on the place that the visitor is coming from. For example if a visitor comes from Twitter, the message is asking the visitor if it would like to retweet the post just like in the image below:

The great thing about the plugin is that it really increase blog exposure and readers, so it`s a new must on my wordpress plugin list.

Customizing and configuration

There are plenti of customization options for this plugin. You can disable/enable greeting messages on posts/pages, you can detect the visitor’s search keywords from major search engines and automatically display related posts under the greeting message and many more.

Here is a list of all the plugin`s features

Also, you can create new greeting messages

You can personalize your greeting message by creating a new one for any referrer you like just like in the picture below:

Enough said, just go ahead and download the plugin. Also you can find the documentation for the plugin on the developer`s page and if you would like to donate a coffe for this amazing plugin just make your way here.

First off, I was thinking of writing a short tutorial on how to embed Google Wave inside a WordPress blog using a simple developer plugin. Well, then I checked the Google competitors on that actual keyword …. and I was amazed.

The Google feature is not even released to the world and already a few smart bloggers wrote about it. This calls for actual thinking ahead of things, and this is how to write stuff. Think ahead of what others will be searching and start writing.

What is that damn Google Wave everyone is talking about?

Simply as this, Google Wave will redefine the concept of email and world communication. Think of it as this:

Click for HD

An this is the Wiki article

It is a web based service, computing platform, and communications protocol designed to merge e-mail, instant messaging, wiki, and social networking. It has a strong collaborative and real-time focus supported by extensions that can provide, for example, robust spelling/grammar checking, automated translation between 40 languages, and numerous other extensions.

OK, I am still going to write about how to embed Google Wave inside WordPress, nonetheless. This is how you can do it.

Simply go and install Wavr, a plugin created using the Google Wave Embed API and it officially works on WordPress. Note that you must have a Wave developer account for testing purposes. The plugin has a variety of options that you can use like editing the wave’s colors and more.

The feature is still on the development page so changes will occur, bugs are present and there is nothing much to see.

I know quite a few WordPress theme developers that want to share their work freely to the world trough the WordPress theme directory community. Here are some small but effective tips on how to get on the WTD more quickly and with fewer updates.

These tips are personally tried out after many theme version rejects. Also it`s a good idea to read the theme information page and theme development checklist before uploading a theme.

Tip #1. Most of the theme developers make their themes based on sample texts and media. I recommend developing for the actual sample data that the publishers previews themes on the directory. There are a lot of stuff that we can miss like abbr, acronym, pre, code, sub, sup. Simply go, preview a theme, and use firebug to discover those tags that need special attention.

Tip #2. Keep you functions.php clean and code compliant, note that the directory doesn’t accept

Tip #3. Always keep your CSS and XHTML in order, any discrepancies can make the publisher to request another update of the theme. Note that actual people are reviewing the submission so make your themes for people.

Tip #4. Don’t hard code Twitter links, adsense or other type of media or social stuff without including them inside a theme options page. They ask one thing to be fixed at a time so additional theme updates may be needed.

Tip #5. The most important THING!. If you want to include a link in the footer, please see to what website it leads to. Disable any wordpress affiliate links, paid wordpress theme, spammy content. Your theme WILL be rejected.

I got one theme rejected because the footer link was pointing to a website that “looked” spammy, and that was the actual review comment from the publisher.

What I do is include a dummy landing page with a 301 redirect inside the footer (You set up the redirect after the theme has been approved).

In this article you will find various ways of improving your theme by adding various wordpress post hacks like showing related posts, setting up and showing scheduled posts or showing a featured post. All of these hacks can optimize your wordpress blog by increasing time on site, bounce rate and other SEO issues.

How to show related posts based on keywords

First up Download, install, and activate the “Ultimate Tag Warrior fin” plugin. After this open up your single.php and before the comments template:

<?php comments_template(); ?>

insert this code snippet:

<div class="relatedposts">
<h2>Related Posts</h2>
<?php UTW_ShowRelatedPostsForCurrentPost("posthtmllist", "", "4"); ?>
</div></php>

You can set up the number of related posts by increasing the number “4″. Save the single.php and refresh your website. The posts will be shown based on the related keywords other posts have. You can also further stylize your snippet by creating a class entry “relatedposts” inside your style.css file.

How to list scheduled posts

Sometimes, you schedule posts instead of stuffing them all together at one time. This can be useful if you have much to write about and if you want to let your readers know what to expect for the future. This encourages the reader to visit you again and read that great post you scheduled for another day.

Ok, this snippet is easy to install, just paste the following code anywhere inside your theme files that you want the scheduled post to appear:

<?php
$my_query = new WP_Query('post_status=future&order=DESC&showposts=5');
if ($my_query->have_posts()) {
    while ($my_query->have_posts()) : $my_query->the_post();
        $do_not_duplicate = $post->ID; ?>
        <li><?php the_title(); ?></li>
    <?php endwhile;
}
?>

How to show a random featured post

This hack is useful for a number of reasons like SEO optimization, reader engagement, low bounce rate or having something to show-off. And here is how you can do it:

First you need to download this plugin, install and activate it.

Next thing is to open up your index.php file, and right after this tag

 <?php if (have_posts()) : ?>

insert this tag

 <?php show_featured_post(); ?>

You can customize this further by wrapping the tag within a css style like this:

 <div style="padding:10px; border:5px solid #ccc; margin-top:10px;">
<?php show_featured_post(); ?>
</div>