The following round up of tutorials is my latest article written for WPTuts+. It contains the following sections of tutorials:

• Theme Development Related Tutorials
• Plugins Related
• WordPress Security Related
• Data Analysis
• Troubleshooting and Debugging WordPress
• WordPress Post Management Related
• Looking forward to 2012

Here is a preview of the article.

Theme Development Related

Deploy Your WordPress Blog to the Cloud

For the last decade, hosting a large scale web application has been a daunting task, reserved only for experts. Not anymore; when Amazon opened its server architecture, everything changed. Computer hardware moved to the cloud, and became available to any and all developers. In this tutorial, we will install WordPress in the cloud.

Tutorial Link

WordPress Security Related

Quick Tip: Backing Up Your Blog with VaultPress

As with almost every other web app, WordPress stores information in a database. There’s always a chance that your data could be lost or corrupted, and it’s wise to have a solid backup strategy in place. This is where VaultPress enters the scene to save the day, providing complete backup and security for your WordPress site.

Tutorial Link

Check out the complete list of the best tutorials of 2011 by visiting my latest article at WPTuts+. Also do leave your suggestions and feed backs. Would love to know what kind of tutorials and round ups you would like to read in the future.

Introduction

VaultPress is the latest product from Automattic (the creators of WordPress.com) which provides around the clock, complete backup of your WordPress blog. It performs a synchronization of every post, comment, media file, revision and dashboard setting across at least two separate cloud services.

If that is not enough, they provide continuous security, disaster recovery and also help you in the migration of your blog to a new host. All this sounds interesting, and if you want to start backing up and securing your blog right away, then this Quick Tip will have you set up in five minutes!.

This quick tip is one of my tutorials at WPTuts+ Check out the complete tutorial here.

This is my first round up ever. What better way to write my first round up post than to display a list of the best WordPress themes out there for portfolio purposes. This list consists of the most stunning WordPress portfolio themes both free and premium ones. This is also my latest post at WPTuts+

Boldly

Boldly is a beautiful theme for portfolio with an amazing slider at the top. It has all the qualities of a premium theme and has loads of customization options at the backend.
Preview | Download

Wordfolio

Wordfolio is an award winning wordpress portfolio theme. It has this unique innovative concept of displaying the featured work, which impresses the visitor within seconds. It’s totally worth the price.
Preview | Buy

To check out the remaining awesome 38 themes and their download links, visit my latest post at WPTuts+. Also do leave your suggestions and feed backs. Would love to know what kind of tutorials and round ups you would like to read in the future.

Envato just launched their latest tuts+ site WPTuts+. This site is completely dedicated to wordpress and I am sure I will be writing  many tutorials there in the future . This is one of the quick tips I wrote for WPTuts+ which briefly explains how you can use the powerful shortcodes feature provided by WordPress.

Introduction

Shortcodes have many benefits if used properly in theme files. If you are familiar with preprocessor macros in C / C ++, then shortcodes can serve a somewhat similar function in WordPress. The basic purpose of using a shortcode is to replace the placeholder with your own custom piece of HTML code when the server sends the page to the client side. The steps involved in creation and implementation of shortcodes are as follows…

You can check out the complete quick tip at the new  WPTuts+ site . Do share your comments and views regarding this quick tip and also any suggestions for tutorials you would like to read .

My latest tutorial for NetTuts discusses about how we can use WordPress as a CMS and flex it to our needs to create a stunning portfolio with multiple layouts. In this tutorial, we are going to extensively use powerful features of WordPress, such as custom posts, custom taxonomies, and we’ll also write a function to fetch our own custom excerpts. This is what we are going to create

The multi-layout theme will function in such a way that the user can select between a grid and list layout.This is the basic design of how our portfolio site will appear in grid mode:

Once the user clicks on the list view control, the whole layout will smoothly change to a list view which will contain the title of the project, the tags associated with it, and a short description.

Check out the complete tutorial on Nettuts and get started on creating that cool portfolio you always wanted! Do share your creations, suggestions with us

