Get this code into a plugin

  • Resolved convictedvapour

    (@chronicbubble)


    8 years, 4 months ago

    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.

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

    (@codehunterxydeep)

    8 years, 4 months ago

     function get_eliquid($atts) {
	
return 'YOUR CODE HERE'
	;
}
    Thread Starter convictedvapour

    (@chronicbubble)

    8 years, 4 months ago

    Thank you very much indeed! @codehunterxydeep

    Thread Starter convictedvapour

    (@chronicbubble)

    8 years, 4 months ago

    I have the HTML code working now correctly (originaly from index.html) working now so thanks for that. @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

    (@chronicbubble)

    8 years, 4 months ago

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Get this code into a plugin’ is closed to new replies.

Tags