Add Extra Fields from WordPress User Profile Panel

Add Extra Fields from WordPress User Profile Panel
[rating itemreviewed=”Add Extra Fields from WordPress User Profile Panel” rating=”10″ reviewer=”Candy JOSEPH” dtreviewed=”03.12.2012″ summary=”Thanks for this tutorial” best=”10″ worst=”0″][/rating]

This is our first tutorial about WordPress on the Daily Design Notes! In this tutorial, we will show you how to add extra fields like Youtube, Twitter, Facebook etc. from the WordPress user panel. We will use WordPress 3.4.2 version for this tutorial.

Do you want learn how to integrate social media profiles to your website or blog? In this tutorial, we’re going to go through 3 essential tips on how to be more social.

Tutorial Details

  • Software: WordPress
  • Version (if applicable): 3.4 and above
  • Difficulty: Beginner
  • Estimated Completion Time: 10 minutes

Learn how to add extra fields from WordPress user dashboard!

You can learn how to integrate this tutorial with 3 easy steps.

WordPress User Profile

Step – 1 Add PHP Code to function.php

First step, you may add your social profiles to your function.php file. If your theme does not have function.php create an one.

/*************************************************************************************
 *	Contact Methods
 *************************************************************************************/

function my_new_contactmethods( $contactmethods ) {
    // Add Youtube
    $contactmethods['youtube'] = 'Youtube';
    // Add Pinterest
    $contactmethods['pinterest'] = 'Pinterest';
    // Add Twitter
    $contactmethods['twitter'] = 'Twitter';
    //add Facebook
    $contactmethods['facebook'] = 'Facebook';
    return $contactmethods;
    }
add_filter('user_contactmethods','my_new_contactmethods',10,1);

Step – 2 Add HTML Code where you want?

Second step add your html code where you want to show your social profiles.

    

Step – 3 Add Simple CSS Code to your style.css

Last step, add simple css code to your theme style.css file.

    
    .author-links {
    float: left;
    margin: 10px 0 0 10px;
    width: 80px;
    }

So please don’t forget to edit “/images/pinterest-author.png”, “/images/facebook-author.png”, “/images/youtube-author.png”, “/images/twitter-author.png” and add your social images.

I hope this simple tutorial been useful for you. Feel free to contact for any questions or possible corrections in this tutorial. All are welcome. If you want to help Daily Design Notes, please share this article with your social profiles.

Post a Comment

Your email address will not be published. Required fields are marked *