Update 30th April, 2011: The WP e-Commerce Gold Cart Plugin got updated to a new version (v2.9.1). They did some changes in the gallery display method. Hence, I had to modify the code I posted earlier, so that it can work with the updated version of the Gold Cart Gallery.:

The Project

This project of mine required a gallery in the single product page and also the Cloud Zoom plugin enabled such that the users can have a zoomed view of the product's main image just by hovering over the image. The Gold Cart plugin for WP e-Commerce enabled the Gallery option but it provides the thickbox feature as the default option for previewing images.

The Problem

Even though the gallery was displaying the thumbnails perfectly well but there was some problem with it because after clicking on the thumbnail of the images in the gallery, the main product image was not being replaced. The Cloud Zoom plugin was activated on the main image of the product and without the option of the image being replaced by the images in the gallery, the whole point of implementing the gallery was pointless.

The Solution

So after doing a bit of research and finding no solution to replace the main image with the image being clicked in the gallery, I was forced to find another solution to the problem. Cloud Zoom is an awesome plugin and luckily it provides an option of implementing a gallery too, by just adding some classes and a complex rel attribute for the hyprlink tags of the images. This can be done in the following manner:

<html>
<head>

<!-- Load the Cloud Zoom CSS file -->
<link href="/styles/cloud-zoom.css" rel="stylesheet" type="text/css" />

<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- Load the Cloud Zoom JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

</head>
    <body>

        <!--
        An anchor with class of 'cloud-zoom' should surround the small image.
        The anchor's href should point to the big zoom image.
        Any options can be specified in the rel attribute of the anchor.
        Options should be specified in regular JavaScript object format,
        but without the braces.
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
        </a>

        <!--
        You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
        The anchor's href should point to the big zoom image.
        In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
        and also the small image to use (smallImage: /images/....)
        -->

        <a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' ">
        <img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a>

        <a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
        	rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'">
        <img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a>                  

        <a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
        	rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' ">
        <img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a>

    </body>
</html>

The details on the arguments for the Cloud Zoom plugin are provided here.

Now from the above example the main points to note are as follows:

• Class cloud-zoom in the main image's hyperlink tag.
• The href attribute of the hyperlink tag contains the link to the larger version of the main image.
• The rel attribute in the main image hyper link which provides the primary arguments for the plugin, which defines how the plugin will work.
• The hyperlink tag encloses the smaller version of the product main image.
• The class cloud-zoom-gallery in the hyperlink tag for the gallery thumbnails.
• The href attribute of the hyperlink tag contains the link to the larger version of the image.
• The arguments in the rel attribute for the hyperlink tag in the thumbnail gallery. It contains the id of the main image hyperlink, the link to the small version of the image.
• The gallery hyperlinks enclose the tiny thumbnail images of the gallery.

Hence, we basically need three versions of the images to implement the gallery.

• Large Version to enable zoom: Provided by the Gold Cart plugin itself.
• Medium version which is supposed to be the size of the main image for the single product page: We have to fetch from the database.
• Finally, the small tiny thumbnails for the gallery: Provided by the Gold Cart Plugin itself.

Now I am going to describe how to integrate this with the Gold Cart plugin and the required hack. First of all, after installing the Gold Cart Plugin, make sure that you have uploaded some images for the product and enabled the gallery in the settings. Also disable the lightbox feature.

After that make sure that the gallery is being displayed in the single product's page. Now lets do some code modification. Make sure you have backed up everything, specially the gold cart plugin before proceeding. Edit the gold_shopping_cart.php file and search for the function to display the gallery i.e. gold_shpcrt_display_gallery. In this function, go to the section which displays the gallery for versions above 3.8. This should start from the line number 308 (if you haven’t done any modifications to the code already). This is the original version of the code which displays the gallery:

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "\n", $thumbnails );
$output .= "</div>";
wp_reset_query();

Now this is the modified version of the above code:

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<div class='wpcart_gallery'>";
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		// ORIGNIAL $link to Represent gallery images with thickbox
		//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
		$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
		$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
		$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );					

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "\n", $thumbnails ); // Imploding Array element as list items
$output .= "</div>"; // Ending list
wp_reset_query();

