Using ShortCoder to create hand coded HTML in WordPress - Shortcoder

Resolved

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
September 16, 2023 at 11:30 pm #13507

Greyhart
Participant

I was told by the CS staff of my Page builder (OptimizePress) that If I couldn’t get their system to properly display my hand coded HTML/CSS/javascript pages, that the ShortCoder Plugin would allow me to do that, and in fact the plugin description even states so.

I don’t see anything about HTML, CSS or js in any of the documentation. Do I just copy my HTML code into the editor, and then simply use the created ShortCode in the WordPress editor? I have the CSS and javascript already uploaded to my web server, I should just need the HTML to call everything.

Currently, I have the page set up in OptimizePress, but the buttons won’t work, and the <div> background image doesn’t show up.

If I can’t get the hand coded pages to display, my website is dead in the water.

https://dungeonmastertools.games/dm-tools/

September 18, 2023 at 8:37 pm #13510

Aakash Chakravarthy
Keymaster

Hi Greyhart,

Thanks for using Shortcoder.

Yes you are right. Shortcoder is a plugin to create “shortcodes” for HTML/CSS/JS codes.

You just need to create a shortcode and enter the HTML/CSS/JS in the content box. Now, you can use the shortcode anywhere within WordPress to get the full code.

Shortcoder becomes handy, when you have HTML/CSS/JS code which you would like to use in multiple places. Just change the shortcode content and the code is reflected in all the usages.

Hope this helps.

Thanks,
Aakash

September 18, 2023 at 11:16 pm #13511

Greyhart
Participant

Well, it doesn’t seem to work correctly.

I copied the HTML (which calls the CSS and js) and put it into the editor. I then copied the shortcode. When I put the ShortCode into a new page, it shows me the text and the buttons, but the buttons don’t work, and none of the CSS is being parsed.

I can’t seem to attach any images, so I can’t show you what it SHOULD look like. This is what the ShortCoded Page looks like. It should have a background image, and a border around the <div> with a background image in the <div>. The buttons should also work. They don’t.

September 18, 2023 at 11:22 pm #13512
Greyhart
Participant
Here is the html I am trying to use. It works perfectly as straight html, but I need it to work within WordPress.
```
<!DOCTYPE html>
<html>
<head>
  <title>DM Tools</title>
  <link rel="shortcut icon" type="image/ico" href="./Images/d20Icon.ico"/>
  <link rel="stylesheet" href="dmtools.css">
</head>
<body>
  <div id="modalBox">
    <h1>Dungeon Master Tools</h1>
    <hr>
    <h1 id="adSetup">Quest Builder</h1>
    <button onclick="openCampaignPage()">Build Campaign</button>
    <button onclick="openWorldPage()">Create Government</button>
    <button onclick="openMultiversePage()">Create Multiverse</button><p></p>
    <button onclick="openAdventurePage()">Quest Builder</button>
    <hr>
    <h1 id="sessionPrep">Session Prep</h1>
    <button id="btnEncounters" type="button">Create Encounter</button>
    <button id="btnRollNPC" type="button">Roll NPCs</button>
    <button id="btnRollEnvironments" type="button">Adventure Environments</button><p></p>
    <button id="btnBetweenAdventures" type="button">Between Adventures</button>

    <hr>
    <h1 id="inSession">During Session</h1>
    <button id="btnRndEncounter" type="button">Random Encounter</button>
    <button id="btnRndBuildings" type="button">Chase Events</button><br><br>
    <button id="btnLoot" type="button">Loot</button>
    <button id="btnTreasureHoard" type="button">Treasure Hoard</button>
    <button id="btnMagicItemIssues" type="button">Magic Item Issues</button><p>
    <button id="btnSpecialFeatures" type="button">Magic Item Attributes</button>
    <button id="btnMagicItemTables" type="button">Magic Item Tables</button>
    <button id="btnArtifacts" type="button">Artifacts</button><p>
    <button id="btnMadness" type="button">Madness Effects</button>
    <button id="btnInjuries" type="button">Calculating Injuries</button>
  </div>
  <script src="dmtools.js"></script>
 </body>
</html>
```
September 19, 2023 at 12:03 am #13513

Aakash Chakravarthy
Keymaster

Hi Greyhart,

I see that the code is inserted in your page as expected.

The page already has html, body tags. We cannot insert another HTML and body tag in the page.

Please strip out the main tags like html, body, title and use the content related HTML alone (like link tag or CSS, any tag inside body)

You can view the page source to see the complete HTML and the inserted code.

Thanks,
Aakash

September 19, 2023 at 10:40 pm #13517

Greyhart
Participant

Ok, I see what you are saying, and it makes sense.
I stripped out the tags as you suggested, but it still wasn’t working. I looked at the console, and it said it wasn’t loading either the css file or the js file, 404 error. Well, I can see them right there in the directory, so I decided to try an experiment and typed in the Full Path. Weirdly, that worked.

September 20, 2023 at 12:50 am #13518

Aakash Chakravarthy
Keymaster

Yes, thats correct!
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Using ShortCoder to create hand coded HTML in WordPress’ is closed to new replies.

Subscribe to our Newsletter