A Library of HTML Code For Pasting Code Into Post

General Discussion Coding Help
1

In my website, I make use of RAW HTML editor and I never use a visual text editor. I did come across “Insert Html Snippet” plugin however I do not know if a shortcode works with a raw HTML text editor.

These are the two types of HTML code that I work with:

<div>
  <input type="checkbox" id="tnail1" class="tnail-enable" /> <label for="tnail1">...</label>
  <figure class="tnail-large">
    <a href="..."><img
       class="maxwidth" src="..." alt="..." loading="lazy" /></a>
    <figcaption>...</figcaption>
  </figure>
</div>

That code above is for a single large image. The code below is for multiple images lined up in a grid.

<div>
  <input type="checkbox" id="tnail2" class="tnail-enable" /> <label for="tnail2">...</label>
  <div class="img-tnail">
    <figure>
      <a href="..."><img
         src="..." alt="..." loading="lazy" /></a>
      <figcaption>...</figcaption>
    </figure>
    <figure>
      <a href="..."><img
         src="..." alt="..." loading="lazy" /></a>
      <figcaption>...</figcaption>
    </figure>
    ... (repeating figures with more images)
  </div>
</div>

The code above with “…” is for reusability purposes (is that even a word?) and I don’t want to convert it into a shortcode for this. Is there a plugin that would allow me to do this?

2

Shortcodes are expanded when the post content is presented to the website visitor. This could mean in the visual mode of the editor, the editor preview, the Customizer, or the actual front end of the website.
There is a built-in shortcode [caption] for captioned images and another [gallery] for showing multiple images. Both of these can be filtered.
There are a lot of plugins which provide alternate gallery output.
There are also plugins that help you define your own shortcodes or reusable mini-templates. It seems easiest to use the built-in shortcodes.

3

What if I want to re-use HTML code that is not a caption or gallery? Is there an alternative to using shortcodes?

Update: Actually, I think I will go the old-fashioned way and store snippets of HTML code in separate files in my web server (outside of /var/www folder) instead of using plugins. I’m not interested in using shortcodes because once I type [gallery] or [caption], nothing happens once I hit ENTER or TAB key in a raw HTML editor.

Thanks for your help, though.

4

If you can write PHP, you could create custom fields (Advanced Custom Fields makes a nice user interface)) and then you can display the HTML on a template you’ve created, dependent on the image values (custom fields) being present.

1 Like
5

Thanks. I do have knowledge of PHP, so maybe I could do that.

However, I am thinking I should create a small web application for reading/saving HTML snippets. Would it be a problem if I put a web application inside /wp-admin or does this have to be written as a plugin instead?

I’m thinking of something like this:

  • wp-admin/mysnippets/imggallery.html
  • wp-admin/mysnippets/imglarge.html
  • wp-admin/mysnippets/mycustomsnippet.html
  • etc.

I have never written a plugin before, however for now, I’m okay with storing my snippets in my home folder which can be accessed via SSH.

6

Would it be a problem if I put a web application inside /wp-admin or does this have to be written as a plugin instead?

I’ve seen this approach a couple of times and the result was messy.

If you want to start your first plugin you can have a look at vars and Icons for CP. Clone them, do whatever you want, have fun :sweat_smile:

Vars was intended to store pieces of text and Icons for CP to store SVG code.
Vars was my first plugin, so in Icons for CP you’ll find better code.

Both output their content using a shortcode, but they integrate with TinyMCE where they display a menu to output to the editor the shortcode. This can be easily converted to output an HTML snippet.

7

Well, I’m not going to be using shortcodes, but thanks. And besides, I do not use a visual editor. Only HTML. Also, I’ve disabled the “upload” feature of WordPress, so all of my images are in /res/img.

8

I wouldn’t put things in the wp-admin folder as that gets updated by core. I’d use a folder within wp-content like uploads or mu-plugins and create a subfolder within it.