Now you can see from the above code that all we need to do is fetch a smaller version of the image (to display in the main image section) and modify the rel attributes such that the cloud zoom plugin activates the gallery feature too.

To enable the Cloud Zoom feature, edit the wpsc-single_product.php and modify the code where the image is displayed in a hyerplink tag. You can search it by the class product_image. You need to modify the rel attribute and add an id and a class to the hyperlink enclosing the image.

<a id="zoom1" rel="position: 'inside',smoothMove: 4" class="cloud-zoom" href="<?php echo wpsc_the_product_image(); ?>">
                       <img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
</a>

This is all you need to do to integrate the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Plugin's gallery. Also if you want to enable the jCarousel jQuery plugin on the gallery images, then you need to enclose the gallery hyperlink tags in list elements. For this you need to modify the code slightly such that the hyperlink tags are enclosed in an unordered list.

$output = '';
$product_name = get_the_title( $product_id );
$output .= "<ul class='wpcart_gallery jcarousel-skin-tango'><li>"; // Adding li tag to start implode array elements as list items
$args = array(
	'post_type'      => 'attachment',
	'post_parent'    => $product_id,
	'post_mime_type' => 'image',
	'orderby'        => 'menu_order',
	'order'          => 'ASC',
	'numberposts'    => -1
);
$attachments = get_posts($args);
$featured_img = get_post_meta($product_id, '_thumbnail_id');
$thumbnails = array();
if ($attachments) {
	foreach ($attachments as $post) {
		setup_postdata($post);
		$link = wp_get_attachment_link( $post->ID, 'gold-thumbnails' );
		$size = is_single() ? 'medium-single-product' : 'product-thumbnails';
		$preview_link = wp_get_attachment_image_src( $post->ID, $size);
		// ORIGNIAL $link to Represent gallery images with thickbox
		//$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="thickbox" rel="' . $product_name . '" href' , $link );

		// Fetching Medium Image and modifying $link w.r.t the Cloud Zoom jQuery Plugin options to display gallery
		$link = str_replace('attachment-gold-thumbnails','',$link); // removing the class from the img tag because its causing a conflict with the cloud zoom plugin
		$small_image = wp_get_attachment_image_src( $post->ID, array(337,437)); // returns an array
		$rel_options = "useZoom: 'zoom1', smallImage: '".$small_image[0]."'";
		$link = str_replace( 'a href' , 'a rev="' . $preview_link[0] . '" class="cloud-zoom-gallery" rel="' . $rel_options . '" href' , $link );					

		// always display the featured thumbnail first
		if ( in_array( $post->ID, $featured_img ) )
			array_unshift( $thumbnails, $link );
		else
			$thumbnails[] = $link;
	}
}
$output .= implode( "</li><li>", $thumbnails ); // Imploding Array element as list items
$output .= "</li></ul>"; // Ending list
wp_reset_query();

Conclusion

This method works pretty well for integrating the Cloud Zoom plugin with the WP e-Commerce Gold Cart gallery. But one drawback is that we are modifying the actual contents of the gold cart plugin and all the changes will be lost the day we update the WP e-Commerce gold cart plugin. Hence, I will try to make a plugin which enables this functionality rather than hard coding it in the plugin files.

Disclaimer: The above tutorial is meant to enable the Cloud Zoom jQuery plugin with the WP e-Commerce Gold Cart Gallery. I am not responsible if anything goes wrong and the shopping cart does not behave in the expected way. Please take proper backups before messing with any code of the theme or the plugin files.

Nowadays, when it comes to iPhone, ‘There is an App for everything’. So we thought of slicing up an iPhone application themed template so that all those budding developers can have an iPhone app site of their own. But this time we went a step ahead. Instead of the regular xHTML/CSS templates, we developed this into a HTML5 template which uses traces of CSS3 and some jQuery magic. The template can be integrated with any existing content management system or web application. So go ahead, unleash the coder in you and develop a great iPhone application. Then use this HTML5/CSS3 web template to share it with the world Do let us know if you need any help. After all we are Code-Pal!

I wrote a tutorial for NetTuts about how to use the ever popular Blogging/CMS platform WordPress, to create a dedicated FAQ section in the back-end using ‘Custom Post Types’. Then fetch those custom post types and display in the front end in a spiced up manner using jQuery and CSS3.
This is what the end product will look like.

When the user clicks on any of the FAQs, the page will scroll down automatically to the respective answer and highlight it.

Check out the complete tutorial on Nettuts and create some cool, interactive FAQs page for your own site. Do share your creations with us

What is Listify?

Listify is a very simple free service for web developers and designers, which allows you to convert raw text to html’s ‘list’ or ‘option’ elements by choosing various options like delimiter, type of lists and ignoring digits. I got this idea when I was working on the Clinova project. I had to insert the names of all the countries in the landing page of the site. To do that, I had to insert all the names within a <select> tag. You can very well understand the kind of time that would have been wasted doing it manually. So I went ahead and wrote a short piece of code in C, which would accept a text file with the country names and generate another text file with the <select> tags appended to the names. It saved a great amount of time which I utilized to do something else (I most probably saw an episode from How I Met Your Mother). Anyway, so when I started with Codeigniter, I thought, rather than wasting my time on creating a demo useless project, why not convert that C program to an online tool. Hence, came Listify. This is still in Alpha stage and we would love to hear some suggestions for new features that you would like. Drop us a feedback here feedback@code-pal.com or leave a comment here.

How will it help?

Using listify you can speed up your HTML coding process when you need to include large lists or option elements in your code. For example, if you require option elements like country names, then you would have to add the tags to 257 names, which obviously will take some time. Using Listify, it would take just three seconds.

How to use it?

Using Listify is pretty easy. All you have to do is paste the text in the text box above, configure your options as per your requirements and just click on the generate button. You can place any raw text and choose a delimiter to divide it into the list / option elements. Basically, it involves three steps to generete list via Listify:

• Copy text from your desired source and paste it in the text box.
• Paste it in the text box, configure the options.
• Copy the generated list from the dialog box, paste it in your code

Now you can utilise your saved time the way you want to

What are these options?

List Type This option enables you to choose what kind of list you want generated. Whether it is a list element  for an unordered / ordered list or an option element <option> element for the <select> tag. Ignore Digits Many a times there are unwanted numerical digits present in the text which we do not want to be included in the list / option item. This option enables generating the list ignoring the digits present in the text. For example, if you want to convert a numbered list to an unordered list, then just copy the list, select this option and the list items will be generated without the numbers.

Delimiter A delimiter is a sequence of one or more characters used to specify the boundary between separate, independent regions in the text you want to be converted. It means that how you want your text to be divided into the list elements. For example, if a text is a,b,c and the delimiter is , then the list will be generated as<li>a</li><li>b</li><li>c</li> By default, if no delimiter is entered then it will consider “return” or “new line” as the delimiter. For space as a delimiter, you need to enter space etc.

Let me know if it was useful and feedback for improvements and bugs are most welcome.

Recent Updates:

Updates on February, 08, 2011

• Added option to create main navigation structure.
• Added new option for generating option elements with the value attribute.
• Added new options for generating li elements with hyperlink tags or span tags within them.
• Ability to create Ordered/Unordered lists.

Use Listify!

Well thanks to the bright new kid on the block, CSS3, spruced up with a bit of jQuery, I will show you how to build a nifty effect to enhance your forms.

Am sure that this cool Neon blink effects in forms are going to be useful for a lot of purposes so don’t miss my tutorial on 1stWebDesigner.com.

In this tutorial, we have made use of @-webkit-keyframes which works only in browsers using the Webkit layout engine like Chrome and Safari. For browsers like Firefox and Opera, where there is no alternative, we will have to gracefully degrade the effect, which in this case will be just a box-shadow on focus. Internet Explorer ( till version 8 ) cannot render most of what we will learn here, but IE 9 does seem to be very promising from what I’ve seen in the recent platform preview.