Title: Get this code into a plugin
Last modified: September 16, 2016

---

# Get this code into a plugin

 *  Resolved [convictedvapour](https://wordpress.org/support/users/chronicbubble/)
 * (@chronicbubble)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/get-this-code-into-a-plugin/)
 * How can I get this HTML code into a plugin. I have copied a complete index.html
   file code I wan’t inside a plugin. I have tried copying a pasting into a plugin
   file I have created but it doesn’t work? Thanks in advance.
 *     ```
       <!DOCTYPE html>
       <html>
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
         <title>DIY E-Liquid Calculator</title>
         <link rel="stylesheet" href="css/index.css" media="screen" title="no title" charset="utf-8">
       </head>
       <body>
   
         <div class="container">
   
           <h1>
             DIY E-Liquid Calculator
           </h1>
           <div class="inputs">
             <h2>
               Input
             </h2>
             <label>
               Base ml
               <input type="text" value="50ml" />
             </label>
             <label>
               Base VG%
               <input type="text" value="100%" />
             </label>
             <label>
               E-Liquid ml
               <input type="text" value="7ml" />
             </label>
             <label>
               E-Liquid VG%
               <input type="text" value="100%" />
             </label>
             <label>
               E-Liquid Nicotine%
               <input type="text" value="2.7%" />
             </label>
             <label>
               Flavor ml
               <input type="text" value="7ml" />
             </label>
             <label>
               Flavor VG%
               <input type="text" value="0%" />
             </label>
           </div>
           <div class="outputs" id="results">
             <h2>
               Output
             </h2>
             <label>
               Base %
               <input type="text" disabled="true" />
             </label>
             <label>
               E-Liquid %
               <input type="text" disabled="true" />
             </label>
             <label>
               Flavor %
               <input type="text" disabled="true" />
             </label>
             <label>
               Nicotine %
               <input type="text" disabled="true" />
             </label>
             <label>
               VG %
               <input type="text" disabled="true" />
             </label>
             <label>
               Total ml
               <input type="text" disabled="true" />
             </label>
           </div>
   
           <h2>
             Visualisation
           </h2>
   
           <div id="container">
             <div class="base">
               <p>
                 <span></span>
                 Base
               </p>
             </div>
             <div class="liquid">
               <p>
                 <span></span>
                 E-Liquid
               </p>
               <div class="nicotine">
                 <p>
                   <span></span>
                   Nicotine
                 </p>
               </div>
             </div>
             <div class="flavor">
               <p>
                 <span></span>
                 Flavor
               </p>
             </div>
             <div class="vg">
               <p>
                 <span></span>
                 VG
               </p>
             </div>
             <div class="pg">
               <p>
                 <span></span>
                 PG
               </p>
             </div>
           </div>
   
         </div>
   
         <script type="text/javascript" src="lib/jquery.min.js"></script>
         <script type="text/javascript" src="js/index.js"></script>
   
       </body>
       </html>
       ```
   
 * This following code is the plugin I have created. It creates a shortcode `[eliquid]`
   to which I want to be able to add the shortcode to a page and have that shortcode(
   as created) add the above html code to a page.
 *     ```
       <?php
       /**
        * Plugin Name: WP Eliquid
        * Plugin URI: http://jailjuice.com/
        * Description: This plugin Calculates the e-liquid that you can make from base components.
        * Version: 1.0.0
        * Author: Gareth Lloyd
        * Author URI: http://jailjuice.com/
        * License: GPL2
        */
        //[eliquid]
        add_shortcode('eliquid', 'get_eliquid');
   
        function get_eliquid($atts) {
       	 //CODE GOES HERE	
   
       	 //CODE ENDS HERE
       	;
       }
       ```
   
 * Thanks in advance once again.
    -  This topic was modified 9 years, 8 months ago by [convictedvapour](https://wordpress.org/support/users/chronicbubble/).

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

 *  [codehunterxydeep](https://wordpress.org/support/users/codehunterxydeep/)
 * (@codehunterxydeep)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/get-this-code-into-a-plugin/#post-8190290)
 *     ```
        function get_eliquid($atts) {
   
       return 'YOUR CODE HERE'
       	;
       }
       ```
   
 *  Thread Starter [convictedvapour](https://wordpress.org/support/users/chronicbubble/)
 * (@chronicbubble)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/get-this-code-into-a-plugin/#post-8191427)
 * Thank you very much indeed! [@codehunterxydeep](https://wordpress.org/support/users/codehunterxydeep/)
 *  Thread Starter [convictedvapour](https://wordpress.org/support/users/chronicbubble/)
 * (@chronicbubble)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/get-this-code-into-a-plugin/#post-8191485)
 * I have the HTML code working now correctly (originaly from index.html) working
   now so thanks for that. [@codehunterxydeep](https://wordpress.org/support/users/codehunterxydeep/)
   The original code being from within a folder as an index.html file requires other
   folders and files to run correctly as it should.
 * I’ll explain further and hopefully more clearly. I have a folder called `e-liquid-
   calculator-master` and within that folder is the following:
 * `css` (A folder containing a single file `index.css`)
    `js` (A folder containing
   a single file `index.js`) `lib` (A folder containing a single file `jquery.min.
   js`) `.eslintrc` (a singular file) `.gitignore` (a singular file) `index.html`(
   the completed HTML code I managed to embed into the plugin using your code) `
   LICENSE.txt` (a singular file) `package.json` (a singular file)
 * Now that folder containing all these files was my original HTML working script
   outside of WordPress plugin I am trying to make put simply when I was to run 
   index.html it worked as it knew where the other files were it needed as above.
 * How can I get the plugin to find these folders and files within the plugin itself.
   Any help would be great. In the meantime I shall have a good google around once
   more on a backup copy of the now half working plugin as not to ruin my original
   copy.
 * Many thanks once again and all the best.
 *  Thread Starter [convictedvapour](https://wordpress.org/support/users/chronicbubble/)
 * (@chronicbubble)
 * [9 years, 8 months ago](https://wordpress.org/support/topic/get-this-code-into-a-plugin/#post-8191534)
 * I have currently the css file working It’s just the rest now lol. Thanks for 
   all you help. Consider the issue solved. All of the plugin is now as intended.
    -  This reply was modified 9 years, 8 months ago by [convictedvapour](https://wordpress.org/support/users/chronicbubble/).

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

The topic ‘Get this code into a plugin’ is closed to new replies.

## Tags

 * [html](https://wordpress.org/support/topic-tag/html/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [convictedvapour](https://wordpress.org/support/users/chronicbubble/)
 * Last activity: [9 years, 8 months ago](https://wordpress.org/support/topic/get-this-code-into-a-plugin/#post-8191534)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
