Grab the Original Widget

Most of the share counts are a piece of JavaScript that you must retrieve from the social media service. This article is also meant to serve as a one stop shop. You can come here to find the location for top social media services because a lot of them makes it really hard to find on their sites. The goal of this article is to avoid using as many plugins as possible, so when you are picking the type choose site: Normal.

• Digg
• StumbleUpon
• Tweetmeme Retweet
• Facebook Share
• Facebook Like Button
• Reddit
• Njuice Google Buzz
• Sphinn

Customizing the Codes

Because we chose the code for a Normal Site, we may need to modify it to make it compatible with WordPress. We are also going to be showing just the Compact Share Count Buttons. You can ofcourse use the codes as a guide to get different sizes.

Note: You must paste all of these codes inside a loop, most likely in your single.php file.

Digg

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

<a class="DiggThisButton DiggCompact" href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>

Normally, you should not have to add the href part of the link area. But if you don’t, and you have paginated comments or posts, then your digg button will not work on all pages. So if the main page was submitted, the second page will show a submit URL allowing users to submit duplicate content to digg.

StumbleUpon

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1&r=<?php the_permalink(); ?>"></script>

Tweetmeme Retweet

<script type="text/javascript">
tweetmeme_source = 'wpbeginner'; tweetmeme_service = 'bit.ly'; tweetmeme_style = 'compact'; tweetmeme_url = '<?php the_permalink() ?>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Make sure that you change the Tweetmeme_source variable to your twitter handle. Right now it is @wpbeginner. So whenever someone clicks it will show RT @wpbeginner Post Title – Link. We are using bit.ly as the link shortening service, you can change it to others that tweetmeme offers, but bit.ly is the best one.

Facebook Share

<a name="fb_share" type="button_count" share_url="<?php the_permalink(); ?>" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Facebook Like Button

Facebook Like Button is a phonemonal tool for traffic. Syed has shown how it has helped in our WordPress Newsletter in the past.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe>

To see more options see How to Add Facebook Like button in WordPress.

Reddit

<script type="text/javascript">
reddit_url = "<?php the_permalink(); ?>";
reddit_title = "<?php the_title(); ?>";
</script>
<script type="text/javascript" src="http://reddit.com/static/button/button1.js"></script>

Njuice Google Buzz Count

Google Buzz do not have an active API that allows to keep track of count. There are a few ways to work around that which gives you some what of a misguided count. But for those users, who want to have a Google Buzz Count, then here is how you can add it.

<script type="text/javascript">
var njuice_buzz_size = 'small';
var njuice_buzz_title = '<?php the_title(); ?>';
var njuice_buzz_url = '<?php the_permalink(); ?>';
</script>
<script type="text/javascript" src="http://button.njuice.com/buzz.js"></script>

Sphinn

<script type="text/javascript">submit_url = '<?php the_permalink(); ?>';</script>
<script type="text/javascript" src="http://sphinn.com/evb/buttons.php?b=small"></script>

That is all the customizing we need to make each of these widgets work with WordPress perfectly. Now, you may have to customize the styling for it to work with your theme design. You are better of putting these codes above <?php the_content(); ?> code. You can also use our Smart Sharing Plugin, to display a floating icon down your window.

Do you have any other social media widgets that you would like to add? Let us know, and we can get the codes here. If you are using another widget and have the code ready, then please submit it to us, so others can benefit from it as well.

How to Add Social Media Share Count Widgets in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. Official Facebook Share Count Button for your WordPress
2. Social Media Cheat Sheet for WordPress
3. How to Add a Live Facebook Share Button to Your WordPress

Watch the Screencast

Functions.php

Open up the functions.php file of the Twenty Ten theme. Locate the following section:

// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.

What follows is an array listing the current default headers and their location. To add your own, add a comma after the last parenthesis of the array of sunset header. Here’s an example of what it can look like after adding two more headers:

register_default_headers( array(
‘berries’ => array(
‘url’ => ‘%s/images/headers/berries.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/berries-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Berries’, ‘twentyten’ )
),
‘cherryblossom’ => array(
‘url’ => ‘%s/images/headers/cherryblossoms.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/cherryblossoms-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Cherry Blossoms’, ‘twentyten’ )
),
‘concave’ => array(
‘url’ => ‘%s/images/headers/concave.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/concave-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Concave’, ‘twentyten’ )
),
‘fern’ => array(
‘url’ => ‘%s/images/headers/fern.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/fern-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Fern’, ‘twentyten’ )
),
‘forestfloor’ => array(
‘url’ => ‘%s/images/headers/forestfloor.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/forestfloor-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Forest Floor’, ‘twentyten’ )
),
‘inkwell’ => array(
‘url’ => ‘%s/images/headers/inkwell.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/inkwell-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Inkwell’, ‘twentyten’ )
),
‘path’ => array(
‘url’ => ‘%s/images/headers/path.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/path-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Path’, ‘twentyten’ )
),
‘sunset’ => array(
‘url’ => ‘%s/images/headers/sunset.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/sunset-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Sunset’, ‘twentyten’ )
),
‘waterfall’ => array(
‘url’ => ‘%s/images/headers/waterfall.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/waterfall-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Waterfall’, ‘twentyten’ )
),
‘mountain’ => array(
‘url’ => ‘%s/images/headers/mountain.jpg’,
‘thumbnail_url’ => ‘%s/images/headers/mountain-thumbnail.jpg’,
/* translators: header image description */
‘description’ => __( ‘Mountain’, ‘twentyten’ )
)
) );

Lets dissect the code a little bit.

register_default_headers : This is the function that creates and displays our default headers. It accepts an array of parameters.

name: Sets a value with our headers name. We can then set an array of additional values and keys.

url: Relative path to the header image. Notice that the current path is /images/headers/image_name.jpg

thumbnail_url: Relative path to a thumbnail of the header image. Current path is /images/headers/image_name-thumbnail.jpg

description: A description of the image. This would be display upon hovering over the image inside the Headers Panel.

Things to Note

The Twenty Ten header is 940×198, anything bigger than that would be resized; anything smaller would be stretch to fit those dimensions. The thumbnail images can be set to any dimensions, 230×48 is the default. The images can only be .jpg or they will be ignored and won’t be displayed.

Adding Additional Default Headers to the WordPress Twenty Ten Theme is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Enable Custom Header Images Panel in WordPress 3.0
2. Video: Adding a Second Menu to the WordPress Twenty Ten Theme
3. Adding a Custom Dashboard Logo in WordPress for Branding

Adding a Quick Edit Button to WordPress Posts

Simply open your theme’s single.php file and add this post anywhere inside the loop. Don’t worry, this will only be shown to users that have specific permissions. Average user will not see this button.

<?php edit_post_link(__('{Quick Edit}'), ''); ?>

Adding a Quick Edit Button to WordPress Comments

By default this code is added in the WordPress comments.php file, but if you don’t have the functionality, then add the following code:

<?php edit_comment_link(__('{Quick Edit}'), ''); ?>

By adding these codes, a Quick Edit link will be displayed on your post page, so you can simply edit the post with one click rather than searching the wp-admin panel for editing.

Save time by adding a Quick Edit Button in WordPress Posts is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Add a Digg Button in your WordPress using Custom Fields
2. How to Add Facebook Like Button in WordPress
3. How to Add a Live Facebook Share Button to Your WordPress

First open your theme’s functions.php file and add the following code:

/**
* If more than one page exists, return TRUE.
*/
function show_posts_nav() {
global $wp_query;
return ($wp_query->max_num_pages > 1);
}

Then place the following code where you want the navigation to be:

<?php if (show_posts_nav()) : ?>
<div class='navigation'>
<span class='older'><?php next_posts_link('&laquo; Older Entries'); ?></span>
<span class='newer'><?php previous_posts_link('Newer Entries &raquo;'); ?></span>
</div>
<?php endif; ?>

