In the coming days, I plan to take up the idea of PHP for non-programmers, helping you tap the power of PHP’s dynamic text processing without learning (much) actual coding.
The problem is that illustrating HTML or PHP in WordPress is always a problem. Why? Because WordPress eats code for breakfast. Properly-formatted coding looks to WordPress like… properly-formatted coding. Instead of a code example, you get the executed code itself.
There are ways around this. I’ve used pictures in the past, or done elaborate searches to suss WordPress into showing the code sample as a code sample. But because I’m going to be showing a lot of code, and because I want for you to be able to copy and paste my examples into your own files, I built a tool (in PHP) to render PHP and HTML in a form that looks to WordPress like mere text, not code to be executed, but which will work just fine when you copy and paste it into your own files.
Like this, as a very simple example:
<html> <body> <p>Hello, World!</p> </body> </html>
I’ve made my little toy available to you, if you want to play with it. You can use it to show coded examples to your own readers. It’s not doing any kind of error-trapping, but it’s not doing very much of anything. Let me know if you can break it.
Building this was actually easier than talking about it, but there is a caveat. WordPress won’t love you if you try to go back and edit a published post that has one of these encoded examples in it. The second time through the WordPress parser, it will try to execute the code. The solution is either to write in and edit in an off-line editor like Ecto or to create your posts using coded examples in a text editor, editing your original files, rather than the published post. The point, either way, is to make sure that WordPress parses the coded examples only once before displaying them.
I’ll have more shortly, but if you want to get a jump on things, do this: Copy the example code above and paste it into a text file. Name the file “HelloWorld.php” and save it to disk. Transfer that file by FTP to your file server. (If you don’t know how to FTP, find out. We’ll be doing it a lot.)
When you go to
http://YourServer.com/HelloWorld.php
what should you see?
“Hello, World!”, of course. The file itself is HTML, but it will have been processed by way of PHP. Everything we’ll do after this is just elaboration on that one tiny miracle.
(If things didn’t work out, talk to your file server’s tech support team. You may not have PHP available to you, but, more likely, they’ll need to turn it on for you.)
Next up: How BloodhoundBlog dynamically deals with “Other posts of interest.”
Getting in touch with your inner geek:
- Apprehending Realtor 2.0: Seven essential skills of the 21st century real estate agent…
- How to make fast, flexible web pages…
- Catch your kid doing something right: Our son Cameron and the upgrade path of SlideShowMarge
- How to make Google your weblog’s best friend…
- Speaking in tongues: Presentable PHP in WordPress
- Speaking in tongues: Dynamically updated lists of links in PHP
- Speaking in tongues just for Cheryl Johnson: Building content-rich custom web sites in PHP
- Speaking in tongues for Morgan Brown: A quick and dirty contributors’ blogroll
- Speaking in tongues: A step-by-step guide to speaking in web sites
Want more? Real Estate Weblogging 101 will speak to your inner geek. And if you want even more than that, be sure to join us for BloodhoundBlog Unchained.
Technorati Tags: blogging, real estate, real estate marketing, technology
CJ, Broker in L A, CA says:
Now that’s pretty clever! To try it I pasted in a YouTube embed code snippet… the tool stripped out the left angle bracket and replaced in with <pre><
– so WP renders the <pre><
as the left bracket symbol and the rest as ordinary text. Great logic is beautiful in its simplicity. And, yes, I needed to use the tool to write this comment.
December 27, 2007 — 5:56 am
Greg Swann says:
> To try it I pasted in a YouTube embed code snippet…
Very smart. I hadn’t thought of that. I just did it. On the first save in WP, you get the embed code in readable form. On the second save, you get the embedded video.
December 27, 2007 — 7:35 am
Eric Blackwell says:
@CJ- Great application of Greg’s little goodie in WP.
@Greg- Nice little tool…will be neat to use in covering WP tweaks and how to do them in the blog ittself. Kudos.
Eric
December 27, 2007 — 9:24 am
Chicago Real Estate says:
Put the code in a text box and display the text box. You can even use ctrl-a –> ctrl-c to “select all” and “copy to the clipboard” when your cursor is in the text box.
Typepad.com’s editor is not bad, but can also bungle your code on subsequent views of the post’s code if you are embedding object tags for videos and such. It seems to keep your other HTML code in it’s native format.
Of all the blogging platforms I’ve worked with, the least likely one (in my opinion), Blogger.com, keeps all your HTML formatting pristine after the initial input and posting.
December 27, 2007 — 1:11 pm
CJ, Broker in NELA, CA says:
I just tested with TypePad. Code entered in TP’s WYSIWYG editor displays as just text …. doesn’t execute. Have to use TP’s “Edit HTML” tab to enter executable code.
December 27, 2007 — 1:58 pm
Chicago Real Estate says:
Try embedding a YouTube video into the HTML tab of the editor. Save the post, then try to re-edit. You’ll see the code does not stay formatted as on the initial post.
We’ve done a lot of work with video as well as embedding Picasa slide shows. It’s a royal pain in the rear end to have to fix up your edited code all the time.
Greg is correct – you either have to save the code separately so that you can refer to it later after the editor messes it all up for you, or you use something like Ecto, which is an offline editor that uses standard, cross platform APIs to talk with the various blogging systems.
Either way, it’s a hassle.
Nonetheless, using text boxes for displaying code samples is the way to go, because copying and pasting the code to and from the clipboard is WAY easier for the end user than it is if you put it directly into the post’s body.
December 27, 2007 — 2:27 pm
Eric Blackwell says:
Chicago;
In WordPress the easiest way (for me–up til now) to avoid this is to go to Users and Edit and then uncheck the “use the visual Editor when writing” checkbox and then copy and paste the code as normal.
You can turn the Visual editor on for other posts, but must turn it back on when editing THAT post or the problem raises its ugly head.
I haven’t had time to give Greg’s tool a thorough run on other code tasks yet. Will try that tonight if I get a chance.
December 27, 2007 — 2:38 pm