Monthly Archives: November 2014

How to display Facebook like box on website ?

Facebook like box is allows owner to provide his users to get latest updates of his website. Facebook like box is also be known as Facebook fan box. There is lots of social networking sites are present in the market now but today Facebook is more powerful way to explore your business worldwide. So i am going to tell you that how to display Facebook like box in your website so your visitors can easily be with you directly from your website. There is lots of people who are using plugin for this but i think there is no need to use any plugin this is very simple process to do and you don’t need any coding knowledge for this. Kindly follow these easy steps to show Facebook like box in your website.

1) Go to https://developers.facebook.com/docs/plugins/like-box-for-pages.

2) After going to like box page you have to fill some options shown below. See the screenshot.
facebook-like

3) After this you have to get like box code from clicking Get Code button and select the iframe tab and copy that code and paste it on your website where you want to display the like box and you’r done.
facebook-code

This is very simple process to get like box in your website. Hope this will helps you if you have any question or comments please feel free to ask.
Thanks for reading.



Create custom meta boxes in WordPress

Creating custom meta boxes in WordPress is very simple it allows you to add extra data to your post or page. This tutorial will show you how to add custom meta boxes to the edit post or pages screen. Sometimes website needs some extra info about post then we are looking to WordPress core functionality and thinking about how to do that ?. So before moving on we have to know what kind of meta boxes we need. You can create textbox, textarea and else. I will provide you some codes which works more better and easy to use than others. For creating custom meta boxes you have to use function add_meta_box() provided by WordPress.



Start with the code

Add below code in your function.php file by using add_meta_box to create meta boxes for any post or page.

// add meta box to post
function themename_post_admin() {
    add_meta_box( 'post_meta_box', 'Extra Info', 'display_post_meta_box', 'post', 'normal', 'high');
}
add_action( 'admin_init', 'themename_post_admin' );

After doing this you have to add meta fields in the post. below code will create meta field for the post i am just showing you the example for textbox and textarea but you can add much more than this.

// add meta box field to post
function display_post_meta_box( $post ) {
     $name = esc_html( get_post_meta( $post->ID, 'namebox', true ) );
     $extraword = esc_html( get_post_meta( $post->ID, 'extrawords', true ) );

echo "<table width=100%>
          <tr>
             <td width='20%'>Textbox</td>
             <td width='80%'>
                 <input type='text' name='namebox' value=".$name.">
             </td>
         </tr>
         <tr>
            <td width='20%' valign='top'>Textarea</td>
            <td width='80%'>
                <textarea name='extrawords' class='widefat' rows='5'>".$extraword."</textarea>
            </td>
        </tr>
    </table>";
}

This code will display text box and textarea to the edit post screen see this screenshot to know how does it look.

meta-box-example

Now you have to use below code for saving post meta data.

// save post meta box form data
function add_themename_post_admin_fields( $post_id, $post ) {
            if( $post->post_type == 'post' ){
                   if( isset($_POST['namebox']) ){
                         update_post_meta( $post_id, 'namebox', $_POST['namebox'] );
                   }
                   if( isset($_POST['extrawords']) ){
                         update_post_meta( $post_id, 'extrawords', $_POST['extrawords'] );
                   }


            }
}
add_action( 'save_post', 'add_themename_post_admin_fields', 1, 2 );

Get the full code

// add meta box to post
function themename_post_admin() {
		add_meta_box( 'post_meta_box', 'Extra Info', 'display_post_meta_box', 'post', 'normal', 'high');
}
add_action( 'admin_init', 'themename_post_admin' );


// add meta box field to post
function display_post_meta_box( $post ) {
	 $name = esc_html( get_post_meta( $post->ID, 'namebox', true ) );
     $extraword = esc_html( get_post_meta( $post->ID, 'extrawords', true ) );

echo "<table width='100%'>
		<tr>
			<td width='20%'>Textbox</td>
			<td width='80%'>
					<input type='text' name='namebox' value=".$name.">
			</td>
		</tr>
		<tr>
            <td width='20%' valign='top'>Textarea</td>
            <td width='80%'>
                <textarea name='extrawords' class='widefat' rows='5'>".$extraword."</textarea>
            </td>
        </tr>
</table>";
}

// save post meta box form data
function add_themename_post_admin_fields( $post_id, $post ) {
            if( $post->post_type == 'post' ){
                   if( isset($_POST['namebox']) ){
                         update_post_meta( $post_id, 'namebox', $_POST['namebox'] );
                   }
                   if( isset($_POST['extrawords']) ){
                         update_post_meta( $post_id, 'extrawords', $_POST['extrawords'] );
                   } 
            }
}
add_action( 'save_post', 'add_themename_post_admin_fields', 1, 2 );

Above code makes the meta boxes ready for use now you have use this code within loop where you want to display meta box content.

  // for textbox use this
  echo esc_html( get_post_meta( $post->ID, 'namebox', true ) );
  
  // for textarea use this
  echo get_post_meta( $post->ID, 'extrawords', true ) ;

This is very simple and easy way to create meta boxes for post or pages you can also use it for custom post types. Hope this tutorial will helps you for your projects and if you have any question or comments please feel free to post below.
All the best.

Create custom post type in WordPress

WordPress is not only for just blogging but it is widely used for more than a blog. So the custom post type is widely used for display different kind of contents. WordPress has two main post types which is posts and pages. Posts is mainly used for blog like structure it is very useful to display posts order by date. Custom post type is not very different from the other posts but its usage is different. So all the WordPress developers should know about the custm post type creation. This is very simple process to create custom post type in WordPress.You just need to add some codes on function.php file and you can use it like as other posts.

Please Put below code in function.php file

//custom post type for Our Team
function themename_custom_post_team() {
	$labels = array(
		'name'               => __( 'Team' ),
		'singular_name'      => __( 'Team' ),
		'add_new'            => __( 'Add New' ),
		'add_new_item'       => __( 'Add New Team' ),
		'edit_item'          => __( 'Edit Team' ),
		'new_item'           => __( 'New Team Member' ),
		'all_items'          => __( 'All Team Members' ),
		'view_item'          => __( 'View Our Team' ),
		'search_items'       => __( 'Search Team' ),
		'not_found'          => __( 'No Member found' ),
		'not_found_in_trash' => __( 'No Member found in the Trash' ), 
		'parent_item_colon'  => '',
		'menu_name'          => 'Our Team'
	);
	$args = array(
		'labels'        => $labels,
		'description'   => 'Manage Team',
		'public'        => true,
		'menu_position' => 20,
		'supports'      => array('title','thumbnail', 'excerpt', 'editor'),
		'has_archive'   => true,
	);
	register_post_type( 'team', $args );	
}
add_action( 'init', 'themename_custom_post_team' );

// texonomy for custom post type
function team_taxonomy() {  
	register_taxonomy(  
		'team_category',  
		'team',
		array(  
			'hierarchical' => true,  
			'label' => 'Category',  
			'query_var' => true,  
			'rewrite' => array('slug' => 'team-category')  
		)  
	);  
}  
add_action( 'init', 'team_taxonomy' );

After adding this code to your function.php file you will see at the backend the new post type called Our Team in WordPress Menu. Your custom post type is ready to use in the backend now the above code will display as follows in the backend. see the screenshot below.

custom-post-type

This is very simple and best way to add custom post type in WordPress. You can use custom post type by using wp_query_posts() before loop.



Custom Post type by Plugin

If you are not well versed with the coding and you need somethings very fast then you can use the custom post types plugin. This plugin helps you to create custom post type and texonomies in WordPress.

Custom Post Type UI

custom-post-type-plugin

Hope this article may useful for you and you can learn lots from this your comments and queries can makes us to serve you better.
Thanks for reading.

How to use CSS3 media queries for responsive website ?

Responsive website is a todays demand and every developer should learn about how the responsive website will create and how to use css3 media queries. Before start we have to understand about how the media query works. Media query is a css3 module that allow website to rendered properly in screen resolutions. If your are applying condition in media query then the css will work when the condition is true. Lets talk about some method which we can use for creating responsive website. Media query helps to use different styles for different resolutions. There are two very easy way to use media queries for responsive website. You can use media query within stylesheet or you can create external files for different resolutions. Lets start with the first method where we can use media queries within stylesheet.




In this method you can create and manage your css within one stylesheet. Create css file by using your code editor and add some media queries for screen resolutions like mobile portrait and landscape or tab. you can use media query add some condition like this @media only screen (max-width:479px). Please see the below media queries for standard resolutions.

 /* ----------- Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{
    /* Your css goes here... */
}

/* ----------- Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) 
{
    /* Your css goes here... */
}

/* ----------- Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{
    /* Your css goes here... */
}

/* ----------- iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
    /* Your css goes here... */
}

/* ----------- iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
{
    /* Your css goes here... */
}

/* ----------- iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
{
    /* Your css goes here... */
}

/* ----------- Desktops and laptops ----------- */
@media only screen and (min-width : 1224px)
{
    /* Your css goes here... */
}

/* ----------- Large screens ----------- */
@media only screen and (min-width : 1824px)
{
    /* Your css goes here... */
}

/* ----------- iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)
{
    /* Your css goes here... */
}

You can use this queries within one stylesheet but there is lots of developers gets confuse to manage all the css of media queries form one stylesheet for this i have another method to use this queries by using separate stylesheets for separate resolutions. Firstly you have to create css files then link that files within the head tag in Html file and for applying condition you have to use media attribute in link tag. Here you can see how the media queries apply in external css files.

<link rel="stylesheet" type="text/css" href="computer.css" media="screen and (min-width:1000px)" /></div>

Above is the example of only one resolution but you can create many. By using this resolutions you can create a nice responsive website which is compatible for all devices. When you will create responsive website do not put any css in style.css which might be changable in any some resolution you can put it on separate file. In the style.css you can only add that css which will be same in any resolutions because browser renders the style.css file as default.

So if you use this queries and methods on proper way you will easily create an nice looking responsive sites. Hope this article will helpful to you and in if you have any question or suggestion about this article you can please comment below or Contact Us anytime.

Good Luck!

How to update database url by using sql query in phpmyadmin?

When we are building site in WordPress there is very important thing is it’s database. When you are moving your website to new host it is very important to change database url also. Changing url in file is very important when we import sql file in phpmyadmin. so there are two steps to do it. first one is by using your code editor and another one is to run sql query. Below Steps will show to the easiest way to change url in database.

Run sql query in phpmyadmin

In the new host after importing sql file in phpmyadmin you just have to run sql query which shown below and you’r done.

UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldsiteurl', 'http://www.newsiteurl') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.oldsiteurl','http://www.newsiteurl');

UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldsiteurl', 'http://www.newsiteurl');

UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.oldsiteurl','http://www.newsiteurl');

Once you run this query your database url update with the new url. See this screenshot which helps you more.

database-url-query

This is the first method from which you can directly replace a url by using sql query in phpmyadmin. Now lets move on to the another method.

Replace old url with new by using code editor

This method is very easy to perform for this you need a code editor. You just need to open sql file in code editor and just replace all the old urls with the new url. Once all the urls is replace you have to import that sql file is in new host and you are done.




Be careful when you are replacing old urls with new you have take care about every symbols and characters specially for newbies. So hope this article may useful for you also if you have any question or comment about this article. you can contact us anytime or comment below.

Cheers