Social media share links - Wordpress - Without plugin

To use social media share link in a wordpress site without the use of any plugin, follow the below steps.

This snippets is useful in lopps under posts or pages, by adding this code you can get the share icons under every posts and page.

Step 1:

Find "page.php", "index.php" and  "single.php"

In these 3 pages you will find a while loop, add the code below just before end while <?php endwhile; ?>


//  Delicious
<a rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Bookmark at Delicious</a>

// Blinklist
<a rel="nofollow" href="http://blinklist.com/index.php?Action=Blink/addblink.php&amp;url=<?php the_permalink(); ?>&amp;Title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Blinklist" >Blink This!</a>

// Digg
<a rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg this!</a>

// Google Plus
<a rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>" title="Share on Google Plus">Google Plus</a>

// StumbleUpon
<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">Stumble this!</a>

// Facebook
<a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Share on Facebook</a>

// Twitter
<a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Tweet this!</a>

//  Furl
<a rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl This!</a>

//  Reddit
<a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Share on Reddit</a>

Step 2:

you can replace the text with your custom icon

For Example

//  Reddit
<a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">
<img src="http://http://wordpress-code-snippets.blogspot.com/images/reddit.png" alt="Reddit' />
</a>

Step 3:

Done!!

How to create custom css option in a custom theme.

Adding custom css to a theme which is custom build is very easy, just follow the below steps.

Why custom css?

We can edit css from editor of a theme, but when we save it css will be reformatted with lot's of white space. This action will effect on Page load speed. To avoid this we can use an option called custom css and we can load the css in header which overrides the current css.

Let's make it quite simple with available plugins. i am using OPTION TREE

Step 1:

We will integrate OPTION TREE in the theme

1.Download the latest version of OptionTree and unarchive the .zip directory.
2. Put the option-tree directory in the root of your theme. For example, the server path would be /wp-content/themes/theme-name/option-tree/.
3. You must deactivate and/or delete the plugin version of OptionTree.
4. Add the following code to the beginning of your functions.php.
5. Create a folder (admin) and create a page (theme-options.php).

add_filter( 'ot_theme_mode', '__return_true' );
add_filter( 'ot_show_pages', '__return_false' );
require( trailingslashit( get_template_directory() ) . 'option-tree/ot-loader.php' );
require( trailingslashit( get_template_directory() ) . 'admin/theme-options.php' );

Step 2:

Add the below code to the (theme-options.php).

<?php
/**
 * Initialize the custom Theme Options.
 */
add_action( 'init', 'custom_theme_options' );

/**
 * Build the custom settings & update OptionTree.
 *
 * @return    void
 * @since     2.0
 */
function custom_theme_options() {

  /* OptionTree is not loaded yet, or this is not an admin request */
  if ( ! function_exists( 'ot_settings_id' ) || ! is_admin() )
    return false;

  /**
   * Get a copy of the saved settings array.
   */
  $saved_settings = get_option( ot_settings_id(), array() );

  /**
   * Custom settings array that will eventually be
   * passes to the OptionTree Settings API Class.
   */
  $custom_settings = array(
    'contextual_help' => array(
      'sidebar'       => ''
    ),
    'sections'        => array(
      array(
        'id'          => customcss',
        'title'       => __( 'Custom Css', 'theme-text-domain' )
      )
    ),
    'settings'        => array(
      array(
        'id'          => 'custom_css',
        'label'       => __( 'Custom Css', 'theme-text-domain' ),
        'desc'        => sprintf( __( 'Custom Css', 'theme-text-domain' ), '<code>wpautop</code>', '<code>media_buttons</code>', '<code>tinymce</code>', '<code>quicktags</code>' ),
        'std'         => '',
        'type'        => 'textarea-simple',
        'section'     => 'customcss',
        'rows'        => '15',
        'post_type'   => '',
        'taxonomy'    => '',
        'min_max_step'=> '',
        'class'       => '',
        'condition'   => '',
        'operator'    => 'and'
      )
   
    )
  );

  /* allow settings to be filtered before saving */
  $custom_settings = apply_filters( ot_settings_id() . '_args', $custom_settings );

  /* settings are not the same update the DB */
  if ( $saved_settings !== $custom_settings ) {
    update_option( ot_settings_id(), $custom_settings );
  }

  /* Lets OptionTree know the UI Builder is being overridden */
  global $ot_has_custom_theme_options;
  $ot_has_custom_theme_options = true;

}
?>


Step 3:

Add this below code to your heder.php above </head> tag.
<?php
if ( function_exists('ot_get_option') ) {
$custom_css = ot_get_option( 'custom_css' );
}
?>
<style>
<?php echo $custom_css; ?>
</style>

Step 4:

Done!!

Note: You can find this option under Apperance->Theme Options -> Custom Css