Codepal

Archive for the ‘Blog’ Category

WordPress Year in Review: The Best Tutorials of 2011

Wednesday, January 4th, 2012

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.

Tags: about wordpress, best of wordpress, future of wordpress, how to wordpress, how to wordpress website, tutorial, why wordpress, word press, Wordpress, wordpress 3
Posted in Blog, Tutorials | No Comments »

Quick Tip: Backing Up Your Blog with VaultPress

Sunday, July 10th, 2011

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.

Tags: Backup, Quick tip, Vaultpress, Wordpress
Posted in Blog, Tutorials | 14 Comments »

40+ Stunning WordPress Portfolio Themes

Thursday, July 7th, 2011

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.

Tags: Download, Free, Portfolio, Premium, Round Up, Themes, Wordpress
Posted in Blog, Tutorials | 4 Comments »

Quick Tip: Using Shortcodes in Theme Development

Wednesday, July 6th, 2011

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 .

Tags: Quick tip, Shortcodes, Theme Development, Wordpress
Posted in Blog, Tutorials | 1 Comment »

Create a Multi-Layout Portfolio with WordPress

Thursday, June 2nd, 2011

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

Tags: CMS, Grunge, jQuery UI, Portfolio, Theme, Wordpress
Posted in Blog, Tutorials | 3 Comments »

Integrating Cloud Zoom with WP e-Commerce Gold Cart Gallery

Friday, April 22nd, 2011

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.

Tags: Cloud Zoom, Gallery, Gold Cart, jQuery, Wordpress, WP e-Commerce
Posted in Blog, Tutorials | 31 Comments »

iPhone Application Template

Saturday, January 29th, 2011

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!

Tags: application, CSS 3, Free, HTML5, iPhone, jQuery
Posted in Blog, Downloads | 21 Comments »

How to Create a FAQ Page with WordPress and Custom Post Types

Saturday, December 4th, 2010

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

Tags: CSS 3, Custom Post, FAQ, how to, jQuery, jQuery UI, Wordpress
Posted in Blog, Tutorials | 1 Comment »

Listify, Convert Raw Text To HTML Elements

Monday, August 30th, 2010

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!

Tags: codeigniter, convert, li, Listify, option, tag, text to html entities, tool
Posted in Blog, Projects | 17 Comments »

Creating a Neon Blink Effect for your Forms using CSS3 and jQuery

Saturday, July 17th, 2010

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.

Tags: CSS 3, Development, forms, how to, jQuery
Posted in Tutorials | 4 Comments »

Grunge Template

Friday, July 16th, 2010

Psdnation.info is a site dedicated to tutorials, articles, resources and artworks on photoshop. They provide many freebies which includes high quality PSD website templates. They made Grunge available as a fully editable, layered, grunge PSD website template. Professionally designed by them and developed by us, this high-quality freebie from PSDNation is a now also available as a xHTML/CSS template for the web development community. It can be used as a blog template or can also form a basis for CMS integration.

Tags: CSS 3, Dark, Free, Grunge, xHTML
Posted in Blog, Downloads | 21 Comments »

How to Create a Cool Slide Out Panel with CSS3 only

Monday, July 5th, 2010

I wrote a tutorial for 1stwebdesigner.com It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.

Don’t miss my tutorial on 1stWebDesigner.com if you want to bypass using javascript to achieve this cool sliding effect.

Tags: coding, CSS 3, Development, how to, tutorial
Posted in Tutorials | 6 Comments »

New Web Host – Our Experience During the Transition

Sunday, June 6th, 2010

We are happy to announce that Code-pal is now being hosted on a new web host – wpWebHost. At the same time we are also sad and are truly sorry for the inconvenience caused to all of you who visited us during the transition phase. Though our previous web host, 000WebHost has been very good to us, we thought it was time to shift to a new one and expand code-pal to new extents. To say something about our previous host, all we can say that 000WebHost has been just great! Even though we used their free hosting service, the site’s downtime was minimal; almost nil and we received all the features any good webhost would provide us. We would recommend them to anyone who is looking to start up his blog and wants a host. Their support was also fantastic and quick.

Now you might be thinking that if we really loved them so much, why did we go for wpWebHost? Well, many of our friends have been using it and they were really happy with it. They recommended it the day we started looking for a new host. So we thought of giving it a try and given the fact that it is a host which is specifically wordpress oriented, it might prove to be a quite good. At that very moment we got the news of their super discount offer because of their newly renovated site. This even confirmed out decision of moving the site to a new host.

