All posts by : FlyThemes

How to make a beautiful website with Professional WordPress Themes

WordPress is best because it has created both the needs and the solution to the website customization problem. A thriving community of programmers has emerged, resulting in a diversity of plugins and themes that can make any website be a success.

In Professional WordPress theme is a collection of templates and stylesheets used to define the appearance and display of a WordPress powered website.

Simple and easy steps to make a website;

1) Right platform

Content management system (CMS) in simple terms, is a platform of sorts or a mechanism which permits you to create your content and publish it on a website.

WordPress

WordPress is the easiest and most powerful blogging and website content management system (or CMS) in existence today. The ideal option for someone who’s creating his or her first website. It has considerable scalability and works well with low and medium traffic websites. Millions of views every month are received by us and we run WordPress, so that gives you an idea of what medium traffic constitutes if you were wondering.

WordPress is the best choice as it offers excellent customizability even to WordPress newbies.

WordPress is the best because of;

  • Open source
  • Easy and simple
  • Secure
  • Multi Support
  • SEO friendly
  • Free themes and plugins

Once you choose the best platform you can proceed with

2) Domain name

The next step in our process involves choosing a domain name. A domain is your address. It’s how people on the internet will find you. A domain name is used for finding and identifying computers on the Internet. The domain name can be any combination of letters and numbers, and it can be used in combination of the various domain name extensions, such as .com, .net and more. the domain names hide the really technical IP address which most viewers aren’t interested in.

Getting the right domain name is very important. Things to keep in mind before choosing a domain name :

  • Concise
  • Indelible
  • Captivating
  • Straightforward

3) Finding a Host

Web hosting is a service that allows organizations and individuals to post a website or web page on the Internet. Websites are hosted or stored, on special computers called servers. When Internet users want to view your website, all they need to do is type your website address or domain into their browser. User computer will then connect to your server and your web pages will be delivered to them through the browser.

The technologies and services needed for the website or web page to be viewed on the Internet are provided by the web hosting service providers.

Types of hosting

Free web hosting

Email services – Free web hosting provider provides you with email services – so that you can setup @yourdomain.com email accounts. The email service should also include POP3 and SMTP access so you can setup and access your @yourdomain.com emails using your mobile devices.

Provides free website creating application where you can create your website simply by choosing a template and adding in your own text and images.

Free storage space allocated to store your website files, including text, images, audio, etc.

Shared hosting

It allows multiple websites to utilize a single server. Usually, you’ll have no idea who or what websites you’re sharing the resources of a server with.

Advantages of shared hosting :
  • Cheapest hosting option you’re going to have available.
  • You can upgrade your hosting package with time. This makes shared hosting a great place to
  • Easy to manage your site.
  • No technical maintenance
Dedicated server

A dedicated server is typically a rented service in web hosting business. The user rents the server, software and an Internet connection from the Web host. It provides a stated amount of memory, hard disk space, and bandwidth. Use of a dedicated server on the premises of web hosting companies saves router, Internet connection, security system, and network administration costs.

4) Configuration

WordPress Installation

We have everything needed to create WordPress website. We have domain name and active hosting account. The next step is to install WordPress to create business WordPress website.

Search for WordPress and click Install button.

Once installed it asks you to add Username and Password.

Use easy to use and hard to crack credential. Please make a note if you find it difficult to remember. We will need to login to WordPress admin area .

WordPress configuration.

Change Title, Tag line & Modify general settings

  • Login to your WordPress admin (YourDomain/wp-admin)
  • Click Settings from left navigation panel
  • On right section you will see a page where you can edit the information.
  • Site Title: Add the text that describe what your site is about.
  • Tagline: Short online statement about your business.
  • Membership: Uncheck the box. You wouldn’t need any visitor to register on your website.
  • Date Format: Choose your preferred date format. WordPress will use this format to show you date in various places.
  • Time Zone: Choose your preferred time zone.
Steps to find best free WordPress themes
  • Login to your WordPress admin area
  • Click Appearance from left navigation menu.
  • Click Themes from Appearance menu.
  • Click Add Themes on the page.
  • Now click on the popular tab.
  • You will see a long list of popular themes. You see the theme preview as an image on list.
  • Surf through the list of themes. Install a theme you like the most.
  • After installing the theme, you will see an Activate button. Press the activate button. Activate theme to use it.
  • Install all plugins suggested by theme.
Adding content

The content is the most important part of your website. Content is independent of a theme. Many WordPress users have existing content, and installing a theme that creates additional content is very undesirable. you need to produce content that genuinely offers value to would be readers. If you are creating your site purely for monetary purposes, it will be unsuccessful in the long run.

There is an art to writing great content, organizing your pages and using great images. Deficient content and images will make the difference between an amateur site and a professional one.

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


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.

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

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 !

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 !