DJS Consulting Tech Blog
Technical Information You Can Use (or not - but hey, at least it’s free!)

Traditionally, posting source code in a WordPress blog, especially if it were HTML or PHP, was problematic. There are a few reasons for this…

• WordPress is very good about ensuring that it outputs valid XHTML, so it strips mis-matched and invalid tags. This is usually desirable, but it wreaks havoc with HTML and XML code posts.
• Since WordPress is coded in PHP, blocks of PHP will attempt to execute.
• White space is collapsed, which can kill any readability that the user has set out; the “visual editor” (TinyMCE) does its best to create efficient HTML. This can actually break spacing-oriented languages such as Python.

So how do you do it? It’s actually pretty easy, using the Code Markup WordPress plugin. You can download the plugin from that link, and upload it to ./wp-content/plugins. The instructions on the website are critical - the “visual” editor will not allow the code to come through unscathed. However, the visual editor only corrupts the code if you actually save it; what I have done is write the post using the visual editor, then disable it and put the code in. It’s the best of both worlds! (Make sure that, once you have the code in, you don’t edit the post using the visual editor - unless you have a good backup…)

The post below this one (about category lists in WordPress) was done using this plugin. In addition, you can use the <span> tag to do the color-coding. I created a few CSS classes (”key” for keywords, “func” for functions, “attr” for attributes, “embed” for embedded language), and used them to accomplish the color coding. It seems that it would be pretty easy to write another plugin that used a list of keywords to do this syntax highlighting; maybe that’s a challenge for another day.

A big “atta boy” to Bennet McElwee for a fantastic plugin!

WordPress provides a template tag, wp_dropdown_categories, that inserts a drop-down list (the HTML <select> element) of categories, where the value of each item is the ID from the database. This works fine if you are not using rewrite rules (AKA “pretty links”) - you can construct a URL using the value (?cat=[number]). However, if you use any sort of rewrite rules, this does not work. I recently converted my personal site, which uses the Pool theme, to utilize a JavaScript array to assist with displaying category pages.

Here’s the code…

<?php
/**
* This creates a list of category links that can be used with a category dropdown
*/
$aCategories = get_all_category_ids();
$iMaxCat = 0;
foreach($aCategories as $iThisCat) {
    if ($iMaxCat < $iThisCat) {
        $iMaxCat = $iThisCat;
    }
}
$iMaxCat++;
?><div style="text-align:center;">
    <form name="categoryform" action="" style="text-align:center;">
    <script type="text/javascript">
        var aLink = new Array(<?php echo($iMaxCat); ?>);
<?php
foreach($aCategories as $iThisCat) {
    echo("aLink[$iThisCat] = "" . get_category_link($iThisCat) . "";\n");
} ?>        function goCat() {
            window.location =
                aLink[document.getElementById('cat')[document.getElementById('cat').selectedIndex].value];
        }
    </script>
    <?php wp_dropdown_categories('class=sidebardropdown&orderby=name&show_count=1&hierarchical=1'); ?>
    <br />
    <button class="sidebarbutton" type="button" style="margin-top:5px;" onclick="goCat();">View Category</button>
    </form>
</div>

This works for both “pretty” and standard links, as it uses the template tag get_category_link to specify the link.