purabtech.in

how to create wordpress theme from scratch

many people written about creating wordpress theme and using wordpress hooks. Here in this tutorial I will show How to create wordpress theme from scratch.

create wordpress theme from scratch

Here in this tutorial I will show How to create wordpress theme from scratch. I given very detailed steps to create wp theme. You can create wp theme from simple jpg file or PSD file. First choose or create your html template from photoshop. For creating the html template you can refer following screen shots for creating photoshop image. This is very common layout for creating any webpage.

Here for this tutorial I am using following image for creating the wordpress theme.

After creating image in photoshop you need to create the html according to this image. Here I created the one index.html file and style.css file.
You can download the HTML from here:

wp-bluemagic-html

Now we can start creating the wordpress theme.
First create style.css file and in top section copy paste the following code:

/*
Theme Name: wp-bluemagic
Theme URI: purabtech.in/files/
Description: two column, blue color wordpress theme
Author: wordpressapi
Author URI: purabtech.in/files/
Version: 1.0

*/

You can change the information as per your requirement.

For creating the wordpress theme following minimum files are needed in wordpress theme folder.
1.   index.php
2.   header.php
3.   footer.php
4.   sidebar.php
5.   comments.php
6.   functions.php – not necessary
7.   screenshot.png

Here is my html code from index.html file rename that file to base.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Wordpressapi.com - wp-bluemagic</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
 <div id="header">
 <div id="logo">
 <h1><a href="#">wp-bluemagic   </a></h1>

 </div>
 </div>
 <!-- header end -->
 <div id="menu">
 <ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Photos</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Links</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </div>
 <!-- menu end-->
 <div id="page">
 <div id="page-bgtop">
 <div id="page-bgbtm">
 <div id="content">
 <div>
 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
 </div>
 </div>
 <div>
 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
 </div>
 </div>
 <div>
 <h2><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></h2>
 <p><span>September 10, 2009</span><span>Posted by <a href="#">wordpressapi</a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
 <p><a href="#">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">Comments</a></p>
 </div>
 </div>
 <div style="clear: both;">&nbsp;</div>
 </div>
 <!--content end-->
 <div id="sidebar">
 <ul>
 <li>
 <h2>Author Information</h2>
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
 </li>
 <li>
 <h2>Categories</h2>
 <ul>
 <li><a href="#">wordpress </a></li>
 <li><a href="#">wordpress theme</a></li>
 <li><a href="#">wordpress plugins</a></li>
 <li><a href="#">wordpress tips</a></li>
 <li><a href="#">wordpress hacks</a></li>
 <li><a href="#">wordpressapi</a></li>
 <li><a href="#">wordpress tutorials</a></li>
 </ul>
 </li>
 <li>
 <h2>Blogroll</h2>
 <ul>
 <li><a href="#">wordpress.com</a></li>
 <li><a href="#">wordpress.org</a></li>
 <li><a href="#">purabtech.in/files/</a></li>
 <li><a href="#">google.com</a></li>
 <li><a href="#">yahoo.com</a></li>
 <li><a href="#">live.com</a></li>
 <li><a href="#">facebook.com</a></li>
 </ul>
 </li>
 <li>
 <h2>Archives</h2>
 <ul>
 <li><a href="#">march 2010</a></li>
 <li><a href="#">feb 2010</a></li>
 <li><a href="#">january 2009</a></li>
 <li><a href="#">december 2009</a></li>
 <li><a href="#">november 2009</a></li>
 <li><a href="#">september 2009</a></li>
 <li><a href="#">july 2009</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <!-- end #sidebar -->
 <div style="clear: both;">&nbsp;</div>
 </div>
 </div>
 </div>
 <!-- end #page -->
</div>
 <div id="footer">
 <p>Copyright (c) 2010 purabtech.in/files/. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p>
 </div>
 <!-- end #footer -->
</body>
</html>

Now we are going start to create the wordpress theme from html file which we created earlier.

