Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress How to Build a WordPress Plugin Building WordPress Widgets, and Shortcodes Adding AJAX To Plugins on the Front-End: Part 2

Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points

My CSS file includes but not my JavaScript file, what's wrong?

I've watched the movies over and over and I'm pretty sure I'm doing the same but the JavaScript file wpgithub-statistics.js isn't loading in on the site. Am I missing something or is it something new with Wordpress?

<?php
/* ASSIGN GLOBAL VARIABLES
 *--------------------------------------------------------------------------
*/

$plugin_url     = WP_PLUGIN_URL . '/wpgithub-statistics';
$options        = array();

 /*
  * SETTINGS PAGE
  * Add a link to the plugin admin menu under 'Settings > GitHub Statistics'
  *-------------------------------------------------------------------------
  *
 */

function wpgithub_statistics_menu(){

    /* Use the add_options_page_function
     * add_options_page( $page_title, $menu_title, $capability, $menu-slug, $function )
     *
    */

    add_options_page(
        'GitHub Statistics Plugin',
        'GitHub Statistics',
        'manage_options',
        'wpgithub-statistics',
        'wpgithub_statistics_options_page'
    );
}
add_action( 'admin_menu', 'wpgithub_statistics_menu' );

//Logga in här
//if-sats runt kommande funktioner
//styrfunktion kolla status på sidladdning
//isLogged == true ladda kommande

function wpgithub_statistics_options_page(){

    global $plugin_url;
    global $options;

    if( !current_user_can( 'manage_options' ) ) {

        wp_die( 'You do not have sufficient permission to access this page.' );
    }


    if( isset( $_POST['wpgithub_statistics_form_submitted'] ) ){

        $hidden_field = esc_html($_POST['wpgithub_statistics_form_submitted']);

        if( $hidden_field == 'Y' ){

            $wpgithub_statistics_username   = esc_html( $_POST['wpgithub_statistics_username'] );
            $wpgithub_statistics_profile    = wpgithub_statistics_get_user_profile( $wpgithub_statistics_username );
            $wpgithub_statistics_user_repos = wpgithub_statistics_get_user_repos( $wpgithub_statistics_username );
            $wpgithub_statistics_user_orgs  = wpgithub_statistics_get_user_orgs( $wpgithub_statistics_username );
            //$wpgithub_statistics_org_name   = wpgithub_statistics_get_org_name();
            //$wpgithub_statistics_org_repos  = wpgithub_statistics_get_org_repos( $wpgithub_statistics_org_name );

            $options[ 'wpgithub_statistics_username' ]   = $wpgithub_statistics_username;
            $options[ 'wpgithub_statistics_profile' ]    = $wpgithub_statistics_profile;
            $options[ 'wpgithub_statistics_user_repos' ] = $wpgithub_statistics_user_repos;
            $options[ 'wpgithub_statistics_user_orgs' ]  = $wpgithub_statistics_user_orgs;
            //$options[ 'wpgithub_statistics_org_name' ]   = $wpgithub_statistics_org_name;
            //$options[ 'wpgithub_statistics_org_repos' ]  = $wpgithub_statistics_org_repos;
            $options[ 'last_updated' ]                   = time();

            update_option( 'wpgithub_statistics', $options );
        }
    }

    $options = get_option( 'wpgithub_statistics' );

    if ( $options != '' ) {

        $wpgithub_statistics_username   = $options[ 'wpgithub_statistics_username' ];
        $wpgithub_statistics_profile    = $options[ 'wpgithub_statistics_profile' ];
        $wpgithub_statistics_user_repos = $options[ 'wpgithub_statistics_user_repos' ];
        $wpgithub_statistics_user_orgs  = $options[ 'wpgithub_statistics_user_orgs' ];
        //$wpgithub_statistics_org_name   = $options[ 'wpgithub_statistics_org_name' ];
        //$wpgithub_statistics_org_repos  = $options[ 'wpgithub_statistics_org_repos' ];
    }
    require(  'inc/options-page-wrapper.php' );
}

function wpgithub_statistics_get_user_profile( $wpgithub_statistics_username ){

    $json_feed_url = 'https://api.github.com/users/' . $wpgithub_statistics_username;
    $args = array( 'timeout' => 120 );
    $json_feed = wp_remote_get( $json_feed_url, $args );
    $wpgithub_statistics_profile = json_decode( $json_feed['body'] );

    return $wpgithub_statistics_profile;
}

function wpgithub_statistics_refresh_user_profile(){

    $options = get_option( 'wpgithub_statistics' );
    $last_updated = $options[ 'last_updated' ];
    $current_time = time();
    $update_difference = $current_time - $last_updated;

    if ( $update_difference > 86400 ){

        $wpgithub_statistics_username = $options[ 'wpgithub_statistics_username' ];

        $options['wpgithub_statistics_user_profile'] = wpgithub_statistics_get_user_profile( $wpgithub_statistics_username );
        $options['last_updated'] = time();

        update_option( 'wpgithub_statistics', $options );
    }

    die(); //for the ajax to know when the function is completed

}
add_action( 'wp_ajax_wpgithub_statistics_refresh_user_profile', 'wpgithub_statistics_refresh_user_profile' );

function wpgithub_statistics_get_user_repos( $wpgithub_statistics_username ){
    $json_feed_url = 'https://api.github.com/users/' . $wpgithub_statistics_username . '/repos';
    $args = array( 'timeout' => 120 );
    $json_feed = wp_remote_get( $json_feed_url, $args );
    $wpgithub_statistics_user_repos = json_decode( $json_feed['body'] );

    return $wpgithub_statistics_user_repos;
}

function wpgithub_statistics_get_user_orgs( $wpgithub_statistics_username ){

    $json_feed_url = 'https://api.github.com/users/' . $wpgithub_statistics_username . '/orgs';
    $args = array( 'timeout' => 120 );
    $json_feed = wp_remote_get( $json_feed_url, $args );
    $wpgithub_statistics_user_orgs = json_decode( $json_feed['body'] );

    return $wpgithub_statistics_user_orgs;
}

function wpgithub_statistics_backend_styles(){
    wp_enqueue_style( 'wpgithub_statistics_backend_styles_css', plugins_url( 'wpgithub-statistics/style/wpgithub-statistics.css' ) ); 

}
add_action( 'admin_head', 'wpgithub_statistics_backend_styles' );

function wpgithub_statistics_frontend_scripts_and_styles(){
    wp_enqueue_style( 'wpgithub_statistics_frontend_css', plugins_url( 'wpgithub-statistics/style/wpgithub-statistics.css' ) );
    //array declare dependency of jquery, ignore version nr, true for display in footer instead of hesder
    wp_enqueue_script( 'wpgithub_statistics_frontend_js', plugins_url( 'wpgithub-statistics/script/wpgithub-statistics.js' ), array('jquery'), '', true ); 

}
add_action( 'wp_enqueue_scripts', 'wpgithub_statistics_frontend_scripts_and_styles' );

function wpgithub_statistics_enable_frontend_ajax(){
    //instruction to wordpress that when an ajax command is submitted - pass it through admin and down to the function
?>
    <script>
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>
<?php


}
add_action( 'wp_head', 'wpgithub_statistics_enable_frontend_ajax' );
?>

2 Answers

Andrew Shook
Andrew Shook
31,709 Points

Go to your dev site in chrome and open chrome's web inspector. First, click on the network tab and then refresh the page. In the console you should now see all the assets that are begin loaded when the loads. Look for any 404 statuses, and if they might be your .js file. If you do find it and there is an error, hover of over the file name and a tooltip will show you the full path the browser is using to call the file. This will help you figure out if the file is in the wrong place ( the path is right ) or if something is wrong with your enqueue function ( the path is not to your plugin folder).

Caroline Forslund
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Caroline Forslund
Front End Web Development Techdegree Graduate 36,096 Points

Hi Andrew I can't find either a 404 or my files. The wpgithub_statistics_backend_styles function is working just fine. But nothing seem to happen with wpgithub_statistics_frontend_scripts_and_styles. The path to the css is the same for the frontend and backend. Must be something with the wp_enqueue or add_action I guess. Just can't figure out what...