This post will show you how to write code in your WordPress posts, and have that code display as code for your readers. This is not to be confused with executing code in your posts, that’s different and will be covered in a future post. So, why would you need to display code in your posts? Well, for me, it was because many of the posts here are to show you how to hack your WordPress posts and pages and it’s much easier to show you examples of the code changes rather than just talk about it.
I am working on a project called Show in a Box and we needed to have two loops on the front page of a theme we are building. I will be posting a tutorial of how to accomplish this, and I needed to be able to insert the PHP code to show people what changes they need to make. *If you would like to know how to create multiple loops, please sign up for regular updates by subscribing to this blog via email or RSS.
The problem is that WordPress either tries to actually execute the code, or rewrites it. That makes it unusable without some help. That help comes from a plugin called SyntaxHighlighter and can be found here.
You can see the result of this plugin below:
[sourcecode language='php']
[/sourcecode]
Pretty snazzy eh? If you look closely you’ll see some handy options across the top of that window above, “view plain”, “copy to clipboard”, and “print”. That’s very convenient for users who are trying to make changes to their code.
The best part about this plugin is that it not only works with PHP code, but many others. Here’s a list from the developer’s website:
- C++ —
cpp,c,c++ - C# —
c#,c-sharp,csharp - CSS —
css - Delphi —
delphi,pascal - Java —
java - JavaScript —
js,jscript,javascript - PHP —
php - Python —
py,python - Ruby —
rb,ruby,rails,ror - SQL —
sql - VB —
vb,vb.net - XML/HTML —
xml,html,xhtml,xslt
In future posts you’ll learn how to execute PHP code in your posts and pages, and other WordPress tips, tricks, and hacks.
17 Comments
Hello, great post and great plugin.
I was looking for something similar, because the “code” tag in the WP-Editor seems not working so smoothly as this one
BTW,
plugins are a great plus to the WP community, personally i like very much the Simple Tags and his “related post” feature. Give it a try if you are not using it…. which one are u using for your “related post” feature?
NBWeb.it’s last blog post..Febbraio 2008: statistiche e analisi
Hey there,
Thanks for the comment. You may be a bit confused about the “code” tag in the WP-Editor. It’s not designed to display code like I have shown in this post. It’s there because if you want to display the results of the code you put, you need to do it under the code tab instead of the visual editor because WP changes the code. Does that make sense, I’m not sure if I’m being clear.
And yes, I am using the related posts plugin…:)
Thanks again for your comment!
Hello again,
when i write a post, i have two editor “views”: VISUAL and CODE (my WP is in italian localization, maybe it is different in your language).
If i go to the CODE view, i see many tags that can be inserted directly in the code: i have B, I, IMG, LINK, and CODE. What is that CODE button in the CODE main editor view?
Hope this makes sense for you.
Cheers,
Nicola
NBWeb.it’s last blog post..Google AdSense: annunci pubblicitari nel vostro sito
Nicola,
Please disregard my post above, I was only half correct. I am still researching an exact answer for you, but it seems like a large subject. Reading this thread should give us both a start in understanding exactly how the code buttons would be useful to either of us.
http://wordpress.org/support/topic/123219
Hello Sir,
it seems there is a bit of confusion about that tag, because many people tends to assume that the CODE button is the old HTML WP button.
But, again, i mean the code tag UNDER the code editor view.
I have tried to use it, and it seems to do something like the “pre” tag in html 4, but sometimes (for some reason that i didn’t understand) it does not display correctly some tag…
NBWeb.it’s last blog post..Google AdSense: annunci pubblicitari nel vostro sito
I must admit, I do not know the purpose of that tag. In all my WP experience I have never used it.
That’s a nice plugin. Great for a tech blog who wants to share snippet of codes.
@ Kitkat,
Yes, I really love it! I think I had tried most of the WP “code-insert” plugins and I finally found the one that was right for me.
Thanks for stopping by, hope to see you again!
Excellent. I have been looking for a plug-in like this for some time now, especially since I run a few programming blogs.
Great. Very useful post. Thanks!
Thank you for this write-up! I have been struggling with adding code to my posts and now I finally have a solution!!
never thought it was that easy. thank you
Glad I could help:)
Thank you, I’m starting learn write program
.
Sounds easy to me and I will test it next weekend. Thanks for posting.
Thanks. For the love of god, it took a long time to find a solution to such a simple need. Even searching the WP plugin database didn’t help that much. Thanks gain – Ryan
.-= Ryan Nagy´s last blog ..Easy Wiki Installation? PmWiki, WikkaWiki and… =-.
Real nice!! I am searching plugin like this for so long! You help me a lot!
.-= Aprillins´s last blog ..5 Tips Building Wordpress Template =-.