First create the header.php file and copy paste the following code in that file. I taken the top header HTML code from base.html file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
 <div id="header">
 <div id="logo">
 <h1><a href="<?php bloginfo('siteurl');?>/"><?php bloginfo('name');?> </a></h1>
 </div>
 </div>
 <!-- header end -->
 <div id="menu">
 <ul>
 <licurrent_page_item";}?>" ><a href="<?php echo get_settings('home'); ?>">Home</a></li>
 <?php wp_list_pages('title_li=&depth=4&sort_column=menu_order&exclude=827'); ?>
 </ul>
 </div>
 <!-- menu end-->
<!-- end header -->

Create the index.php file and copy paste the following code in that file. I taken the middle or inner part of HTML code from base.html file.

<?php get_header(); ?>
<div id="page">
 <div id="page-bgtop">
 <div id="page-bgbtm">
 <div id="content">
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 <div>
 <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 <p><span><?php the_time('F - j - Y'); ?></span><span>Posted by <a href="<?php the_author_link(); ?>"><?php the_author(); ?></a></span></p>
 <div style="clear: both;">&nbsp;</div>
 <div>
 <p><?php the_content(); ?></p>
 <p><a href="<?php the_permalink(); ?>">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<?php comments_popup_link('COMMENTS', '1 COMMENT', '% COMMENTS'); ?></p>
 </div>
 </div>
 <?php comments_template(); // Get wp-comments.php template ?>
 <?php endwhile; else: ?>
 <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
 <?php endif; ?>
<?php posts_nav_link(' — ', __('&laquo; Newer Posts'), __('Older Posts &raquo;')); ?>
 <div style="clear: both;">&nbsp;</div>
 </div>
 <!--content end-->
 <?php get_sidebar(); ?>
 <div style="clear: both;">&nbsp;</div>
 </div>
 </div>
 </div>
 <!-- end #page -->
<?php get_footer(); ?>

Create the footer.php file and copy paste the following code in that file. I taken the bottom footer HTML code from base.html file.

</div>
 <div id="footer">
 <p>Copyright (c) 2010 purabtech.in/files/. All rights reserved. Design and Developed by <a href="http://www.wordpressapi.org/">wordpressapi themes</a>.</p>
 </div>
 <!-- end #footer -->
<?php wp_footer(); ?>
</body>
</html>

Create the sidebar.php file and copy paste the following code in that file. I taken the only the sidebar HTML code from base.html file. I taken only sidebar div from html and li tags and other widgets will be provided by wordpress admin, so you dont worry about that part.

<div id="sidebar">
<ul>
<?php     /* Widgetized sidebar, if you have the plugin installed. */
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<!-- end sidebar -->

Create the comments.php file and copy paste the following code in that file. I did not taken HTML code or php from base.html file. This is common wordpress comments template. If you are designer then you dont need to worry about comments code. you just need to copy paste the following code into comments.php file

<?php

if ( post_password_required() ) : ?>
<p><?php _e('Enter your password to view comments.'); ?></p>
<?php return; endif; ?>

<h2 id="comments"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>
<?php if ( comments_open() ) : ?>
 <a href="#postcomment" title="<?php _e("Leave a comment"); ?>">&raquo;</a>
<?php endif; ?>
</h2>

<?php if ( have_comments() ) : ?>
<ol id="commentlist">

<?php foreach ($comments as $comment) : ?>
 <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
 <?php echo get_avatar( $comment, 32 ); ?>
 <?php comment_text() ?>
 <p><cite><?php comment_type(_x('Comment', 'noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
 </li>

<?php endforeach; ?>

</ol>

<?php else : // If there are no comments yet ?>
 <p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>

<p><?php post_comments_feed_link(__('<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.')); ?>
<?php if ( pings_open() ) : ?>
 <a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Universal Resource Locator">URL</abbr>'); ?></a>
<?php endif; ?>
</p>

<?php if ( comments_open() ) : ?>
<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>

<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), wp_login_url( get_permalink() ) );?></p>
<?php else : ?>

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

<?php if ( is_user_logged_in() ) : ?>

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

<?php else : ?>

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

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

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

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> <?php printf(__('You can use these tags: %s'), allowed_tags()); ?></small></p>-->

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

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

</form>

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

<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>

Create the functions.php file and copy paste the following code in that file. In this file we are just registering the sidebar widgets, using following function.

<?php
automatic_feed_links();

if ( function_exists('register_sidebar') )
 register_sidebar();

?>

Here is my style.css file. You can create this file as per your theme. We are using the same css which we created for base.html, We just added some of extra code for wordpress theme and img alignment.

/*
Theme Name: wp-bluemagic
Theme URI: purabtech.in/files/
Description: two column, blue color wordpress theme
Author: wordpressapi
Author URI: purabtech.in/files/
Version: 1.0

*/

body {
 margin: 0;
 padding: 0;
 background: #FFFFFF;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #787878;
}

h1, h2, h3 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 color: #32639A;
}

h1 {
 font-size: 2em;
}

h2 {
 font-size: 2.4em;
}

h3 {
 font-size: 1.6em;
}

p, ul, ol {
 margin-top: 0;
 line-height: 180%;
}

ul, ol {
}

a {
 text-decoration: none;
 color: #4486C7;
}

a:hover {
}

#wrapper {
 width: 960px;
 margin: 0 auto;
 padding: 0;
}

/* Header */

#header {
 width: 940px;
 height: 148px;
 margin: 0 auto;
 background: #4169E1;
}

/* Logo */

#logo {
 float: left;
 margin: 0;
 padding-top: 30px;
 color: #000000;
}

#logo h1, #logo p {
 margin: 0;
 padding: 0;
}

#logo h1 {
 float: left;
 padding-left: 80px;
 letter-spacing: -1px;
 text-transform: lowercase;
 font-size: 3.8em;
}

#logo p {
 float: left;
 margin: 0;
 padding: 26px 0 0 10px;
 font: normal 14px Georgia, "Times New Roman", Times, serif;
 font-style: italic;
 color: #FFFFFF;
}

#logo a {
 border: none;
 background: none;
 text-decoration: none;
 color: #FFFFFF;
}
/*img align*/
img.centered  {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 padding: 0px;
 }

img.alignnone {
 padding: 5px 5px;
 margin: 0px 0px 10px 0px;
 display: inline;
 background:#E3E8E0;
 border: 1px solid #C7CFC2;
 }

img.alignright {
 padding: 5px 5px;
 margin: 5px 0px 5px 5px;
 display: inline;
 background:#E3E8E0;
border: 1px solid #C7CFC2;
 }

img.alignleft {
 padding: 5px 5px;
 margin: 5px 5px 5px 0px;
 display: inline;
 background:#E3E8E0;
border: 1px solid #C7CFC2;
 }

.aligncenter {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 10px;
 }

.alignright {
 float: right;
 margin: 0px 0px 10px 10px;
 }

.alignleft {
 float: left;
 margin: 0px 10px 10px 0px;
 }

.wp-caption {
 border: 1px solid #C7CFC2;
 text-align: center;
 background-color: #E3E8E0;
 padding: 4px 0px 5px 0px;
 color:#222;
 }

.wp-caption img {
 margin: 0px 0px 5px 0px;
 padding: 0px;
 border: 0px;

 }

.wp-caption p.wp-caption-text {
 margin: 0px;
 padding: 0px 0px 0px 0px;
 font-size: 11px;
 font-weight: normal;
 line-height: 12px;
 }

/* Search */

#search {
 float: right;
 width: 280px;
 height: 60px;
 padding: 20px 0px 0px 0px;
 background: #4169E1;
 border-bottom: 4px solid #FFFFFF;
}

#search form {
 height: 41px;
 margin: 0;
 padding: 10px 0 0 20px;
}

#search fieldset {
 margin: 0;
 padding: 0;
 border: none;
}

#search-text {
 width: 170px;
 padding: 6px 5px 2px 5px;
 border: none;
 background: #FFFFFF;
 text-transform: lowercase;
 font: normal 11px Arial, Helvetica, sans-serif;
 color: #5D781D;
}

