Looking at my site, I realized that some of my code snippets are a little wide for my theme and may be being cut off in some browsers. On top of that, WordPress seems to like to mangle code. In the Edit Post page, there is a specific code button when you use the HTML editor, but the button doesn’t appear on the Visual editing screen.
My solution is to put code into a Popup window that will allow the user to view it more clearly and in a window wide enough for even the widest lines of code. In addition, this will allow me to make a photo gallery pop up and probably all sorts of other uses I’ll eventually invent.
Since this is something I’m going to use again and again, I’d rather it be a plugin instead of some code I have to type in again and again. I came across GreyBox Integrator which seemed to do most of what I needed.
GreyBox Integrator allows you to put a clickable link on your web page and have that link open in a new window over your current window. You can specify the URL of the web page along with other parameters.
One problem I’m having is getting the GreyBox Integrator button to appear in the editor. I only see the button in HTML mode, and it doesn’t do anything. I tried the plugin on another WordPress install, and it does work. I’m not sure why this occurs.
The code the plugin button generates looks like this when you view the HTML (which happens to also be a perfect example of how some code is too wide to properly display in this theme — I’ve broken the line into 4 lines for display here):
<a title="Add a Random Header Version 2" rel="gb_page_fs[]"
href="https://www.ericshefferman.com/wp-content/code/
add-a-random-header-version-2.txt">Add a Random Header
Version 2</a>
Or to look at a shorter example of the GreyBox call that doesn’t have to line wrap:
<a title="X" rel="gb_page_fs[]" href="https://www.x.com">X</a>
and this is what it looks like in action: Add a Random Header Version 2
So now I have the Popup part working.
For now I’m going to put all the code to pop up in text files in a wp-content/code directory. Ideally I think this whole process should be handled by a plugin that interfaces with the Edit Post, but until I’m up for writing one I’ll just do it by hand.
So now you can see the line of code from above as a popup without the line breaks in the middle. Instead you’ll probably have to use the horizontal scrollbar at the bottom of the window to read the line from left to right. But at least the text isn’t cut off.
Saving the code as text files also gets rid of all the problems with needing to escape characters that would be interpreted as HTML.
I’m hoping that by putting the code in a subdirectory of wp-content, that I’ll remember to grab it and back it up when I do backups of everything else. Ideally the content should probably be stored in the database with all the other WordPress content, and that’s what I’ll look to do when I get around to writing a plugin.
For now, I’m going to make readable code popups on my Adding a Random Header Image to WordPress post.