During the transition, we were really worried how the whole thing is going to end up after it is all over. We contacted the support of wpWebHost and their reply was quite quick, which was soothing because if something went wrong, there would be some support we could go running to. But the information they provided was not enough. They guided me to a post which mentioned on how to export a WordPress blog from the Tools panel. We already knew about that (as most of us out there that have been using WordPress for quite some time). So we thought of discussing our experience of shifting the site from one host to another.

When we move from one place to another, we take all our stuffs along with us; inform the proper authorities about our new address and then set up our moved stuffs in our new home. Shifting from one server to another server is just the same. ‘Our Stuff’ is our website’s content, ‘Our Address’ is the domain name, the proper ‘Authorities’ are the name servers at our domain’s manager. These are the primary steps involved in it.

Step 1. Backing up files

First of all, we just backed up our data, specially the wp-content folder and all the other files in the home directory. So the next time If you are backing up your wordpress site, don’t just backup the wp-content’s folder and also take a look at the files in the home directory because they might contain some identifying html files for various services like Google analytics etc.

Step 2. Downloading the Database

The second step was very important. This is the step where you take back up of your database. We took the backup in all the formats available and downloaded the files at least two times just in case if one of them turns out to be corrupt. I read somewhere that downloading the sql file in gz format via Firefox may corrupt it sometimes. The wordpress codex’s guide to backing up databases was very helpful to us.

Step 3. Updating the DNS

The next step was to update the domain name servers (DNS) at our domain provider’s domain management section. This was the most irritating part of the lot because the DNS updating takes time. It generally takes around 2 to 3 hours but it might even take a day to update it. We were lucky, so it got updated within 3 hours after changing it. This step was again important because we could not access our new host’s ftp without our domains pointing to it.

Step 4. Loading the Data

Once our domain was pointing to the right server, the only part left now was to upload the site on the new host. First of all we installed WordPress on it. Then going to the phpMyAdmin, we restored the previous database and deleted the newly created one. Again, WordPress Codex’s guide to restore database was very helpful to us. Once that was done, the last thing left was to upload the wp-content’s folder.

As soon as the theme was uploaded, we went to the backend, activated the theme and any plug-in which was inactive. Our site was the same as it was previously but on a different location. This article was of immense help to us during the whole process and most of our steps were followed as per its guideline. Shifting from one host to another may sound complex but it is not that tough neither that complex. The most important thing is to take proper backups before starting anything and patience.

One Minor Problem

The site was working fine but, there was a problem when we tried uploading any file. The error which came was “Unable to create directory /home/xxx/public_html/wp-content/uploads/20XX/XX. Is its parent directory writable by the server?” The problem was that the database table wp_option still contained some values of our old host’s account name. This messed up the path to the upload directory. As we did not import the website using the wordpress’ default import/export tool, hence this update was not done properly. To solve this issue, we went into the phpMyAdmin, searched the database with that ‘xxx’ term which was creating the entire problem. After all its occurrences where listed, we replaced each one with the new term. This completely solved the problem. We would recommend you to follow this
guide to properly move wordpress from one directory to another within the same server or moving from one server to another

Conclusion

Our experience during the whole transition from one host to another was quite pleasant. We didn’t face any hiccups during the whole process.
How was your experience when you shifted from one host to another?

Tags: 000webhost, dns, Moving, new host, shifting wordpress site, transfer wordpress blog, transferring wordpress database, Unable to create directory, wpwebhost
Posted in Articles, Blog, News | 4 Comments »

The ‘Select’ Problem After Using jqTransform and its Solution

Thursday, February 18th, 2010

The Project

In this recent project of mine, I was required to construct a landing page. In this landing page, there would be a list of languages and after the user selects any particular language, the homepage of the site would open automatically in the respective selected language. It was also required to style the select list box in the way it was given in the design of the landing page. So I opted for the jqTransform jQuery plug-in, which I used once to style some forms. jqTransform is very nice plug-in to customize the forms in a very easy way and the end product is no doubt beautiful. But in this case, it became a minor speed breaker to my progress.

The Problem

The drop down list control of the html form contains the ‘select’ tags which enclose the various ‘option’ tags. Here is a form which I am using in this tutorial to explain the problem:

<form>
	<h4>Select Box Without jqTransform</h4>
	<div id="box-city" class="select-menus">
		<label>City</label>
		<br/>
		<select name="select-country">
  		        <option>Gotham</option>
			<option>New York City</option>
			<option>Smallville</option>
		</select>
		<div class="clear"></div>
	</div>
