Adding custom code to a WordPress site

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.

Read More

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?

Related posts

1 comment

  1. 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

    <?php
    /**
     * 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.

Comments are closed.