How does wp_enqueue_scripts work?

Question

Thanks for rewriting the question: It seems much clearer now. Sorry for the protracted comments earlier, but I wasnt on my laptop.

I corrected a couple of typos in your code and pasted this into my functions.php:

// include files via shortcode
function include_file($atts) {
    extract(shortcode_atts(array('filepath' => NULL), $atts));
    if ($filepath!='NULL' && file_exists( trailingslashit( get_stylesheet_directory() ) . $filepath)){
    ob_start();
    include(get_stylesheet_directory() . "https://wordpress.stackexchange.com/" . $filepath);
    $content = ob_get_clean();
    return 'hello' . $content;
    }
}


add_shortcode('include', 'include_file');


function themeslug_enqueue_style() {
    if ( is_child_theme() ) {
        // load parent stylesheet first if this is a child theme
    wp_enqueue_style( 'parent-stylesheet', trailingslashit( get_template_directory_uri() ) . "https://wordpress.stackexchange.com/questions/233056/standings_style.css", false );
    }
    // load active theme stylesheet in both cases
    wp_enqueue_style( 'theme-stylesheet', get_stylesheet_uri(), false );
}


add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );

So for your child theme, you’d save your first code snippet as wp-content/themes/childhemingway/includefile.php and put the shortcode [include filepath=”includefile.php”] into a page.

When I view the page I get this in my browser (reduced here for clarity):

// My theme's doctype, <head>, <body> and page header

<div class="entry-content">

    <link rel="stylesheet" type="text/css" href="https://wordpress.stackexchange.com/questions/233056/standings_style.css">

    <table class="result-set" cellpadding="0" border="0" cellspacing="0">
        Your table data appears here OK.
    </table>

    <script>
        // your script renders here OK
    </script>

</div>

// My theme's sidebar, footer, </body> & </html>

I get 5 Failed to load resource: the server responded with a status of 404 (Not Found) errors in my browser for these resources:

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/up_grey_11x11.gif?nlv=e9c36c22

http://test.localhost/test-page/standings_style.css

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/down_11x11.gif?nlv=e9c36c22

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/up_11x11.gif?nlv=e9c36c22

http://test.localhost/WebObjects/nuLiga.woa/Frameworks/nuLigaFramework.framework/WebServerResources/img/icons/down_grey_11x11.gif?nlv=e9c36c22

Which looks to me as though your script is running fine, but we have references to fix.

You’ll need to save the four missing image files within your theme, reference them relative to your script and then see if that moves things forward.

The reference to the CSS file as it stands is relative to the page URL and this is where wp_enqueue_scripts comes in.

Remove this line from your included file:

<link rel="stylesheet" type="text/css" href="https://wordpress.stackexchange.com/questions/233056/standings_style.css">

Make sure you have a copy of standings_style.css saved in wp-content/themes/childhemingway/

Use this in your functions.php instead of your current function and hook:

function wpse_233056_enqueue_style() {
    wp_enqueue_style( 'special-table-stylesheet', get_stylesheet_directory_uri() . '/standings_style.css' );
}


add_action( 'wp_enqueue_scripts', 'wpse_233056_enqueue_style' );

And that should, if I’ve read it all right, fix it.

Depending on how your parent theme loads its main stylesheet, we may or may not have to enqueue that as well.

Additionally, update your JavaScript generating file to load the images from your theme’s /img/ directory. Changing this:

bTags[i].src = "https://wordpress.stackexchange.com/questions/233056/img/up.gif";

to

bTags[i].src = "https://wordpress.stackexchange.com/questions/233056/<?php echo get_stylesheet_directory_uri(); ?>/img/up.gif";

should sort it out. And the same for the other three images, of course.

Related Posts: