How to use custom post type in wordpress

From wordpress 3.0 version release wordpress gives the facility to add a custom post type functionality. With custom post type wordpress is became more powerful and expendable and more advanced We given info about, How to use custom post type in wordpress.

How to use custom post type in wordpress

WordPress recognized the need to people and industry and they introduced the custom post type. In this tutorial I will tell you how to use the custom post type very effectively.

Adding Custom post type is very easy. Using theme or plugin file you can add the custom post types in wordpress admin area.

Here I am going to give you example using wordpress theme files. Open you functions.php file and copy paste the following code in that file.


add_action('init', 'create_product');
 function create_product() {
 $product_args = array(
 'label' => __('Product'),
 'singular_label' => __('Product'),
 'public' => true,
 'show_ui' => true,
 'capability_type' => 'post',
 'hierarchical' => false,
 'rewrite' => true,
 'supports' => array('title', 'editor', 'thumbnail')
 );
 register_post_type('product',$product_args);
 }

How to use custom post type in wordpress
How to use custom post type in wordpress

The function register_post_type() accepts two arguments: the name we want to give our post type, and a list of arguments used to create that post type, which we put in an array called $args.

Using above code that code will add the product post type to wordpress panel.

Now you can add the meta fields to custom post type. Use the following code in file for add the meta fields. Custom meta fields function is available from quite some time. add_meta_box() function is very useful to adding custom fields to wordpress post.


<?php

 add_action("admin_init", "add_product");
 add_action('save_post', 'update_thumbnail_url');
 function add_product(){
 add_meta_box("product_details", "product Options", "product_options", "product", "normal", "low");
 }
 function product_options(){
 global $post;
 $custom = get_post_custom($post->ID);
 $thumbnail_url = $custom["thumbnail_url"][0];
 $product_info = $custom["product_info"][0];
 $product_infos = $custom["product_infos"][0];
 $video_code = $custom["video_code"][0];

?>
 <div id="product-options">
 <label>Thumbnail URL:</label><input size="100" name="thumbnail_url" value="<?php echo $thumbnail_url; ?>" /><br>
 <label>Product Info:</label><input size="100" name="product_info" value="<?php echo $product_info; ?>" /><br>
 <img src="<?php echo $product_infos; ?>"><br>
 <label>Video Code:</label><textarea cols="50" rows="5" name="video_code"><?php $video_code; ?></textarea>
 </div><!--end product-options-->
<?php
 }
 function update_thumbnail_url(){
 global $post;
 update_post_meta($post->ID, "thumbnail_url", $_POST["thumbnail_url"]);
 update_post_meta($post->ID, "product_info", $_POST["product_info"]);
 update_post_meta($post->ID, "video_code", $_POST["video_code"]);

 }
?>

Using following code you can see the product information in edit product page and you can able to see the all information in for edit. Admin will know which fields are available to edit.

How to use custom post type in wordpress
How to use custom post type in wordpress

<?php
add_action("manage_posts_custom_column",  "product_custom_columns");
add_filter("manage_edit-product_columns", "product_edit_columns");

function product_edit_columns($columns){
 $columns = array(
 "cb" => "<input type=\"checkbox\" />",
 "title" => "Product Title",
 "thumbnail_url" => "Thumbnail URL",
 "product_info" => "Product Info",
 "video_code" => "Video Code",
 );
 return $columns;
}
function product_custom_columns($column){
 global $post;
 switch ($column) {
 case "thumbnail_url":
 $custom = get_post_custom();
 echo $custom["thumbnail_url"][0];
 break;
 case "product_info":
 $custom = get_post_custom();
 echo $custom["product_info"][0];
 break;
 case "video_code":
 $custom = get_post_custom();
 echo $custom["video_code"][0];
 break;
 }
}

?>

Using custom post type and add meta tag you can develop very nice applications. Now I am going to show you how you can extract the custom posts in wordpress frontend.

Using wp_query you can easily extract product posts. In any category page or conditionally you can use following code.


$loop = new WP_Query( array( 'post_type' => 'product', 'posts_per_page' => 10 ) );
while ( $loop->have_posts() ) : $loop->the_post();
 the_title();
the_content();
global $post;
 $custom = get_post_custom($post->ID);
echo $thumbnail_url = $custom["thumbnail_url"][0];
echo $product_info = $custom["product_info"][0];
echo $video_code = $custom["video_code"][0];
 echo '<div>';
 the_content();
 echo '</div>';
endwhile;

Or you can create the custom theme page using following code. Just create product.php page in your wordpress theme folder.Put following code in that file.


<?php

/*Template Name: Product*/

?>

<?php get_header(); ?>

<div id="container">

<div id="content" role="main">

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>

<?php $recent = new WP_Query('post_type=product&posts_per_page=10′); while($recent->have_posts()) : $recent->the_post();?>

<?php the_title( '<h2><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0′ ) . '" rel="bookmark">', '</a></h2>' ); ?>

<div>

<?php the_content(); ?>

<?php

the_content();
global $post;
$custom = get_post_custom($post->ID);
echo $thumbnail_url = $custom["thumbnail_url"][0];
echo $product_info = $custom["product_info"][0];
echo $video_code = $custom["video_code"][0];

?>

<?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'wordpressapi' ), 'after' => '</div>' ) ); ?>

<?php edit_post_link( __( 'Edit', 'wordpressapi' ), '<span>', '</span>' ); ?>

</div><!– .entry-content –>

<?php comments_template( ", true ); ?>

<?php endwhile; ?>

</div><!– #content –>

</div><!– #container –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Now create product page and product as template.

If you have any issues or doubts then write to me.

Add custom background image support to wordpress

From wordpress 3.0, added new function to control the background image. For your theme if you want to add custom background image support to wordpress theme. From wordpress 3.0 release wordpress added new function to control the background color and image. For your theme if you want to add the background functionality then you need to very simple code in your functions.php file which you find in your wordpress theme folder.

Add custom background image support to wordpress

Open functions.php file and just copy paste the code.


add_custom_background();

For enabling the background for theme you need to open header.php file and just copy paste following code in the file.

<body class="<?php body_class() ?>">

For changing the background login to wordpress admin panel and goto appearance tab and click on background tab. From here you can able to change to background image or color.

Add custom background image support to wordpress
Add custom background image support to wordpress

how to create menu in wordpress themes

From wordpress 3.0 release wordpress launched the custom navigation Menu in wordpress admin panel. wordpress tutorial for, how to create menu in wordpress themes. Through drag and drop you can manage the menus. Using this menus are very easy for users.

how to create menu in wordpress themes

how to create menu in wordpress themes
how to create menu in wordpress themes

You can check wordpress admin section for managing the menus in wordpress theme.

In this article I will show you how to enable Custom menu for your wordpress theme.

If you want to create the one menu in wordpress theme then just open the functions.php file and put following code in that file.


add_theme_support( 'menus' );

If you want to create or use the multiple menus in wordpress theme then just open the functions.php file and put following code in that file.


add_action( 'init', 'register_my_menus' );

function register_my_menus() {
 register_nav_menus(
 array(
 'primary-menu' => __( 'Main Menu' ),
 'secondary-menu' => __( 'Top Menu' ),
 'tertiary-menu' => __( 'Footer Menu' )
 )
 );
}

After this adding code in functions.php file you need to open the header.php and footer.php file.

For single menu you need to add following code in header.php file.


<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

For multiple menu you need to add following code in header.php or footer.php file

# Following code for Top Menu


wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'sort_column' => 'menu_order', 'container_class' => 'nav' ) );

#Following code for Main Menu


&lt;?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?>

#Following code for Footer Menu


&lt;?php wp_nav_menu( array( 'theme_location' => 'tertiary-menu' ) ); ?>

Above code will give you the more control over the wordpress theme. If you have any doubts or questions then please do write to me.

WordPress changed the statistic graph

Today when I logged to my wordpress blog account and looked at dashboard, I saw the new changed statistic graph.
The new statistic graph is looking really very cool. New graph version is better for those who are visually improved so nicely.

WordPress changed the statistic graph

For wordpress blogger and website users this news is really great.

Seeing this graph I must say you will miss having the grand total of both syndicated and on-site views for an entry.

As we know we need to updgrade the “WordPress.com Stats” wordpress plugin to see the updated stats in your hosted wordpress blogs.
You can download or update the wordpress stat plugin using following URL
http://wordpress.org/extend/plugins/stats/

Wordpress changed the statistic graph
WordPress changed the statistic graph

What wordpress is saying about changed Stat in Twitter.
Sexy Stats: http://wp.me/pf2B5-1n9

As per wordpress:
Each module can be opened and closed, moved, or hidden completely. If you don’t want to see a module, minimize it with one click or use the Screen Options to keep it out of sight. Customize everything and view stats the way you want to.

As you hover over each bar in the chart it changes color and displays a tooltip, giving you more information about the data. If the chart is showing data by day, Saturdays and Sundays have a light gray background to make it easier to see weekly patterns. Under the chart you’ll notice a new area, called “fortune cookies,” where we’ll highlight key stats.

During the redesign we went with bar charts because the end of one day and the beginning of another shouldn’t be connected. Each day starts at zero and we think bar charts work much better for this type of data. We hope you’ll agree once you get used to the change.

In this first phase of the stats redesign we’ve focused on the main page. This will allow us to collect feedback from you so we can tweak everything as we go. We’ve only mentioned a few of the highlights here, so take your stats for a drive around town to get used to the feel. Let us know what you like and what you might change. As we gather feedback we’ll apply a bit of sexy to the other stat pages.

Windows or MSN Space is migrating to wordpress.com

Few time ago wordpress just announced the partnership with  Microsoft. Microsoft is saying “WordPress as the new default blogging platform on Windows Live Spaces!” WordPress as the new default blogging platform on Windows Live Spaces!”

Windows or MSN Space is migrating to wordpress.com

Windows or MSN Space is migrating to wordpress.com
Windows or MSN Space is migrating to wordpress.com

Microsoft is saying “Over the last few weeks, we’ve spent a good bit of time talking about our approach to partnering with the web, and as part of that, how we’re deeply integrating with the leading consumer services that you find most valuable. Earlier today, I had the opportunity to get on stage at TechCrunch Disrupt, and with Toni Schneider, CEO of Automattic (the parent company of WordPress.com), announce an exciting partnership between our companies.”

Using this step more than 30 million users of windows space will migrate to wordpress.com.

In detail Matt is also written in his article.

MSN Spaces Closing, becomes WP.com

As we looked at how we brought Windows Live and WordPress.com together, there were three big things we wanted to deliver:

  • Giving existing Windows Live Spaces customers an easy upgrade of their blogging experience to WordPress.com
  • Letting anyone connect their WordPress.com blog to Messenger so their Messenger friends are updated when they publish a new post on WordPress.com
  • Allowing Windows Live customers to easily create new blogs on WordPress.com
Windows or MSN Space is migrating to wordpress.com
Windows or MSN Space is migrating to wordpress.com

For detail information for windows space user can use the following article for checking this further information about migrating the blog to wordpress.com

WordPress.com and Windows Live partnering together and providing an upgrade for 30 million Windows Live Spaces customers

WordPress.com is welcoming all the windows and live space users through Twitter. WordPress.com written the following tweet in Tweeter.

Welcome Windows Live Spaces Bloggers to WordPress.com! http://wp.me/pf2B5-1lU

Videos of Matt Mullenweg – WordPress founder

We all know who is Matthew Charles Mullenweg is. He dont need any introduction. Many times users, clients and developers are very interested to see what Matt is saying about wordpress and technology.

Videos of Matt Mullenweg – WordPress founder

 

In this article I am going to give you some videos of Matt which published in 2010.

Matt Mullenweg says Hi to Me!

wordcamp 2010 jerusalem q&a with Matt Mullenweg

Matt Mullenweg keynote – WordCamp Houston

Matt Mullenweg at WordCamp Houston

Matt Mullenweg and Mike Little : Cardiff July 2009.

Matt Mullenweg says hello to WordCamp Malaysia 2010 Part 1

You Are the Pride: Matt Mullenweg

WordPress creator Matt Mullenweg discusses his early days as a student at the University of Houston, and his passion for helping people find their …

WordPress Founder Matt Mullenweg

An interview with Matt Mullenweg, conducted at WordCamp SF 2010.

Matt Mullenweg talks about “Twenty Ten” for WordPress 3.0

An excerpt from Matt’s state of the word address on WordCamp San Francisco 2010

Matt Mullenweg, Founder Word Press

May 1, 2010 Matt at SF Word Camp sf.wordcamp.org

remove blog word from wordpress permalink url

Many times we need to remove the category or blog slug from wordpress URL.  We can very easily remove the blog word from wordpress blog URL. In this tutorial, We are going to show remove blog word from wordpress permalink url. this is useful when you upgraded your wordpress multisite installation.

remove blog word from wordpress permalink url

I personally used wordpress mu for long time. When wordpress 3.0 launched with multisite functionality we started using wordpress 3.0. Removing blog and category slug is very important for many clients.

I am assuming you are using wordpress 3.0 multisite installation. If that is so then you need to do following action.

First login to wordpress admin and go to Super Admin > Sites > Edit

and Scroll down to “Permalink Structure” and remove the “/blog” part. That should work.

Image is shown as like.

remove blog word from wordpress permalink url
remove blog word from wordpress permalink url

than update the option and your issue will be solved. If you are still facing issue then you need to use following code in your functions.php file. Following code is useful for those who updated wordpress mu from wordpress 3.0, other wise they can use above action.


add_filter("pre_update_option_category_base","remove_blog_slug");
add_filter("pre_update_option_tag_base","remove_blog_slug");
add_filter("pre_update_option_permalink_structure","remove_blog_slug");

/* just check if the current structure begins with /blog/ remove that and return the stripped structure */
function remove_blog_slug($tag_cat_permalink){

if(!preg_match("/^\/blog\//",$tag_cat_permalink))
return $tag_cat_permalink;

$new_permalink=preg_replace ("/^\/blog\//","/",$tag_cat_permalink );
return $new_permalink;

}