</form>

What jqTransform does is, it scans the whole ‘select’ tag and creates an unordered list containing hyper-links of the options in the drop-down-list. It then hides the original ‘select’ tag and its content.

<form class="jqtransform jqtransformdone">
	<h4>Select box with jqTransform and normal select change method</h4>
	<div class="select-menus" id="box-name">
		<label style="cursor: pointer;">Name</label>
		<div class="jqTransformSelectWrapper" style="z-index: 10; width: 150px;">
			<div>
				<span style="width: 119px;">Batman</span>
				<a class="jqTransformSelectOpen" href="#"></a>
			</div>
                        <ul style="width: 148px; display: none; visibility: visible; height: 100px; overflow: hidden;">
				<li><a index="0" href="#" class="selected">Batman</a></li>
				<li><a index="1" href="#">Robin</a></li>
				<li><a index="2" href="#">Superman</a></li>
				<li><a index="3" href="#">Spiderman</a></li>
			</ul>
			<select name="select-country" class="jqTransformHidden" style="">
	 				<option>Batman</option>
					<option>Robin</option>
					<option>Superman</option>
					<option>Spiderman</option>
			</select>
		</div>
		<div class="clear"></div>
	</div>
</form>

This does not create a problem when we use the ‘select’ tag generally for selecting a particular value and then performing the form submission by using a submit button. It creates a problem when we want to perform some function when the value of the drop down list is changed.

This is normally achieved in javascript by using the ‘change’ method of the select control. The ‘change’ method captures the value-change event and we can access the value selected by the user in the following manner.

// Capturing the change event of the Non-Transformed Select Box.
$("#box-city select").change(function(){
	var value= $(this).val();
    alert("Value Selected = "+value);
});

But after using the jqTransform plugin, the ‘select’ tag is no more there to apply the change method on.

The Solution

The solution to this, is a very simple one. We can simulate the change event for the jqTransformed drop down list by applying a click function to the hyper-link element within the unordered list. Then we can have the selected value by accessing the text of the span tag where the selected element is set or displayed.

// Capturing the change event of the Transformed Select Box using the modified method of capturing the value change event.
$("#box-age div.jqTransformSelectWrapper ul li a").click(function(){
	var value= $("#box-age div.jqTransformSelectWrapper span").text()
	alert("Value Selected = "+value);
	return false; //prevent default browser action
});

Conclusion

This is one way of simulating the change function for drop-down-list boxes after using jqTransform to customize them. The other option is to modify the jqTransform plugin itself to properly access the onChange event of the ‘Select’ boxes. I hope the jqTransform plug-in developers can fix this problem in their next release of the plug-in. Though this is not a very important or common bug but I do hope that this was of some help.

Tags: CSS, forms, jqTransform, jQuery
Posted in Tutorials | 73 Comments »

Spice Up Your Twitter Feed Display Box Using CSS

Friday, October 23rd, 2009

For a very long time now there has been this trend of displaying tweets on the website’s sidebar, footer or the header. Many designers have designed ingenious ways of displaying the tweets by creating beautiful eye-catching illustrations containing them. The main purpose of making them visually attractive is so that the visitors can get interested and read the fresh updates that the site’s owner is providing. What this tutorial is going to do is enable to you to make your twitter feed display box interactive so that your visitors can go ‘wow! That’s pretty cool’ when they visit your site or read your feeds. So here it goes:

Step 1. How do I insert the feed in my website?

Inserting your twitter account’s feed in your website may become tricky. It’s a good thing there are so many tutorials out there which provide you with the knowledge of inserting these feeds easily. Here are some resources which will enable you to get the feeds from twitter onto your very own site:

1.Designing a Unique Page for Twitter Updates
2.10 Awesome Ways to Integrate Twitter With Your Website
3.Tweet!

WordPress users can use some awesome plugins to get their twitter feed on their site:

1.35 Awesome Twitter Plugins for WordPress
2.Juitter
3.jQuery Plugin For Twitter

Step 2. Creating the image sprite.

Now that you have successfully learned how to import the twitter feed, it’s time to configure the display area. For this tutorial, I am going to use the same design for the twitter box as I have used in this site’s footer i.e. a twitter bird staring at the tweets.

What our primary aim is that when ever the user hover’s over the twitter feed box, some action is going to take place. In our case the twitter bird will look towards the user.

You can create designs like this using various twitter icons made by some wonderful designers who love to share their work with the web community. Here is an ultimate source to these icons.

100+ Remarkably Beautiful Twitter Icons And Buttons (Always remember to ask the designer first before using these icons.)
Free vector icon set by ProductiveDreams.com

I have used the icons made by ProductiveDreams. After creating a simple box in photoshop. Place the normal twitter bird icon i.e. the one with the cross sectional view of the bird, at the bottom right side of the box such that the bird appears to be looking inside the box. Now paste the other twitter bird icon, the one which appears to be looking towards the viewer.

Then push the tilted bird icon above the older icon which you placed at the bottom right corner of the box such that it appears like a two headed twitter bird as shown below

Now hide the tilted twitter bird icon and properly mark a square containing the normal twitter bird using guide lines. Make sure that both the tilted and the normal bird fit properly in the same square made by the guidelines.

Crop the image with the normal twitter bird icon along the guidelines and open a new file and paste it there. Then check the height of the cropped image and increase the canvas size by that amount vertically. This is done so that you can paste the tilted twitter bird version on the same canvas to give the final touches to the image sprite.

Hide the normal twitter bird icon and make the other tilted bird visible. Then crop the image again along the guide lines just as you did for the previous image. Copy the image and paste it on the newly created canvas where you pasted the other image. Adjust the images so that they properly fit the whole canvas. Your image sprite is ready for use and should look like this:

Step 3. Coding the bird to life!

The html skeleton of the twitter feed box is going to be a simple one. There would be a main container div containing the twitter feed, the bird and an optional “Follow Me” link.

<div id="twitter">
	<a href="http://twitter.com/SumeetChawla" id="twitter-link">Follow Me!</a>
	<div id="twitter-bird"></div>
	<!--Your Twitter Feed Comes Here-->
</div>

The CSS for the ‘#twitter’ container div is very simple. The ‘#twitter-bird’ div is going to contain the bird. It should have half the height of the original sprite we made because only one of the two images in the sprite will be displayed. Using CSS sprites is a good practice because it reduces server requests, hence decreases the load time and prevents the sudden flashes of the image when hovered upon for the first time.

The twitter bird div should be floated to the right and a negative margin should be assigned to it so that the bird appears to be some what outside the container div. Make the background position ‘top’ so that the normal twitter bird is displayed. To give the finishing touches to our twitter feed box, just change the background image position of the ‘twitter-bird’ div to ‘bottom’ when ever the user hovers over the container div.

#twitter {
	color: #658097;
	position: relative;
	width: 332px;
	height: 122px;
	background-color: #1f1f1f;
	border: 1px solid #414040;
	background-position: left bottom;
	background-repeat: no-repeat;
	padding-left: 10px;
	padding-top: 10px;
}
#twitter-bird{
	background-image: url('images/twitter.jpg');
	background-position:top;
	position: relative;
	float: right;
	margin-top: 32px;
	margin-right: -75px;
	width: 101px;
	height: 100px;
	background-repeat: no-repeat;
}
#twitter:hover #twitter-bird {
	background-position: bottom;
}

To see how the final result would look like, just scroll down to the footer at the bottom of this page.

Examples

Gopal Raju from ProductiveDreams has made his twitter feed look very lively and bright. The twitter bird is interactive in a very friendly and casual way. It winks and displays the total number of followers that he has.

Before Hovering:

After Hover:

This was the only site I could find which made the twitter feed box interactive. If you guys find any other site which follows this trend just post about it in the comment and I will make sure to add it here.

Tags: CSS, display feed, feed, how to, sprite, Twitter
Posted in Blog, Tutorials | 15 Comments »

How to Code an Overlapping Tabbed Main Menu

Wednesday, October 14th, 2009

There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. While designing my site, I went through lots of inspirations and tutorials. One of them was this tutorial called Photoshop Paper Texture from Scratch then Create a Grungy Web Design with it! Written by Collis from NetTuts.com This ended up being the main inspiration for my site and while going through the tutorial I found Collis saying that:

” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build. “

So I tried coding one into html and after I succeeding thought of sharing it with you all.

Step 1.Gearing Up

So before starting to code this kind of a tabbed navigation into html/css code, you first have to learn how to create one in photoshop first. The above tutorial is very detailed and Collis does a great job in teaching how to build such a menu in photoshop. I have built one simple one specially for this tutorial.

Now let me specify that there are three states of the tab.The inactive state is grayish in colour, the active state is deep blue and the hover state is light steel blue colour. Hence, rather than slicing up three images for each tab, we can slice out an image sprite.

Step 2. Slicing The Tabs From the PSD

Align the tabs vertically using grids as shown in the image above. You can also align the tabs horizontally rather than vertically but then the CSS background image position will be accessed in a different way. The choice depends on person to person but both work perfectly. While cropping the image follow the guidelines properly and note that I have made the background transparent because we will be needing a transparent background if we need to overlap the tabs. Crop the image and save it for web in PNG24 format. One more point to note while slicing up the images is that the first tab i.e. the ‘Home’ tab should not be having any shadow on its left edge in the inactive state. Hence, for that specific tab we have to create another sprite without the shadows in it.

Step 3. Code Away

Now that our slicing is complete and we have all the images needed we can start coding our navigation bar. Just to make the example look good, I have constructed a sample featured content area layout with the overlapped navigation bar. The whole layout looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="page-wrap">
		<ul id="main-nav">
			<li class="current"><a href="index.html">Home</a></li>
			<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
			<li class="services"><a href="services.html">Services</a></li>
			<li class="about"><a href="about.html">About Us</a></li>
			<li class="contact"><a href="contact.html">Contact</a></li>
		</ul>
		<div class="clear"></div>
		<div id="featured">
			<div id="featured-content">
			</div>
		</div>
	</div>
</body>

</html>

Lets look at our main navigation menu. I have used a simple unordered list as any other navigation bar and styled it using a background image to the list’s hyperlink tag.

<ul id="main-nav">
	<li class="current"><a href="index.html">Home</a></li>
	<li class="portfolio"><a href="portfolio.html">Portfolio</a></li>
	<li class="services"><a href="services.html">Services</a></li>
	<li class="about"><a href="about.html">About Us</a></li>
	<li class="contact"><a href="contact.html">Contact</a></li>
</ul>

ul#main-nav li {
	float: left;
	position: relative;
	display: inline;
}

Remember that we are using an image sprite for the tabs in which the top most tab represents the active state, the middle represents the inactive state and the bottom represents the hover state. Hence, we will use the ‘background-position’ property to properly place the images to their respective state as follows:

ul#main-nav li a {
	position: relative;
	width: 110px;
	height: 29px;
	display: block;
	background-image: url('../images/tabs.png');
	background-position: center center;
	color: #44403b;
	text-decoration: none;
	font-size: 14px;
	padding-top: 12px;
	text-align: left;
	padding-left: 30px;
	font-weight: bold;
}
ul#main-nav li.home a {
	background-image: url('../images/tab-home.png');
}
ul#main-nav li.current a {
	background-position: top;
	color: #ffffff;
}
ul#main-nav li a:hover {
	background-position: bottom;
	color: #ffffff;
}
ul#main-nav li.current a:hover {
	background-position: top; /*To Prevent the Current tab from changing colour on hover*/
	color: #ffffff;
}

You will notice that I have given a relevant class to each of the list elements and a class named ‘current’ to the tab which is for the current page. This is done so that I can assign different z-index values to each tab in an ascending order such that each tab lies at a higher z-axis than the tab following it. The tab with the class ‘current’ will lie at the highest order of the z-axis because it represents the current page and will always stay on top irrespective of it’s position in the list. Before applying the z-index values, make sure that the position attribute for the list element is set to relative. Without any positioning value the z-index property won’t work at all.

ul#main-nav li.current {
	z-index: 100;
}
ul#main-nav li.home {
	z-index: 100;
}
ul#main-nav li.portfolio {
	z-index: 99;
}
ul#main-nav li.services {
	z-index: 98;
}
ul#main-nav li.about {
	z-index: 97;
}
ul#main-nav li.contact {
	z-index: 96;
}

Even though we have assigned different z-index values to the tabs, they still don’t appear over lapped and will look like this:

To give the finishing touches to our navigation bar, we have to push each tab on top of the other. We have assigned the z-index values in descending order from left to the right. Hence, we will just push each tab starting from the right to about 20px to its left by adding a negative ‘margin-left’ property to the ‘ul#main-nav li’ and push the whole navigation bar unordered list to the left by adding a positive 20px ‘margin-left’ to nullify the left wards movement of the bar.

ul#main-nav {
	margin-left: 20px;
}
ul#main-nav li {
	float: left;
	position: relative;
	margin-left: -20px;
	display: inline;
}

Mission Accomplished

