Categories
Tutorial

Add Custom Headers to your WordPress.org plugins

Matt Mullenweg announced few days ago that, plugin authors will be able to put custom headers on their plugin pages. Soon the geeks across the globe got started with designing and customizing their header images.

Developers are happy as they have got an opportunity for a little branding. Our creative heads from rtCamp too got down to design the banners. You can see them here (For Bloggertowp redirection plugin and rtSocial Plugin)

How to change the header image:

You can also customize your plugin custom headers, as it’s a pretty simple process. All you need is to follow the steps below:

ADVERTISEMENT

(this tutorial was written while developing the header image for our BloggertoWordPress Redirection Plugin)

Step 1: Design  a 772×250 pixel jpeg or png image. (No animated GIFs)

Step 2: Adding it to plugin’s SVN Directory:

  • Create a directory in your system: mkdir b2w-plugin
  • Checkout the code from WordPress plugin Directory:

svn co http://plugins.svn.wordpress.org/blogger-to-wordpress-redirection/ b2w-plugin

Bloggerto WordPress redirection

Bloggerto WordPress redirection
  • Move it inside the directory: cd b2w-plugin
  • Create one more folder into it. : svn mkdir assets
  • Move inside that folder. : cd assets
  • Store the Image which you want to display for your plugin inside assets folder.
  • Use this command: svn add *
  • Now Commit the code from your system to WordPress plugin directory : svn ci -m “Added Banner”.
  • It will ask you for the svn username and password. Give it the proper authentication and you are done with the new banner updates for your plugin.

So, lets start getting creative and write your plugin links in the comment area for other readers to see.

Categories
Tutorial

Equal Height and Width for WordPress Widgets Using JQuery

equal width height post image

There are situations when a developer needs to set equal height and width to child div’s that contain dynamic content. I came across such a situation, in which I had to place more than one widget in a single horizontal row. If I applied static heights and widths to the divs, there was a possibility of breaking the div after a certain number of widgets. To overcome this situation, I came up with a solution using jQuery wherein the divs which contain these widgets will get equal heights and widths depending on the size of the content.

This function automatically calculates the size of the content that is going to be inserted into the div, and applies the height of the div whose height is largest from all the other divs. The width of parent div is divided by the number of widgets and then applied to each widget.

Example:

ADVERTISEMENT

Assume we have a parent div “#sidebar_1” of width 960px. I insert three divs into parent div of variable height and width. Using the below function, each widget will be applied with the width that is obtained after dividing the parent div from the number of widgets (960/3). Each widget’s height is calculated and the greatest height is applied to all the widgets.

Here is my html code,

<div>
    <div class="child1">my custom content 1</div>
    <div class="child2">my custom content 2</div>
    <div class="child3">my custom content 3</div>
</div>

Here is my CSS which I applied,

ADVERTISEMENT
#sidebar_1 { width: 960px; overflow: hidden; }
.child1, .child2, .child3 {
border-right: 1px solid #EDEDED;
float: left;
overflow: hidden;
padding: 5px 10px; }

jQuery Function to dynamically apply equal height and width

