How to customize the comments template or wp_list_comments()

In single.php file we have function to add comments functionality. Here in this article I will give the code for customize the comments template.

From wordpress 2.7 version we got the functionality of changing or customizing the comments template as per your theme. As we all know in single.php file we called following function to add comments functionality. wordpress comments is very important functionality. Here in this article I will give the code for customize the comment template.

customize the comments template


<?php comments_template(); ?>

This function basically calls the comments.php file and add the data from wordpress database.

If we check the comments.php file. Usually we are having following content in comments.php file

[viral-lock message=”Solution code is Hidden! It’s Visible for Users who Liked/Shared This article on Facebook or Twitter or Google+. Like or Tweet this article to reveal the content.”]


<?php

// Do not delete these lines
 if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
 die ('Please do not load this page directly. Thanks!');

 if ( post_password_required() ) { ?>
 <p>This post is password protected. Enter the password to view comments.</p>
 <?php
 return;
 }
?>

<!-- You can start editing here. -->
<div id="comment">
<?php if ( have_comments() ) : ?>
 <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

 <div>
<div><?php paginate_comments_links(); ?></div>
 </div>

 <ol>
 <?php wp_list_comments('callback=wordpressapi_comments'); ?>

 </ol>

 <div>
<div><?php paginate_comments_links(); ?></div>
 </div>
 <?php else : // this is displayed if there are no comments so far ?>

 <?php if ('open' == $post->comment_status) : ?>
 <!-- If comments are open, but there are no comments. -->

 <?php else : // comments are closed ?>
 <!-- If comments are closed. -->
 <p>Comments are closed.</p>

 <?php endif; ?>
<?php endif; ?>

<?php if ('open' == $post->comment_status) : ?>

<div id="respond">

<h3><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h3>

<div>
 <small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>

<?php endif; // If registration required and not logged in ?>
</div>

<?php endif; // if you delete this the sky will fall on your head ?>
</div>

In the comments loop for showing the comments we used the wp_list_comments() function. Use this for customize the comments template.

We can customize this function as per our requirement. We can pass the following parameters to this function. use following for customize the comments template.


[/viral-lock]

For customize the comments template following parameter is important.

callback (string) The name of a custom function to use to display each comment. Defaults to null. Using this will make your custom function get called to display each comment, bypassing all internal WordPress functionality in this respect. Use to customize comments display for extreme changes to the HTML layout. Not recommended.

In my theme I used that in following way. I changed and passed parameter in comments.php file.


<?php wp_list_comments('callback=wordpressapi_comments'); ?>

Then Open the functions.php file put following code in that. This code I am using as per wordpress api.


function wordpressapi_comments($comment, $args, $depth) {
 $GLOBALS['comment'] = $comment; ?>
 <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
 <div id="comment-<?php comment_ID(); ?>">
 <div>
 <?php echo get_avatar($comment,$size='32',$default='<path_to_url>' ); ?>
 <?php $user_name_str = substr(get_comment_author(),0, 20); ?>
 <?php printf(__('<cite><b>%s</b></cite> <span>says:</span>'), $user_name_str) ?>
 </div>
 <?php if ($comment->comment_approved == '0') : ?>
 <em><?php _e('Your comment is awaiting moderation.') ?></em>
 <br />
 <?php endif; ?>

 <div><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),&nbsp; get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'&nbsp; ','') ?></div>

 <?php comment_text() ?>

 <div>
 <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
 </div>
 </div>
<?php
 }

Many times some people add the full URL of website in the name parameter. That time showing author name of comment writer is looks so ugly. So I used following trick in this function. Using this line of code we can show only 20 characters of author.


<?php $user_name_str = substr(get_comment_author(),0, 20); ?>
 <?php printf(__('<cite><b>%s</b></cite> <span>says:</span>'), $user_name_str) ?>

I changed the this function as per my choose. You can customize this function as per your theme requirement.

customize the comments template
customize the comments template

If you found any issue in this article “customize the comments template” about this. please write comments.

 

wordpress migration to new hosting service or domain