#search-submit {
 width: 50px;
 height: 23px;
 border: 1px solid #89B056;
 background: none;
 font-weight: bold;
 font-size: 10px;
 color: #FFFFFF;
}

/* Menu */

#menu {
 width: 940px;
 height: 49px;
 margin: 0 auto;
 padding: 0;
 background:#4169E1;
}

#menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
 line-height: normal;
}

#menu li {
 float: left;
}

#menu a {
 display: block;
 width: 155px;
 height: 33px;
 padding-top: 16px;
 text-decoration: none;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: bold;
 color: #FFFFFF;
 border: none;
}

#menu a:hover, #menu .current_page_item a {
 background: #659CEF;
 text-decoration: none;
}

#menu .current_page_item a {
 background: #FBFBFC;
 padding-left: 0;
 color: #30476A;
}

/* Page */

#page {
 width: 940px;
 margin: 0 auto;
 padding: 0;
}

#page-bgtop {
 padding: 20px px;
}

#page-bgbtm {
}

/* Content */

#content {
 float: left;
 width: 620px;
 padding: 30px 0px 0px 0px;
}

.post {
 margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
 margin-bottom: 10px;
 padding: 12px 0 0 0px;
 letter-spacing: -.5px;
 color: #000000;
}

.post .title a {
 color: #32639A;
 border: none;
}

.post .meta {
 height: 30px;
 background: #D8E7FE;
 margin: 0px;
 padding: 0px 0px 0px 0px;
 text-align: left;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 font-weight: bold;
}

.post .meta .date {
 float: left;
 height: 24px;
 padding: 3px 15px;
 color: #4A81DE;
}

.post .meta .posted {
 float: right;
 height: 24px;
 padding: 3px 15px;
 background: #4169E1;
 color: #FFFFFF;
}

.post .meta a {
 color: #FFFFFF;
}

.post .entry {
 padding: 0px 0px 20px 0px;
 padding-bottom: 20px;
 text-align: justify;
}

.links {
 padding-top: 20px;
 font-size: 12px;
 font-weight: bold;
}

/* Sidebar */

#sidebar {
 float: right;
 width: 280px;
 padding: 0px;
 color: #787878;
 background: #FFFFFF;
}

#sidebar ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#sidebar li {
 margin: 0;
 padding: 0;
 border-left: 1px solid #E2E2E2;
}

#sidebar li ul {
 margin: 0px 0px;
 padding-bottom: 30px;
}

#sidebar li li {
 line-height: 35px;
 border-bottom: 1px dashed #D1D1D1;
 margin: 0px 30px;
 border-left: none;
}

#sidebar li li span {
 display: block;
 margin-top: -20px;
 padding: 0;
 font-size: 11px;
 font-style: italic;
}

#sidebar h2 {
 height: 38px;
 padding-left: 30px;
 letter-spacing: -.5px;
 font-size: 1.8em;
}

#sidebar p {
 margin: 0 0px;
 padding: 0px 30px 20px 30px;
 text-align: justify;
}

#sidebar a {
 border: none;
}

#sidebar a:hover {
 text-decoration: underline;
 color: #8A8A8A;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
 padding: 20px;
}

#calendar table {
 width: 100%;
}

#calendar tbody td {
 text-align: center;
}

#calendar #next {
 text-align: right;
}

/* Footer */

#footer {
 height: 50px;
 margin: 0 auto;
 padding: 0px 0 15px 0;
 background: #D8E7FE;
 border-top: 1px solid #D3DEF0;
 font-family: Arial, Helvetica, sans-serif;
}

#footer p {
 margin: 0;
 padding-top: 20px;
 line-height: normal;
 font-size: 10px;
 text-transform: uppercase;
 text-align: center;
 color: #A0A0A0;
}

#footer a {
 color: #5389E0;
}

Now wordpress theme is complete. You can upload this whole folder the wp-content/themes directory and activate the theme.

You can download this wordpress theme code form here. Wp-bluemagic

Please write comment for this Post: create wordpress theme from scratch

use captcha code in wordpress registration