// to div's present in a parent div
function rt_equalHeightWidth( group ) {

// Get parent div width
    var rt_group_width = group.width();

// Get child div's
    var rt_group_child = group.children();

ADVERTISEMENT
// Get size of child div present in the parent div var rt_group_child_size = group.children().size(); // Remove left padding from the first child div rt_group_child.first().css( { 'padding-left': '0' } ); // Remove right padding and right border from the last child div rt_group_child.last().css( { 'border-right': '0', 'padding-right': '0' } ); // Function to apply equal width for all child div's rt_group_child.each( function() { // Calculate width for each child div var rt_group_child_width = rt_group_width / rt_group_child_size; // Count extra padding and border width var rt_extra_width = parseInt( jQuery( this ).css( 'padding-left' ) ) + parseInt( jQuery( this ).css( 'padding-right' ) ) + parseInt( jQuery( this ).css( 'border-right-width' )+ rt_group_child_size );
ADVERTISEMENT
// Remove extra padding and border width from width var rt_group_child_actual_width = rt_group_child_width - rt_extra_width; // Apply actual width to each child div jQuery( this ).css( { 'width' : rt_group_child_actual_width + 'px' } ); } ); // Equal height for all child div's var rt_height = 0; // Function to apply equal height for all child div's using jQuery each rt_group_child.each( function() { // Get height for each widget var thisHeight = jQuery( this ).height();
ADVERTISEMENT
// Get height for widget and apply equal height's to all widget if ( thisHeight > rt_height ) { rt_height = thisHeight; } } ); rt_group_child.height( rt_height ); } // Apply parent selector by replacing '#sidebar_1' selector rt_equalHeightWidth( jQuery( '#sidebar_1' ) );

Here are the resultant screenshots of div’s where the above code is used to apply equal height and width.

1_widget2_widgets3_widgets

Besides sidebar widgets the above code can be used for any div’s that has dynamic content, and you want them to have equal height and width. You just need to apply parent selector by replacing ‘#sidebar_1’ selector.

Hope this helps and saves your time, do drop in your opinions and comments below.

Categories
Tips

[How-To] Share your Facebook Photos on WordPress Blog

Facebook has become the place of interest for internet users to hang around, play games, network, share photos and more. It’s quite a common trend that everyone uploads their pictures on Facebook. If you are willing to show those photos on your WordPress powered blog, this is the right tutorial for you. 🙂

Get the Plugin

We will be using a plugin to implement the feature on the blog. Fotobook is a WordPress plugin that will link to your Facebook account and import all of your photo albums into a page on your WordPress installation. It makes use of Facebook’s API so importing your photos is a breeze.
You can download the plugin here

Configure the plugin

Install the plugin from the admin section. and activate the plugin.
Once you activate the plugin, you can see something like in the following screenshot.

Link to fotobook settings

Click on the link and you’ll be taken to the Fotobook Settings page.

Fotobook Settings Page

Step 1: Authenticate

This step asks you to login to your Facebook account. This is the step by which you allow the plugin to access your account and fetch the images and publish to your blog. Clicking on the link opens a pop-up window as below. Enter your login credentials and click the login button.

This will take you to the next step, that is grant access.

After this step, you may close the pop-up window and proceed to the step 2.
Step 2 : Get Permissions
This step asks you to grant access for your photos and videos associated with your Facebook account.
Once you allow the Fotobook plugin to do so, you can close the window and proceed to the next step.
Step 3: Apply Permissions
By clicking this, you apply all the steps done before and save the settings. Once you click Apply Permissions your Facebook account will be added and you can see something like below.

 

Import Photos to blog

This will take you to the next step which is shown below.

Clicking on Get Albums will fetch from your Facebook account and list all the albums related to your account. By this time, the plugin have created the exact replica of albums on your Facebook account. You can even hide the albums if you don’t want to show that specific album by clicking the hide link.

That’s it, you are done. You can now access the albums at http://yourblogdomain/photos
The plugin also allows you to display photos in 3 styles.

  1. Color box.
  2. Embedded.
  3. Lightbox.


Select the style and you are all set. Do drop in your comments.

Categories
Tutorial

Add custom CSS classes to wp_nav_menu’s HTML output using WordPress filters

WordPress has a great feature called ‘filter’ with which we can add our own classes to nav menu items.  Most times you need to add classes in nav menu items on some conditions.

For example, in menu you have ‘sample ‘ category item. You have to add class to this item if your single post is of ‘sample’ category or its categories have parent category as  ‘sample’. You can easily add class by using ‘nav_menu_css_class’ filter.

add_filter(‘nav_menu_css_class’ , ‘rt_nav_special_class’ , 10 , 2);

‘nav_menu_css_class’ is name of the filter to hook our function  ‘rt_nav_special_class’.

ADVERTISEMENT

10 is the priority of the function and 2 is the number of arguments the function accepts. Now you may write your condition in ‘rt_nav_special_class’ to add class to menu item.

function rt_nav_special_class($classes, $item){
     if(your condition){ //example: you can check value of $item to decide something...
             $classes[] = “special”;
     }
     return $classes;
}

rt_nav_special_class() accepts two arguments $classes and $item. $classes is an array contains class name already assigned by wp_nav_menu. We can add our classes in this array. I am added ‘special’ as class name. $item is current nav menu item to which we are adding a class.

If you var_dump this $item you will get all information about the current nav menu item. Using this $item you can any condition you want. Below is screen shot of our ‘special’ class in nav menu item in Firebug.

I hope you get what I explained to you. If you have any queries or suggestions do write in your comments.

Categories
Tutorial

How to Create a ‘Recent Comments with Gravatar’ Widget

sidebar-widget

Many people new to the WordPress community seem to have a common question – “How to create a WordPress Widget?”. Today I’m going to help you to code a simple widget with which you can display the Recent Comments with the Author Gravatar in Sidebar.

WP has given the feature to extend the default functionality of widgets. We can achieve this by extending the WP_Widget class.

when we extend the WP_Widget Class we need not repeat the code and thus the features of this class are available to our class say “rt_comments_widget” (custom class).

ADVERTISEMENT

First we will create the skeleton of our widgets in functions.php :

<?php
class rt_comments_widget extends WP_Widget {

    function rt_comments_widget() {
    //Constructor
    }

    function widget($args, $instance) {
    // prints the widget
    }

ADVERTISEMENT
function update($new_instance, $old_instance) { //save the widget } function form($instance) { //widgetform in backend } } add_action( 'widgets_init', create_function( '', 'return register_widget("rt_comments_widget");' ) ); ?>

As seen in the code above, we have created a class rt_comments_widget, which inherits the properties and methods of the WP_Widget class (extends).

Further, we have called four functions –

ADVERTISEMENT
  1. The rt_comments_widget function which acts as a constructor
  2. The widget function which prints the widget
  3. The update function which saves the widget
  4. The form function which handles the widget form in the backend.
  5. The function add_action is used to register the widget.

Let’s fill up our widget.

Step 1:

<?php
function rt_comments_widget() {
    $widget_ops = array( 'classname' => 'widget_rt_comments_widget', 'description' => __( 'Widget for Show Recent Comment with Author Gravatar in Sidebar.' ) );
    $this->WP_Widget( 'rt-comments-widget', __( 'RT: Comments with Gravatar' ), $widget_ops );
} // end of function rt_comments_widget()
?>

In the code above, we now describe the rt_comments_widget where in you can give a class to your widget to style your widget, give a description to your custom widget and give your widget a title which is showed in the widget area of the admin panel.

ADVERTISEMENT

In our example “RT: Comments with gravatar” is our widget title.

Step 2:

<?php
function widget( $args, $instance ) {
    extract( $args, EXTR_SKIP );
    $title = empty( $instance['title'] ) ? 'Recent Comments' : apply_filters( 'widget_title', $instance['title'] );
    $gravatar = !empty( $instance['gravatar'] ) ? $instance['gravatar'] : 64;
    $count = !empty( $instance['count'] ) ? $instance['count'] : 3;
    $alternative = !empty( $instance['alternative'] ) ? $instance['alternative'] : '';

    echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
                global $wpdb;
                $total_comments = $wpdb->get_results( "SELECT comment_date_gmt,comment_content, comment_author, comment_ID, comment_post_ID, comment_author_email, comment_date_gmt FROM " . $wpdb->comments . " WHERE comment_approved = '1' and comment_type != 'trackback' ORDER BY comment_date_gmt DESC" );

                $comment_total = count($total_comments);

ADVERTISEMENT
echo '<ul>'; for ( $comments = 0; $comments < $count; $comments++ ) { if( $alternative == "on" ) { $right_grav = $comments % 2 ? 'style="float:right"' : '' ; $left_readmore = $comments % 2 ? 'style="float:left"' : '' ; } else { $right_grav = ''; $left_readmore = ''; } echo '<li>'; echo "<div class='comment-container clearfix'>"; echo "<div class='author-vcard' $right_grav title='".$total_comments[$comments]->comment_author."'>"; echo get_avatar( $total_comments[$comments]->comment_author_email, $gravatar, $default='<path_to_url>' ); echo "</div>"; echo "<div class='comment-section'>"; echo '<div class="comment-date">'; echo '<a title="'. mysql2date( 'F j, Y - g:ia', $total_comments[$comments]->comment_date_gmt) .'" href="'. get_permalink($total_comments[$comments]->comment_post_ID) . '#comment-' . $total_comments[$comments]->comment_ID . '">'; echo mysql2date( 'F j, Y - g:ia', $total_comments[$comments]->comment_date_gmt); echo '</a>'; echo '</div>'; echo "<div class='author-comment'>"; $str = wp_html_excerpt ( $total_comments[$comments]->comment_content,65 ); if( strlen( $str ) >= 65 ) { echo $str.'...'; } else { echo $str; } echo "</div>"; echo '<div class="sidebar-readmore" '.$left_readmore.' >'; echo '<a title="Reply" href="'. get_permalink($total_comments[$comments]->comment_post_ID) . '#comment-' . $total_comments[$comments]->comment_ID . '">'; echo 'Reply &rarr;'; echo '</a>'; echo '</div>'; echo '</div>'; //end of .comment-section echo '</div>'; //end of .comment-container echo '</li>'; } echo '</ul>'; echo $after_widget; } // end of function widget() ?>

Now we describe the widget function. In our example above, I fetched the date of the posted comment, author comments, author Gravatar, and reply to that comment from the database.

Here are the code snippets in the widget function:

  1. date:
    <?php mysql2date( 'F j, Y - g:ia', $total_comments[$comments]->comment_date_gmt ); ?>
  2. author gravatar:
    <?php get_avatar( $total_comments[$comments]->comment_author_email, $gravatar, $default='<path_to_url>' ); ?>
  3. author comment:
    <?php $total_comments[$comments]->comment_content; ?>
    ( With Word Count '65' )
  4. reply link:
    <?php echo '<a title="Reply" href="'. get_permalink( $total_comments[$comments]->comment_post_ID ) . '#comment-' . $total_comments[$comments]->comment_ID . '">Reply &rarr;</a>'; ?>

Step 3:

<?php
function update($new_instance, $old_instance) {
    global $wpdb;
    $total_comments = $wpdb->get_results("SELECT comment_date_gmt,comment_content, comment_author, comment_ID, comment_post_ID, comment_author_email, comment_date_gmt FROM " . $wpdb->comments . " WHERE comment_approved = '1' and comment_type != 'trackback' ORDER BY comment_date_gmt DESC" );
    $comment_total = count($total_comments);
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['gravatar'] = strip_tags($new_instance['gravatar']);
    $instance['count'] = strip_tags($new_instance['count']) > $comment_total ? $comment_total : strip_tags($new_instance['count']);
    $instance['alternative'] = strip_tags($new_instance['alternative']);
    return $instance;
} // end of function update()
?>

With the help of code in the update function you can save your widget or update your data which is changed in admin panel.

Step 4:

<?php
function form( $instance ) {
    $title = isset( $instance['title'] ) ? ( $instance['title'] ) : '';
    $gravatar = !empty( $instance['gravatar'] ) ? $instance['gravatar'] : 64;
    $count = !empty( $instance['count'] ) ? $instance['count'] : 3;
    $alternative = !empty( $instance['alternative'] ) ? $instance['alternative'] : ''; ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>">Title: </label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>

    <p>
        <label for="<?php echo $this->get_field_id( 'gravatar' ); ?>">Gravatar Size: </label>
        <select id="<?php echo $this->get_field_id( 'gravatar' ); ?>" name="<?php echo $this->get_field_name( 'gravatar' ); ?>" style="float: right;width: 100px;">
            <option value="32" <?php selected( '32', $gravatar ); ?>>32x32</option>
            <option value="40" <?php selected( '40', $gravatar ); ?>>40x40</option>
            <option value="48" <?php selected( '48', $gravatar ); ?>>48x48</option>
            <option value="56" <?php selected( '56', $gravatar ); ?>>56x56</option>
            <option value="64" <?php selected( '64', $gravatar ); ?>>64x64</option>
            <option value="72" <?php selected( '72', $gravatar ); ?>>72x72</option>
        </select>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id( 'count' ); ?>">Show Comments: </label>
        <input class="widefat show-comments" id="<?php echo $this->get_field_id( 'count' ); ?>" name="<?php echo $this->get_field_name( 'count' ); ?>" type="text" value="<?php echo $count; ?>" />
    </p><?php
        global $wpdb;
        $total_comments = $wpdb->get_results("SELECT comment_date_gmt,comment_content, comment_author, comment_ID, comment_post_ID, comment_author_email, comment_date_gmt FROM " . $wpdb->comments . " WHERE comment_approved = '1' and comment_type != 'trackback' ORDER BY comment_date_gmt DESC" );
        $comment_total = count($total_comments);
        echo "<div style='color: #444444;font-size: 11px;padding: 0 0 12px;'>You have total '" . $comment_total . "' comments to display</div>"; ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'alternative' ); ?>">Show Alternate Comments: </label>
        <input name="<?php echo $this->get_field_name( 'alternative' ); ?>" type="hidden" value="off" />
        <input class="alternate" id="<?php echo $this->get_field_id( 'alternative' ); ?>" value="on" name="<?php echo $this->get_field_name( 'alternative' ); ?>" type="checkbox" <?php echo checked( 'on', $alternative ); ?> />
    </p>

    <script type="text/javascript">
        jQuery( '.show-comments' ).keyup(function () {
            this.value = this.value.replace(/[^0-9.]/g,'' );
        });
    </script>
    <?php
} // end of function form()
?>

With the form function you can develop widgetform in the back end(admin panel) such as – entering a widget title, showing Gravatar size in the dropdown list, choosing the number of comments shown in sidebar and showing alternate comments. (refer 2nd screnshot below)

The simple javascript (jQuery) at the end of the code above is to validate your form field.

Your widget will now be appear in Admin Panel > Appearance > Widgets > Available Widgets

widget-area

Here is the screenshot of your widget in the back end:

backend

Here is the Final Screenshot of your widget: Normal View and Alternate View

normal-viewalternate-view

Hope with the help of this widget you can easily show your “Recent Comments with Gravatar” in Sidebar. Do drop in your opinions and comments below 🙂

Download the Complete code of Widget Here.

Categories
Tutorial

WordPress Installation For Media Temple Webserver

In this tutorial we are going to see how WordPress is installed on a Media Temple Domain. It is a pretty simple task, and can be completed by following a few easy steps.

Follow these steps for installation :

  1. Login to your Media Temple account.
  2. Go to your primary domain and select domain.com (gs) Grid-Service from top menu.
  3. Next, click on 1-Click Applications as shown in the screenshot.
  4. Now Click on the Add New Application button.
  5. Click on the Start button, which is located in front of the WordPress application.
  6. Enter all the details of your WordPress blog in the fields shown in the screenshots below. You can select a database name for WordPress, by selecting New from the drop-down menu. You can also change the table prefix of the database.
  7. Finally, click on the Install button and you are almost done.
  8. WordPress will now get installed on your domain. Setup your new WordPress installed domain by accessing the domain from your browser.

If at some point you face difficulties in installing WordPress, do let us know through your comments. We will try our best to resolve your query. 🙂

Link: Signup with Mediatemple

Categories
Tutorial

Install WordPress On Bluehost Web Server

Like all other web hosting servers we can install WordPress on BlueHost in few easy steps. It will also install a database for the blog.

Follow these steps to install WordPress :

  1. Login to BlueHost Cpanel.
  2. Then go to the menus, where you will find Software / Services.
  3. Click on the WordPress icon.
  4. After that it will redirect you to the next page to get installation process of WordPress.
  5. Click on the Install Button (as shown in image) .
  6. In the final step of WordPress installation, select the domain from drop-down and also if you want to install WordPress in sub-directory then write the name of directory.
  7. Click on the Advance Options link, where you can add blog title, user-name and password. Follow all the steps as shown in screen-shot and at last click on Complete button.

Now you are good to go with the WordPress blog on your Bluehost hosting server 🙂

For a comprehensive WordPress tutorial read our WordPress user guide.

Link: Signup with Bluehost

Categories
Tutorial

WordPress Installation on Linux System

Steps to install WordPress on Linux system:

  1. You first need to download the Xampp Server in Linux system.
  2. Extract it into /opt folder in your system files. The best way is to use Terminal to do the same. Type the command in terminal : –
    sudo tar xvfz xampp-linux-1.7.3a.tar.gz -C /opt
  3. After succesful installation of Xampp in your local system, you need to start a server that works in the local system. Type the command in terminal : –
    sudo /opt/lampp/lampp start
  4. Then, just to cross check that everything is working fine, type the URL in browser http://localhost/ , if you will get welcome message of Xampp then your done with Xampp installation process. (see screen-shot below).
  5. Now download WordPress from WordPress.org.
  6. Extract it into /opt/lampp/htdocs/ folder.
  7. Create a Database for your WordPress site. Go to http://localhost/phpmyadmin

  8. One more thing you can do to avoid extra work is to change permission of wp-config.php file and also avoid to add the database info in the same. Just type the command below in teminal to give read-write permission to the WordPress folder inside /htdocs.
    sudo chmod a+rw /opt/lampp/htdocs/wordpress/ -R
  9. Now go to the WordPress site http://localhost/wordpress/ and add all the information there like WordPress database name that you just created  in step 8. (Note: username should be root and no need to write the password) see the image below.

You are now done with the manual work. Next, enter the info required in the further steps such as the WordPress username and other information.

Hope you will love to work on WordPress with your Linux system. You can also find some useful plugins and WordPress User Guide on our wpVeda blog, keep checking wpveda.com for regular updates by subscribing to us.

Categories
Tutorial

How to Install WordPress on Dreamhost Webserver

WordPress installation on DreamHost is very easy. You just need to select One Click installation Apps and you will get the WordPress blog ready for your selected domain.

Follow the steps below to install WordPress:

  1. Login to DreamHost control panel.
  2. It will take you to the next screen, click on the One-Click Installs menu on the left sidebar. Or you can use Free Website Software menu under the Let’s Get Started! screen.
  3. Next, click on WordPress, it will pop-up one screen that will show you two ways to install WordPress. (See the image below)
  4. As per the below screen shot, you can select the Simple Installation or Custom Installation of WordPress. In Custom Installation DreamHost gives you a facility to select database for WordPress or it will automatically create for you.  In Simple Installation you can install WordPress in sub-domain by selecting your domain also.

    Example : For custom installation  http://mydomain.com/blog/
    For simple installation http://blog.mydomain.com

  5. After that selecting either custom or simple installation process and then click on Install it for me now! . It will install WordPress for your selected domain. Note: Before clicking on install, cross check the things that you mentioned in the fields 🙂
  6. You can find the further process of accessing WordPress and other information in Support History menu under the Support option. (See the image below).

This way you can install WordPress for your selected domain. Check out  more user guides on How to use WordPress.

Link : Signup With Dreamhost

Categories
Tutorial

How to Install WordPress on Godaddy.com

To Install WordPress on your Godaddy hosting account follow the steps below :

  1. Login to your Godaddy Account Manger .
  2. Click on the Hosting menu in left sidebar under the My Product menu.
  3. After that it will take you to the next level in where you need to click on Launch menu for the particular domain where you want to install WordPress.
  4. Now click on Install Apps and select WordPress and then click on the Install Now button.
  5. After that follow the steps shown below to install WordPress and then select domain name. (see the screen shot below)
  6. After completing all the steps of WordPress installation, you will get a notification by email.

You can find more about WordPress installation on Godaddy’s official site. If you are new to WordPress check out more articles on how to use WordPress in this User Guide.

To Install WordPress on Your Hosting AccountTo