Powerusers » WordPress http://nikhilmisal.com The Design Blog for Web Design Resources and Inspiration Sat, 03 Dec 2011 17:56:57 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 How to Add Social Sharing Icons in Your Post http://nikhilmisal.com/how-to-add-social-sharing-icons-in-your-post/ http://nikhilmisal.com/how-to-add-social-sharing-icons-in-your-post/#comments Fri, 23 Apr 2010 19:24:27 +0000 Nikhil http://nikhilmisal.com/?p=2172 Social media has become the part of our lives. We find tons of resources, bookshelves containing information and lots of how to guides & tutorials. For bloggers and marketers it is the most important tool for sharing information with friends, clients, readers. To make this sharing thing easier many Sharing Tools are now available for the publishers. These are the great tools which decide the quality of the article and also help to share it with world.

So in this tutorial we are going to learn how to add these Social Sharing Icons in your post, to make it easy to share for all.

Step 1: Open single.php from your Themes folder

Head to your Theme installation folder and open the single.php file for editing in your favorite editor. We want to add Icons only in the single post therefore the code should also be added to this file.

Step 2: Add the Basic Code

Now add the following code just below the <?php the_content( ” ); ?> line. This line calls the content of the post.

<!-- Social Buttons -->
<div>
</div><!-- so_buttons end -->
<!-- Social Buttons End Here -->

Step 3: Get the Required Code for the Icons

Now lets add the icons. Decide which Social Sharing Icons you want to add and get the appropriate code from following links.

DesignBump

Design Float

The Web Blend

Digg

Facebook Share

Stumble Upon

TweetMeme

Reddit

Delicious

Faqpal Code:

<a href="http://www.faqpal.com/submit.php?url=<?php the_permalink(); ?>" target="_blank" title="Add it to FaqPal!">


<img src="http://www.faqpal.com/images/buttons/faqpal48x48.png" alt="Add it to FAQPal!" border="0" height="48" width="48"></a>

Step 4: Adding Buttons

Add the code obtained from above links between <div id=”so_buttons”> and </div>.

Put <em></em> tag around each code. Your code should look like this.

<!-- Social Buttons -->
<div>

<em><script type="text/javascript">submit_url = '<?php the_permalink() ?>';</script>
<script src="http://www.designfloat.com/evb2/button.php"></script></em>

<em><script type="text/javascript">url_site='<?php the_permalink(); ?>';</script><script src="http://thewebblend.com/sites/all/modules/drigg_external/js/button.js"type="text/javascript"></script></em>

<em><script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script><script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js"type="text/javascript"></script></em>

<em><a class="DiggThisButton DiggMedium"></a></em>
<em><script type="text/javascript">
tweetmeme_source = 'Powerusers';
tweetmeme_service = 'bit.ly';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js"></script></em>
<em><script src="http://reddit.com/static/button/button2.js"></script></em>

<em><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></em>

</div><!-- so_buttons end -->
<!-- Social Buttons End Here -->

Step 5: Remember

For Digg Button you have to add following code either in <head> or in <body>

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

In TweetMeme, do not forget to change the username in tweetmeme_source = ‘Powerusers’; field.

We are using <em> tag rather than <span> in HTML code because many of the above code itself have <span> tag inbuilt. So when you apply style to our <span> tag it gets applied to all the inbuilt <span> tags.

Step 6: Let’s add some Style

Open style.css file from your theme installation folder and add the following code for very simple and basic look.

/* Social Buttons
/* --------------- */

#so_buttons {
     width: 530px;
     height: 85px;
     background: #ddd;
}

     #so_buttons em{
          margin: 5px 10px 5px 10px;
          float: left;
     }

Do not forget that you can always change the feel and look by editing CSS file. And here is our final outcome.

For your inspiration check out the following collection of Sharing Block.

1. Blog.Spoongraphics

2. Design Informer

3. Build Internet

4. Productive Dreams

5. Tutorialzine


