Thursday, October 18, 2012

Clear input field on focus

Here is a simple way to clear html input field on focus.
<input type="text" 
onblur="if (this.value=='') 
this.value=this.defaultValue" 
onclick="if (this.defaultValue==this.value) this.value=''" 
value="Replace this with your value" 
name="nn">

Saturday, October 6, 2012

Wordpress front end editor

Ever got a requirement of retrieving customer submitted data and storing it into your post, page or custom post type in Wordpress.

Well, there is a simple editor function wp_editor() is available within wordpress.

Sunday, September 30, 2012

DIY Multi Touch Technology

Ever imagined yourself in the future of user immersed technology to pave utmost user experience. Here, comes the multi touch technology for geeks.

First let's review some of it's application. Because, a video speaks million words.

1. Multi touch DJing Mixing Desk or Holo Desk from Emulator



2. iBar - largest multitouch touchscreen



3. BendDesk: Multi-touch on a Curved Display



4. Reality touchscreen University of Groningen



5. Google Liquid Galaxy



6. BlenderTUIO: Test about finger based 3d manipulation



If you are like most of us, then will probably wondering; how the hell people in the world got such a wonderful thing. And, probably you want one, isn't it?

Here is how you can build one for yourself.

STEP 1. Join the online community of people who are busy in making their own Natural User Interface at nuigroup.org

STEP 2. Get some Flash and Adobe After effects skill, because most of the application are built on these platforms. If you are on python then I would recommend you PyMT.

STEP 3. Get cameras and projectors to make your own prototype, you will get these information on nuigroup.org

STEP 4. Give back to the community and share your views and findings.

STEP 5. Ask questions or help on the community, they will sure help you.

STEP 6. Implement on live applications for your personal or professional usage.

Wednesday, September 26, 2012

Best mobile simulator for website

I came across few iPhone simulator which are merely an iframe running in smaller resolution to check the mobile compatibility of the site.

This method is not capable of checking the website which detects user agent and paves the website according to the device.

Another, method is to change the user agent of the browser and trick the website to show up as it should look on the mobile phone or any other device.

For example, my default user agent is set to :

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Chrome/22.0.1215.0 Safari/537.2 AlexaToolbar/alxg-3.1

Well, the above string shows that I'm using windows NT device and installed Mozilla, Safari(AppleWebkit) and Chrome - including other stuff.

Monday, September 24, 2012

Move data from one post type to another using SQL

There are many instances where you want to move the data from one post type to newly created post type in wordpress. For this you can use following simple SQL query.

UPDATE wp_posts SET post_type = 'new-post-type' WHERE post_type =  'post'

Wednesday, September 5, 2012

Modify title tag using wp_title filter

Here is a quick snippet to modify title tag for page, post, category using wp_title hook.

<?php
  add_filter('wp_title', 'modify_title', 20);
  function modify_title($title) {
    return $title . ' foo';
  }
?>

Thursday, August 23, 2012

Change document title tag using jQuery

jQuery is awesome and it comes handy when you want to modify the DOM. Here is a small snippet to change the title tag of the document when page is loaded and ready.


/*First load the jQuery library*/
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
/*Now, modify the title tag.*/
<script type="text/javascript">
 jQuery(document).ready(function() {
   jQuery("title").html("Insert your new title here");
});
</script>


There are few other methods too. If you find one share them with your comments below.

Wednesday, August 22, 2012

Wordpress: How to retrieve multiple page content?

Here is a quick snippet to retrieve content from multiple pages and display on any page, post or template. You  can even try creating a short-code for this functionality and could pass page id's to in the argument.

Below, is the screenshot for what I achieved from this code.



<?php
  /*
  Pass the page id's in an array.
  */
  $home_pages = array('11', '13', '16');
  $output =''; // Output variable

foreach($home_pages as $key => $val) {
      $output .= '<div class="box">';
      $page_id = $val; 
      $page_data = get_page( $page_id ); 
      $output .= get_the_post_thumbnail($page_id);
      $page_link = $page_data->guid; //This for SEF permalinks
      $page_link = explode('/?', $page_link);
      $page_link = $page_link[0];
      $page_link = $page_link . '/' . $page_data->post_name;
      $output .= '<h3>'. $page_data->post_title .'</h3>';
      $content = apply_filters('the_content', $page_data->post_content); 
      $content = substr($content, 0 , 100);
      $output .= $content . '...';
      $output .= '<br /><a href="'.$page_link.'" title="Read More">Read More...</a>';
      $output .= '</div>';
 }
 
 echo $output;
?>

Monday, August 13, 2012

Ultimate shortcode for displaying custom post types

Here you go, I made this shortcode to display any custom post type within your post or page. You can also use do_shortcode function to use this shortcode inside your php file.

Insert the following code inside your theme's functions.php and let the wordpress know about this newly created shortcode by add_shortcode() function.

Wordpress - shortcode for current theme path

You can find this short code useful when inserting some file or image from the relative path of your theme. Simply copy and paste following code inside your theme's functions.php and use the short code in your Page/ Post editor.

<?php
function currentThemePath() {
return get_option('home') . '/wp-content/themes/activeThemeName/';
}
add_shortcode('myThemePath', 'currentThemePath');
?>

Replace 'activeThemeName' with your current active theme name.
And use the short code [myThemePath] in your page/ post.

Friday, August 10, 2012

Top 5 open source shopping cart

Fortunately, after the open source and it's GPL license came into existence we can benefit from vast number of software to make our life easier. eCommerce is the boom in the market and in the coming decade majority of retailers and entrepreneurs will have an eCommerce site.

Parallel to this, a good software plays an important role when customer management and product updates is the most necessary factor. To choose one of these software is cumbersome and time taking process.

Many factors should be considered before selecting the proper software for your eshop. They may carry following features.
  • Product/ Catalog management
  • Inventory Management
  • CMS
  • Payment gateways
  • Customer account
  • SEO
  • Shipping management
  • Security
  • Multiple language support
  • Tax and localization
  • Analysis and report.
  • And more...
Most of these software are written on PHP and Installation is quite easy, you can have a try on XAMPPWAMP or MAMP.

Wordpress - eliminate non-ASCII characters

It is usual that you get special characters (or non-ASCII characters) when you try to fetch RSS feeds and display on your blog. You can easily filter it using PHP preg_replace function.

Inside a Wordpress's Post query loop, store the the content into a variable and replace all non- ASCII Characters using following code.


 <?php while (have_posts()) : the_post(); ?>
   $the_content = get_the_content();
   $the_content1 = preg_replace("/[^(\x20-\x7F)]*/","",$the_content);
   echo $the_content1;
 <?php endwhile; ?>

Thursday, August 9, 2012

Wordpress Custom Post Type Pagination

Custom post types in wordpress enables developers to do lot of things. But, when it comes to paginating it - lot of people struggle. I searched the web for the solution but could not find proper solution. So, thought of finding it on my own.

So, I created a custom post type called 'projects'.



Friday, August 3, 2012

Wordpress's template hierarchy reference

Found nice reference for wordpress's template hierarchy. This will help to determine the wordpress behavior while developing themes. 

Show all post from custom post type's categories using wp_dropdown_categories() function in Wordpress

Wordpress's custom post type is great way to add content to the site. It gives logical sections to insert different posts instead of using traditional post categories.



In this section, we'll discuss on how to create drop down showing all the categories from a custom post type. And, on selecting particular category from the drop down menu we'll display all the post from that category on the same page. 

Well, I'm not going to use Ajax to display the page. Instead an iframe will work good in our case. You can use Ajax if you want.

Thursday, August 2, 2012

Contact form 7 custom validation

While building a  wordpress theme for one of my client I came across some validation issues for contact form7 where two data must show logical error when check in date is bigger than the check out date. First, thing came into my mind is to edit the plugin itself, but this is not the proper solution because if client updates the plugin then my codes will broken again.

Another, solution was to use contact form 7's hooks. The filter 'wpcf7_validate_text' provides a way to directly send validation errors when your requirement is not fulfilled.