Support » Fixing WordPress » HTML code not working at front end

  • Hello

    I have been at this for over a week and it’s getting to my head as it should work but it doesn’t.
    I am embeding this code
    _______________________________________

    <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://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <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>

    ____________________________________________________________________
    Site name within this code have been changed.

    into the html of the pages and The Odd part about all this is within the editor it’s self it is working and I see the actual tables/text etc etc but it doesn’t display on the front end page.

    I have tried this in html, php, js nothing works.
    I even have a plugin “WP CODER” that transforms these snipplets into a shortcode and that doesn’t even work.

    I have placed a link of my site https://ozy-web-hosting-services.ozy.net.au/domain-name-search/
    To hopefully help find a solution quicker.

    Anyones help would be greatly appreciated.

    • This topic was modified 9 months, 2 weeks ago by phil1ooo.
    • This topic was modified 9 months, 2 weeks ago by bcworkz. Reason: code fixed

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator bcworkz

    (@bcworkz)

    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.

    I tried using the WP coder which provides a shortcode for it but the shortcode doesn’t work either.

    Having said that WHy does it display within the editor PREVIEW then?

    • This reply was modified 9 months, 2 weeks ago by phil1ooo.
    Moderator bcworkz

    (@bcworkz)

    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.

    Hi
    I am not that great at php or working with functions. I tried to create shortcodes but they never work.

    Is there anyone who would be able to help me create a shortcode for the above script to work. Happy to provide proper links via other means than public for testing. This URL’s come from a third party site.

    Just to give an example as well I have installed the scripts & styles plugin which actually does display the content but below the wp footer of the usual content pages.
    https://ozy-web-hosting-services.ozy.net.au/compare-shared-hosting-plans/
    If there is something I can add to make this display correctly then that would be create.

    Cheers

    Moderator bcworkz

    (@bcworkz)

    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.

    Hi

    Tried to get to work but no go. I have converted everything to iframes as that’s the only way I can get to appear where I need it to be in the pages.

    I don’t really like using iframes but it seems I have no choice atm.

    Thanks for your help.

    I am working on improving on these shorthcode scripts and I can get the basics to work just need more understanding of the atts etc and how to use them correctly.

    Cheers

    Moderator bcworkz

    (@bcworkz)

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘HTML code not working at front end’ is closed to new replies.