Related Posts:

]]> http://nikhilmisal.com/how-to-add-social-sharing-icons-in-your-post/feed/ 14 How to Create Beautiful Minimalist WordPress Theme in Photoshop http://nikhilmisal.com/how-to-create-beautiful-minimalist-wordpress-theme-in-photoshop/ http://nikhilmisal.com/how-to-create-beautiful-minimalist-wordpress-theme-in-photoshop/#comments Sun, 28 Feb 2010 11:40:08 +0000 Nikhil http://nikhilmisal.com/?p=1991 Today I am going to show you how to easily create a beautiful minimalist WordPress theme in Photoshop. Actually I was working on the re-design of this blog and got an idea to write a tutorial for minimalist WordPress theme.

I am using  a noisy texture here a with some letterpress effect which is being used widely nowadays. Following color scheme is used in this tutorial.

One of my favorite way to choose a color scheme is Adobe Kuler. Many great color palletes are available there to choose from. If you want try this tutorial with different colors; go there and choose your favorite.

1. Setting up Working Area

Create a new document (File>New) with following specifications.

Now lets add margins to our document. Go to View>New Guide and two vertical Guides at 40px and 980px.

It would look like this.

2. Creating Background Texture

Create a new layer above background layer and name it as bg_texture. Change the foreground color to #bfbcb3 and press (Alt+Backspace).

Now go to Filter>Noise>Add Noise. Change the Distribution type to Uniform, Amount to 3% and select Monochromatic and apply the filter.

Your document would look like this.

3. Let’s Start with the Header

Create two new Horizontal Guide at 300px and 350px & Vertical Guides at 650px and 680px.

Now write your blog name at the center of header area. I choose

Font: Brush Script Std.

Font Size: 150px

Weight: Medium

Color: #f01685

Now Double Click on the ‘blog title’ layer and add the following style.

Your header will look somewhat like this.

Now add the social icons with color #9fa69c as shown below. Vector icons are included in the source file.

Add the following layer style to each of these icons.

Not it’s time to finish the header.  Select the Single Row Marquee Tool from the List Marquee Tools. Create new layer and name it as header_sep and add the horizontal selection are as shown below.

Fill this area with #e7e3da, move the section area downward and fill it with #474143. Select the Eraser Tool (E) with 300px size and smoothly erase the separator at both ends to look like this.

4. Create a Sidebar

Write the title of sidebar ‘Pages’ and then pages ‘About, Guest Post, Contact’. Here I choose

For title

Font: Verdana

Font Size: 25px

Color: #f01685

Align: Left

For content

Font: Verdana

Font Size: 20px

Color: #9c266a

Align: Left

Now add following layer style to sidebar title ‘Pages’

Copy header_sep layer and paste below the sidebar title ‘Pages’

Now cut the separator on the left side to get following result.

5. Add Contents to the Design

Add some content to the design as shown below.

Title of Post

Font: Verdana

Font Size: 35px

Color: #474143

Align: Right

Add the following layer style to Post title.

Add the header_sep line at the end of post and cut it on the right side as shown below.

Repeat this with another post too.

6. Finish with the Footer

Add some copyright stuff and basic links like About, Contact in the footer as shown below.

Font: Verdana

Font-Size: 15px

Color for Pages: #474143

Color for copyright: #bfbcb3

Now add following layer style to copyright text.

That’s it! You have created a Beautiful WordPress Theme in Photoshop. Here is the Final result.

You can also download the source file here.

I would like to know your comments and suggestion on this tutorial.

Related Posts:

]]> http://nikhilmisal.com/how-to-create-beautiful-minimalist-wordpress-theme-in-photoshop/feed/ 25 10 Alternative Uses for WordPress http://nikhilmisal.com/10-alternative-uses-for-wordpress/ http://nikhilmisal.com/10-alternative-uses-for-wordpress/#comments Sat, 06 Feb 2010 08:48:54 +0000 Tom Walker http://nikhilmisal.com/?p=1922 This is the Guest Post by Tom Walker. If you are interested in writing for us then check out the details here.

