I have coded a small calculator in 3 files, HTML/JS/CSS + 1 image, and I need to integrate it in the main column of a WordPress site. It's a standard calculator tool, a div with 2 dropdown, and a result appearing when options are selected.

The tool needs to appear just as an article would, taking all the main column of a 3 columns layout. Maybe it could be a shortcode but not a sidebar widget.

I just need this piece of custom code to display in a page. No other requirements. I'm a software coder and have no WP experience. What's the best way to do that, do I need to make a plugin?


If your custom code should output something where normally you have post content, use a shortcode.

Convert your code in a plugin, this can be done simply adding plugins header, even only

 * Plugin Name: My Plugin

on top of your php file. More info here.

After that use the add_shortcode function to output your content. See docs.

Remember that the function that handle the shortcode must return the output, and not echo it.

After that, an advice regarding style and script. In WordPress, right way to add styles and scripts to frontend are the functions wp_enqueue_script and wp_enqueue_style both called inside a function that hooks into wp_enqueue_scripts.

If you do this, probably you want to know a way to enqueue scripts/and styles only in posts that contain the shortcode, for that look at has_shortcode function.

Finally, to use both wp_enqueue_* functions, and to insert the image you said you have, you need to know the url of your plugin folder. Please do not hardcode it, but use plugins_url function to correctly retrieve it.

Without seeing your code, there are no much more things I can say, try to implement what I said and if you have problems try to ask a more specific question.

  • Thank you for this useful advice! That's exactly the kind of info I needed. – xShirase Nov 26 '13 at 23:51

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.