Title: Adding html/css/javascript app to wordpress page using plugin and shortcode
Last modified: May 21, 2019

---

# Adding html/css/javascript app to wordpress page using plugin and shortcode

 *  Resolved [pfbarnet](https://wordpress.org/support/users/pfbarnet/)
 * (@pfbarnet)
 * [7 years ago](https://wordpress.org/support/topic/adding-html-css-javascript-app-to-wordpress-page-using-plugin-and-shortcode/)
 * 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 7 years ago by [pfbarnet](https://wordpress.org/support/users/pfbarnet/).
    -  This topic was modified 7 years ago by [pfbarnet](https://wordpress.org/support/users/pfbarnet/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Joy](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [7 years ago](https://wordpress.org/support/topic/adding-html-css-javascript-app-to-wordpress-page-using-plugin-and-shortcode/#post-11553017)
 * 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.
 *  Thread Starter [pfbarnet](https://wordpress.org/support/users/pfbarnet/)
 * (@pfbarnet)
 * [7 years ago](https://wordpress.org/support/topic/adding-html-css-javascript-app-to-wordpress-page-using-plugin-and-shortcode/#post-11556033)
 * 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](https://wordpress.org/support/users/joyously/)
 * (@joyously)
 * [7 years ago](https://wordpress.org/support/topic/adding-html-css-javascript-app-to-wordpress-page-using-plugin-and-shortcode/#post-11556321)
 * Read the plugin handbook: [https://developer.wordpress.org/plugins/shortcodes/](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/](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding html/css/javascript app to wordpress page using plugin and shortcode’
is closed to new replies.

## Tags

 * [code](https://wordpress.org/support/topic-tag/code/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [php](https://wordpress.org/support/topic-tag/php/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [Joy](https://wordpress.org/support/users/joyously/)
 * Last activity: [7 years ago](https://wordpress.org/support/topic/adding-html-css-javascript-app-to-wordpress-page-using-plugin-and-shortcode/#post-11556321)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics