0

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!!!

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; 
  • Is it possible to enqueue scripts and styles into my page template that has .html? I also tried calling the css and js from within the html that I put in the content area of my page template. But this did not work at all. – crag Jun 16 '15 at 19:58
  • Yes, you can easily make a script/style sheet call within your template via php. Just make sure you're using the correct path. For his site, I'd really recommend he download and enqueue his own copy of your script/style sheets for 2 reasons. 1, you don't want his site traffic hitting your server everytime his page needs your script. 2) Security – Hybrid Web Dev Jun 16 '15 at 20:01
  • Yeah he has his own copy of my files already. Just trying to find a tutorial on doing the script/style call now. – crag Jun 16 '15 at 20:06
  • Is there a simple tutorial that will show me how to add some code to functions.php so I can have custom css and js load to only one specific page template. – crag Jun 16 '15 at 21:18
  • You don't have to worry about conditionally calling the register function, as WP won't do anything with just it itself. However, you can and should wrap the enqueue functions in conditionals, such as is_admin() or is_page() to ensure you only call it where you need it. Personally, I put all my enqueue calls in either my shortcode functions when I'm using them, or in the templates themselves, either via a filter, or directly in the template file. – Hybrid Web Dev Jun 17 '15 at 20:20

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.