You don’t have to follow our styling at all. You can modify this code any way you like. The important part is that you keep the navigation styling in between this function:

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

<?php endif; ?>

This function will check to see if there is more than one page. If there are more than one page, then it will show the navigation post with the styling. If there are no other pages, then it will not show the styling or the navigation.

Note: the WordPress navigation function is smart enough to not show navigation on it’s own if there are no other pages. But if you have navigation wrapped around with your own custom styling, then those styling code still shows whether navigation is there or not. The function in this post take care of this problem.

Additional Resources:

Eric Martin’s Post – Source for this snippet

Digging into WordPress (A Great eBook that everyone should buy if you are learning WordPress)

Conditional Tag for Post/Page Navigation Links in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Display Breadcrumb Navigation Links in WordPress
2. How to Add Custom Navigation Menus in WordPress 3.0 Themes
3. How to Create a Separate Page for Blog Posts in WordPress

We see this feature as one of the most demanded feature in the future of WordPress themes. Below is a simple screenshot that shows you what you can do with this menu option.

You can create multiple menus, add existing categories or pages to the menu, and you can add custom links to menu as well. You can organize the menus and create drop-down menus with a simple drag-and-drop feature.

How to enable Custom Navigation Menus in WordPress 3.0

Like the custom background, header image, and post thumbnails, the custom navigation menus also needs to be enabled through your theme’s functions.php file.

Simply add the code below to your theme’s functions.php file:

add_theme_support( 'menus' );

If this code is not added in your functions.php file, the user will not see this as an option in the Admin panel.

How to Add Custom Navigation Menus in WordPress 3.0 Themes

Once you have enabled the feature, now you can add it in your theme. These menus are not limited for header.php file only. You can add them anywhere you like to fit your design’s need by pasting the code below:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

The main function as you can see is wp_nav_menu. The arguments we have in the code are sort_column and container_class. The sort_column value tells WordPress to follow the order you pick in the options panel, and the container_class is the css styling class that you pick for this specific menu.

For custom themes: If you are using more than one menu, then you need to specify either the menu ID, menu slug, or menu name. The parameters are: $id, $slug, $menu respectively.

Additional Resource: WordPress Codex

How to Add Custom Navigation Menus in WordPress 3.0 Themes is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. Conditional Tag for Post/Page Navigation Links in WordPress
2. How to Enable Custom Background in WordPress 3.0 Themes
3. How to Display Breadcrumb Navigation Links in WordPress

What exactly will this feature do?

It will create a tab in your admin panel which will allow you to change header images. You can register default images if you are a theme designer to give users more options. It also allows users to upload custom images for the header. Last but certainly not the least, this feature utilizes post thumbnails on single post pages. If your post thumbnail is big enough to fit the header size, then it will use your post thumbnail as the header instead of the default image. If your thumbnail is bigger, then it will crop it down for you.

Watch the Screencast

How to Add this?

We took the code straight from Twenty Ten’s functions.php file. You need to paste the following codes in your theme’s functions.php file.

<?php
/** Tell WordPress to run yourtheme_setup() when the 'after_setup_theme' hook is run. */
add_action( 'after_setup_theme', 'yourtheme_setup' );

if ( ! function_exists('yourtheme_setup') ):
/**
* @uses add_custom_image_header() To add support for a custom header.
* @uses register_default_headers() To register the default custom header images provided with the theme.
*
* @since 3.0.0
*/
function yourtheme_setup() {

// This theme uses post thumbnails
add_theme_support( 'post-thumbnails' );

// Your changeable header business starts here
define( 'HEADER_TEXTCOLOR', '' );
// No CSS, just IMG call. The %s is a placeholder for the theme template directory URI.
define( 'HEADER_IMAGE', '%s/images/headers/forestfloor.jpg' );

// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to yourtheme_header_image_width and yourtheme_header_image_height to change these values.
define( 'HEADER_IMAGE_WIDTH', apply_filters( 'yourtheme_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'yourtheme_header_image_height', 198 ) );

// We'll be using post thumbnails for custom header images on posts and pages.
// We want them to be 940 pixels wide by 198 pixels tall (larger images will be auto-cropped to fit).
set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );

// Don't support text inside the header image.
define( 'NO_HEADER_TEXT', true );

// Add a way for the custom header to be styled in the admin panel that controls
// custom headers. See yourtheme_admin_header_style(), below.
add_custom_image_header( '', 'yourtheme_admin_header_style' );

// … and thus ends the changeable header business.

// Default custom headers packaged with the theme. %s is a placeholder for the theme template directory URI.
register_default_headers( array (
'berries' => array (
'url' => '%s/images/headers/berries.jpg',
'thumbnail_url' => '%s/images/headers/berries-thumbnail.jpg',
'description' => __( 'Berries', 'yourtheme' )
),
'cherryblossom' => array (
'url' => '%s/images/headers/cherryblossoms.jpg',
'thumbnail_url' => '%s/images/headers/cherryblossoms-thumbnail.jpg',
'description' => __( 'Cherry Blossoms', 'yourtheme' )
),
'concave' => array (
'url' => '%s/images/headers/concave.jpg',
'thumbnail_url' => '%s/images/headers/concave-thumbnail.jpg',
'description' => __( 'Concave', 'yourtheme' )
),
'fern' => array (
'url' => '%s/images/headers/fern.jpg',
'thumbnail_url' => '%s/images/headers/fern-thumbnail.jpg',
'description' => __( 'Fern', 'yourtheme' )
),
'forestfloor' => array (
'url' => '%s/images/headers/forestfloor.jpg',
'thumbnail_url' => '%s/images/headers/forestfloor-thumbnail.jpg',
'description' => __( 'Forest Floor', 'yourtheme' )
),
'inkwell' => array (
'url' => '%s/images/headers/inkwell.jpg',
'thumbnail_url' => '%s/images/headers/inkwell-thumbnail.jpg',
'description' => __( 'Inkwell', 'yourtheme' )
),
'path' => array (
'url' => '%s/images/headers/path.jpg',
'thumbnail_url' => '%s/images/headers/path-thumbnail.jpg',
'description' => __( 'Path', 'yourtheme' )
),
'sunset' => array (
'url' => '%s/images/headers/sunset.jpg',
'thumbnail_url' => '%s/images/headers/sunset-thumbnail.jpg',
'description' => __( 'Sunset', 'yourtheme' )
)
) );
}
endif;

if ( ! function_exists( 'yourtheme_admin_header_style' ) ) :
/**
* Styles the header image displayed on the Appearance > Header admin panel.
*
* Referenced via add_custom_image_header() in yourtheme_setup().
*
* @since 3.0.0
*/
function yourtheme_admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;
?>

That is jibbrish to me. Please Explain

Ofcourse, this might look jibrish to some of you. This is mostly for theme designers, but we will do our best to break it down. Before we start make sure you copy and paste this code in your code editor, so you can make the changes necessary.

Note: We are using /images/headers/ as the directory where you will store your default header images.

• You start the code out by creating a function yourtheme_setup().
• In line 21, we define the default header image. Note there is a variable %s which is basically a placeholder for the theme directory URI.
• Line 25 and 26 is where you define the image width and height. By default it is set to 940px wide and 198px high. You can change it by editing those two lines.
• Starting from line 42, we start registering the default headers. These are the images that will show up as a radio button option in your admin panel. If you need more options then simply follow the format being used.
• In line 95, we choose the header styling. You do not need to change these settings because you alreadyd efined them in Line 25 and 26.

That is all what you are doing for the theme’s functions.php file. Next we are going to go into how you are going to add this to your theme.

Code to add in your Theme

This code will most likely go in the theme’s header.php file. You can style it however you like.

<?php
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() &&
has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail') ) &&
$image[1] >= HEADER_IMAGE_WIDTH ) :
// We have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>

