HTML code not working at front end

Your page already has the WP copy of jQuery loaded for the page. By also loading a version from jquery.com, you are creating a conflict. Try simply removing the jquery.com reference.

Note that the WP version runs in noConflict mode. Your related script cannot use the usual $ shortcut unless you place it within a noConflict wrapper that re-declares the shortcut.

Converting embedded script to shortcodes is a good practice. Otherwise, if anyone editing a page with code directly embedded should switch to visual view, the editor’s parser will corrupt your code.

Right. Once your script is working correctly, it’s still worth implementing it as a shortcode so the editor cannot corrupt it.

I’ve no idea why preview works but not normal view. Since visitors cannot view previews, it’s not possible for me to inspect previews and compare with normal views. To hazard a guess, it’s possible the WP version of jQuery is failing to load in preview as it does in normal view, so there is no conflict.

Here’s code for a simple plugin that adds your script to post content via shortcode. You can add other custom code to this plugin if you like. If you don’t like the naming I chose, you should be able to figure out how to change it. The key is consistency. Change all occurrences of the name equally.

Create a new empty text file named ozy-script.php. Paste the following code into the file and save it. Upload to /wp-content/plugins/ or /wp-content/plugins/ozy-script/.

<?php
/*
Plugin Name: ozy-script
Description: Embed script via [ozy-script] shortcode.
Author: bcworkz
Version: 0.10 beta
*/
function do_ozy-script( $atts ) {
   $script = <<<'EOT'
<link rel="stylesheet" href="https://comparetables.site.com/plain.css?table_bkg=FFFFFF&table_color=000000&plan_names_bkg=EEEEEE&features_hover=F9F9F9&order_bkg=CCCCCC&order_color=000000">
<div id="compareTable"></div>
<script src="https://comparetables.site.com/script.js?store_id=282151&service=hosting&style=plain&order_url=https://site.ozy.net/hosting-order-form/&order_text=Order Now&container_id=compareTable&features_type=0"></script>
EOT;
// the above line must NOT contain any whitespace
   return $script;
}
add_shortcode('ozy-script', 'do_ozy-script');

Correct the “site.com” URLs that you used for obfuscation.

I’ve removed the reference to jquery.com to prevent a conflict with the WP jQuery. If the referenced script.js uses $ shortcuts and does not use a noConflict wrapper, you will need to download the referenced file, add a noConflict wrapper, then host the file on your server. Alter the script’s src reference in the handler function accordingly.

Activate this plugin. To use it, insert [ozy-script] in post content where ever you want the table to appear. I leave the testing for you to do 🙂

You can add similar code to define other shortcodes, replacing the current output with other desired content. Remember to rename the shortcode and the related function. The key to shortcodes is nothing can be echoed out by the handler function. All shortcode output must be returned by the function.

You’re welcome.

All the different possibilities for implementing shortcodes can get confusing. If you’ve not yet encountered it, the shortcode reference in the Plugin Handbook can be very helpful.