how to do wordpress migration to new hosting service – This question always came to web developers. After searching on Internet I really did not found satisfied answer for this question. Using our steps wordpress migration to new hosting service or domain made easy

wordpress migration to new hosting service or domain

Earlier I did wordpress migration to new hosting service or new domain so many times. It was like 5 minutes job for any web developer. Don’t be afraid about wordpress migration at all.

Many people suggest to use wordpress utility which import and export xml. This is given by wordpress itself. But I strongly say don’t use that tool. that is not really full proof.

Just follow my steps to do wordpress migration to new hosting or domain.

1. First take backup of file system of your wordpress website using FTP credential.

2. Open wp-config.php file and change database name(what you want)

3. wp_options -Table name
option_name column – change(siteurl and home)

4. wp_blogs- Table name
domain column – change to your domain name

5. wp_site- Table name
domain column – change to your domain name

6. wp_usermeta
meta_key column – change(source_domain)

Most important part of migration. Fixing the image path of wordpress website

7. Just run following query using phpmyadmin or command prompt and any sql editor.

UPDATE wp_posts SET post_content = REPLACE(post_content, ’NEW_DOMAIN.com’, ‘OLD_DOMAIN.com’);

For changing the mysql queries you can use the following URL:

https://purabtech.in/mysql-queries-wordpress-website-migration/

Follow above steps and your are done with migration.

wordpress migration to new hosting service or domain
wordpress migration to new hosting, question always came to web developers. Using our steps wordpress migration to new hosting service or domain made easy

That sit!

wordpress create archive page for wordpress theme

Given code for wordpress create archive page for wordpress theme. search engine sites will look for two main file. First sitemap.xml file and archive page. First I would say somthing about archive page in any website. Archive page is very important for SEO purpose.

Create an Archive Page in your WordPress theme

If you do not having archive page in your website so you are lacking somewhere in SEO for your website.  What I am going to show in this article, How to create the archive page for worpdress theme or website.  In wordpress creating the archive is very easy.

Follow my steps to create the archive page in wordpress site.

  • Open your wordpress theme folder and copy the single.php as named archive.php
    Note: dont copy index.php file as archive.php. It may have different UI and programming attribute in index.php.
  • Then copy archive.php as archive_template.php new file.
  • Open the archive_template.php file and copy paste the following code in top of file.
<?php
/*
Template Name: Archives Page
*/
?>
  • Again open the archive_template.php file and find the post loop. Between the loop copy past the following code.
<h1> All Archives in dropdown</h1>
<select name="archive-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
 <option value=""><?php echo attribute_escape(__('Select Month')); ?></option>
 <?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>

<br><br>
<h1> All category</h1>
<ul><?php wp_list_cats('sort_column=name&optioncount=1') ?></ul>

<br><br>
<h1> All Archives</h1>
<ul><?php wp_get_archives('type=monthly&show_post_count=1') ?></ul>

Above code will give you the archive with dropdown and archive with category name with post count and archive with month and post count.

  • After doing this upload two new files to server in wordpress theme folder (archive.php and archive_template.php).
  • Go to your wordpress Admin panel using browser
  • Create the new page with title “Archive” and put some information about your website in that page.(Dont publish the page wait and follow next steps.)
wordpress create archive page for wordpress theme
wordpress create archive page for wordpress theme
  • Check the template section (right side under attribute section). Choose archive page as template and publish and save the page.

That sit. You are able to see the archive page for your website.

How to get first category name or id from wordpress post

Many people want to know about post category and know more information current category. Some time we need to use the first category of wordpress post. As we know we can define the multiple category to single article. So if we want retrive the wordpress category then we will get the result in simple php array format. Using that array we can easily extract the first category of post.

if we want first category than, we will get result in php array format. Using that array we can easily get first category name or id from wordpress post.

How to get first category name or id from wordpress post

In this post I will show how we can achieve that. Using following code we can get the first category ID.

< ?php
$category = get_the_category();
$currentcat = $category[0]->cat_ID;
?>

Using following code we can extract the first category name from the wordpress post.

< ?php
$category = get_the_category();
$currentcat = $category[0]->cat_name;
?>

