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:

header.php

I added my ob_start right before the </head> tag:

...



&lt;body id=&quot;" &gt;
...

index.php

Here I added the ob_get_clean tag right after “theLoop” started, which looks like this: “while (have_posts()) { the_post();”
First I capture the head content then I check for the custom_field htmlHead and echo the results, then I echo the head content and continue on our merry way.

<div>
0){
			$my_custom_field = $custom_fields['htmlHead'];
			foreach ( $my_custom_field as $key =&gt; $value ){
				echo $value . "n";
			}
		}
	}
echo $headerContent;
	################################# end htmlHead ##################################
	## You may now return to your regularly scheduled post 									 ##
	################################# end htmlHead ##################################
?&gt;
  <div class="postFrame">
		<span class="postFrameTop"><span class="IEFix"></span></span>
		<div class="postContent">

First htmlHead Value: Javascript

Here’s the script that created a table of contents from the image captions I used in that post: Create an interactive pdf with expanding text-fields from scratch:

 jQuery(document).ready(function() {
 var theLink;
 var thePageURL = document.location.href+'';
 thePageURL = thePageURL.split('#');
 thePageURL = thePageURL[0];

 var theSteps = new Array();
 theLink='<a href="'+thePageURL+'#container">Top</a>'; //insert top link
 theSteps.push(theLink);
 jQuery('.wp-caption-text').each(
  function(index){
   theLink='';
   theLink='<a href="'+thePageURL+'#'+jQuery(this).parent().attr('id')+'">'+this.innerHTML+'</a>';
   theSteps.push(theLink);
  }
 );
 jQuery('#toc').append("n<h2>Table of Contents</h2>n<ul>n<li>"+theSteps.join("</li>n<li>")+"</li>n</ul>n").fadeIn('slow');
});

Second htmlHead Value: css

I also added a stylesheet:

.postBody ul {
	list-style-type:none;
	padding-left:0px;
}
.postBody ul li {
	margin:0 0 28px 4px;
}
.wp-caption {
	text-align:left;
}
.wp-caption img {
	padding-left:4px;
	vertical-align:text-top;
}
p.wp-caption-text {
	font-size:1.4em;
	line-height:1.5em;
	padding-left:16px;
	text-align:left;
	text-indent:-14px;
	width:540px;
}

/*position caption above image*/
.wp-caption { position:relative; }
.wp-caption-text{ position:absolute;}
.wp-caption {
	padding-top:60px;
	position:relative;
}
.wp-caption-text{ position:absolute;}
.wp-caption p.wp-caption-text {
	position:absolute;
	top:0;
}
#toc {
	-moz-border-radius:15px;
	border-radius: 15px;
	-webkit-box-shadow: 5px 5px 10px #4c4c4c;
	-moz-box-shadow: 5px 5px 10px #4c4c4c;
	box-shadow: 5px 5px 10px #4c4c4c;
	background-color:white;
	border:#cccccc 1px solid;
	display:none;
	margin-left:920px;
	max-width:400px;
	padding:15px;
	position:fixed;
	z-index:9999;
}
.postBody #toc ul {
	list-style-type:disc;
	margin-left:10px;
}
.postBody #toc ul li {
	margin:0;
	text-indent:-10px;
	padding-left:10px;
}
div:target &gt; .wp-caption-text:before {content:'00BB'; font-size:1.3em; color:#E97C30;}

Just for fun I added a script and stylesheet to this post as well. That’s what generates the Table of Contents on the right.

The custom script from this post

 jQuery(document).ready(function() {
 var theLink;
 var thePageURL = document.location.href+'';
 thePageURL = thePageURL.split('#');
 thePageURL = thePageURL[0];

function toTitleCase(str){
	return str.replace(/wS*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}

 jQuery('.postBody').prepend('<div></div>');
 var theSteps = new Array();
 theLink='<a href="'+thePageURL+'#container">Top</a>'; //insert top link
 theSteps.push(theLink);
 jQuery('.postBody h2').each(
  function(index){
   theLink='';
   theLink='<a href="'+thePageURL+'#'+jQuery(this).attr('id')+'">'+toTitleCase(this.innerHTML)+'</a>';
   theSteps.push(theLink);
  }
 );
 jQuery('#toc').append("n<h2>Table of Contents</h2>n<ul>n<li>"+theSteps.join("</li>n<li>")+"</li>n</ul>n").fadeIn('slow');
});

The custom style from this post

#toc {
	-moz-border-radius:15px;
	border-radius: 15px;
	-webkit-box-shadow: 5px 5px 10px #4c4c4c;
	-moz-box-shadow: 5px 5px 10px #4c4c4c;
	box-shadow: 5px 5px 10px #4c4c4c;
	background-color:white;
	border:#cccccc 1px solid;
	display:none;
	margin-left:920px;
	max-width:400px;
	padding:15px;
	position:fixed;
	z-index:9999;
}
.postBody #toc ul {
	list-style-type:disc;
	margin-left:0px;
	padding-left:16px;
}
.postBody #toc ul li {
	margin:0;
	text-indent:-10px;
	padding-left:10px;
}
h2:target:before {content:'00BB'; font-size:1.3em; color:#E97C30;}

One thing to note about custom fields: they are not captured in page revisions. So if you delete or change a field value there’s no going back.

Leave a Comment