WordPress is the best and most popular blogging platform around. It’s free, easy to use, endlessly customizable and supported by hundreds of excellent plugins. With WordPress setting such high standards, however, many people have started to question why other types of sites are so much more difficult to set up and manage.

Fortunately, WordPress has become more than simply a blogging tool; it’s now possible to run almost any type of site imaginable using the right mix of plugins and themes. In fact, so many people are now using WordPress to power sites other than blogs that over 50% of today’s WordPress downloaders will use it as a CMS (content management system), according to Matt Mullenweg, the WordPress wizard himself.

Below we explore 10 alternative uses for WordPress, taking a close look at everything from the more common, like shops, forums and photoblogs, to the more unusual, like news aggregators, contact managers and even social networking sites. It will soon become clear that with a bit of ingenuity and creativity, anything’s possible with WordPress!

1. eCommerce


Transforming your WordPress blog into an e-commerce shop is easier than you think using WordPress e-Commerce Plugin. It’s integrated with PayPal, Google Checkout and other popular cart types and its appearance can be customized to suit your brand image and the products you’re selling. Shop, another great e-commerce plugin, is also worth checking out. With themes such as Crafty Cart and SimpleCart(js) also available, few people will even realize you’re running your shop through WordPress.

2. WordPress Wiki

Dan Milward, Tom Howard and Allen Han are geniuses. Not only have they managed to create the best e-commerce plugin around in WordPress eCommerce Plugin, they’ve also made an excellent wiki plugin called WordPress Wiki. It’s devastatingly simple, but can be quite restricting for advanced users. If you want to make your wiki site more customizable and slick, you should check out WordPress Wiki Theme, available for just $32.

3. Forum


Rather than using themes and plugins, the best way to run a successful forum in WordPress is to integrate a forum script into your blog. bbPress is the best piece of forum software we’ve come across so far, in terms of both looks and ease of use. It was created (reportedly in just a few days) by Matt Mullenweg, the founder of WordPress, so you can be sure that it compliments WordPress perfectly. If you find bbPress somewhat limiting, however, you might prefer to use a more high-tech piece of forum software like vBulletin, although this can be a more expensive and trickier option.

4. Contact Manager


Using WordPress to create a basic contact manager is really easy. Creating a contact manager that’s taggable, searchable and members only is a little bit more difficult, requiring a careful mix of additional plugins. RoloPress, an app built on top of WordPress, will be sufficient for most users’ needs however. With RoloPress, you can easily add, edit and makes notes on contacts and companies from the front-end, so you’re not constantly logging into the admin area.

5. Job Board


There’s no better theme available than JobPress for using WordPress to run a job listings board. It’s not free, but at $79, we reckon it’s worth it. Not only can you post, edit and display job classifieds with ease, its payment system lets users charge securely using both PayPal and credit/debit cards.

6. Review Site


WP Review Site is the one powerful plugin you need to operate a review site through WordPress. With this great plugin, you can either add a star rating system to your current blog, whichever theme you’re using, or create an all-encompassing user-powered review site of your very own, complete with Top 10s, embedded Google Maps and rating widgets for your sidebar and marketing tools too. At $97, it’s not cheap, but if you can make your site a success, there’s no reason why you can’t start charging commissions to companies reviewed.

7. Social Networking Site


BuddyPress is a suite of open-source blogging extensions for WordPress MU which gives you the power, as a WordPress user, to run your own social networking site. Your site’s users sign up, get a profile, create their own blogs, chat in forums, private message one another, become “friends” and join “groups”, all from the comfort of your own WordPress site. The only downside to BuddyPress is that you can’t simply transform your existing blog into a social network, unless you’re already using WordPress MU. Migrating content across, however, is fairly simple.

8. Photoblog


You can easily upload images and photos in your WordPress posts and pages, but if you want to create a polished photoblog, you’re going to have to look beyond core. There are tons of gallery plugins available, it’s just a case of choosing the ones that are right for you. I highly recommend PhotoQ, a plugin capable of turning your ordinary blog into a photoblog in an instant. You can batch upload several images at once and even create an upload queue, setting a time at which the top ones will automatically upload themselves.

