All posts by : FlyThemes

free-themes-banner

Top 20 free WordPress themes of 2014

This year has end so fast now its time to check out some top free WordPress themes. So we have selected top 20 best free WordPress themes which make his stand in WordPress market. Each theme has special in its class and have their attractive look. In this year there has lots of free WordPress themes released but few of them are shining like a star. Lets take a look of them hope you like this.

1) Arcade

arcade


2) SKT Full Width

full-width


3) Moesia

moesia


4) Lensa

lensa


5) Nerocity

nerocity


6) BoldR lite

boldr-light


7) Ex Astris

ex-astris


8) Exclusive

exclusive


9) Dazzling

dazzling


10) RestImpo

restimpo


11) Accesspress Lite

accesspress


12) A InterStellar

interstellar


13) Zenith

zenith


14) Polar Media

polar


15) Folder

folder


16) Thoughts

thoughts


17) MyStile

mystile


18) EBUY

ebuy


19) Shuttershot

shuttershot


20) Uturn

uturn


custom-background

Add custom background in WordPress theme

Custom background is a WordPress feature that allows you to customize background color/image from backend. Custom background gives your blog to a nice look. You can add default color and image. For enable custom background you have to use this function in your function.php file within themeslug_setup() function.

add_theme_support( 'custom-background' );

After using this you can see the background menu option under appearance menu. Make sure you theme header file have body_class() inside body tag and wp_head(); within the head tag like this:

<body <?php body_class(); ?>>

So whenever you can add background color or image this function can generate a style within head tag and it will override your theme stylesheet. Now let me show you some functions which allows you set up default color and image.



Here is the full code:

$custom_bg = array(
	'default-color'          => '',
	'default-image'          => '',
	'default-repeat'         => '',
	'default-position-x'     => '',
	'default-attachment'     => '',
	'wp-head-callback'       => '_custom_background_cb',
	'admin-head-callback'    => '',
	'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $custom_bg);

Hope you like this article. We welcomes your question and comments.
Thanks for reading.

facebook-like-box

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.



meta-boxes

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.

custom-post-type

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.

css3-media-queries

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!

phpmyadmin

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

page-template

How to create page template in WordPress ?

Creating page template is very easy and useful method in WordPress. First of all you need to copy any file and paste it on same folder and rename the file whatever you like then you have to open the file in whichever code editor you used and add the text /* Template Name: About */ . Now when you can see the backend in pages you will got the new template name in page template dropdown. Please follow this screenshot to know better about it.

template

Once you finish this your page template name will appear in WordPress pages like this.

backend-template

You can create as many as templates in WordPress for using different layout pages. Hope this may help you in future.

Good Luck !

post-pagination

WordPress post pagination without plugin

There is lots of developers who actually didn’t know how to use pagination in WordPress posts. So many people are in this field are using plugin for WordPress posts pagination but they didn’t realize that plugin makes website heavy so if pagination can work by using some functions then why should we use plugin so let me tell you that how to use pagination in wordpress post without having any plugin. Lets start with some codes.

1) Use this method for default posts

Use this code into your fucntion.php file

if ( ! function_exists( 'post_pagination' ) ) :
   function post_pagination() {
     global $wp_query;
     $pager = 999999999; // need an unlikely integer

        echo paginate_links( array(
             'base' => str_replace( $pager, '%#%', esc_url( get_pagenum_link( $pager ) ) ),
             'format' => '?paged=%#%',
             'current' => max( 1, get_query_var('paged') ),
             'total' => $wp_query->max_num_pages
        ) );
   }
endif;

After doing this call the pagination function where you want to display the pagination.

<?php post_pagination(); ?>

you have to set post limit from WordPress backend for this you have to go to Settings >> Reading >> Select number of posts you wish to display.

2) Use this method for custom posts

All the methods should be the same but when you are using custom post type you have to use this loop for pagination.

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

query_posts(array(
    'post_type' => 'post', // You can add a custom post type if you like
    'paged' => $paged,
    'posts_per_page' => 10 // limit of posts
));

if ( have_posts() ) :  while ( have_posts() ) : the_post(); 

     // post content goes here...

 endwhile; 

    post_pagination();

 else : 

// no posts found message goes here...

 endif;

By using this you can get pagination for WordPress posts without any plugin and your website will be load free. Hope this tutorial will be helpful to you and if you face any problem or you have any suggestion we welcomes you always.

Good Luck !



How to create custom widget in WordPress ?

Hi guy’s today i am gonna tell you how to create custom widget in WordPress. Widget is a very important part when you are building website in WordPress. Basically WordPress already have some widgets but when we are building the site we needs the more widgets to use in the site so follow these instructions to create widget in WordPress.



Before moving on let me tell you one thing that Please do not create new function for widget it has already present there you just have to add some code within the function and thats it. See the below instructions.

Step 1

Please put these code in your function.php file within this function.

function themename_widget_init()
{
your widget code goes here ..
}

Your widget code will be

register_sidebar( array(
    'name' => __( 'Widget Name', 'themename' ),
    'id' => 'widget_id',
    'description' => __( 'widget description.', 'themename' ),
    'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    'after_widget' => '</aside>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>',
) );

and your done now go to WordPress backend go to widget under appearance you can see the new widget name “Widget Name” you can change name whatever you wish to.

Please see this screenshot

widget

Now you can display this widget anywhere by using this function

<?php dynamic_sidebar('widget-id'); ?>

Hope you like this tutorial if you have any question or comments please fill the form below. We would love to help you anytime.
Good Luck !