I try to build a small plugin that adds few social profile fields to WordPress user form and display their social icons to the author meta box on single post.

The problem I face is as follow:

The frontend social icons are enclosed in a div with a certain height and background color(via css).

If no field is filled by the user, my div still appears but empty(normal) with defined height and background color, what is unaesthetic.

How can I make that div not appearing if not filled at least one social profile field?

Here's my code snippets used so far (pseudo codes), that I think are necessary to illustrate my problem :

class My_Social_Icons {

    static $social_icons_array = array(
        'digg'          => 'Digg',
        'dribbble'      => 'Dribbble',
        'facebook'      => 'Facebook',
        'flickr'        => 'Flickr',
        'github'        => 'Github'

} // class end

function social_extra_fields( $extra_fields ) {

    foreach ( My_Social_Icons::$social_icons_array as $social_id => $social_name ) {
        $extra_fields[$social_id] = $social_name;
    return $extra_fields;
add_filter( 'user_contactmethods', 'social_extra_fields' );

And here is the output that will display the social icons in frontend:

function display_icons( $icons = '' ) {

    $social_icons_fields = get_the_author_meta(???);

    if ( !empty( $social_icons_fields ) ) { // here I need to check if at least one field is filled
        $icons .= '<div class="socials-icons">':
// here is my code to display the social icons, not mentioned here
        $icons .= '</div>';

        return $icons;
add_filter ( 'the_content', 'display_icons', 0 );

Any help would be greatly appreciated!

  • Is it the div which is shown by default which you have shown in this example? If $social_icons_fields really has no value then it should not show the default div. Anyways, I think you should probably put 'height:auto' to the div which has fixed height and then use max or min height (depending upon the size needed) instead of the height.
    – Domain
    Jul 30, 2014 at 18:48
  • @WisdmLabs the div also has other css attributes not mentioned here, such as border, padding, etc.. That's way I need a conditional before the div appears. Thanks anyway.
    – Knott
    Jul 30, 2014 at 18:55
  • You can use internal style to fix this issue (if you would be okay with a css fix). See below my answer for this.
    – Domain
    Jul 30, 2014 at 19:20
  • 1
    @iCaspar If I var_dump($social_icons_fields) i see string '' (length=0)
    – Knott
    Jul 31, 2014 at 17:52
  • 1
    That is strange behavior, then, since an empty string should evaluate to empty. I suppose you could try if( 0 !== strlen( $social_icons_fields ) ) {
    – Caspar
    Jul 31, 2014 at 19:32

1 Answer 1


One possible solution could be this -

if ( empty( $social_icons_fields ) ){
   $icons .= '<style type="text/css"> .socials-icons{display: none;} </style>'; //assuming that the div which has class 'socials-icons' is the div which supposed to be not shown 
   return $icons;
  • Although the css approach it might work, I'm looking for a more adequate solution (php only). Thanks anyway.
    – Knott
    Jul 30, 2014 at 21:34
  • For some reason your solution doesn't work, it output as always empty.
    – Knott
    Jul 31, 2014 at 8:58
  • I have provided a code to hide the div if no value is set. Since you have not provided full code, I have made following assumptions- i) the <div class="socials-icons"> is the div which you are talking about and ii) variable $social_icons_fields will be empty, if user does not fill any value (means no default value is set there and hence it always goes into the if condition i.e. 'if ( !empty( $social_icons_fields ) ) {}')
    – Domain
    Jul 31, 2014 at 9:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.