A couple of recent posts here \u2014<\/p>\n
\u2014 required some post-specific Javascript and CSS styling. It took me a little while to figure out how to achieve this, given my limited exposure to PHP in general and WordPress programming in particular. This is how I went about it; there may well be better ways.<\/p>\n
At this point your draft is assigned a post-ID. This is the value at the end of the post’s URL. For example, this post has URL<\/p>\n
https:\/\/redfrontdoor.org\/blog\/?p=970<\/pre>\nand its post-ID is 970.<\/p>\n
Write post-specific Javascript<\/h2>\n
Make a self-contained Javascript file, wrapping the logic in<\/p>\n
jQuery(document).ready(function($) {\n \/\/ [... code goes here ...]\n});\n<\/pre>\nA reasonable location for this file within your WordPress installation is a ‘
js<\/code>‘ subdirectory of the theme directory. In my case, this is<\/p>\n[WP root]<\/em>\/wp-content\/themes\/donovan\/js\/filename<\/em>.js\n<\/pre>\nwhere I choose
filename<\/em><\/code> to represent the title of the post.<\/p>\nWrite post-specific PHP functions<\/h2>\n
Using WordPress’s wp_enqueue_script<\/a><\/tt> and wp_enqueue_style<\/a><\/tt> functions, write a function for the post which enqueues the required JS or CSS. For example, the jam-jar-lid oscillator depends on jQuery, and so required:<\/p>\n
function bn_js_for_546() {\n wp_enqueue_script(\n 'jam-jar-lid-oscillator',\n get_template_directory_uri()\n . '\/js\/jam-jar-lid-oscillator.js',\n array('jquery'));\n}\n<\/pre>\nThis is inserted at the end of the theme’s
functions.php<\/code> file. The PHP for post 925 is more involved and enqueues the ‘slider’ jQuery-UI component and its styling, the D3 library, and my own custom Javascript and CSS. (Without the styling, the Javascript correctly turns the element into a slider, but it is not rendered. Here I downloaded a copy of the CSS files into the WordPress directory, but see also this post by Ross McKay<\/a>.) The result is<\/p>\nfunction bn_js_for_925() {\n wp_register_script(\n 'd3',\n 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/3.5.2\/d3.min.js',\n false, null);\n wp_enqueue_script(\n 'interactive-graphs',\n get_template_directory_uri()\n . '\/js\/interactive-graphs.js',\n array('jquery', 'jquery-ui-slider', 'd3'));\n wp_enqueue_style(\n 'post-925-css',\n get_template_directory_uri()\n . '\/js\/second-opinion.css',\n false, null);\n wp_enqueue_style(\n 'jquery-ui-theme',\n get_template_directory_uri()\n . '\/css\/jquery-ui-themes-1.10.4'\n . '\/themes\/smoothness\/jquery-ui.css',\n false, null);\n}\n<\/pre>\nExcuse the fudge of putting the post-specific CSS into the ‘
js<\/code>‘ directory.<\/p>\nWrite PHP to hook the post-specific function<\/h2>\n
A dispatching PHP function checks whether this post requires custom JS or CSS and adds the appropriate function as an ‘
wp_enqueue_scripts<\/code>‘ action if so. The test for requiring custom JS or CSS is whether a function named ‘bn_js_for_NNN<\/em><\/code>‘ exists, whereNNN<\/em><\/code> is the post-ID. This is not especially elegant, but it avoids repeating myself, and this is PHP so there’s no huge incentive to strive for elegance anyway.<\/p>\nThe code<\/p>\n
function bn_maybe_enqueue_scripts()\n{\n global $post;\n $post_ID = $post->ID;\n $post_js_fun_name = 'bn_js_for_' . $post_ID;\n if (function_exists($post_js_fun_name))\n add_action('wp_enqueue_scripts', $post_js_fun_name);\n}\n<\/pre>\ndoes what we need.<\/p>\n
Add hook function where post-ID is available<\/h2>\n