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.

Clarion Consultancy Services are pioneers in offering consultation, and active solutions from corporate research to close protection with support to governments, large multinational corporations and individuals. They wanted a website which could provide these services and training online and allow users to register and pay for the tutorials. Buck Design Ltd. did a great job in designing a user friendly, modern design and now it was our job to deliver an efficient CMS for content and user management.

The Challenge

The main challenge in this website was to implement a hierarchical membership system with three levels of members. Allowing users to register on their own, pay for the membership fee and access premium tutorials. Also to differentiate the kind of content the users can access based on their membership level.

We also had to implement a dashboard where the member can update his profile or upgrade to a higher level of membership. Other important stuffs included proper management of pages, contact forms, Google map integration etc.

The Solution

Our choice for content management system was WordPress. Also the fact that WordPress’ user management system is very efficient, it was our primary choice. Proper management of pages and content was easily implemented. WordPress was highly customized to implement the hierarchical architecture for user membership, facilitate the payment system for membership registration and proper accessibility of content based on the membership level.

Structural Sealant Contracts Ltd. are specialist sealant applicators based in London. The company is somewhat related to the Formworks Construction Company. We recently upgraded the Formwork site by implementing a customized WordPress content management solution. As being related to the Formwork Company, they got the chance to experience the internal workings of the website. They were really impressed by it and approached Buck Design Ltd. to re-design their website and we were given the responsibility to implement the content management solution. Along with the CMS implementation, we also provided some advanced features like recruitment system, Google map integration etc.

The Challenge

The site was pretty similar to the Formwork Company site as the two companies are related. But still there were many changes to the site with respect to the design. Even though the site was similar to the Formwork site, it was our job to give it a fresh appeal, user interaction wise.

CMS needed to be very efficient in managing the content and specially the images. There were a lot of images on every page and our task was to make everything dynamic such that the client could even change the images from the backend of the website. The homepage of the side needed a carousel of the featured posts and the featured news integrated as one continuous stream.

Similar to the Formwork site, we had to implement proper custom designed scroll bars as all the pages were of static height. It was necessary such that the content would not be restricted and the design won’t be ruined because of the default scroll bars.

The portfolio page was similar to the Formwork site in the way that the client could upload any number of project images. But it was still different because the project images were of a larger size and occupied most of the area of the page. Hence, it was really important to manage the images in such a way that it does not affect the loading time of the page and give a blank page feel.

Again, similar to the Formwork Site, the news and recruitment pages needed simple methods for posting new entries. The recruitment page required a special recruitment form which was to be linked with the respective recruitment posting. The contact page required a simple contact form and Google Map integration, displaying the location of the office.

The Solution

WordPress was again used as the CMS for the site. WordPress' immense flexibility and features like custom posts and custom taxonomies made the content management very efficient and user friendly. It also made our work easy in implementing the multi type carousel at the homepage.

CSS3 and jQuery were used a lot throughout the site to give its user interactivity a modern feel keeping it simple and user friendly. The scrollbars blended perfectly with the design and helped overcome the content restriction due to static height problem.

The project images were optimized and the customized backend uploading mechanism made the task of uploading heaps of images very easy. They were implemented using a slideshow approach such that one image is displayed at a time. This enabled all the other images to load on time and not destroy the design flow of the site.

Implementing the contact form was easy where as the recruitment form was a bit tricky as we had to link the form to the respective recruitment posting. The Google Map integration was also smooth because of the awesome API provided by Google.

Formworks Company is a private construction company based in the United Kingdom. We developed their static website sometime back which helped their business a lot. With time, the content of the site increased and so did the need for advanced features which a static website could not provide them. So they again approached Buck Design Ltd. for the solution. The site's design was re-touched a bit and we integrated the content management system using WordPress and also implemented some really advanced features like Feedback with voting system, Recruitment System etc.

The Challenge

The site's modular design structure was very easy to convert to xHTML/CSS3. The main challenge was to integrate the CMS in the most efficient way possible. The homepage of the side needed a carousel of the featured posts and the featured news integrated as one continuous stream.

All the pages in the site are of static height, hence we had to implement proper scroll bars so that the size of the content would not be restricted and the scroll bar could not destroy the look and feel of the website. The same stood for the portfolio page's projects list.

One of the main requirements of the projects was that each project could have any amount of project images and our goal was to display them in a proper user friendly manner such that it does not affect the site's loading time.

The news and recruitment pages needed simple methods for posting new entries. The recruitment page required a special recruitment form which was to be linked with the respective recruitment posting. The contact page required a simple contact form as well contrasting to the previous version of the static site.

The biggest challenge was to implement a feedback suggestion system with threaded commenting and a voting mechanism to vote up the best feedback suggested.

The Solution

We used WordPress as the CMS for the site. WordPress' immense flexibility helped us overcome the challenges easily. We made use of custom posts and custom taxonomies to make the content management very efficient and user friendly. It also made our work easy in implementing the multi type carousel at the homepage.

We used jQuery a lot on the site to achieve the utmost level of efficient interactivity and user friendliness keeping the site's accessibility in mind. The scrollbars became design friendly and served the purpose perfectly.

The project images were implemented in such a manner that the user can view the images as they are or enlarge them and even control the flow of images. All these were implemented in such a manner that the loading time of the images does not give a bad experience to the user.

Implementing the contact form was easy where as the recruitment form was a bit tricky as we had to link the form to the respective recruitment posting.

Finally, the feedback system was implemented by customizing WordPress further and integrating the threaded comment system and the voting sytem within it.

PublishingGurus.com provides complete solutions for designing, editing, formatting, publishing and promoting books. The website was completely designed by their very own Sunny Kapoor (the Founder and Creative Director), and we were given the task to develop the site making it fully customizable and implementing many complex features in it. We used wordpress to achieve our task and highly customized it to get a high quality product.

The Challenge

The primary objective of the website was to maintain huge amounts of pages. Other than the content management aspect of the whole website, the two important requirements were implementing a book display store where they could display and promote the featured books and the business card gallery. It also required a Gallery where they could display the designed covers for their books.

Other challenges included implementing various types of forms, each different from the other in many aspects. The business card layouts required to be linked with the forms such that the user can customize and order the printing of the respective cards easily. Also linking the orders with the PayPal payment system was a major feature. Other requirements included implementation of different types of posting ability like news and a dedicated blog.

The Solution

WordPress, as we all know, does a great job in managing the content whether it is in pages or in posts. We enabled customization of all the pages via the admin panel and implemented the ability to post news updates or blog posts.

The book display store was again managed properly using various categories and filtering options. Obviously, the user can easily edit the image and the details of the book. The print service of business card was a bit tricky to implement but we succeeded in it with flying colours. We used jQuery to display the various business card templates in an eye soothing manner. Connected each card template to the details posted by the respective forms and connected the ordering system to PayPal. We also used jQuery based galleries to display the portfolio of designed book covers.

The website as a whole was pretty complex and included many carousels and forms but everything was implemented in a light user friendly way. We even added social networking features to share the website and its content easily to promote growth of the site and advertisement for the books displayed on it.

The site was completely optimized for search engines and additional features were installed like the integration of Google Analytics within the dashboard displaying the statistics about each post and page.