After assembling all the css and the xhtml together, we will have our overlapped tabbed main navigation menu ready for use. This was my take on how to create this kind of a menu and am sure there are many better ways to do the same. I would be glad if you could share any other way of doing this or just discuss some improvements to this procedure itself.
Here are some site which use over lapping tabs as their main navigation menu:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS, how to, menu, navigation, over lapped
Posted in Blog, Tutorials | 47 Comments »

Orange

Tuesday, October 6th, 2009

PSDTemplate.com is a great site providing some really cool website templates created in photoshop. They have a section of premium PSD layouts where they release a layout every day. They also have a free PSD layout section where they release good quality layouts available free of cost. They released Orange as one of the free PSD templates and we have coded it so that people who want to have the xHTML/CSS version of this awesome template can have that too!

Tags: CSS, Free, PSD, Template, xHTML
Posted in Blog, Downloads, Portfolio | 4 Comments »

Summer of Love

Monday, September 28th, 2009

SloDive recently posted an article named 40 Free PSD Website Templates. This is an excellent resource for designers who don’t want to start from scratch with their designing process or for developers who are not very good at designing. This xHTML/CSS template that we have coded for you guys can easily be integrated with any content management system. It is purely table-less and semantically correct for SEO purposes. Go ahead, download it and start your own band or organize a music event!

Tags: CSS, Free, PSD, Template, xHTML
Posted in Blog, Downloads, Portfolio | 7 Comments »

Personal Computer Assistant

Sunday, September 27th, 2009

Personal Computer Assistant is a very simple application and has very common features. Anyone who uses a computer a lot will be benefited by it. This was developed by myself and a very close friend of mine, Rakesh. Below is a demo graphical user interface which shows how the software looks like and how the user can interact with it. The main buttons in this demo GUI are interactive and you can click on them to know more about the different features.

Once installed the application minimizes itself to the system tray. Whenever you click on it, the main window is maximized and the emergency note pad is in focus automatically. I implemented this feature because many a times I needed to scribble something and had to start notepad. So I thought this would faster and comfortable for me. After writing in the emergency notepad, you can save it anywhere you want. The application is still in Beta phase. You can download and check it out. Don’t forget to comment!

Requirements:

Windows Installer 3.1

Microsoft .NET Framework Version 2.0

Supported Operating Systems:
Currently only supported in Microsoft Windows XP and Windows operating systems before that.

Download

Tags: application, manager, pca
Posted in Blog, Projects | 11 Comments »

The Launch!

Thursday, September 24th, 2009

Code-pal started as a company which provides PSD to XHTML/CSS services. But since our first launch, in January 2009, we have grown with time and expanded our range of services. The previous version of code-pal was a very dark themed website and was more of a fun site rather than a professional one. There were many drawbacks of the previous version. To name a few, it was a static site and as our work experience grew, it was a very time consuming task to update our portfolio at regular intervals. The biggest disadvantage was that there was no blog. The main aim behind redesigning the site was to integrate a blogging system within the site where we can share, learn basically interact with the web community.

This is how the homepage of our previous site looked like:

The main features of this new site are as follows:

The home page consists of a giant portfolio viewer, order form, a feed of what our client’s say about us and a recent blog post section. The portfolio is a simple page consisting of all the work we have done till now some details about each of them. The services page enlists all the services we are currently providing.

In the project section, we are going to display all the projects and research work we have worked upon or are pursuing. The download section is going to consist of a wide variety of freebies which you can download and share. At present, we are going to start by providing free xHTML/CSS templates and later on we will be increasing our stocks with different stuffs like wordpress/joomla themes. We are also working on a windows desktop application at present and soon will be launching a free version of it too.

The blog section is going to be all about tutorials, articles, news and stuffs. Initially, we are going to start writing about coding and web development only. There are loads of awesome web development communities out there and we want to pitch in with whatever we can to help this web community grow and prosper. This can only be possible if we receive the same love, support and encouragement from you.

The homepage of the new site looks like this:

Even before the officially launching the site, we have provided two templates for download. Over the new few days you might constantly see some changes here and there. We are still in the process of completing the whole design process and fixing stuffs here and there. Please feel free to review our site. Don’t hesitate to comment if you like the redesign or even if you hate it. Of course let us know the reason behind it too. We warmly welcome suggestions on how to improve it further.

-Sumeet Chawla

Your friendly neighbourhood coder.

Tags: Launch, News
Posted in Blog, News | 2 Comments »

• « Older Entries