9. Video Site


Some image gallery plugins will let you upload videos too, but none do so as successfully as “VideoFlick”. At first glance, it looks like a thumbnail gallery (albeit a good looking one), but click on any of the images and a video is launched in a full-screen Ajax window. YouTube, Google Video, MetaCafe, DailyMotion, FLV (Flash) Video, Quicktime and Windows Media Video are all supported. VideoFlick is fully customizable, letting you adjust layout and colors as well as thumbnail size and orientation.

10. News Aggregator


When it comes to running a news aggregator through WordPress, one theme stands head-and-shoulders above the rest: OneNews WP. It lets you easily create a single page aggregator like Popurls or a multi-page aggregator like Alltop. Although it might look difficult to manage from the front-end, in fact it couldn’t be simpler. Feed blocks can be added and arranged with no coding whatsoever. Unlike some other themes in this list, OneNews WP requires no additional plugins to achieve its main objective.

Related Posts:

]]> http://nikhilmisal.com/10-alternative-uses-for-wordpress/feed/ 67 How to Change Default Gravatar in WordPress http://nikhilmisal.com/how-to-change-default-gravatar-in-wordpress/ http://nikhilmisal.com/how-to-change-default-gravatar-in-wordpress/#comments Sun, 06 Dec 2009 11:12:27 +0000 Nikhil http://nikhilmisal.com/?p=1454 Gravatar is one of the best features of the WordPress. It is nothing but the image associated to your email id. Whenever you use this email address for placing comments or create profiles in WP blog, the image associated to your email is displayed.

You can read more about Gravatar on WP because this tutorial is not about ‘what is gravater?’ So in this tutorial I am going to show you how to change the default “Mystery Man Gravatar” to your very own “Guest Gravatar”.

You can use gravatar in wordpress with the gravatar wordpress plugin or it can be manually added in index.php, comments.php and comments-popup.php

Many times the gravatar comes with the WordPress Theme, so in this case it is located in the functions.php file. This file is responsible for additional options of the theme which appears in the WordPress Dashboard.  So let’s add the new gravatar.

Open functions.php file. Add the following code at the end of the file just before and save it.

/* Powerusers Gravatar
/* ----------------------------------------------*/
add_filter( 'avatar_defaults', 'newgravatar' );  

function newgravatar ($avatar_defaults) {
     $myavatar = get_bloginfo('template_directory') . '/images/p-gravatar.jpg';
     $avatar_defaults[$myavatar] = "Powerusers Gravatar";
     return $avatar_defaults;
}

Explanation:

First line is adding a “newgravatar” to the default avatars (avatar_defaults) available in the WordPress.

add_filter( 'avatar_defaults', 'newgravatar' );
Default Avatar in WordPress

Default Avatar in WordPress

Next the newgravatar function is providing the location of the image which is in the images folder of the WP installation directory and assigning a name “Powerusers Gravatar” to it.

function newgravatar ($avatar_defaults) {
     $myavatar = get_bloginfo('template_directory') . '/images/p-gravatar.jpg';
     $avatar_defaults[$myavatar] = "Powerusers Gravatar";

And finally the output is sent back to default avatars (avatar_default) which displays the gravatar in the default gravatar list in the dashboard.

return $avatar_defaults;

Now go to your Dashboard->Setting->Discussion. Scroll down the page and select your new default gravatar. And you are done.

Here is the New Avatar!

Here is the New Avatar!

You can customize the size and look of the Gravatar for the comments section.

For changing the size, open functions.php again and look for the following code and change the size in $size=” ” field.

 get_avatar( $comment, $size='50' );

You can customize the look by editing the style properties for gravatar class in the style.css file.

So now on there will be no Mystery men in your blog.

What do you think about the Mystery Man? Do you want to keep the Default Gravatar or want your own? Let us know in the Comment!

Related Posts:

]]> http://nikhilmisal.com/how-to-change-default-gravatar-in-wordpress/feed/ 25