Adding media upload button to User Profile page (following a tutorial)

Yes, PHP can have JavaScript (and CSS and HTML) in it, but you must tell: “here ends PHP -> other language -> here starts PHP”, like so:

<?php
echo '<div id="hide-me">something</div>';
?>
<script>
// some JS to hide the div
</script>
<?php
echo 'another thing';

On the other hand, your code will not work because you’re dumping the JS in the middle of nowhere. It’s not clear if you’re doing a plugin (which you should) or using it on the theme. In themes, sometimes, you’re allowed to do that, but it’s not the case here.

You need to add that JS code as a separate file and use:

add_action( 'admin_enqueue_scripts', 'profile_script_wpse_117593' );

function profile_script_wpse_117593( $hook_suffix ) 
{
    if ( 'profile.php' == $hook_suffix ) 
    {
        // URL TO USE IN A PLUGIN: plugins_url( '/js/script.js', __FILE__ );
        wp_enqueue_script( 
             'my-script' // Handle
            , get_stylesheet_directory_uri() . '/js/script.js' // Theme URL
            , array( 'jquery' ) // Dependencies
            , false // Version
            , true // In footer
        );
    }
}

Or we can be lazy and print it directly in the profile page footer:

add_action( 'admin_footer-profile.php', 'dump_script_wpse_117593' );

function dump_script_wpse_117593()
{
    ?>
        <script type="text/javascript">
        jQuery(document).ready(function ($){
            alert('in!');
        });
        </script>
    <?php
}

Note that’s important to target our screen, so as not to enqueue the script all over the admin area.

Related Posts: