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
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
andwp_enqueue_style
both called inside a function that hooks intowp_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.