-
Recent Posts
Tags
app engines attributes cgi database DBI Debian frameworks full screen terminal GWT hacks hardware hobbit howto html inheritance javascript jQuery libraries Linux mac oracle OSX parallels Perl photoshop pixels PostgreSQL programming qa regression testing screen size Software Development style template toolkit term Theory translation type cast User Interface virtual machine virtual machines visual studio vmware web design web programming
Including CSS and JavaScript in WordPress Posts Using ‘Custom Fields’
I recently switched the wordpress editor into HTML only mode. That means I disabled the visual editor, in favor of a window where you just type in markup. This method grows on you, especially if you are pretty fluent in developing HTML code.
The natural extension of writing raw html, is to be able to muck with CSS, and JavaScript for wordpress posts and pages. Now, one technique for doing this, is to just inline the <script> and <style> declarations. The problem is, a) certain browsers complain about the inline script because they think it is a cross site scripting attack threat, and b) wordpress still inserts some paragraph tags, even in html editor mode (what you end up with is more whitespace on a page then you would want, in odd places.)
So, what I did, was to hack the header template of my theme. Between the <head> </head> tags, I inserted some PHP code that reads a custom field, and displays its content. I can then type javascript and css into a custom field right on the edit blog post, or edit blog page, editor.
Here’s the custom php, between the header tags: (This is slightly hacky, since I don’t really understand WP’s data structures and functions. You can see below that I’m only using the value from a dictionary, discarding the hash key.)
[header.php] <head> ...other head content <?php $mykey_values = get_post_custom_values('header'); if ($mykey_values) { foreach ( $mykey_values as $key => $value ) { echo "$value"; } } ?> ... other head content </head>OK, now, all you have to do is add a custom field called “header” to your blog post or page, and it will be inserted into the head section of the html document. So you could for instance make the header custom field equal
[Custom field named 'header' with the following content:] <script type="text/javascript"> function hide_element(id) { .... } function show_element(id) { ... } </script>So finally, you can use that code in your post, like:
<a href="#" onClick="show_element('1');return false;" > Show it! </a>A last hack was to increase the size of the custom field ‘Value’ textarea. I found the right line in wp-admin/includes/template.php. The right textarea is the one that has name=’meta…’ I just increased the cols
to 30.
Hope this is useful to someone. I feel like it opens up a big array of programming possibilities. I tend to think its going to be more useful for pages than on posts, because when you display a blog, say a page with 5 or 10 posts, all the javascript is going to interact, so you have to be careful.