So for stopping the automated computer spam we need to use captcha code in wp. in this article i showed how to use captcha code in wordpress registration.

WordPress is becoming very popular for these days. So many people are using wordpress as a CMS and networking website. With wordpress doing registration or commenting on post is so easy. So for stopping the automated computer spam we need to use captcha code in wordpress. in this article i showed how to use captcha code in wordpress registration.

use captcha code in wordpress registration

What is Captcha Code?

CAPTCHA code was created to stop automated computer spam robots from filling out forms, harvesting email addresses, and then sending out countless spam emails.

use captcha code in wordpress registration

The CAPTCHA security image works by asking the website visitor to type in a code they see correctly. A human can do this, but an automated computer program cannot.In wordpress there are so many free wordpress plugins are available. Here in this article I am going to tell you, how to use captcha code in wordpress website.

Captcha (https://wordpress.org/plugins/captcha/)

The Captcha plugin allows you to implement a super security captcha form into web forms. It protects your website from spam by means of math logic, easily understood by human beings. You will not have to spend your precious time on annoying attempts to understand hard-to-read words, combinations of letters or pictures that make your eyes pop up. All you need is to do one of the three basic maths actions – add, subtract and multiply. This captcha can be used for login, registration, password recovery, comments forms. There is also a premium version of the plugin, allowing compatibility with BuddyPress (Registration form, Comments form, “Create a Group” form) and Contact Form 7.

SI CAPTCHA Anti-Spam (https://wordpress.org/plugins/si-captcha-for-wordpress/)

Adds CAPTCHA anti-spam methods to WordPress forms for comments, registration, lost password, login, or all. In order to post comments or register, users will have to type in the code shown on the image. This prevents spam from automated bots. Adds security. Works great with Akismet. Also is fully WP, WPMU, and BuddyPress compatible.

1. Simple CAPTCHA

A CAPTCHA for your comment system to prevent unwanted spams. Prevent automated spams by bots and most important naughty peoples. It’s simple and yet secure.

2. Security Captcha

Prevent registration spam and bots login by adding custom captcha tests in the registration page and/or login page

3. WP Captcha-Free

WP Captcha-Free blocks automated comment spam without resorting to CAPTCHAs. It does so by validating a hash based on time (and some other parameters) using AJAX when the form is posted. Comments posted via automated means will not have a hash or will have an expired hash and will be rejected. Unlike using a captcha, this does not place any burden on the commenter.

4. Raz-Captcha

Prevent registration spam and bots login by adding custom captcha tests in the registration page and/or login page

Featuring 5 different and customizable captcha algorithms with possibility to set your own random characters font, styles, colors background and more

5. Really Simple CAPTCHA

Really Simple CAPTCHA does not work alone and is intended to work with other plugins. It is originally created for Contact Form 7, however, you can use it with your own plugin.

Note: This product is “really simple” as its name suggests, i.e., it is not strongly secure. If you need perfect security, you should try other solutions.

6. WPMU Super CAPTCHA

This plugin was developed primarily for the WordPress Muti-User edition and now works with Buddypress, however it works on the regular single domain version as well. It combats spam bots from flooding you with sign-ups and blog creations and it keeps bots from brute- force attacking your site with the admin username by forcing a visual confirmation CAPTCHA in order to login. Most CAPTCHA systems for WordPress gives you a very templated layout and read-out, many that can be programmed into a bot to bypass. With Super CAPTCHA, you can personalize and control the very way the CAPTCHA is rendered so every site that displays the CAPTCHA will be diffrent, making it so each bot has to be pre-configured, just for your site, in order to achieve a successful attack making Super CAPTCHA the MOST SECURE free anti-spam system available for WordPress.

How to get website loading time in browser

Understanding the website and webpage loading time is very important. You can check the page loading time through javascript code. If you want to get the webpage loading time through javascript. This very easily achievable using javascript. If you want to get the webpage loading time through javascript. This easily achievable using javascript. We have code to get website loading time in browser

How to get website loading time in browser

You just need to use following code in your head tag


var starttime = new Date().getTime();
window.onload=function() {
 var loading_time = new Date().getTime()-starttime;

 alert('Webpage loading time in ' + loading_time + 'ms - milisecond');
}

How to get website loading time in browser

famous photographs that tell different story

We have some pictures, famous photographs that tell different story. When we shoot photo that is all passion. Photography is big and very subject. Check some very nice pictures.

Photography is all about the relationship between light and perspective, and nowhere is this made clearer than in these hilarious two-faced photos, where the subjects and the shadows that they cast tell two (often very different) stories.

photographs that tell different story

flying plane on wire

Perhaps its fate, and one day the couple will be together forever… romantics everywhere can dream, right? Sort of makes you wonder if shadows like this appear for a brief moment throughout your life unnoticed.

How do we protect wordpress admin panel and secure it

WordPress admin security is very important. Many people are always take a shared hosting. we given Information about How do we protect wordpress admin panel. Many people are always take a shared hosting for publishing the wordpress website.

With shared hosting or dedicated you should always think about hack proof wordpress admin panel. So no one can misuse your worepress admin panel. Here in this article I will give you some very nice tips about, how to protect our wordpress admin panel.

protect wordpress admin panel

1. Create very strong password

Always create a very strong password for your admin user. You should add some special characters and numbers in your password. Your password should be 10 digit minimum and not related to your name or surname.

Main important think is dont disclose your password to anyone.

2. Limit wordpress admin access via IP address

You can use the .htaccess file for limiting the wordpress admin panel for specific ip addresses only. Use following code for that.

<files “wp-login.<span=”” class=”hiddenSpellError” pre=”” data-mce-bogus=”1″>php”>
Order Deny,Allow
Deny from all
Allow from Your.IP.Address

allow from 192.168.2.45

</Files>
[/php]

3. Avoid the “admin” Username

You should always avoid the admin username to login. You can easily achieve this. First create another super admin with another name and open your functions.php file from wordpress theme folder and use following code.


add_filter(‘login_errors’,create_function(‘$a’, “return null;”));

There are some very nice plugins also available for providing the wordpress security your wordpress website. Here are few:

http://wordpress.org/extend/plugins/one-time-password/

http://wordpress.org/extend/plugins/semisecure-login-reimagined/

http://www.bad-neighborhood.com/login-lockdown.html

http://wordpress.org/extend/plugins/stealth-login/

how to pull sticky post from wordpress

From wordpress 2.7 version wordpress introduced the new feature called sticky post. Sticky post will give you ability to show the most popular or your favorite post always top of the posts.

Sticky post feature is very nice for wordpress theme developer. Here I will show you how to create sticky post in wordpress.

When you are creating the new post or editing the wordpress post you can choose the stick ths post option. This is very simple way to create the sticky post.

If you want to some good styling to post then use following css code. Just open your style.css file from your template.


.sticky {
 background: #ccc;
 border: 5px solid blue;
}

If you want to show the sticky post in any specific page then use following code.


is_page('sticky page') {
query_posts(array('post__in'=>get_option('sticky_posts')));
}

how to install vim on linux

If you are using linux so you are very much familiar with vim editor. Here I will show how install vim editor on linux box using command line.

Some time when you are doing new setup of server like for linux distribution. There is lot is coming cloud hosting and centos and fedora. My most favorite is fedora.

install vim on linux

If your OS does not have vim then use following command.


[root@siwan]# yum install vim-X11 vim-common vim-enhanced vim-minimal
Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
 * addons: hpc.arc.georgetown.edu
 * base: mirrors.netdna.com
 * extras: mirrors.greenmountainaccess.net
 * updates: mirror.cogentco.com
Setting up Install Process
Package 2:vim-X11-7.0.109-6.el5.i386 already installed and latest version
Package 2:vim-common-7.0.109-6.el5.i386 already installed and latest version
Package 2:vim-minimal-7.0.109-6.el5.i386 already installed and latest version
Resolving Dependencies
--> Running transaction check
---> Package vim-enhanced.i386 2:7.0.109-6.el5 set to be updated
--> Finished Dependency Resolution

Dependencies Resolved

===========================================================================================================================================================================================================
 Package                                             Arch                                        Version                                                 Repository                                   Size
===========================================================================================================================================================================================================
Installing:
 vim-enhanced                                        i386                                        2:7.0.109-6.el5                                         base                                        1.2 M

Transaction Summary
===========================================================================================================================================================================================================
Install      1 Package(s)
Update       0 Package(s)
Remove       0 Package(s)

Total download size: 1.2 M
Is this ok [y/N]: y
Downloading Packages:
vim-enhanced-7.0.109-6.el5.i386.rpm                                                                                                                                                 | 1.2 MB     00:00
Running rpm_check_debug
Running Transaction Test
Finished Transaction Test
Transaction Test Succeeded
Running Transaction
 Installing     : vim-enhanced                                                                                                                                                                        1/1

Installed:
 vim-enhanced.i386 2:7.0.109-6.el5

Complete!

Following are the common commands for doing editing with vim editor.

#vim somefile

some keys

i – for insert the text

escape – going to back

:18 – for going to line no 18

:w – write and save the file

:q! – quit the file, without saving

:wq! – saving and closing the file

shift +g – going to bottom of file

page up – page up

page down – page down

how to change date format in php

We will show, how to change date format in php code. If you want to change the date format and save into mysql database. You can use our php code or script. You can use following php functions.

how to change date format in php

Let say you are getting date in yyyy-mm-dd format and you want to convert that into dd-mm-yyyy format and save into database. so you can use following function.

$timestamp = strtotime(your date variable);
$new_date = date('d-m-Y', $timestamp);

// or use can following code

$new_date = date('d-m-Y', strtotime(your date variable));

// or use can following code

strftime ($time, '%d %m %Y')

How to hide update message from wordpress admin panel

In this article, we given code and shown you. How to hide update message from wordpress admin panel. Some times Admin update message are interpreting on dashboard.

When new wordpress version came. we got a message in wordpress admin panel as follows:

WordPress ….. is available! Please update.

How to hide update message from wordpress admin panel

Many people does not want to see that message or hide this message from wordpress admin panel

Just Open functions.php file from wordpres theme and put following code in that file:


add_action('admin_menu','hide_update_message');
 function hide_update_message()
 {
 remove_action( 'admin_notices', 'update_nag', 3 );
remove_filter( 'update_footer', 'core_update_footer' );

}

This code will run in wordpress and wordpressMU also.

ie9 new features for developers

We are really waiting for IE9 version. IE9 will support more advanced web features than the other latest browsers like google chrome,firefox etc. As per microsoft performance will of internet explorer will increase by 50% at least.

As we know the most recent versions of Internet explorer which is IE7 and IE8 but I say IE7 and IE6 is really pain for web developers.

We are really want to know what is coming new with IE9 version. We have very perfect idea about IE9 and there features. With IE9 I would say micro soft is really ready with fight with Firefox and google chrome.

Here is the List What is new coming in IE9

Javascript:

HTML5:

Graphics:

Above all features are coming in IE9 and all web developers are looking for that change. If you want to test the IE9 features then just visit the following page and download IE9.

IE9 Demo Download

If you want to check the all the IE9 features than visit following URL

http://ie.microsoft.com/testdrive/Default.html

create wordpress theme from scratch

Share Article:

use captcha code in wordpress registration

What is Captcha Code?

Captcha (https://wordpress.org/plugins/captcha/)

1. Simple CAPTCHA

2. Security Captcha

3. WP Captcha-Free

4. Raz-Captcha

5. Really Simple CAPTCHA

6. WPMU Super CAPTCHA

Share Article:

How to get website loading time in browser

Share Article:

photographs that tell different story

Share Article:

protect wordpress admin panel

1. Create very strong password

2. Limit wordpress admin access via IP address

3. Avoid the “admin” Username

Share Article:

how to pull sticky post from wordpress

Share Article:

install vim on linux

Share Article:

how to change date format in php

Share Article:

How to hide update message from wordpress admin panel

Share Article:

Share Article: