SEO became the important part of websites. WordPress comes with the great concept of blog, CMS and with nice SEO support. Although I’m sharing here the some techniques for basic meta for different pages in wordpress to be handled in a common header section upon your page type, content. Here goes my thoughts…

Basically 3 most common part/page used in a wordpress blog/site, where we goes for visit are

single.php for single post
category.php for any type category/term
index.php for blog home/default template for other types

At first we have common meta tags which will be used if not a single post or category page requested. For category page, we taken category title as a meta keyword and titles of posts under the category as a meta description. For single post page, post title as as meta description and post tags are as meta keywords. Finally a common meta key/description for index/home or other requested page. Here goes the code snippet:

<?php
if(is_category()){
    $cat = get_query_var('cat');
    $cmeta_desc = '';
    $cposts = get_posts(array('numberposts' => -1, 'post_type' => 'post', 'category' => $cat));
    if($cposts){
        foreach ($cposts as $ck => $cp) {
            $cmeta_desc .= $cp->post_title.",";
        }
    }
    $cmeta_desc = rtrim($cmeta_desc, ",");
    ?>
    <meta name="description" content="<?php echo $cmeta_desc;?>">
    <meta name="keywords" content="<?php single_cat_title();?>">
<?php
} else if(is_single()) {
    $tags = '';
    $tag_list = wp_get_post_tags($post->ID);
    foreach ($tag_list as $tk => $tag) {
        $tags .= $tag->name.",";
    }
    $tags = rtrim($tags, ",");
?>
    <meta name="description" content="<?php echo $post->post_title;?>">
    <meta name="keywords" content="<?php echo $tags;?>">    
<?php
} else {
?>
    <meta name="description" content="PHP developer, tech savvy, tech blogger, freelancer">
    <meta name="keywords" content="php, mysql, wordpress, codeigniter, web developer, freelancer, web consultant">  
<?php
}
?>

Hope this will give you guys some idea as well as some help in wordpress.

Happy blogging!

We have seen most of the site has favicon which describe the additional information about the site , Addition in the scene it could be logo,company Profile, company production,web site application, and so many .

now how can u do this ? its very simple to do , just u need to add some line’s of code and be ready with small icon image, u can also add animated image in fevicon

add this part in between Section. Please try to use relative icon type like type=”image/ico” for .ico image.

<link rel="shortcut icon" type="image/ico"  href="images/favicon.ico">

now some time this code will not work on most of the Browser like IE old version in this case u can add this line

<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" *gt;

we can use this also for IE:

<!--[if IE]>
<link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<![endif]-->

Finally ConvertICO can help to convert png image to ico image.

Standard size of favicon: 16×16 is the better size for favicon to show in major browsers. Here is a better read about creating a favicon and more : http://www.netmagazine.com/features/create-perfect-favicon

Hope this will help the beginners who just started their journey in web development.

Happy’s coding

WordPress has its own URL rewrite support for custom development. Before starting code, it would be good to visit its codex page here. Though there are many things to know and will take time to understand the whole process, i’m describing here a common scenario for rewriting a URL.

htaccess can be used to rewrite URL’s and good technical knowledge required for that to do that on server, at this point we can use wp rewrite to fullfill our need without editing site’s htaccess file.

Here goes the things: suppose we have a page for news listing like http://example.com/news, and we added a custom field in back-end to choose a news reporter. Now we want a page where news will be listed by reporter. we also need SEO friendly URL like this: http://example.com/news/reporter. In this case if we can take reporter slug from URL like \index.php?pagename=catalog&reporter=john’,we can the get reporter slug and can use for further query.

Normally all rewrite rules map to a file handler (almost always index.php), not another URL.

            add_filter('rewrite_rules_array','wp_insertMyRewriteRules');
            add_filter('query_vars','wp_insertMyRewriteQueryVars');

            // Adding a new rule
            function wp_insertMyRewriteRules($rules)
            {
                $newrules = array();
                $newrules['news/(.*)/?'] = 'index.php?pagename=news&reporter=$matches[1]';
                return $newrules + $rules;
            }

            // Adding the 'reporter' var so that WP recognizes it
            function wp_insertMyRewriteQueryVars($vars)
            {
                array_push($vars, 'reporter');
                return $vars;
            }

This would map news/whatever to the WordPress page ‘news’, and pass along the query var ‘reporter’. You could create a page template for ‘news’, then pick up the value of ‘reporter’ using getqueryvar(‘reporter’).

In above example, first we wrote the rules and added the function, then added function to get it by query var.

Tips:

1. Avoid using query vars like id - use something more unique (like 'reporter') to avoid clashes with WordPress.
2. Don't flush rules on every init! It's bad practice, and will write to .htaccess and call database updates on every page load!
3. WordPress will always flush permalinks whenever you update a post or your permalink structure (simply update your permalinks when you make changes to your code).

Will be back soon with another WP issue

Flexslider become one of the most popular jquery based slider for its lots of options, content based support and also for responsive. I’m gonna here to discuss some key points about running videos with Flexslider which needs to be pointed to avoid JS errors and for smoothness.

For vimeo video, we use froogaloop js file, there is a updated file for this, try to use updated one and always add this JS file at the end of the html file.

For youtube video in firefox browser, sometimes nav arrows don’t show and other css issues, try to use ‘wmode=transparent’ at the end of the iframe src.

Iframe should not be hidden at first by ‘display:none’, this can be in a case that we want a play button to be clicked on this and to play the video, and the iframe is hidden at first. so hidden iframe can cause error like ‘value not an object’ or so on.

Use ‘enablejsapi=1&verson=3′ to use it with youtube player API.

For youtube player API, always try to read first its document(https://developers.google.com/youtube/js_api_reference) and get idea as well as other issues.

To play a youtube video, the easiest and also the dirty! way is to add ‘autoplay=1′ at the end of the iframe src like below:

    $('videiID')[0].src += "&autoplay=1";

We can also use a simple function ‘callplayer()’ to control youtube iframe as shown here(http://jsfiddle.net/g6P5H/) or discussed here(http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html) .

Some useful links about youtube and vimeo API with Flexslider : https://github.com/woothemes/FlexSlider/issues/346#issuecomment-13826530, http://daigo.org/2012/11/learning-flexslider-api

So, above points can reduce your hassle for JS erros or others.

Happy coding!