Wordpress Themes – Page 8

how to add thank you message after wordpress comments

Saying thank you is always good manners. In article, i have code for, add thank you message after wordpress comments after adding comments added by users. I got the same request from many of clients for adding the thank you message after putting comments after by the user who comes to site.

It was good to have this functionality. User will remember your site and you should send the thank you email to user for adding the comment to your wordpress website. For professional sites, it is very great functionality.

add thank you message after wordpress comments

In this article I will show how to add custom message after getting comments from users. For this we going use the wordpress api. WordPress filters are very useful. You can find all wordpress hooks and filters in wp-includes/default-filters.php file.

Method First

add_filter('comment_post_redirect', 'redirect_after_comment');
function redirect_after_comment($location){
    $newurl = substr($location, 0, strpos($location, "#comment"));
    return $newurl . '?c=y';
}

if($_GET[ 'c' ] == 'y'){
      echo 'Thank you your comemnt';
}

Open your functions.php file from your active wordpress theme folder. copy paste the following code in that file. This is very simple trick but still it is really useful.

Method Second

For this method you need to create the “Thank you” page in wordpress site than open functions.php file and put following code in that file.


// Redirect to thank you post after comment
add_action('comment_post_redirect', 'redirect_to_thank_page');

function redirect_to_thank_page() {
return 'https://purabtech.in/thank-you';
}

Note: do not forget to change your URL thank you URL from code. Above code will work in new wordpress versions.

add thank you message after wordpress comments

how to add a favicon to your wordpress site

In this tutorial we will show, how to add a favicon to your wordpress site, If you want to add the favicon image in your wordpress website that is really easy.

First use any photo editing tool like photoshop or gimp for creating the favicon image.

how to add a favicon to your wordpress site

To create the favicon image you should follow following rules

By cropping or adding space around the image, make the image square.
Resize the image to 16 x 16 pixels.
Save the file as favicon.ico

Open your active wordpress theme and put favicon.ico image file in that folder or using ftp client you can put favicon.ico file in theme folder. After coping the favicon image file in theme folder. Open your header.php file from wordpress theme folder. and Put following code in that file.

 <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />

Dont forget to put above code under head tag. Now your are set and changed the favicon from your wordpress site. To see the new favicon image you should clear your browser cache.

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

how to register multiple sidebar in wordpress

Many wordpress developers and PHP developers who are new in to wordpress development. They really searching for how to add a dynamic or multiple side in wordpress theme. many sidebar or widget are very important to add in any wordpress theme for seo purpose also so you can add the widgets using our code sample.

register multiple sidebar in wordpress

Many wordpress developers got requirement to add separate sidebar for each page or any specific page and that sidebar need to be controlled by wordpress admin.

In this tutorial I will show you how to simply add the multiple or dynamic sidebar to wordpress theme. I really think creating the or putting separate css and options in the sidebar and admin has no control over the sidebar.

Just use my code to create the multiple sidebar in wordpress theme. This following function is provided by wordpress api only. Open your functions.php file from your wordpress theme folder


<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
 if(function_exists('register_sidebar'))
 register_sidebar(array(
 'name' => 'Home Page', // The sidebar name you can choose as per your choice to register
 'before_widget' => 'PUT YOUR OPENING CSS DIV AND CSS CLASSES AND IDS HERE',
 'after_widget' => 'CLOSE THE DIV',
 'before_title' => '<h2>',
 'after_title' => '</h2>',
 ));
?>

This is sample code for multiple pages your can use following code:


<!--?<span class="hiddenSpellError" pre="" data-mce-bogus="1"-->php
     // Home Page sidebar
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'Home Page',
          'before_widget' => 'PUT YOUR OPENING CSS DIV AND CSS CLASSES AND IDS HERE',
          'after_widget' => 'CLOSE THE DIV',
          'before_title' => '<h3>',
          'after_title' => '</h3>',
     ));
     // Blog Page sidebar
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'Blog Page',
          'before_widget' => 'PUT YOUR OPENING CSS DIV AND CSS CLASSES AND IDS HERE',
          'after_widget' => 'CLOSE THE DIV',
          'before_title' => '<h3>',
          'after_title' => '</h3>',
     ));
     // Contact us Page sidebar
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'Contact Page',
          'before_widget' => 'PUT YOUR OPENING CSS DIV AND CSS CLASSES AND IDS HERE',
          'after_widget' => 'CLOSE THE DIV',
          'before_title' => '<h3>',
          'after_title' => '</h3>',
     ));
     // About us Page sidebar
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'About us',
          'before_widget' => 'PUT YOUR OPENING CSS DIV AND CSS CLASSES AND IDS HERE',
          'after_widget' => 'CLOSE THE DIV',
          'before_title' => '<h3>',
          'after_title' => '</h3>',
     ));

?>

Here is Big question, How can you call the different sidebars and manage it. Go to wordpress admin and you will find and four side bars present in widgets sections as per this code. You can just drag and drop the widgets as your choice.

Open your sidebar.php file put following code in that file.

<?php
is_page('Home Page') {
     if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Home Page')) :
     endif;
}
?>

how to register multiple sidebar in wordpress

You can use the following type of code in your sidebar.php file as per your condition. If you have any issues get back to me.

How to show recent posts without wordpress plugin

When we are work with wordpress theme. So many times we want to show recent posts without wordpress plugin in wordpress theme. Many people suggest to use wordpress plugin for showing the recent post.

How to show recent posts without wordpress plugin

But I suggest not to use any wordpress plugin for showing the recent posts in wordpress theme.

In this tutorial I will tell very simple technique to show recent posts. Following code you can use in your sidebar.php or in footer.php or anywhere as per your theme requirement.

Just put following code in your theme file. You just need to change the showposts count as per choice.


