Thursday 28 July 2011

How to add shortcode to wordpress widget?


Wordpress has one great feature called shortcode for adding some special content to the posts or pages. Shortcodes are the keywords with the square brackets.

Ex: [gallery] is the shortcode to insert a gallery into a post or page.Place this shortcode in the page where you want to display the gallery.

 Like this adding a shortcode to the page or post is very simple then we will get a question “how to add shortcode to widgets?”


If we add a shortcode to widget in the same process of adding to a post, then the shortcode ([gallery] in the above example) only be displayed instead of special content.

To add shortcode to the widget follow these steps.
  1. Login into wordpress admin page and go to the Theme Editor — i.e. select Apperance > Editor from admin menu.

  2. Select Functions or functions.php from the list of files in the right panel,and click on it to load it into the editor.

  3. Then add the following line of php code.
       add_filter('widget_text', 'do_shortcode');          
  1. Click on the Update File button to save the file.
That’s it.Now if you add shortcode to the sidebar it will process the code and will display the special content.

Wednesday 27 July 2011

How to add google +1 button to wordpress post page?

 All you know that google recently launched google+, and it has the high features for sharing the website content( Promotion).Google +1  button is one of the feature of google+ for social recommendation. This feature is like facebook like button.


Here are the simple steps to add +1 to wordpress post page or archive page.

Get the code from Google+

The code will be like this.

<! -- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<! -- Place this tag where you want the +1 button to render -->
<g:plusone href="http://www.greatnewmovies.com"></g:plusone>

Now open your theme header file and place the following code in the header file before </head> tag.

<! -- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Then we need to place the +1 button. Open your sinle.php file and place the following code in the file where you want to render the button.

<! -- Place this tag where you want the +1 button to render -->
<g:plusone href="<?php the_permalink(); ?>"  size="small" ></g:plusone>

Here we have the option to change button sizes.

Size="small"  - To display small size +1 button of 15px
Size="medium" - To display medium size +1 button of 20px
Size="large" - To display large size +1 button of 60px

That’s it .This will display +1 button on wordpress post page.


Enjoy Sharing.

Thursday 21 July 2011

How to avoid the image alignment problem in Wordpress?


Wordpress has an excellent feature of adding images into a post while at the time of adding a new post or at the time of editing post. After adding images into post we can align those to different positions like left, right, center and none along with the text.


Some times we will get a problem like the image is not aligned properly as per the selection. To avoid this problem add the following lines of code into your selected theme stylesheet.

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}

If you need more information about this issue just refer the following link
http://codex.wordpress.org/CSS

Wednesday 13 July 2011

Wordpress login url change with .htaccess

Thought to change Wordpress default login url "http://www.website.com/wp-login.php" to something like "http://www.website.com/wlogin" , tried this code and it works fine for me and i am sharing this to all who want to change like me.
 To do this you have to add the following code to your .htaccess file which is located at your root directory of your wordpress install.

RewriteRule  ^wlognin$  http://website.com/wp-login.php [NC,L]