a blog by Christian Snodgrass
about programming, web and game design, and everything else

Xazure Code Demo Plugin

My first officially released plugin, woot!

I’ve created countless proprietary plugins for all manners of things. The keyword being proprietary, meaning I haven’t been able to release them to the public. =p

Not this one!

Download Xazure Code Demo v0.9

Also available directly from WordPress: Xazure Code Demo v0.9

What’s It Do?

This is a programming and web development blog. That means lots of example pages. I often write away from my home computer, so I wanted a way that I can create those examples through my browser, without having to find a text editor and FTP client. Thus the idea for this plugin is born.

Basically, it adds a new custom post type, Code Demo, to your blog. There you can go and specify the code for the head and body, as well as specify a DOCTYPE. Then you can have a nice pretty link to it, like so: http://xazure.net/demo/three-column-layout-with-dividers/

It allows you to then view the source code of the page from within the page. Nice.



As with any plugin, just extract the contents of the zip to your wp-content/plugins folder. Then go to the WordPress Admin and click Plugins. Hit Activate under Xazure Code Demo and you’re off!

How to Use

It couldn’t be simpler to use. Just create a new Code Demo from the WordPress Admin. Select your DOCTYPE from the drop-down list (it supports all W3C Recommend DOCTYPES). Then simply add your code the head and body blocks. Publish the post. The rest is taken care of for you, you just have to view it.

Please note that at the moment it only supports HTML, CSS, and Javascript. In future versions I’m going to add more support (for things like PHP).

Create Your Own Template

Xazure Code Demo comes with it’s own template file and there is no need to create your own template. However, if you want to customize how your demo is displayed, you can.

To create your own, you can find the current template at wp-content/plugins/xazure_codedemo/xazure.codedemo.template.php. Copy this file to your own template directory and rename it “codedemo.php”. If this page exists, it’ll be used instead of the default. You can then modify it from there.

One modification you must make is to change the __FILE__ in the plugins_url() calls on lines 15 and 17 to point to the plugin directory (something like “../../plugins/xazure_codedemo” will usually work). You could also put your own version of those files in there and completely replace those lines as well.

Xazure Code Demo Template Tags

The following tags are available for your template (on pages with a code demo) as well:

// Echos the DOCTYPE for the current code example. 
// Echos the <head> contents for the current code example. 
// Echos the <body> contents for the current code example. 
// Returns the string for the DOCTYPE of the current code example. 
// Returns the string for the <head> contents for the current code example. 
// Returns the string for the <body> contents for the current code example. 

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Back to Top