tag:blogger.com,1999:blog-19347572181012073592024-03-13T20:30:15.183+05:30DesignphilicLet's make the web world easier to access!Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.comBlogger17125tag:blogger.com,1999:blog-1934757218101207359.post-26444061428808699312012-10-18T16:26:00.000+05:302012-10-18T16:30:52.629+05:30Clear input field on focus<div dir="ltr" style="text-align: left;" trbidi="on">
Here is a simple way to clear html input field on focus.<br />
<pre class="brush:javascript;"><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">
</pre>
</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-67148815003805922752012-10-06T15:36:00.001+05:302012-10-06T15:38:13.867+05:30Wordpress front end editor<div dir="ltr" style="text-align: left;" trbidi="on">
Ever got a requirement of retrieving customer submitted data and storing it into your post, page or custom post type in Wordpress.<br />
<br />
Well, there is a simple editor function wp_editor() is available within wordpress.<br />
<br />
<a name='more'></a><br />
Just put the following code, wherever you want to insert editor in the front end.<br />
<br />
<pre class="brush:php;"><?php
if($_POST['submit'])
{
print_r($_POST);
}
echo '<form action="" method="post">'; // Insert form to grab post data
wp_editor('<p>Hello</p>', 'textarea01' );
echo '<input type="submit" name="submit" value="Submit" /></form>' // Button to submit the data
?>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQLfa2awdZclsMxaalzkhFHQZd-LL10ctfF-HPtKIADKH4RPIsGlDl1-iU8GYHsbK9i6wygyX_QRybR8Z_8vigrHsP1krCClnjYW2695j7AMsdgTxtDL3x4pGYU1LPblzvMgXUqCPqPrU/s1600/wordpress-front-end-editor-interface.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQLfa2awdZclsMxaalzkhFHQZd-LL10ctfF-HPtKIADKH4RPIsGlDl1-iU8GYHsbK9i6wygyX_QRybR8Z_8vigrHsP1krCClnjYW2695j7AMsdgTxtDL3x4pGYU1LPblzvMgXUqCPqPrU/s400/wordpress-front-end-editor-interface.png" width="400" /></a></div>
<br />
You can insert any number of text fields to let user submit all the data regarding the particular post type. For example, you can also insert text input field for the title field of the post and another field for modifying the slug.<br />
<br />
It 's upto you now, how you can take advantage of this simple editor interface on the front end.<br />
<br />
Further, you can use wp_insert_post() function to insert new post into the wordpress.<br />
<br />
<pre class="brush:php;"><?php wp_insert_post( $post, $wp_error ); ?>
</pre>
<br />
For more information on wp_insert_post() refer <a href="http://codex.wordpress.org/Function_Reference/wp_insert_post">http://codex.wordpress.org/Function_Reference/wp_insert_post</a></div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-74664101132429513122012-09-30T14:52:00.000+05:302012-09-30T14:52:58.417+05:30DIY Multi Touch Technology<div dir="ltr" style="text-align: left;" trbidi="on">
Ever imagined yourself in the future of user immersed technology to pave utmost user experience. Here, comes the multi touch technology for geeks.<br />
<br />
First let's review some of it's application. Because, a video speaks million words.<br />
<br />
<b>1. Multi touch DJing Mixing Desk or Holo Desk from Emulator</b><br />
<b><br /></b>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/hWiLR-GW8rs" width="560"></iframe><br />
<b><br /></b>
<b>2. iBar - largest multitouch touchscreen</b><br />
<b><br /></b>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/iaKehq6qsdY" width="560"></iframe><br />
<b><br /></b>
<b>3. BendDesk: Multi-touch on a Curved Display</b><br />
<b><br /></b>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/5VNTPwVvLzE" width="560"></iframe><br />
<br />
<b>4. Reality touchscreen University of Groningen</b><br />
<b><br /></b>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/AlWFtF06RFo" width="560"></iframe><br />
<b><br /></b>
<b>5. Google Liquid Galaxy</b><br />
<b><br /></b>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/atV2foTBbyE" width="560"></iframe><br />
<b><br /></b>
<b>6. BlenderTUIO: Test about finger based 3d manipulation</b><br />
<b><br /></b>
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/-qZOhdA9EFo" width="560"></iframe><br />
<br />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?<br />
<br />
<b>Here is how you can build one for yourself.</b><br />
<b><br /></b>
<b>STEP 1. </b>Join the online community of people who are busy in making their own Natural User Interface at <a href="http://nuigroup.org/">nuigroup.org</a><br />
<br />
<b>STEP 2. </b>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 <a href="http://pymt.eu/" target="_blank">PyMT</a>.<br />
<br />
<b>STEP 3. </b>Get cameras and projectors to make your own prototype, you will get these information on nuigroup.org<br />
<br />
<b>STEP 4. </b>Give back to the community and share your views and findings.<br />
<br />
<b>STEP 5. </b>Ask questions or help on the community, they will sure help you.<br />
<br />
<b>STEP 6. Implement on live applications for your personal or professional usage.</b></div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-10694918148761025122012-09-28T02:01:00.001+05:302012-09-28T02:06:03.333+05:30Android pushing camera out!<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="visually_embed" data-category="Technology" rel="infographic">
<img alt="Can Android save point-and-click cameras?" class="visually_embed_infographic" rel="http://thumbnails.visually.netdna-cdn.com/can-android-save-pointandclick-cameras_5062bb8ff0ed0.png" src="http://thumbnails.visually.netdna-cdn.com/can-android-save-pointandclick-cameras_5062bb8ff0ed0_w587.png" /><br />
<br />
Courtesy: <a href="http://visual.ly/apple-vs-samsung" target="_blank">http://visual.ly/apple-vs-samsung</a><br />
<a href="http://visual.ly/can-android-save-point-and-click-cameras" id="visually_embed_view_more" target="_blank"></a>
<link href="http://visual.ly/embeder/style.css" rel="stylesheet" type="text/css"></link>
<script src="http://visual.ly/embeder/embed.js" type="text/javascript"></script>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-649752606780759432012-09-26T19:36:00.000+05:302012-09-26T19:43:04.862+05:30Best mobile simulator for website<div dir="ltr" style="text-align: left;" trbidi="on">
I came across few <b>iPhone simulator</b> which are merely an<b> iframe</b> running in smaller resolution to check the mobile compatibility of the site.<br />
<br />
This method is not capable of checking the website which detects user agent and paves the website according to the device.<br />
<br />
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.<br />
<br />
<b>For example, my default user agent is set to :</b><br />
<br />
<span style="font-family: Courier New, Courier, monospace;">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</span><br />
<br />
Well, the above string shows that I'm using windows NT device and installed Mozilla, Safari(AppleWebkit) and Chrome - including other stuff.<br />
<br />
<a name='more'></a><br />
<b>And, below is the user agent string for an iphone device.</b><br />
<br />
<span style="font-family: Courier New, Courier, monospace;">Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7</span><br />
<br />
<b>For, iPad :</b><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;">Mozilla/5.0(iPad; U; CPU OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5</span><br />
<br />
Find <b>more </b>user agent string at <a href="http://www.useragentstring.com/pages/useragentstring.php" title="User agent string">www.useragentstring.com</a><br />
<br />
If we find a way to change the user agent, then we can see the website's mobile or tablet appearance without really changing the our device.<br />
<br />
<b><i>Any guess, how can we do that?</i></b><br />
<br />
Well, it's lot more easier than you think. Just add the following chrome extension to change the user-agent string on the fly. <br />
<br />
<a href="https://chrome.google.com/webstore/detail/lkmofgnohbedopheiphabfhfjgkhfcgf" title="Chrome extension for changing user-agent string">Chrome extension for changing user-agent string</a><br />
<br />
This will add a mask icon and on the top right corner. Just click and change the user agent to whatever you want.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGOYGELtER-dAdr3y5mNy1u_EcjP1TuqvrqkRqgxNJfpbIDbVwc3Z8TNk4SFUiQB8xHaixhlWKXxUtclSe_dgwwrw92mwZsoKT3gB7ejhGJfOYo56i9cmyTnuemVwP-_Dx7UK3junGXOb/s1600/changing-user-agent-chrome.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Change the user agent string for chrome browser" border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxGOYGELtER-dAdr3y5mNy1u_EcjP1TuqvrqkRqgxNJfpbIDbVwc3Z8TNk4SFUiQB8xHaixhlWKXxUtclSe_dgwwrw92mwZsoKT3gB7ejhGJfOYo56i9cmyTnuemVwP-_Dx7UK3junGXOb/s400/changing-user-agent-chrome.jpg" title="Change the user agent string for chrome browser" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><b>Change the user agent string for chrome browser</b></td></tr>
</tbody></table>
<br />
<br />
<b>Quick tip:</b> <i>Since you can know see the mobile site on your desktop browser, you can give more feeling like mobile by resizing your browser's size manually.</i><br />
<br />
You can even change the <b>user-agent string</b> for <b>Firefox, Safari </b>and Internet explorer.<br />
<br />
<b>For Firefox:</b> <a href="https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/" title="User agent switcher">User agent switcher</a><br />
<b>For Safari:</b> <a href="http://www.youtube.com/watch?v=M0SJiPhLR_M">Safari user agent string</a><br />
<br />
<b>Relate links: </b><br />
<a href="http://www.howtogeek.com/113439/how-to-change-your-browsers-user-agent-without-installing-any-extensions/">How to Change Your Browser’s User Agent Without Installing Any Extensions</a></div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-89815597333731762052012-09-24T19:33:00.000+05:302012-09-24T19:37:17.513+05:30Move data from one post type to another using SQL<div dir="ltr" style="text-align: left;" trbidi="on">
There are many instances where you want to move the data from one post type to newly created post type in <b>wordpress</b>. For this you can use following simple SQL query.<br />
<div>
<br /></div>
<div>
<pre class="brush:php;">UPDATE wp_posts SET post_type = 'new-post-type' WHERE post_type = 'post'
</pre>
<br /></div>
</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-50890742049191940912012-09-05T16:40:00.000+05:302012-09-05T16:40:01.344+05:30Modify title tag using wp_title filter<div dir="ltr" style="text-align: left;" trbidi="on">
Here is a quick snippet to modify title tag for page, post, category using wp_title hook.<br />
<br />
<pre class="brush:php;"><?php
add_filter('wp_title', 'modify_title', 20);
function modify_title($title) {
return $title . ' foo';
}
?>
</pre>
</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-61872667127953235262012-08-23T13:16:00.000+05:302012-08-23T13:22:52.278+05:30Change document title tag using jQuery<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<div>
<br /></div>
<div>
<br />
<pre class="brush:javascript;">
/*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>
</pre>
<br />
<br />
There are few other methods too. If you find one share them with your comments below.</div>
</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-86261956570973100292012-08-22T17:40:00.000+05:302012-08-22T17:45:38.367+05:30Wordpress: How to retrieve multiple page content?<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: left;">
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.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Below, is the screenshot for what I achieved from this code.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSk7ppQ6d1C14TIt6MLcnBdkQ0MaBEWdjeG4HBeFfwS9Sj5rxsObKfO8Utq1v5r6ZBcAUFODlqkLROXpLCb-FBQZcCtAx7tkb8WJBT28lPGbtqXOwYKoVPFEnuEdRTbHw5lGWSr_kAH3DW/s1600/wordpress-how-to-retrieve-multiple-page-content.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSk7ppQ6d1C14TIt6MLcnBdkQ0MaBEWdjeG4HBeFfwS9Sj5rxsObKfO8Utq1v5r6ZBcAUFODlqkLROXpLCb-FBQZcCtAx7tkb8WJBT28lPGbtqXOwYKoVPFEnuEdRTbHw5lGWSr_kAH3DW/s400/wordpress-how-to-retrieve-multiple-page-content.jpg" width="400" /></a></div>
<br />
<br />
<pre class="brush:php;"><?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;
?>
</pre>
<br /></div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-39623350705183200532012-08-13T08:37:00.000+05:302012-08-13T08:45:05.440+05:30Ultimate shortcode for displaying custom post types<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
Insert the following code inside your theme's functions.php and let the wordpress know about this newly created shortcode by <b>add_shortcode()</b> function.
<br />
<br />
<a name='more'></a><br />
<pre class="brush:php;" style="text-align: left;">function display_cpt_fx($atts) {
extract( shortcode_atts( array(
'cpt' => 'posts',
'ppp' => '-1', //-1 = show all posts; 0 or above = post per page
'orderby' => 'ASC',
'title' => 'linked', // linked, unlinked, true, false
'content' => 'true',
'limit_post' => '300',
'post_cont' => '...',
'img' => '3,medium,linked,class', //0 = no image; 1 = wrapper Bg; 2= before title; 3 = after title; 4 = after content
//full = full size; medium = medium size; thumbnail = thumbnail size
// none = no link to image; linked = image linked to permalink; custom = custom link for image
'img_custom_link' => 'none', //appends when $img link holder is set to custom. url validated. example = http://www.google.com
'pagination' => 'true',
'wrapper_before' => '<div class="cpt_wrap">',
'wrapper_after' => '</div>',
'block_before' => '<div class="cpt_item">',
'block_after' => '</div>',
'title_before' => '<h1>',
'title_after' => '</h1>',
'img_before' => "<span>",
'img_after' => "</span>",
'content_before' => "<p>",
'content_after' => "</p>",
'content_after_custom_element' => '',
'callback_fx' => 'callback_fx',
'fb_like' => 'false',
'fb_share' => 'false',
'fb_comments' => 'false,2,470,light',
), $atts ) );
$output = null;
$img_link_error_msg = '<span style="background:#f00; color: #fff; padding: 5px; border: 1px solid #666;">ERROR: Custom Link is invalid. Please correct it! (Example: http://www.site.com)</span>';
$bool_img_link_validate = preg_match('|^http(s)?://[a-z0-9-]+(.[a-z0-9-]+)*(:[0-9]+)?(/.*)?$|i', $img_custom_link);
$img = explode(',', $img);
$fb_comments = explode(',', $fb_comments);
if(!empty($wrapper_before)){
$wrapper_before = explode('>', $wrapper_before);
$wrapper_before = $wrapper_before[0] . ' style="clear:both;">';
}
if ($pagination == 'true') {
$pagination_string = '&paged=' . $paged;
} elseif ($pagination == 'false') {
$pagination_string ='';
}
//query
$cpt_query = new WP_Query('post_type='.$cpt.'&orderby='.$orderby.'&posts_per_page='.$ppp . $pagination_string);
$output = $wrapper_before;
//loop
while ($cpt_query->have_posts()) : $cpt_query->the_post();
//get the thumbnail
if (has_post_thumbnail( $post->ID ) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), $img[1]); }
//Call back arguments defination
$call_back_args = array();
array_push($call_back_args, get_the_title(), get_the_content(), get_permalink(get_the_ID()), $image[0] );
//img pos 1
if($img[0] == "1") {
$block_before = explode('>', $block_before);
$block_before = $block_before[0] . ' style="background:url('. $image[0] .') no-repeat;">';
}
$output .= $block_before;
//img pos 2
if ($img[0] == "2") {
if($img[2]== "linked") {
$output .= $img_before . '<a href="'. get_permalink(get_the_ID()) .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} elseif($img[2]== "custom" && $img_custom_link == "none") {
$output .= $img_before . '<a href="'. get_permalink(get_the_ID()) .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_before;
} elseif ($img[2]== "custom" && !($img_custom_link == "none")) {
if ($bool_img_link_validate) {
$output .= $img_before . '<a href="'. $img_custom_link .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} else {
$output .= $img_link_error_msg;
}
} elseif($img[2]== "none") {
$output .= $img_before . '<img class="' . $img[4]. '" src="'. $image[0] .'" />' . $img_after;
}
}
if ($title == "linked") {
$output .= $title_before . '<a href="'. get_permalink(get_the_ID()) .'">' . get_the_title() . '</a>' . $title_after;
} elseif ($title == "unlinked") {
$output .= $title_before . get_the_title() . $title_after;
} elseif ($title == "true") {
$output .= get_the_title();
} elseif ($title == "false") {}
//img pos 3
if ($img[0] == "3") {
if($img[2]== "linked") {
$output .= $img_before . '<a href="'. get_permalink(get_the_ID()) .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} elseif($img[2]== "custom" && $img_custom_link == "none") {
$output .= $img_before . '<a href="'. get_permalink(get_the_ID()) .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} elseif ($img[2]== "custom" && !($img_custom_link == "none")) {
if ($bool_img_link_validate) {
$output .= $img_before . '<a href="'. $img_custom_link .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} else {
$output .= $img_link_error_msg;
}
} elseif($img[2]== "none") {
$output .= $img_before . '<img class="' . $img[4]. '" src="'. $image[0] .'" />' . $img_after;
}
}
$this_content = get_the_content();
if(!empty($this_content)){
if($limit_post < 0) {
$output .= $content_before. $this_content.$content_after;
} else {
$output .= $content_before. substr($this_content, 0, $limit_post) . '<a href="' . get_permalink(get_the_ID()) .'">' .$post_cont . '</a>' . $content_after;
}
}
$output .= $content_after_custom_element;
//img pos 4
if ($img[0] == "4") {
if($img[2]== "linked") {
$output .= $img_before . '<a href="'. get_permalink(get_the_ID()) .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} elseif($img[2]== "custom" && $img_custom_link == "none") {
$output .= $img_before . '<a href="'. get_permalink(get_the_ID()) .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} elseif ($img[2]== "custom" && !($img_custom_link == "none")) {
if ($bool_img_link_validate) {
$output .= $img_before . '<a href="'. $img_custom_link .'"><img class="' . $img[4]. '" src="'. $image[0] .'" /></a>' . $img_after;
} else {
$output .= $img_link_error_msg;
}
} elseif($img[2] == "none") {
$output .= $img_before . '<img class="' . $img[4]. '" src="'. $image[0] .'" />' .$img_after;
}
}
if($fb_like == 'true'){
$output .= '<div class="fb-like" data-href="'.get_permalink().'" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>';
}
if($fb_comments[0] == 'true') {
$output .= '<div class="fb-comments" data-href="'.get_permalink().'" data-num-posts="'.$fb_comments[1].'" data-width="'.$fb_comments[2].'" data-colorscheme="'.$fb_comments[3].'"></div>';
}
$output .= $block_after;
//call back function arguments: title, content, permalink, image url
$cb_fx = $callback_fx;
$output .= $cb_fx($call_back_args); //call-back function, the f(x) should return some value or empty space. Declare function inside functions.php with a unique name. it accepts 1 argument.
endwhile; wp_reset_query();
$output .= $wrapper_after;
if ($paged == 'true') {
$output .= '<nav>';
$output .= '<span style="float:left">' . previous_posts_link("&laquo; Newer") . '</span>';
$output .= '<span style="float:right">' . next_posts_link("Older &raquo;") . '</span>';
$output .= '</nav>';
}
return $output;
}
function callback_fx() {
return '';
}
add_shortcode('display_cpt', 'display_cpt_fx');
</pre>
Use the shortcode [<span class="Apple-style-span" style="white-space: pre;">display_cpt</span>] in your post/ page to display the custom post type. By default, the cpt attribute is set to posts. You can modify any attributes change the behavior of this shortcode.
For example:<br />
<br />
<br />
[display_cpt cpt="projects"] will display all the posts within your projects custom post type.
</div>
</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-78027203528275273702012-08-13T08:16:00.001+05:302012-08-13T08:16:38.692+05:30Wordpress - shortcode for current theme path<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
<pre class="brush:php;"><?php
function currentThemePath() {
return get_option('home') . '/wp-content/themes/activeThemeName/';
}
add_shortcode('myThemePath', 'currentThemePath');
?>
</pre>
<br />
Replace 'activeThemeName' with your current active theme name.<br />
And use the short code [<span class="Apple-style-span" style="font-family: monospace; white-space: pre;">myThemePath</span>] in your page/ post.</div>Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-58030698175342287632012-08-10T22:32:00.000+05:302012-08-10T22:36:31.389+05:30Top 5 open source shopping cart<div dir="ltr" style="text-align: left;" trbidi="on">
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. <br />
<br />
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.<br />
<br />
<strong>Many factors should be considered before selecting the proper software for your eshop. They may carry following features.</strong><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIIcPZndW5BOJKyMw2kJ-af1icmuVfXUT_D0vAMzq5zKqkh_AuIK3JrDLyRgtA8JJjpbiE76aIV-HrEqhfbDkbPyzNTh6ZSY68KbWzXV1yDT6CL3MR9BvSLTHes8lSnolybzjTh3le1x_c/s1600/1344608489_shopping-cart-insert.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIIcPZndW5BOJKyMw2kJ-af1icmuVfXUT_D0vAMzq5zKqkh_AuIK3JrDLyRgtA8JJjpbiE76aIV-HrEqhfbDkbPyzNTh6ZSY68KbWzXV1yDT6CL3MR9BvSLTHes8lSnolybzjTh3le1x_c/s400/1344608489_shopping-cart-insert.png" width="256" /></a></div>
<ul>
<li>Product/ Catalog management</li>
<li>Inventory Management</li>
<li>CMS</li>
<li>Payment gateways</li>
<li>Customer account</li>
<li>SEO</li>
<li>Shipping management</li>
<li>Security</li>
<li>Multiple language support</li>
<li>Tax and localization</li>
<li>Analysis and report.</li>
<li>And more...</li>
</ul>
<div>
Most of these software are written on PHP and Installation is quite easy, you can have a try on <a href="http://www.apachefriends.org/en/xampp.html" target="_blank">XAMPP</a>, <a href="http://www.wampserver.com/en" target="_blank">WAMP </a>or <a href="http://www.mamp.info/" target="_blank">MAMP</a>.</div>
<div>
<br />
<a name='more'></a></div>
<div>
<b>How am I ranking these software?</b></div>
<div>
<b>A. </b>Well, ranking is not just a guess (I'm no one to give false ranking to these well written software). I used various tools to analyze keyword demands and traffic rankings for these software(like: <a href="http://www.alexa.com/" target="_blank">Alexa</a>).</div>
<div>
<br /></div>
<div>
For example, most of the top listings in various blogs show Presta shop on rank 1 but according to Alexa ranking Magento's traffic rank is 844 and Presta shop's traffic rank is 1,208 .</div>
<div>
<br /></div>
<div>
Whereas <a href="https://adwords.google.com/o/KeywordTool" target="_blank">Google Keyword tool</a> shows Magento's Global Monthly search to be <span class="Apple-style-span" style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 13px;"><b>2,740,000 </b>and Presta shop is </span><span class="Apple-style-span" style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 13px;"><b>1,220,000</b>.</span></div>
<div>
<span class="Apple-style-span" style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 13px;"><br /></span></div>
<div>
<span class="Apple-style-span" style="background-color: white; font-family: arial, helvetica, sans-serif; font-size: 13px;"><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: small;">Results are based on the day I'm publishing this post on my blog. </span></span></div>
<div>
<b><br /></b></div>
<div>
<b><% Hang on! Shopping cart begins %></b></div>
<div>
<h2 style="font-size: medium;">
<span class="Apple-style-span" style="font-size: x-large;">1. Magento</span></h2>
<div>
<b>Website: </b><a href="http://www.magentocommerce.com/">http://www.magentocommerce.com</a></div>
<div>
<b>Demo: </b>Front end [<a href="http://demo.magentocommerce.com/" target="_blank">Single Store</a>, <a href="http://www.magento-mall.com/" target="_blank">Multi-Store</a>], <a href="http://demo-admin.magentocommerce.com/index.php/admin/" target="_blank">Back end</a></div>
<div>
<b>Tutorials: </b><a href="http://www.magentocommerce.com/knowledge-base" target="_blank">Knowledge base</a>, <a href="http://www.magentocommerce.com/media/screencasts" target="_blank">Screen casts</a></div>
<div>
<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.magentocommerce.com/img/logo.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="47" src="http://www.magentocommerce.com/img/logo.gif" width="171" /></a></div>
Magento comes in three flavors</div>
<div>
<ol style="text-align: left;">
<li>Enterprise edition</li>
<li>Magento go - An hosted solution</li>
<li>Community edition</li>
</ol>
<div>
I reviewed only the community edition. It has all the features you want to start up a full blown eCommerce website. It was written in PHP and need some additional add-ons while installation like <b>mcrypt, mhash, simplexml.</b></div>
</div>
<div>
<b><br /></b></div>
<div>
<b>Features:</b></div>
<div>
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm.amazon.com/e/cm?t=toprel-20&o=1&p=8&l=as1&asins=1847195946&ref=tf_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="float: right; height: 240px; margin-left: 8px; width: 120px;"></iframe>
<br />
<ul style="text-align: left;">
<li>Catalog management</li>
<li>Single strore and multi store capabilities - More than one seller can register</li>
<li>CRM</li>
<li>Newsletter</li>
<li>CMS</li>
<li>Analysis and reporting system: like Sales, shopping cart, Products, customer, tags, etc.</li>
<li>Multiple currency and payment gateways.</li>
<li>Order status</li>
<li>Price rules</li>
<li>Invoices, shipments, Credit memos, transactions, Billing agreements.</li>
</ul>
<div>
<br /></div>
</div>
<div>
<b>Relate links:</b></div>
<div>
<ul style="text-align: left;">
<li><a href="http://www.magentocommerce.com/product/enterprise-community-faqs" target="_blank">Magento enterprise vs community edition FAQ</a></li>
</ul>
<div>
<b>Good for:</b></div>
</div>
<div>
<ul style="text-align: left;">
<li>Any kind of eCommerce cart</li>
<li>Customization.</li>
<li>Hosted solution</li>
<li>Enterprise grade services and support</li>
</ul>
<div>
<b>Downsides:</b></div>
</div>
<div>
<ul style="text-align: left;">
<li>Magento has many nice features, but the developers mainly concentrate on the Enterprise edition.</li>
</ul>
</div>
<div>
<b><br /></b></div>
<div>
<hr />
</div>
<h2>
<span class="Apple-style-span" style="font-size: x-large;">2. Presta Shop</span></h2>
</div>
<strong>Website</strong>: <a href="http://www.prestashop.com/">http://www.prestashop.com</a> <br />
<strong>Demo</strong>: <a href="http://demo-store.prestashop.com/en/" target="_blank">Front end</a>, <a href="http://www.prestashop.com/demo/demo" target="_blank">Back end</a> [Username: demo@prestashop.com | Password: prestashop_demo]<br />
<strong>Tutorials: </strong><a href="http://www.prestashop.com/en/getting-started" target="_blank">Getting started guide</a><br />
<br />
<img alt="prestshop logo" src="http://img-cdn.prestashop.com/logo.png" style="float: right; margin-left: 10px;" /><br />
Prestashop is one of the most popular eCommerce Cart on the web. It was written on PHP and uses smarty template engine for templating the themes. Prestashop has extensive list of extensions and themes. There is a good community surrounding this project. <br />
<br />
Launched in August 2007, prestashop has evolved to be complete solution for any kind of only shopping experience.<br />
<br />
<strong>Few important features</strong><br />
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm.amazon.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=toprel-20&o=1&p=8&l=as1&m=amazon&f=ifr&ref=tf_til&asins=1849511144" style="float: right; height: 240px; width: 120px;"></iframe>
<br />
<ul>
<li>Inventory management</li>
<li>Cross selling - Related products to increase conversion rate</li>
<li>Sell downloadable Products, unlimited products, categories and attributes</li>
<li>Layered navigation, product comparison</li>
<li>Zoom in on products, Multiple image support, add to wish list, reviews, send to a friend</li>
<li>Completed CMS for site management like templates, Admin permissions, multiple language support, CRM, customization of store</li>
<li>Search friendly URLs, Google site map, meta information for the products, <strong>dedicated URL for each product</strong>, tags, email notifications</li>
<li>Multiple payment options like - Wire transfer, credit cards, Gateway interfaces.</li>
<li>Tax configurations, payment filtered by currency, exchange rate sync, address formats, unlimited currencies</li>
<li>Shipping management</li>
<li>Email follow ups, newsletters, loyalty programs, refer a friend, recent viewed product, coupons & vouchers</li>
<li>Track visitors, view customer profile, track order and sales, catalog statistics, affiliate statistics.</li>
</ul>
<a href="http://www.prestashop.com/download/pdf/PrestaShop-Feature-List-en.pdf" target="_blank">View full feature list</a><br />
<br />
<strong>Good for:</strong><br />
<ul>
<li>Selling varieties of products online.</li>
<li>Log ins for employees to manage products.</li>
<li>Customer management</li>
<li>Shipping management</li>
</ul>
<strong>Downside:</strong><br />
<ul>
<li>Needs some technical skills to modify the template, however you can get lot of themes online or you can learn how to use smarty tags to edit the template.</li>
<li>Admin panel is not good looking and navigation are hard to find.</li>
</ul>
<div>
<br /></div>
<hr />
<h2>
<span class="Apple-style-span" style="font-size: x-large;">3. Open Cart</span></h2>
<strong>Website: </strong><a href="http://www.opencart.com/">http://www.opencart.com</a> <br />
<strong>Demo: </strong><a href="http://demo.opencart.com/" target="_blank">Front end</a>, <a href="http://demo.opencart.com/admin/" target="_blank">Back end</a> [<strong>Username:</strong> demo, <strong>Password:</strong> demo]<br />
<strong>Tutorials: </strong><a href="http://www.opencart.com/index.php?route=documentation/screencast" target="_blank">OpenCart Screen cast</a><br />
<strong>Example shops: </strong><a href="http://www.opencart.com/index.php?route=feature/liveshop" target="_blank">Liveshop</a><br />
<br />
<img alt="opencart logo" src="http://www.opencart.com/opencart/application/view/image/logo.png" style="float: right; margin-left: 10px;" /><br />
Open cart is written in PHP and has necessary features to launch your next big e-store. I like it's elegant interface and ease of use functionalities. It has good community to support and rich documentation.<br />
<br />
Open cart supports extensions and themes. You can find them in <a href="http://www.opencart.com/index.php?route=extension/extension" target="_blank">extension directory of opencart</a>.<br />
<br />
<strong>Features: </strong><br />
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm.amazon.com/e/cm?t=toprel-20&o=1&p=8&l=as1&asins=1849513023&ref=tf_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="float: right; height: 240px; margin-left: 8px; width: 120px;"></iframe>
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm.amazon.com/e/cm?t=toprel-20&o=1&p=8&l=as1&asins=1849514305&ref=tf_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="float: right; height: 240px; margin-right: 5px; width: 120px;"></iframe>
<br />
<ul>
<li>Open source and community supported.</li>
<li>Unlimited categories,<strong> products </strong>and manufacturers</li>
<li>Templatable</li>
<li>Multi -<strong> languate</strong> and <strong>currency</strong></li>
<li>Product review and ratings</li>
<li>Downloadable products - good for<strong> musics and eBooks</strong>.</li>
<li>Automatic image resizing</li>
<li>Multiple <strong>tax</strong> rates</li>
<li>Related products</li>
<li>CMS</li>
<li>Shipping <strong>weight calculation</strong>, </li>
<li><strong>Coupon</strong> system</li>
<li>SEO</li>
<li>Module instance - each module can have multiple instances.</li>
<li>Backup and restore tools</li>
<li>Printable invoices, sales reports, error logging</li>
<li><strong>B2B</strong> support</li>
<li>Guest checkout</li>
<li>Shipping methods</li>
<li><strong>Multi - store</strong> support</li>
</ul>
<div>
<b>Good For:</b></div>
<div>
<ul style="text-align: left;">
<li>Shopping cart with all major payment gateways</li>
<li>Easy learning</li>
</ul>
</div>
<div>
<hr />
<b>4. </b>According to traffic ranking <b>cube cart </b>should acquire this position, but it is not fit for open source because it has many limitations on free version. So, I gave this rank to <b>Zen cart.</b><br />
<span class="Apple-style-span" style="font-size: x-large;"><b><br /></b></span>
<b><span class="Apple-style-span" style="font-size: x-large;">4. Zen Cart</span></b><br />
<b><br /></b>
<b>Website: </b><a href="http://www.zen-cart.com/">http://www.zen-cart.com/</a><br />
<b>Demo: </b><a href="http://www.zen-cart.com/showcase.php" target="_blank">Front end showcase</a><br />
<b>Tutorials: </b><a href="http://www.zen-cart.com/wiki/index.php/Main_Page" target="_blank">Wiki</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.zen-cart.com/images/styles/zencart/style/zen-cart-logo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://www.zen-cart.com/images/styles/zencart/style/zen-cart-logo.png" /></a></div>
Zen cart project was authored by Zen ventures, LLC in the year 2003. It's a open source online store written in PHP and MySQL. It is easy to learn and implement. There are many books related to zen cart, you can find them on their website or from amazon.<br />
<br />
<b>Features: </b><br />
<br />
<iframe frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="http://rcm.amazon.com/e/cm?t=toprel-20&o=1&p=8&l=as1&asins=B0078Q2CL4&ref=tf_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="float: right; height: 240px; margin-left: 8px; width: 120px;"></iframe>
<br />
<ul style="text-align: left;">
<li>Easy to install</li>
<li>Unlimited Products and categories.</li>
<li>Put entire category on sale.</li>
<li>Product can be free or call for price.</li>
<li>You can set your store as showcase - no price</li>
<li>Meta tag generation and SEO</li>
<li>Advertising banners.</li>
<li>Paypal and other merchant gateway integration.</li>
<li>Multiple language and currency support.</li>
<li>Enable /disable entire category or single product.</li>
<li>Image color swatches.</li>
<li>Template system with template switching.</li>
</ul>
<div>
<b>Good For:</b></div>
<div>
<ul style="text-align: left;">
<li>Full blown online store.</li>
<li>Catalog or store.</li>
<li>Media downloads</li>
</ul>
<div>
<hr />
<b><span class="Apple-style-span" style="font-size: x-large;">5. Agora Cart</span></b><br />
<b><br /></b>
<b>Website: </b><a href="http://www.agoracart.com/">http://www.agoracart.com/</a><br />
<b>Tutorials: </b><a href="http://www.agoracart.com/community/documentation-v6.html" target="_blank">Version 6 Docs</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.agoracart.com/images/agoracart373x80.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="85" src="http://www.agoracart.com/images/agoracart373x80.png" width="400" /></a></div>
Agora cart recently came up with Gold version on 6.0. But it to support the Agora project. It has many features to be on Top 5 eCommerce cart. You can configure it to your requirements.<br />
<br />
<b>Features:</b><br />
<br />
<ul style="text-align: left;">
<li>Unlimited categories and products</li>
<li>Multiple tax rates.</li>
<li>Flexible shipping.</li>
<li>10+ shipping methods and payment gateways.</li>
<li>Guest checkout</li>
<li>SEO friendly URL</li>
<li>Modules</li>
<li>SSL</li>
<li>Automatic image resizing</li>
<li>jQuery ready</li>
<li>Professional support option</li>
<li>Template system with header and footer chunks.</li>
<li>Catalog page layouts.</li>
<li>Email layouts </li>
</ul>
<b>Good For:</b><br />
<br />
<ul style="text-align: left;">
<li>Catalog or store</li>
<li>Entrepreneurs</li>
<li>Secured shopping</li>
<li>Customizing</li>
</ul>
<div>
<b><span class="Apple-style-span" style="font-size: x-large;">Conclusion</span></b></div>
<div>
<span class="Apple-style-span"><br /></span></div>
<div>
<span class="Apple-style-span">There are many other shopping carts on the Internet. You can have a quick Google search to find them all and try. It's all depends upon the requirement, you can find any of the shopping cart fit your needs.</span></div>
<div>
<span class="Apple-style-span"><br /></span></div>
<div>
<span class="Apple-style-span">These open source software are made by intellectuals, please do support them by donating or buying their services.</span></div>
<div>
<span class="Apple-style-span"><br /></span></div>
<div>
sky is the limit!</div>
<div>
<br /></div>
<div>
<b>Disclaimer: </b>Logos of the brand name belongs to respective organisation, ranking here is purely based on Alexa traffic rankings and keyword based search tools.</div>
</div>
</div>
</div>
</div>Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com3tag:blogger.com,1999:blog-1934757218101207359.post-24402276894702624672012-08-10T12:42:00.000+05:302012-08-10T12:49:14.741+05:30Wordpress - eliminate non-ASCII characters<div dir="ltr" style="text-align: left;" trbidi="on">
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.<div>
<br /></div>
<div>
Inside a Wordpress's Post query loop, store the the content into a variable and replace all non- ASCII Characters using following code.</div>
<div>
<br /></div>
<div>
<br />
<pre class="brush:php;">
<?php while (have_posts()) : the_post(); ?>
$the_content = get_the_content();
$the_content1 = preg_replace("/[^(\x20-\x7F)]*/","",$the_content);
echo $the_content1;
<?php endwhile; ?>
</pre>
</div>
</div>Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-14146093106289629282012-08-09T22:01:00.000+05:302012-09-16T23:12:07.131+05:30Wordpress Custom Post Type Pagination<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
So, I created a custom post type called 'projects'.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAseYRzqFvzTLGhcblIb6d__qawjc9L99jShcH_Nu8D1J_f7ZRAhCdWfxnvhZmshyrzzMDld0_LXrAuKqTEW1wPVeKfxjOwRaBOpKi1g6mEIEESMKLddaXSE-22_nMKziONNboSHHPSfQl/s1600/custom-post-type-pagination.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAseYRzqFvzTLGhcblIb6d__qawjc9L99jShcH_Nu8D1J_f7ZRAhCdWfxnvhZmshyrzzMDld0_LXrAuKqTEW1wPVeKfxjOwRaBOpKi1g6mEIEESMKLddaXSE-22_nMKziONNboSHHPSfQl/s400/custom-post-type-pagination.jpg" width="400" /></a></div>
<br />
<br />
<a name='more'></a><br />
<br />
Copy the following code in your functions.php<br />
<br />
<br />
<pre class="brush:php;">add_action('init', 'projects_init');
function projects_init()
{
$project_labels = array(
'name' => _x('Projects', 'post type general name'),
'singular_name' => _x('Projects', 'post type singular name'),
'all_items' => __('All projects'),
'add_new' => _x('Add new project', 'project'),
'add_new_item' => __('Add new project'),
'edit_item' => __('Edit project'),
'new_item' => __('New project'),
'view_item' => __('View project'),
'search_items' => __('Search in projects'),
'not_found' => __('No projects found'),
'not_found_in_trash' => __('No projects found in trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $project_labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title', 'editor','thumbnail'),
'has_archive' => 'projects'
);
register_post_type('projects',$args);
}
</pre>
<br />
Now, create a template called 'Projects' and assign it to a page.<br />
<br />
and copy the following code into it.<br />
<br />
<pre class="brush:php;"><?php
/*
Template Name: Projects
*/
get_header();
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$show_posts = 4; //How many post you want on per page
$permalink = 'Post name'; // Default, Post name
$post_type = 'projects';
//Know the current URI
$req_uri = $_SERVER['REQUEST_URI'];
//Permalink set to default
if($permalink == 'Default') {
$req_uri = explode('paged=', $req_uri);
if($_GET['paged']) {
$uri = $req_uri[0] . 'paged=';
} else {
$uri = $req_uri[0] . '&paged=';
}
//Permalink is set to Post name
} elseif ($permalink == 'Post name') {
if (strpos($req_uri,'page/') !== false) {
$req_uri = explode('page/',$req_uri);
$req_uri = $req_uri[0] ;
}
$uri = $req_uri . 'page/';
}
//Query
$wp_query->query('showposts='.$show_posts.'&post_type='. $post_type .'&paged='.$paged);
//count posts in the custom post type
$count_posts = wp_count_posts('projects');
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<!--Do stuff-->
<h1>
<?php the_title(); ?>
</h1>
<?php the_content(); ?>
<?php endwhile;?>
<nav>
<?php previous_posts_link('&laquo; ') ?>
<?php
$count_post = $count_posts->publish / $show_posts;
if( $count_posts->publish % $show_posts == 1 ) {
$count_post++;
$count_post = intval($count_post);
};
for($i = 1; $i <= $count_post ; $i++) { ?>
<a <?php if($req_uri[1] == $i) { echo 'class=active_page'; } ?> href="<?php echo $uri . $i; ?>"><?php echo $i; ?></a>
<?php }
?>
<?php next_posts_link(' &raquo;') ?>
</nav>
<?php
$wp_query = null;
$wp_query = $temp; // Reset
get_footer();
?>
</pre>
<br />
In the above code, you should modify the $permalink variable to the current permalink type. I tested only with 'Default' and 'Post name' permalinks.<br />
<br />
Also, modify the $post_type variable to the custom post type name.</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com22tag:blogger.com,1999:blog-1934757218101207359.post-55744451606628404812012-08-03T19:13:00.000+05:302012-08-03T19:13:18.476+05:30Wordpress's template hierarchy reference<div dir="ltr" style="text-align: left;" trbidi="on">
Found nice reference for <a href="http://codex.wordpress.org/images/1/18/Template_Hierarchy.png" target="_blank">wordpress's template hierarchy</a>. This will help to determine the wordpress behavior while developing themes. </div>Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0tag:blogger.com,1999:blog-1934757218101207359.post-56698882341051124482012-08-03T18:25:00.004+05:302012-08-10T15:49:45.983+05:30Show all post from custom post type's categories using wp_dropdown_categories() function in Wordpress<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<br />
<iframe frameborder="0" height="396" src="http://www.screenr.com/embed/ZHz8" width="550"></iframe>
<br />
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
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. </blockquote>
</div>
<div>
<br /></div>
<div>
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.</div>
<div>
<br />
<a name='more'></a><br /></div>
<div>
First, create a custom post type called 'Projects' and custom taxonomy for 'Projects' called 'Project type'.<br />
<br />
<b>1. </b>Copy the code given below inside your functions.php (Alternatively, you can paste the code in a separate file and call inside your functions.php using PHP's include() function. )</div>
<pre class="brush:php;"><?php
add_action('init', 'projects_init');
function projects_init()
{
$project_labels = array(
'name' => _x('Project', 'post type general name'),
'singular_name' => _x('Project', 'post type singular name'),
'all_items' => __('All projects'),
'add_new' => _x('Add New project', 'director'),
'add_new_item' => __('Add New project'),
'edit_item' => __('Edit project'),
'new_item' => __('New project'),
'view_item' => __('View projects'),
'search_items' => __('Search in project'),
'not_found' => __('No project found'),
'not_found_in_trash' => __('No project found in trash'),
'parent_item_colon' => ''
);
$args = array(
'labels' => $project_labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title', 'editor','thumbnail'),
'has_archive' => 'project'
);
register_post_type('projects',$args);
}
add_action( 'init', 'project_type_fx', 0 );
function project_type_fx() {
$project_category = array(
'name' => _x( 'Project type', 'taxonomy general name' ),
'singular_name' => _x( 'Project type', 'taxonomy singular name' ),
'search_items' => __( 'Search in project type' ),
'all_items' => __( 'All project types' ),
'most_used_items' => null,
'parent_item' => null,
'parent_item_colon' => null,
'edit_item' => __( 'Edit project type' ),
'update_item' => __( 'Update project type' ),
'add_new_item' => __( 'Add new project type' ),
'new_item_name' => __( 'New project type' ),
'menu_name' => __( 'Project type' ),
);
register_taxonomy('project-type', 'projects',array(
'hierarchical' => true,
'labels' => $project_category,
'show_ui' => true,
'query_var' => true,
'rewrite' => array('slug' => 'project-type' )
));
}
?>
</pre>
<br />
This will create a custom post type called project just below the default 'Posts'.
<b>
</b>
<br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5F1O6VYdFQ4yuE4fAhjvBD_5AlI7w0Cb6lFC81gPfwNI2oQr_Sg1_cKBpZZ8LKM7oADxhbseQNQ4Z65k3ijFKbpdv81e1DCB3UPb2sNTKIjH6L9EH7YihmT_8-d3CIFFhcrprftFHDSl/s1600/wordpress-custom-post-type.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK5F1O6VYdFQ4yuE4fAhjvBD_5AlI7w0Cb6lFC81gPfwNI2oQr_Sg1_cKBpZZ8LKM7oADxhbseQNQ4Z65k3ijFKbpdv81e1DCB3UPb2sNTKIjH6L9EH7YihmT_8-d3CIFFhcrprftFHDSl/s320/wordpress-custom-post-type.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>2. </b>Now, add few categories and posts in each custom taxonomies.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho_k3I7DxE8RQ2-1Ae6KOVVXjku07mgrOcY6ePpLE8Wen_idh9mQro6g2GNX4frnlDDcn2_uuu3sg1VwNm61lhUHEhMC6mF0HEq0GSSk3daKa1ZeDAjqoKRQ_nHf0xNUML2kk52Fx3NMpk/s1600/custom-taxonomies-for-wordpress.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho_k3I7DxE8RQ2-1Ae6KOVVXjku07mgrOcY6ePpLE8Wen_idh9mQro6g2GNX4frnlDDcn2_uuu3sg1VwNm61lhUHEhMC6mF0HEq0GSSk3daKa1ZeDAjqoKRQ_nHf0xNUML2kk52Fx3NMpk/s400/custom-taxonomies-for-wordpress.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ji9N4YlPV73p9htCXcX3SOV7mXrcXrzOBCzAMgnl_SWZSIeH_EWlArkGMNs6v_DAX1VSRzkPdnP0Y9bcxeKf0FjohRU0DlfU6J04J795H3A_srlK9ljYUd7MHBvmh-PxTpd0bsy_LLSy/s1600/wordpress-custom-taxonomy-posts.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ji9N4YlPV73p9htCXcX3SOV7mXrcXrzOBCzAMgnl_SWZSIeH_EWlArkGMNs6v_DAX1VSRzkPdnP0Y9bcxeKf0FjohRU0DlfU6J04J795H3A_srlK9ljYUd7MHBvmh-PxTpd0bsy_LLSy/s640/wordpress-custom-taxonomy-posts.jpg" width="475" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<b>3. </b>Add the following code inside your functions.php</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<pre class="brush:php;">class my_Walker_CategoryDropdown extends Walker_CategoryDropdown {
function start_el(&$output, $category, $depth, $args) {
$pad = str_repeat(' ', $depth * 3);
$cat_name = apply_filters('list_cats', $category->name, $category);
$output .= "\t<option category-="category-" class="\" depth="depth" level-="level-" value="\">slug."\"";
if ( $category->term_id == $args['selected'] )
$output .= ' selected="selected"';
$output .= '>';
$output .= $pad.$cat_name;
if ( $args['show_count'] )
$output .= ' ('. $category->count .')';
if ( $args['show_last_update'] ) {
$format = 'Y-m-d';
$output .= ' ' . gmdate($format, $category->last_update_timestamp);
}
$output .= "</option>\n";
}
}
</pre>
<blockquote>
The above code will extend the class Walker_categoryDropdown to modify the wp_dropdown_categories() . This will output the value in 'category slug' instead of category id. Well, I tried to get the posts form custom taxonomy using the category id but couldn't do it. The credit for the above code goes to '<a href="http://wordpress.org/support/topic/wp_dropdown_categories-generating-url-id-number-instead-of-slug?replies=6">numer</a>'. He just saved my day.</blockquote>
<b><br /></b>
<b>4. </b>Create a page template called 'Display Post Iframe' and a page called 'Display Post Iframe'. And, assign 'Display Post Iframe' template to this page. Paste the following code inside 'display-post-iframe.php'.<br />
<pre class="brush:php;"><?php
/*
Template Name: Display Post Iframe
*/
$loop = new WP_Query( 'project-type='.$_GET['category'].'&post_type=projects' );
echo '<table>';
while ( $loop->have_posts() ) : $loop->the_post();
?>
<tr>
<td><?php
the_time('l, F jS, Y'); ?></td>
<td><a target="_blank" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></td>
</tr>
<?php endwhile;
echo '</table>';
wp_reset_query();
?>
</pre>
<b><span class="Apple-style-span" style="font-weight: normal;"><b>3. </b>Create a page called 'Custom Post types' and assign the template what we are going to create in step 6.</span></b><br />
<b><span class="Apple-style-span" style="font-weight: normal;"><br /></span></b>
<b>6. </b>Create a page template called 'Display posts template'.<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Under your theme folder create a file called 'display-posts-template.php'.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
and, add the following code to it.</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<pre class="brush:php;"><?php
/*
Template Name: Display posts template
*/
get_header(); ?>
<div id="container">
<div id="content" role="main">
<?php
/* Run the loop to output the page.
* If you want to overload this in a child theme then include a file
* called loop-page.php and that will be used instead.
*/
?>
<?php
$taxonomy = 'project-type';
$orderby = 'name';
$show_count = 0; // 1 for yes, 0 for no
$pad_counts = 0; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = '';
$empty = 0;
$args = array(
'taxonomy' => $taxonomy,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty,
'style' => 'none',
'walker' => new my_Walker_CategoryDropdown
);
wp_dropdown_categories( $args );
?>
<div style="clear:both;" id="display_taxonomies"></div>
<script type="text/javascript">
jQuery('.postform').change(function(){
var value = jQuery(this).val();
jQuery("#display_taxonomies").html("<iframe width='850' height='450' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='<?php bloginfo('url'); ?>/display-post-iframe?category="+value+"'></iframe>");
});
</script>
<div id="display_taxonomies"></div>
</div>
</div>
</div>
</div>
<!-- #content -->
</div>
<!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
?>
</pre>
<br />
<blockquote class="tr_bq">
The above code is sending a query via the url to next template. And is extracted using PHP's $_GET variable (see step <b>5</b>).</blockquote>
<blockquote class="tr_bq">
<b>The URL will append something like '/display-post-iframe/?category=websites' </b></blockquote>
<b><br /></b>
<b>7. </b>Finally, add the following code to header.php to load first category's post by default.<br />
<br />
<pre class="brush:js;"><script type="text/javascript">
jQuery(document).ready(function(){
var select_first = jQuery('.postform:first').val();
jQuery("#display_taxonomies").html("<iframe width='850' height='450' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='<?php bloginfo('url'); ?>/display-post-iframe?category="+select_first+"'></iframe>");
});
</script></pre>
<br />
<blockquote class="tr_bq">
Finally, you will get a drop down of custom taxonomies.</blockquote>
<b><span class="Apple-style-span" style="font-size: large;">FINAL RESULT</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjLHZDUCPIJEACAg596dL5UHxECstHquObDKA-5sfFYRoOIUlAyjp7N-OHS5uaNig12Cop4N3cdYcmkH8tuxVqsB6SL-rSmVoQ3JAC4nIAj-7zXn6N7DGpndVjAZlqmxirlHGGK82Zxd1e/s1600/custom-taxonomy-dropdown-list.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjLHZDUCPIJEACAg596dL5UHxECstHquObDKA-5sfFYRoOIUlAyjp7N-OHS5uaNig12Cop4N3cdYcmkH8tuxVqsB6SL-rSmVoQ3JAC4nIAj-7zXn6N7DGpndVjAZlqmxirlHGGK82Zxd1e/s1600/custom-taxonomy-dropdown-list.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
Select any category and the respective post will display under it. Cool! isn't it. I'm displaying only post date and the title. But, it's up-to your imagination to display any post related data, either custom fields or the content.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Don't forget to share your thoughts!</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<b>
</b>
</div>Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com2tag:blogger.com,1999:blog-1934757218101207359.post-45554026254518337822012-08-02T17:56:00.001+05:302012-08-13T16:11:00.166+05:30Contact form 7 custom validation<div dir="ltr" style="text-align: left;" trbidi="on">
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.<br />
<div>
<br /></div>
<div>
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.<br />
<br />
<a name='more'></a><br />
<br />
So, here is my code.
<br />
<pre class="brush:php;">
<?php
// CF7 Custom Validation Rules
/*
Compare date function
*/
function compare_date($date1, $date2) {
$date1 = explode('/', $date1);
$date2 = explode('/', $date2);
$output = false;
if($date2[2] > $date1[2]) {
$output = true;
} else {
$output = false;
}
if($date2[2] == $date1[2]) {
if($date2[0] > $date1[0]) {
$output = true;
} else {
$output = false;
}
if($date2[0] == $date1[0]) {
if($date2[1] >= $date1[1]) {
$output = true;
} else {
$output = false;
}
}
}
if ($output) {
return true;
} else {
return false;
}
}
/*
Function called via wpcf7_validate_text filter
*/
function cf7_custom_form_validation($result,$tag) {
$type = $tag['type'];
$name = $tag['name'];
$CheckInDate = $_POST['CheckInDate'];
$CheckOutDate = $_POST['CheckOutDate'];
if($name == 'CheckInDate'){
if(!compare_date($CheckInDate, $CheckOutDate)) {
$result['valid'] = false;
$result['reason'][$name] = 'Logical Error: Check in date should be before check out date';
}
}
if($name == 'CheckOutDate'){
if(!compare_date($CheckInDate, $CheckOutDate)) {
$result['valid'] = false;
$result['reason'][$name] = 'Logical Error: Check out date should be After check in date';
}
}
return $result;
}
/*
add filter wpcf7_validate_text to call the custom validation function
*/
add_filter('wpcf7_validate_text','cf7_custom_form_validation', 10, 2); // Email field
/*
Filter for required field
*/
add_filter('wpcf7_validate_text*', 'cf7_custom_form_validation', 10, 2); // Req. Email field
?>
</pre>
Just save this code in a new file and include the file using php include function inside your functions.php.
When you try submitting the form, it will show your custom validation errors if the requirement is not fulfilled.
</div>
</div>
Anonymoushttp://www.blogger.com/profile/05965942455067593877noreply@blogger.com0