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' );