Above code we can use only in the loop but using the following code we can extract the category
outside the loop also

<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
global $post;
$categories = get_the_category($post->ID);

$currentcat = $category[0]->cat_ID;
?></pre>
<pre>

same like that.. cat name

 <!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
 global $post;
 $categories = get_the_category($post->ID);

$currentcat = $category[0]->cat_name;
 ?>

</pre>
<pre>
How to get first category name or id from post
How to get first category name or id from post

how to add google connect to your wordpress site

Many people want to add google connect to your wordpress site. But they don’t know how to achieve that.  In this article I am going to show you the step about adding the google connect to your site.

how to add google connect to your wordpress site

Google friend connect is the best feature to add in your site and increase your blog visits.

First go following URL:

http://www.google.com/friendconnect/home/

login to google friend connect.

how to add google connect to your wordpress site
how to add google connect to your wordpress site

Click on get started button and login with your gmail account.

Then click on ‘Set Up A New Site’ button.

Fill your website URL and information in form and click on next button.

After that you will get the congratulation window.

how to add google connect to your wordpress site
how to add google connect to your wordpress site

Then you will get the configuration page for google connect and you should choose colors and text color settings as per your website. Dont forget to choose or set the width of widget.

Finally click on “generate code” button and you will get the google connect code for your wordpress website.

how to add google connect to your wordpress site
how to add google connect to your wordpress site

Note: This javascript code will never run in test machine. If you want to see the google connect widget then put javascript code in production or live website.

how to add tag cloud to wordpress theme

WordPress tags and tag cloud is important part in wordpress theme. Here in article given code to add tag cloud to wordpress theme. Tag cloud good for SEO.

I will give so much credit to tags and tag cloud because SEO prospective tag are important.

how to add tag cloud to wordpress theme

What is a tags and Tag cloud?

This is the process of adding keywords which link directly to a site that monitors and allows search of key tags to find information on websites and blogs.

Tag cloud are also same but that will attract the users and give more information about topics which write in your blog. Keep this in mind tag are really important for SEO.

In this article I will show how to create the beautiful tag using wordpress api.

In your template you will found the single.php and page.php or index.php files in that file, You are already using some loop for fetching the posts. In that loop just put following code for displaying the tags.


the_tags( $before, $separator, $after );

<php the_tags();?>

Now comes interesting part,  adding a tag cloud to your sidebar or footer.

Using following code you can display the tag could but don’t put following code in any loop.


<!--?php wp_tag_cloud('smallest=8&largest=22'); ?-->

If you want to show tag cloud more interesting than use my code in your style.css file.


.tags{
 clear:both;
 background:#FAFAFA bottom;
 margin:10px 0 10px;
 padding:12px 10px 15px 10px;
 -moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
 width:auto;
 margin-bottom:5px;
 width:304px;
 border:1px solid #cfdcc7;
}

.tags a:link,.entry a:visited {
 font-weight:normal;
 color:#356BB2;
}
.tags a:hover {
 background:#356BB2;
 color:#fff;
 font-weight:normal;
 text-decoration:none;
}

Your tag cloud will look like..as follows.

how to add tag cloud to wordpress theme
how to add tag cloud to wordpress theme

you can pass following param to tag_cloud function.


More help full function tag related as follows:

the_tags, tag_description, single_tag_title, wp_tag_cloud, wp_generate_tag_cloud, get_tags, get_the_tags, get_the_tag_list, get_tag_link

You can visit the pages and check the details.

Free WordPress Video Tutorials for Beginner and experts

WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability. WordPress is both free and priceless at the same time.

Free WordPress Video Tutorials for Beginner and experts

WordPress is growing very rapidly because of SEO friendly URL and best admin features… free plugins and themes… There are so many companies are working on only wordpress. There are so many new developers and designers want to jump in wordpress world. So many big and small firm are asking bout wordpress custom development.

In this post I am going to write about few nice wordpress video tutorials:

WordPress Training

Free WordPress Video Tutorials for Beginner
Free WordPress Video Tutorials for Beginner

Training Index

This is an index of the core WordPress training videos grouped by functional area.

Blogging with WordPress

Configuring WordPress

Customizing WordPress

Installation and Upgrades

WordPress Administration

killersites (I specially recommend this site for learning the wordpress)

Free WordPress video tutorials for beginners - Killersites.com_1266309046001
Free WordPress Video Tutorials for Beginner

This 12 video course, takes someone with just beginners HTML and CSS skills, through the steps needed to build a WordPress template from scratch.

Check out our WordPress Themes Tutorial now.

css-tricks.com

Free WordPress Video Tutorials for Beginner
Free WordPress Video Tutorials for Beginner

Part One: Download, Install, “Reset” Theme

Video Page
Direct Video Download (.mov)

Part Two: Structure

Video Page
Direct Video Download (.mov)

Part 3: Finishing Touches, Extra Stuff

Video Page
Direct Video Download (.mov)

ithemes.com

Free WordPress Video Tutorials for Beginner
Free WordPress Video Tutorials for Beginner

GENERAL ITHEMES TUTORIALS

NEW! WORDPRESS 2.8 TUTORIALS

WORDPRESS 2.7-8 TUTORIALS

iTHEMES THEME TUTORIALS

  • First Steps – Installing WP and activating your theme
  • How to change Featured Images (Rotating photos feature)
  • How to adding/removing Page items to your menu navigation (Menu Builder)
  • How to set Contact Form Page Template (if applicable)
  • How/where to include your Google Analytics or statistics tracking code
  • Basic Search Engine Optimization tips
  • How to use Billboard ad plugin

NEW! 7 STEPS TO OPTIMIZING WORDPRESS

  1. Change your permalinks structure
  2. Install these plugins
  3. Include your main keywords in your title bar
  4. Put in your meta tags
  5. Paste your email newsletter form code here
  6. Write good headlines for search engines
  7. Study your traffic stats to refine your strategy

THEME TUTORIALS

NEW! ADDINGTON THEME (Theme Demo)

NEW! JENKS THEME (Theme Demo)

iCOMPANY THEME (Theme demo)

ECOMMERCE THEME (Theme demo)

ESSENCE THEME (Theme demo)

You can find the wordpress tutorials on Vimeo.com and youtube.com also.. the huge number of videos you can find on Vimeo.com..

add selected pages in wordpress menu

In this tutorial I will show you how to show the only selected pages in menu. add selected pages in wordpress menu using our code sample. which can be added.

add selected pages in wordpress menu

add selected pages in wordpress menu
add selected pages in wordpress menu

Normally when we are creating wordpress theme for showing the pages we code as follows

<?php 
wp_page_menu('show_home=1&amp;menu_class=page-navi&amp;sort_column=menu_order'); 
?>

As per this code all pages will get displayed in menu. For showing selected pages check the page id.

and then use following code.

<?php
 wp_page_menu('show_home=1&amp;include=5,9,23&amp;menu_class=page-navi&amp;sort_column=menu_order'); 
?>

You are able to see the I added the include parameter in wordpress method. Your selected page id you need to just put there with comma separated.

Put this code in your header.php file for showing the menu. Only selected pages will be shown on wordpress menu.

How to use is_page conditional in wordpress

Many people some another content or code need to add in specific pages. WordPress tutorial for, How to use is_page conditional in wordpress.

use is_page conditional in wordpress

How to use is_page conditional in wordpress
How to use is_page conditional in wordpress

In that senorio use should use the is_page condition in page.php file. This file you will find in active wordpress theme folder.

You can use is_page condition in multiple way. Following are the some examples

is_page();
// When any single Page is being displayed.

is_page(42);
// When Page 42 (ID) is being displayed.

is_page(‘Contact’);
// When the Page with a post_title of “Contact” is being displayed.

is_page(‘about-me’);
// When the Page with a post_name (slug) of “about-me” is being displayed.

is_page(array(42,’about-me’,’Contact’));
// Returns true when the Pages displayed is either post ID 42, or post_name “about-me”, or post_title

Note: You can use above condition in only page.php file.