I’m trying to create a WordPress plugin that will embed the PHP/HTML file that I’ve created into a post with the site’s header/footer.
I’ve tried using a regular iFrame, along with the plugin Advanced iFrame to embed it, which works and include the directory’s javascript/CSS files. However, whenever the page resizes (UI elements sliding in and out), the iframe and Advanced iFrame don’t always handle it properly.
I then looked at creating a plugin shortcode, and this is what I have so far:
<?php
/*
Plugin Name: Calculator
Plugin URI:
Description: Calculator
Version: 1.0
Author: Andrew
*/
add_shortcode("calculator", "create");
function create() {
include(plugin_dir_path(__FILE__).'calculator.php');
}
?>
Within the page itself, I am including the [calculator]
shortcode. When I load the page, it loads the header, but then everything below that (where the shortcode would normally be generated) is an empty white page. The footer is not even included.
Here is the structure of the plugin folder:
calculator/
plugin.php //What is shown above
calculator.php //Contains HTML UI and PHP code
calculator.js //Contains UI functions
calculator_style.css //CSS referenced relatively in calculator.php
fonts/
//various fonts for calculator_style.css
js/
jquery-1.9.0.min.js //jQuery referenced relatively in calculator.php
//Other various JS files for calculator.php
fpdf/
fpdf.php //FPDF, used to create a PDF printout in calculator.php
fonts/
//various fonts for FPDF
I’m not very familiar with WordPress plugins, but I want the calculator.php to be embeded in a post and still be able to properly reference its CSS/JS files.
I’d also like to not have to re-write the calculator.php file to used WordPress PHP functions to reference the local files in the plugin folder.
Is this possible using a shortcode? Or is there another/better way to embed a directory/PHP file within a WordPress post?
Edit: A little more information, this is what calculator.php sort of looks like.
<?php
require './fpdf/fpdf.php';
$jsonData = json_decode($_POST['data'], true);
if ($jsonData != NULL) {
//Create PDF and return if the page is given POST data
}
?>
<form id="pdfSave" action="" method="POST" enctype="multipart/form-data">
<div><input id="name" class="boxField" type="text"></div>
<div><input id="company" class="boxField" type="text"></div>
<div><input id="phone" class="boxField" type="text"></div>
<div><input id="email" class="boxField" type="text"></div>
<div><input id="logo" name="final-logo" class="boxField" type="file"></div>
</form>
<button id="loanInfoSettings" class="boxButtonBack" onclick="saveForm();">Save</button>
//Other HTML calculator-UI stuff
So essentially, when a user first loads the page, no POST data has been sent, so the HTML calculator is shown, which includes a variety of features and a form. When the user is finished, they click the save button, which calls the same page and sends POST data to it. This time, when the page is loaded with POST data, a PDF is generated instead of the HTML being displayed.
So I need a way to include calculator.php where when the WordPress post is loaded, the HTML calculator and form is displayed, and when the form is submitted via JavaScript, either the post, or just the embeded calculator.php, is refreshed with POST data and a PDF generated.
Edit 2: I’ve tried this to display it:
static function handle_shortcode($atts) {;
self::$add_script = true;
wp_enqueue_style('calculatorstyle');
// actual shortcode handling here
include(plugins_url( 'netsheet.php', __FILE__ ));
}
I also read that the output buffer should be used to output PHP files, so I tried
static function handle_shortcode($atts) {;
self::$add_script = true;
wp_enqueue_style('calculatorstyle');
ob_start();
include(plugins_url( 'netsheet.php', __FILE__ ));
return ob_get_clean();
}
Edit 3: Just doing the include:
static function handle_shortcode($atts) {;
self::$add_script = true;
wp_enqueue_style('calculatorstyle');
// actual shortcode handling here
include 'netsheet.php';
}
Causes the page to stop rendering when it gets to the shortcode, resulting in a header, followed by a blank white space with no footer.
Yes, Shortcodes are a good tool to do it with a plugin. The matter is that you cannot stuff everything in
include('calculator.php')
. This should only handle the markup and it should not output anything as it must return a string.Here a sample plugin adapted from How to load JavaScript like a WordPress Master. I’ve added the CSS enqueue, but it cannot use the Jedi trick to print it in the header, but works nonetheless. An important note is that you must use WP bundled jQuery (not your own) and use WP noConflict mode.
Another way would be to create a theme template to do almost the same, but I think a Shortcode Plugin is more portable as it can be used in widgets, posts and pages.