Skip to content

Display Members Contact Social info in WordPress

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #192648
    Admin
    Administrator

    This what I have done to display Display Members Contact Social info in WordPress as it appears like this
    social links
    The first thing you need to do is add this code to your Theme Function

    //add contact info
    function my_new_contactmethods( $contactmethods ) {
    // Add Site
    $contactmethods['mysite'] = 'My Site';
    // Add Google Plus
    $contactmethods['google_plus'] = 'Google Plus';
    // Add Behance
    $contactmethods['behance'] = 'Behance';
    // Add Twitter
    $contactmethods['twitter'] = 'Twitter';
    //add Facebook
    $contactmethods['facebook'] = 'Facebook';
    return $contactmethods;
    }
    add_filter('user_contactmethods','my_new_contactmethods',10,1);

    Than You add this code to the place where you want to show the social contact info as so

    as you can see I included some CSS files to make it look cool 😎  but you can do as you wish and here is the CSS code in case you want to use it too.

    .social {
        margin: 0;
        padding: 0;
    }
    
    .social ul {
        margin: 0;
        padding: 5px;
    }
    
    .social ul li {
        margin: 7px;
        list-style: none outside none;
        display: inline-block;
    }
    .social i {
        width: 20px;
        height: 20px;
        color: #FFF;
        background-color: #428BCA;
        font-size: 10px;
        text-align:center;
        padding-top: 6px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        -o-border-radius: 50%;
        transition: all ease 0.3s;
        -moz-transition: all ease 0.3s;
        -webkit-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        -ms-transition: all ease 0.3s;
    }
    
    .social i:hover {
        color: #FFF;
        text-decoration: none;
        transition: all ease 0.3s;
        -moz-transition: all ease 0.3s;
        -webkit-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        -ms-transition: all ease 0.3s;
    }

    Note: The CSS code is base on Bootstraps and Font Awesome which is what this site theme is made of :mrgreen: 

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.