University of Oregon

WP – using Custom Fields to insert content in the html head

I wanted to insert some custom styles and scripts into a post this week, to add a script and styles to generate a table of contents from the image captions. I continue to appreciate the cf_htmlhead tag in Cold Fusion but here we are in PHP and I’ve got the flexibility to create functionality I need so I opened up a couple of template files and inserted some code to return some specific custom field content saved in specific posts.
In case you didn’t know: WordPress allows you to create custom fields and then you can add code to “theLoop” to return the content of those custom fields.
Here’s how I used that;
I edited two template files: header.php and index.php adding an ob_start to the header before the closing head tag and then I added ob_get_clean tag to the template right after the start of “theLoop”. Essentially holding all the output generated between the tags and returning it after I returned the contents of the custom fields. That way my custom content was inserted into the header in a very w3c compliant way!

I called my custom field: htmlHead and once I added it to one post I have it available to all posts.
Best of all I can add multiple instances of the field and they are stored in an array. So I can add one for javascript and one for css, keeping them separate for easy editing.

Here are the code snippets:
(more…)

Grassland Theme suggested fixes

I was looking at the blog in safari today and I turned on the developer tools. It’s high time that I figure out how to speed this blog up.

Anyhow I noticed some non-speed related errors and posted them to the theme home page:
Grassland – GPL and beautiful | Spectacu.la – Free GPL WordPress Themes Club.

Redux: Add a button to your wyswyg html bar in WP -Code2

As a follow up to Add a button to your wyswyg html bar in WP. I wanted to create a code button that prompts me for the code language. And if there’s none then use the simple tag.

So back to blog/wp-includes/js/quicktags.js. This time I needed to do more than add a simple button.
After a few attempts to do this from scratch I realized that I needed a function similar to the add link function that the link button uses. (more…)

WP Dynamic StyleSheet Switcher – stage 2

I added a background image array and integrated it with the rand() function.
Images from the free image section of bigstockphoto.com and iStockPhoto.

I also changed the html background color back to brown but the body’s is now the blue with a min-height:100% on the body and Layer1 so the image stick to the bottom of the screen not the bottom of the post. Then the brown earth color continues below that.
(more…)

Add a button to your wyswyg html bar in WP

NOTE: this post has a follow up here: http://pages.uoregon.edu/vid/2009/09/02/redux-add-a-button-to-your-wyswyg-html-bar-in-wp-code2/

I wanted to accommodate a new plugin I installed for highlighting code: Ion Syntax Highlighter. I was surprised that it didn’t append my quicktags button bar in the wyswyg edtitor.
I couldn’t remember the syntax either and I wanted to be able to use my button! I expected the behavior of the code button to change after I installed but not so. I did a quick search in the source and found that I needed to look for quicktags. I found what I needed here “blog/wp-includes/js/quicktags.js”

I duplicated the existing “code” code and and replaced instances of “code” with “code2”.

For example a search in the source of quicktags.js revealed this: (more…)

WP Dynamic StyleSheet Switcher – stage 1

I’ve done a quick mod to my stylesheet to enable me to turn on and off css enhancements.

The concept is based on the idea that you can create your own theme by extending another theme and adding your stylesheet changes to a style.css file in the new theme folder.

The concept in action:
In the themes folder I now have a folder for my base theme: grassland and my modified theme: vGrassland. No changes have been made to grassland but in the vGrassland folder there only needs to be one file: style.css.

That stylesheet must contain all the necessary info to define the theme (Theme Name, URI, Desc. Version…) but the essential one is TEMPLATE: grassland.
Then the magic happens.

For me I wanted to use my modified theme but I’d grown attached to the original so changing back and forth would be fun.

So here’s the low down.
Point the styles to a dynamic page: style.php and in that page show or hide the style enhancements.

Here are the contents of both files. (more…)