Question

I’ve been stuck on this for days now, so I’d be really grateful if someone could help me solve this issue.

I’m doing a WordPress theme and I have an options panel where the user can enter their Twitter username. I want the Twitter icon to appear in the footer if they enter a username, and I want the Twitter icon to disappear if they leave the field empty and don’t enter a username.

The Twitter icon image is called in a div class called ‘.twitter’ and currently, the Twitter icon is always there, even if the input id value is empty. So what I want to do is hide this div class when the input id value is empty so that the icon disappears.

When I asked this question before someone said to use this jQuery:

<script type="text/javascript">
$(document).ready(function() {

    if($('#mytheme_twitter').val() == '' ){$('.twitter').hide();}  

    $('#mytheme_twitter').on('change' , function() {

         if( this.value != ''){

               $('.twitter').show(); 
          }
          else{
               $('.twitter').hide(); 
         }
    });
  });
</script>

I put this jQuery in my header.php but for some reason it’s not working. The name of the div class is definitely ‘.twitter’ so could it be the selector of the input id that is wrong? I went into the options panel on Firefox and highlighted the input box with Firebug and it is definitely ‘#mytheme_twitter’ I’ve also tried ‘input#mytheme_twitter’ but that doesn’t work either.

The options panel is in another php file, not the index.php one. Could that be the reason why it’s not working… because that input id hasn’t been defined in the index.php? I don’t know much about this myself because I’m a jQuery noob and I’ve only recently started getting the hang of php too.

Answer 1

It looks like your JS is calling to a box that is in the admin. It can’t pull that value unless it and the .twitter are on the same page (Without some overkill functionality).

You’d be better off doing this in PHP: something like this

if(get_option('twitter', 'your-page')) !=='') { //show div }

That would be placed in your footer.php