Using jQuery in WordPress Posts

PublishedApril 23, 2011

This post by Chris Coyier shows how to use jQuery inside a WordPress post. This helped me work around an Apache web server security configuration issue that was not allowing me to post SQL code snippets inside of my posts.

403 response when I try to post certain SQL code snippets:

Forbidden

You don’t have permission to access /wp-admin/post.php on this server.

First, follow the instructions in Chris’s post which basically has you modify the your themes header.php to load jQuery that is included with WordPress just before the wp_head() function call as follows.

Replace

<?php wp_head(); ?>;

With

<?php wp_enqueue_script("jquery");
wp_head(); ?>;

Next, create a htm file to hold SQL code snippets. The pre element id attribute allows for jQuery loading of individual fragments instead of the entire .htm file. Additional SQL code snippets can be added to this file each separated by a pre element with a unique id attribute:

<html>
    <body>
        <pre id="sp_Procedure1">
        <!-- insert SQL Code here -->
        </pre>
        <pre id="sp_Procedure2">
        <!-- insert SQL Code here -->
        </pre>
    </body>
</html>

Add a placeholder div to your post for the jQuery load target:

<div id="sql"></div>

Now add this JavaScript to the bottom of your post to load the .htm fragment*.

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function(){
    $j('#sql').load('//jimfrenette.com/wp-content/includes/sql.htm #sp_Procedure2');
});
</script>

* Change the path as needed. More info: jQuery .load().