Monthly Archives: October 2014

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 !

dropdown

Easy steps to create dropdown menu upto 3 levels

Most of developers who are start learning coding have been facing a lot’s of problem to create dropdown navigation which is very important part of a website. So this tutorial is to them who don’t know how the drop down navigation actually work and how it is very easy to create. So now we can start with HTML code first follow these methods and you will be master in dropdown menu. Creating dropdown menu is very easy as ever before.

Create HTML Code

<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
      <ul>
         <li><a href="#">LevelA</a></li>
        <li><a href="#">Leve1B</a>
           <ul>
              <li><a href="#">Leve2A</a></li>
              <li><a href="#">Leve2B</a>
                 <ul>
                    <li><a href="#">Leve3A</a></li>
                </ul>
             </li>
         </ul>
     </li>
   <li><a href="#">Leve1C</a></li>
  </ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>	

The above code shows you the drop down menu of about us page.Now if your are run this on browser it looks very messy for this we need to create some CSS for setting this up well. So we have to make the dropdown appear below the parent page like we did right in about page so About us page is parent and Level 1, Level 2 etc is a child pages of About us page.



Find below CSS to make the stylish drop down and it works fine with that parent page. Sometimes peoples create dropdown but they actually didn’t know that how to make child pages related to that parent and it should appear below to the parent. So this CSS will help you to how does it work.

Style to Naviagtion

/* — Set up main naviagtion —- */
ul{
  margin:0;
  padding:0;
  list-style:none;
}

ul ul{
  display:none;
}

ul li{
  float:left;
  font:14px arial;
  position:relative;
}

ul li a{
  text-decoration:none;
  color:#ffffff;
  background-color:#000000;
  padding:10px 12px;
}

ul li a:hover{
background-color:#999999;
}

/* —– Level 1 —-*/
ul li:hover ul{
  display:block; 
  position:absolute;
  width:100px;
  background-color:#000000;
  margin-top:10px;
}

ul li:hover ul li{
float:none;
padding:10px 0;
}

ul li:hover ul li:hover{
  background-color:#999999;
  position:relative;
}

ul li:hover ul li a{
  background-color:transparent;
}

/* —– Level 2 —-*/
ul li:hover ul li ul{
  display:none;
}

ul li:hover ul li:hover ul{
  display:block;
  position:absolute;
  left:100px;
  top:0;
}

/* —– Level 3 —-*/
ul li:hover ul li ul li ul{
  display:none !important;
}

ul li:hover ul li ul li:hover ul{
  display:block !important;
  position:absolute;
  left:100px;
  top:0;
}

Hope this tutorial may be helpful to you and if you have any question or comments about this you can please fill this form below. I would like to help you anytime.
Good Luck !