0

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. – WisdmLabs Jul 30 '14 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 '14 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. – WisdmLabs Jul 30 '14 at 19:20
  • 1
    @iCaspar If I var_dump($social_icons_fields) i see string '' (length=0) – Knott Jul 31 '14 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 '14 at 19:32
0

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 '14 at 21:34
  • For some reason your solution doesn't work, it output as always empty. – Knott Jul 31 '14 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 ) ) {}') – WisdmLabs Jul 31 '14 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.