What is this code doing?

• First, it is checking if it is a single post or a page. It also checks if this post/page has a thumbnail, and whether it is big enough.
• If the page is a single page and has a big enough thumbnail, then it displays the post thumbnail specific for that post.
• If it is not a single page, or the post thumbnail is not big enough, then it will show the default header.

We hope this tutorial was helpful. We got a few emails asking about this tutorial, so we broke the code down from the Twenty Ten theme. If you have any questions, then feel free to ask in the comments.

How to Enable Custom Header Images Panel in WordPress 3.0 is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. Adding Additional Default Headers to the WordPress Twenty Ten Theme
2. How to Add Random Header Images to Your WordPress Blog
3. Easily Add Custom Header, Footer, or Sidebar for Each Category

Note: This article is intermediate level article focused specially for theme designers.

Video:

Text-tutorial

Simply open your functions.php file and add the following line:

add_custom_background();

Then under appearance you should be able to see an option for Custom backgrounds.

The default twenty ten theme for WordPress 3.0 already has this feature enabled in it.

How to Enable Custom Background in WordPress 3.0 Themes is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Add Custom Navigation Menus in WordPress 3.0 Themes
2. How to Enable Custom Header Images Panel in WordPress 3.0
3. How to enable Multi-Site option in WordPress 3.0

First you will need to find the loop that you are working with. Then you will need to add the following parameter:

query_posts('posts_per_page=5&offset=1');

This query is telling the loop to only display 5 posts which follow the most recent post (1). The important part in this code is “offset” and this magic word is doing the whole thing.

Your loop code should look like:

<?php
query_posts('posts_per_page=6&offset=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

This should be it. If you have any questions feel free to ask via comments.

Source: WP Codex

How to Exclude Latest Post from the WordPress Post Loop is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Exclude Sticky Posts from the Loop in WordPress
2. How to Display Any Number of Posts in a WordPress Loop
3. How to Display the Latest Sticky Posts in WordPress

How to take away the Sticky Ability of the Post

When you are displaying most recent posts in a tab, you do not want the sticky posts to stay sticky. If you do not remove the sticky features, the recent posts area would be useless as all of your sticky posts will crowd this area. This is when query_posts feature comes in handy.

To do this you will need to change your loop to something like this:

<?php
query_posts('caller_get_posts=1');
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

Completely exclude Sticky posts from the Loop

If you are using Sticky posts in a slider, then sometimes you might want to completely exclude your sticky posts from the loop. All what you have to do is edit your custom loop to match with this:

<?php
query_posts(array("post__not_in" =>get_option("sticky_posts")));
if ( have_posts() ) : while ( have_posts() ) : the_post();
?>

This code will not display any sticky posts in the post loop.

Source: WP Codex

How to Exclude Sticky Posts from the Loop in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Exclude Latest Post from the WordPress Post Loop
2. How to Display the Latest Sticky Posts in WordPress
3. How to Display Any Number of Posts in a WordPress Loop

The code will look like this:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'Your-Custom-Field', true);
wp_reset_query();
?>

You will need to make sure that you change the part where it says “Your-Custom-Field”.

This code is just the basic code. You can play around with it and use all the query_post arguments to fit your needs. You can even display another post’s custom fields on a single page of a different post.

In this (Example) at Uzzz, we are displaying the custom fields of a specific portfolio post, into the single post of a related testimonial post.

This snippet is very useful for theme developers. If you have any questions, feel free to ask in the comment or via email.

How to Display Custom Fields Outside The Loop in WordPress is a post from: WPBeginner which is not allowed to be copied on other sites.

Related posts:

1. How to Add a Digg Button in your WordPress using Custom Fields
2. Embed Custom CSS in Your Single Posts with Custom Fields
3. How to Display Any Number of Posts in a WordPress Loop