<?php
 $recent_posts = new WP_Query('showposts=15');
 while ($my_query->have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>

Your recent post will look this. You just need to customize css as per your wordpress theme.

show recent posts without wordpress plugin

create 404 page in wordpress theme with classic design

Many wordpress theme developer when create new wordpress theme, they need to think about 404 page must. In this article I going to give you information about how to create 404 page in wordpress theme with classic design.

create 404 page in wordpress theme

What is 404 page?

The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested. 404 errors should not be confused with “server not found” or similar errors, in which a connection to the destination server could not be made at all. Another similar error is “410: Gone”, which indicates that the requested resource has been intentionally removed and will not be available again. A 404 error indicates that the requested resource may be available in the future.

I recommend to wordpress theme developer create customize 404 page in wordpress theme. Go to google custom search engine page and get google search engine code for your website from following URL:

http://www.google.com/cse/

Use following code creating the 404 page in wordpress theme.


<?php get_header(); ?>

<?php get_sidebar(); ?>

<div class="text" style="padding:50px 0 0 150px; ">

<img src="<?php bloginfo('template_url'); ?>/images/octocat_happy.gif">
<h1 class="title">Page Not Found</h1>
<p>We are sorry about!</p>
<p>Please try search again from here:</p><br>

<form action="http://images.purabtech.in/search-result/" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-4949877136251097:p4u7h8-3y7v" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="25" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

</div>

<?php get_footer(); ?>

I used here my websites search engine code. Dont forget to change the google search engine code as your web site.

404-error-pages-for-your-website-7 create 404 page in wordpress theme — create 404 page in wordpress theme

The 404 or Not Found error message is an HTTP standard response code indicating that the client was able to communicate with the server but the server could not find what was requested. 404 errors should not be confused with “server not found” or similar errors, in which a connection to the destination server could not be made at all. Another similar error is “410: Gone”, which indicates that the requested resource has been intentionally removed and will not be available again. A 404 error indicates that the requested resource may be available in the future.

fetch wordpress posts which starting with specific word or alphabet

If you want to fetch wordpress posts which is starts with specific word or alphabet. That is really easy to achieve in wordpress.

Article for fetch wordpress posts which starting with specific word.

Just follow my steps:

Open your functions.php file from your wordpress theme folder.


add_action( 'posts_where', 'starting_word' );
function starting_word( $sql ){
 global $wpdb;
 $starting_word = get_query_var( 'starting_word' );

 if( $startswith ){
 $sql .= $wpdb->prepare( " AND $wpdb->posts.post_title LIKE %s ", $starting_word.'%' );
 }

 return $sql;
}

Open your index.php file or any file where you want show the wordpress posts which is starting with specific word or alphabet.

Use following code in that file.


<?php  query_posts('paged='.$paged.'&starting_word=wordpressapi&category_name=Your Category&posts_per_page=10'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a>

<br />
<?php the_content(); ?>
<?php endwhile; ?>

fetch wordpress posts which starting with specific word

How to create photo gallery in wordpress

Creating a photo gallery is very good idea in any websites because photos say more than text.

So many people create very nice photo galleries in wordpress. Still some people does know how to create a photo gallery using wordpress website.

How to create photo gallery in wordpress

In this article I will give you idea about how to create the photo gallery.

1. NextGEN Gallery

Download

2. Page Flip Image Gallery

Download

3. Image Gallery Reloaded

Download

4. Random image gallery with light box

Download

Best free black WordPress Themes – Dont miss it

So many people like black color. They looking for black and white WordPress themes. We like black themes. Here List of best free black wordpress themes, Black color is always loved by people so here I collected the very nice wordpress themes which are black.

If we kept black color in background then web page will become more attractive as graphic designers are says. I specially like black wordpress themes.

Best free black WordPress Themes – Dont miss it

Here in this article I will give information about some really cool Black WordPress themes.
1. Michael Jackson 1.0

Demo | Download

2. Revision 1.0

Demo | Download

3. Join Me 1.0

Demo | Download

4. Photo Portfolio 1.0

Demo | Download

5. Randy Candy

Demo | Download

6. Piano Black

Demo | Download

7. Dragonskin

Demo | Download

8. The Scenery

Demo | Download

9. Dreamline

Demo | Download

10. Beardsley

Demo | Download

11. Easy Black WordPress Theme

Demo | Download

12. FMulti WordPress Theme

Demo | Download

13. BlacknBlue WordPress Theme

Demo | Download

14. Darkened Waters WordPress Theme

Demo | Download

15. Hemingway WordPress Theme

Demo | Download

10 best free portfolio wordpress themes

When I started the Blogging, First I started about Portfolio WordPress theme. I got so many wordpress themes but I was looking for only portfolio wordpress themes.

I found portfolio wordpress themes but that most of all are paid portfolio wordpress themes. we have a collection of best free portfolio wordpress themes.

free portfolio wordpress themes

I got very super classic portfolio wordpress themes but that most of all are paid wordpress themes.

Here in this article I am going to tell you about best portfolio wordpress themes.

You can use for your portfolio and for your website. All themes are free to download and you can view the demo also.

1. Fotofolio

Demo | Download

2. Modfolio

add thank you message after wordpress comments

Share Article:

how to add a favicon to your wordpress site

Share Article:

create wordpress theme from scratch

Share Article:

register multiple sidebar in wordpress

Share Article:

How to show recent posts without wordpress plugin

Share Article:

create 404 page in wordpress theme

Share Article:

Article for fetch wordpress posts which starting with specific word.

Share Article:

How to create photo gallery in wordpress

Share Article:

Best free black WordPress Themes – Dont miss it

Share Article:

free portfolio wordpress themes

Share Article: