Enqueueing Scripts and Styles to page template that has html

Question

I built a custom calculator using html5, css3, and jQuery. I have it live and it works well but now someone would like to put my calc on their WP website and we can not figure out how to get it on his WP site.

I created a calculator.php page template and put my .html code in the content area of calculator.php. Then I created a page in WP and selected the template from page attributes.

I can now see my custom made calculator on the page but do not have any styling and the jQuery does not work.

I tried loading the HTML, CSS and JS all inside the content area of my calculator.php page template so I would not have to enqueue anything but it does not work 100%. It does have some styling now and some JS works but not 100%. It seems to be getting overridden by the main themes CSS.

So now I thought I would try to enqueue my CSS and JS onto calculaotr.php page.

How would I go about enqueueing Scripts and Styles to a specific page template that holds my HTML?

PHP is so confusing to me. I created a directory inside of my theme folder called calc and inside of calc I have folders called CSS and JS.

Path to my css /public_html/wp-content/themes/parallaxpro/calc/css/main.css

Path to my js /public_html/wp-content/themes/parallaxpro/calc/js/main.js

Thanks for any help!!!

Answer 1

Sounds to me like what you want to do, is create a standalone plugin for this. You've already got a lot of the ground work setup (Eg the code) it would just be a matter of creating the plugin and dropping all your code into this. You can even change retain your html template and just call it via a shortcode. Then you can retain your markup, and also use the shortcode call to register and enqueue your script/stylesheets when you need them.

I won't go into the full details on how to create a plugin, but to start you off, just create a new folder called "My_Plugin" or whatever you want to call it. In that folder create a php file, doesn't matter what it's called, for this example you can call in my_plugin.php.

In that file you'd paste in this:

<?php
/*
Plugin Name: Plugin Name
Plugin URL: Whatever
Description: Plugin Desc
Version: 2.0
Author: Yup
Author URI: Uh huh
Contributors: Sure

*/

That will get you started. From there, you can hook and register your scripts/styles with this:

add_action( 'wp_enqueue_scripts', 'my_plugin_register_style_and_scripts' 'enqueue_styles',15);

add_action( 'admin_enqueue_scripts', 'my_plugin_register_style_and_scripts', 'backend_enqueue_styles',15);

and then put in a function:

function my_plugin_register_style_and_scripts () {

$plugin_url = plugin_dir_url(__FILE__);

wp_register_style('style_sheet_handle', $plugin_url."file.css');

}

With this in place, you can drop in your shortcode to output the markup for your calculator, and within the shortcode call just enqueue your scripts/sheets etc and you're done.

By doing it this way, you've made your code as portable as it possibly can be :) Hope this helps.

One thing I want to mention, is outputting markup via shortcode call you have to RETURN it rather than echo it, otherwise WP shifts it above everything else. If you're using plain markup, you can use output buffering to capture and then return markup so that it works properly. You'd do that like this:

<?php ob_start();

//call your template here

$content = ob_get_content();

ob_end_clean();

return $content;