1

I have a WordPress page for my table tennis club. There is a site with all the current standings and I want to parse a table from it to one of my wordpress pages.

I created a dynamic table with php and styled it with CSS and Javascript. It looks perfectly fine and works just as I want it to when I run it locally in my browser. However, I can't get it to work on the WordPress page.

I got the advice to use wp_enqueue_scripts, but I don't fully understand how it works. I looked it up in the manual, there is only notice where to put it in the functions.php, but not how to use it in my php that creates the table so i cant get the connection there. (?) How exactly does the enqueuing work? What I need is advice what to replace in the php I wrote.

Is there maybe a better way to do it? So far I've tried shortcodes and code snippet plugins all with the same result: The table contents gets parsed, but the CSS and Javascript I want to be applied to is not run.

This is the php I want to run on the page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="standings_style.css">
</head>
<?php

$url  = 'http://wttv.click-tt.de/cgi-bin/WebObjects/nuLigaTTDE.woa/wa/groupPage?championship=M%C3%BCnster+15%2F16&group=249840';
/* try to prevent errors */
libxml_use_internal_errors(true);
/* create the DOMDocument object ready to receive html from remote url */
$dom                      = new DOMDocument;
/* use some of the defined properties for libxml */
$dom->validateOnParse     = false;
$dom->standalone          = true;
$dom->strictErrorChecking = false;
$dom->recover             = true;
$dom->formatOutput        = false;
$dom->preserveWhiteSpace  = false;
$dom->loadHTML(file_get_contents($url));
/* Capture errors */
$parse_errs = serialize(libxml_get_last_error());
libxml_clear_errors();
/* create an X-Path object ready to query the DOM */
$xp  = new DOMXPath($dom);
/* Query to find tables with given class */
$col = $xp->query('//table[@class="result-set"]');
foreach ($col as $table) {
    echo strip_tags($dom->saveHtml($table), "<td><table><tbody><th><tr><img>");
    // strip tags i dont want in the table 
    break;
    // i only want the first one currently
}   
?>
<body>
<script>
var aTags = document.querySelectorAll("td[nowrap]"); // get all team cells
for(var i = 0; i < aTags.length; i++)
{
    var str = aTags[i].innerHTML
        aTags[i].className += "teams"; // assign teams class to parent tag (the whole row)
    if(str.indexOf("DJK Borussia Münster")>0){ // search for teamname 
        aTags[i].parentNode.className += " highlight"; // assign highlight class to parent tag (the whole row)
    }
}

var bTags = document.getElementsByTagName("img"); // get all images
for(var i = 0; i < bTags.length; i++) {
    var str = bTags[i].src;
    if(str.indexOf("up_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/up.gif"; // change image source
    }
    if(str.indexOf("down_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/down.gif"; // change image source
    }
    if(str.indexOf("up_grey_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/up_r.gif"; // change image source
    }
    if(str.indexOf("down_grey_11x11.gif")>0){ // search for img name
        bTags[i].src = "img/down_r.gif"; // change image source
    }
}
</script>
</body>
</html>

and part of the functions.php

/* Enqueue parent stylesheet first, child stylesheet second*/
function child_theme_s_enqueue_styles() {

 $parent_style = 'parent-style';

 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style )
 );
}
add_action( 'wp_enqueue_scripts', 'child_theme_s_enqueue_styles' );


/* Enqueue Javascript in /child-theme-s/includes/js/ */
function child_theme_s_scripts(){

 wp_enqueue_script('child-theme-s-js', get_stylesheet_directory_uri() . '/includes/js/child-theme.js');

 }

add_action( 'wp_enqueue_scripts', 'child_theme_s_scripts' );

// 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() . $filepath);
    $content = ob_get_clean();
    return $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() ) . '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' );
13
  • Have you searched this site for enqueue? sort the results by vote and you'll see a fair few answers. Jul 24, 2016 at 8:57
  • Yes, I only find answers that look into functions.php, not how to implement in a way I want to know about. Have you read the OP?
    – user98847
    Jul 24, 2016 at 9:09
  • Yes. Can you paste the code that doesn't work? You seem to have a link to code that you say does work. It would be handy to see what you've tried to do to incorporate it into your theme or plugin. Jul 24, 2016 at 9:12
  • I added this to my functions.php paste.ofcode.org/3aBPPVBRBx5CkELrSpJR3k6 Then I put a shortcode to the page to which I want to add the table to. It then displays the table but without the custom CSS.
    – user98847
    Jul 24, 2016 at 9:25
  • I can't see your code on that site. If you can edit your question and update it with your code, which is what we prefer here so that good questions and answers have a long lifetime, I can take a look. How to Ask is a useful reference. Jul 24, 2016 at 9:27

1 Answer 1

0

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() . '/' . $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() ) . '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="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="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 = "img/up.gif"; 

to

bTags[i].src = "<?php echo get_stylesheet_directory_uri(); ?>/img/up.gif"; 

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

6
  • Thank you for your answer. I rewrote the script part which should fix the image problem. Please confirm that. In the functions.php, I can add the code you provided, but what do I have to remove? You wrote "instead".
    – user98847
    Jul 24, 2016 at 11:36
  • Well as you have the images, it would be easier for you to debug and the image references seem to be more to do with the code you extract from the remote site and JavaScript than to do with WordPress. What I can confirm is that my code is now properly trying to load the stylesheet file. Jul 24, 2016 at 11:45
  • I changed that, now the Javascript is not running at all. You can see the result here: tt-borussia.de/wp-content/themes/childhemingway/… Notice that the highlight code of the Javascript is also not applied to the second row.
    – user98847
    Jul 24, 2016 at 12:02
  • Why are you calling a theme file directly by URL? It references the WordPress function get_stylesheet_directory() so you wouldn't expect it to work like that. You need to make a Page within WordPress and use your shortcode. If I edit my copy of your code and load the page with the shortcode in then my page correctly tries to get the images from the theme's /img/ sub-directory. Jul 24, 2016 at 12:05
  • I am not calling the theme like that, I was just linking to the table. The link to the homepage is tt-borussia.de
    – user98847
    Jul 24, 2016 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy