Support » Fixing WordPress » Adding html/css/javascript app to wordpress page using plugin and shortcode

  • Resolved pfbarnet

    (@pfbarnet)


    I’ve created a little web app for my client that utilizes vanilla html/css/javascript to create an interactive infographic. Now I’d like to deliver the app to them so they can easily install it as a plugin and then display it on any page/post they need with a shortcode (i.e. add_shortcode(”,”)…)

    But what is the best way to do this specifically with the HTML parts? Can I put the HTML inside of the main php page and link to the css/js files as I normally would? Basically just vanilla html with <?php ?> tags around it? Would that work?

    • This topic was modified 3 weeks, 6 days ago by  pfbarnet.
    • This topic was modified 3 weeks, 6 days ago by  pfbarnet.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Joy

    (@joyously)

    The shortcode handler would be a function that returns what goes into the page. If that includes inline JS and CSS, then it should do that. But it should handle using the shortcode more than once on any page.
    You can use a define if you want it only once on a page.
    But the handler can enqueue the JS, to be output in the footer. Probably styles also. If you put that in some other function than the handler, it has to check that the shortcode is used and only output when it is.

    Sorry, I don’t really understand your solution. Anyway you could walk me through the process? Just to make it more clear:

    I have two documents: index.html and style.css. In my html I have a link to my css and some inline JS. What I need to do is convert this into a WP plugin that my client can easily install and afterward, generate the output on any WP page or post using a shortcode. So far I’ve figured out how to create a plugin with a shortcode but I do not understand how to render my html.

    For instance I’ve successfully render “Hello World!” with the following code:

    <?php
    /*
    * Plugin Name: WordPress ShortCode
    */

    function wp_first_shortcode(){
    return “Hello World”;
    }

    add_shortcode(‘first’, ‘wp_first_shortcode’);
    ?>

    BUT this doesn’t really help me because instead of the PHP return function, I need a bunch of HTML. How do I actually do this? How do I structure that? Do I need to use enqueue or an include for that?

    Any help would be appreciated.

    Joy

    (@joyously)

    Read the plugin handbook: https://developer.wordpress.org/plugins/shortcodes/
    If you want the user to provide parameters, you need to handle those parameters. If the user is providing content, it would be an enclosed shortcode.
    Or there could be no interaction, but the user dictates where it goes by putting the shortcode where he wants.

    The CSS output depends on whether you want to allow multiple shortcodes on a page or not. If not, your handler can check for a define to determine if it has run before, and then define it as it generates the return content. Your CSS can be part of that content if it’s single use. Otherwise, you can use the define trick for the CSS.
    Your HTML should not be the entire index.html. It should only be the part that goes in the body of the page with the shortcode.
    You didn’t mention your javascript in the last question, but it’s the same thing. You only want one copy of it on any page. You can enqueue it from the handler if you choose the option of putting it in the footer (see the last parameter).
    https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.