If you want advanced permalinks then I can suggest following wordpress plugin for changing the permalink

Advanced Permalinks

advanced permalink options that allow you to:

  • Have multiple permalink structures. Permalinks can be assigned to posts or ranges of posts
  • 301 redirect old permalink structures (many structures are allowed)
  • Category-specific permalinks. Posts in certain categories can be assigned a permalink structure
  • No need to have a base to the category permalink!
  • Change author permalinks
  • Enable periods in permalinks – perfect for migrating old websites

If you need more information or help then you can contact me through contact form.

how to show featured posts in wordpress homepage

For show featured posts in wordpress on home page. You can select article to show on home page. We have code snippet for show featured posts in wordpress. Showing featured post is good for seo also. Important and selected article you can show on home always. Featured post is great functionality introduced by wordpress.

show featured posts in wordpress

Some times we want to need to show featured posts in wordpress blogs on home page. You can select most popular or nice articles to show on home page. In this tutorial I will will show how you can show the featured wordpress posts on home page.

There is very simple way to show featured post on home page. First you need to create featured wordpress category and whatever post you want to show as featured post that posts select under featured post.

Then use following code:

<?php
  query_posts('category_name=featured&posts_per_page=5');
  if (have_posts()) : while (have_posts()) : the_post();
?>
<?php the_title(); ?>
<?php the_excerpt(); ?>
<?php endwhile; endif; ?>

Above code you need use in index.php and single.php file. Or you can following code for showing featured wordpress post.

 <?php while ( have_posts() ) : the_post() ?>

      <?php  if(get_post_meta($post->ID, 'type', true) == "featured") {; ?>
  <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __('Permalink to %s', 'your-theme'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
<img src="<?php echo get_post_meta($post->ID, 'intro_thump', true); ?>" alt="Icon for Post #<?php the_ID(); ?>" />
</a></h2>
<?php  }; ?>
<div class="entry-content">

     </div><!– .entry-content –>
<?php endwhile; ?>
show featured posts in wordpress
show featured posts in wordpress

Add google maps in wordpress post

You can add the google maps in wordpress post or pages very easily. You need to just use following code in your functions.php file. Open your functions.php file from your wordpress theme folder and copy paste the following code in that file.

Add google maps in wordpress post

You can Add google maps in wordpress post or pages very easily. Open your functions.php file from your wordpress theme folder and copy our code in file. If you don’t have functions.php file in your wordpress theme folder then create functions.php file and put following code in that file.


//Google Maps adding through Shortcode
function add_googlemap_in_wordpresss_in_wordpress($atts, $content = null) {
 extract(shortcode_atts(array(
 "width" => '620',
 "height" => '430',
 "src" => ''
 ), $atts));
 return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'&output=embed" >';
}
add_shortcode("googlemap_in_wordpress", "add_googlemap_in_wordpresss_in_wordpress");

How to use google maps in your wordpress posts and pages.

use the following code in your posts or pages.

[googlemap_in_wordpress width="280" height="280" src="[you_url]"]
Add google maps in wordpress post
Add google maps in wordpress post

You can change the height and width as per your requirement and for url you need to use following url
http://maps.google.com/
go to above url and choose your location and right side top you will find the link option. click on that link url and you will get the link of your location. Just copy paste that url. example as follows

[googlemap_in_wordpress width="280" height="280" src="[http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=New+York,+NY,+United+States&sll=37.0625,-95.677068&sspn=47.215051,79.013672&ie=UTF8&hq=&hnear=New+York&ll=40.555548,-73.730621&spn=0.356317,0.617294&z=11&iwloc=A]"]

Above code put in your post or page. you can see the google maps in your page.

Here is list of some wordpress plugins which will help you to integrate the google map in wordpress.

how to display or embed the google map in wordpress

Twitter follower count using PHP in WordPress

you can easily show twitter follower count in your wordpress site. In this tutorial we used twitter xml api for fetching Twitter follower count using PHP. You can place the twitter count in header section or footer section or sidebar section of wordpress.

Twitter follower count using PHP in WordPress

 

Twitter follower count using PHP in WordPress
Twitter follower count using PHP in WordPress

Using following code you can print the twitter followers count.


<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
$twitter_api = file_get_contents('http://twitter.com/users/show/USERNAME.xml');
$text_output = '<followers_count>'; $end = '</followers_count>';
$page = $twitter_api;
$explode_content = explode($text_output,$page);
$page = $explode_content[1];
$explode_content = explode($end,$page);
$twitter_followers = $explode_content[0];
if($twitter_followers == '') { $twitter_followers = '0'; }
echo '<div><strong>'.$twitter_followers.' </strong> Followers</div>';

?>

You just need to replace the your name instead of USERNAME.