Page-specific CSS and Javascript using WordPress Custom Fields
Use this PHP snippet and Wordpress custom fields to reference page-specific CSS and Javascript files in your Wordpress theme.
DLB‘s latest project is a website with some content-complexity, using WordPress as a Content Management System. WordPress is functional as a custom CMS largely because of Custom Fields, which allow you to assign an arbitrary amount of meta-data to a post (the core element of a WordPress site).
Now, on this website, it came about that some of the pages needed specific Javascript classes and methods, and even more than that needed custom CSS classes.
Immediately, it occurred to me that this could be handled through custom fields. So, what I did, and you can do, too, is create two custom fields: one called custom_css and one called custom_js.
With this accomplished, edit your WordPress theme’s header.php, and write a couple little PHP conditionals to check for this field. Or else, just copy and paste mine!
<?php $id = $wp_query->post->ID; $css_docs = get_post_meta($id, 'custom_css', false); $js_docs = get_post_meta($id, 'custom_javascript', false); if (!empty($css_docs)) { echo '<!--Custom css for '.get_the_title().'.-->'."\n"; foreach ($css_docs as $css) { echo '<link rel="stylesheet" href="'.$css.'" type="text/css" media="screen" />'."\n"; } } if (!empty($js_docs)) { echo '<!--Custom javascript for '.get_the_title().'.-->'."\n"; foreach ($js_docs as $js) { echo '<script src="'.$js.'" type="text/javascript"></script>'."\n"; } } ?>
With this in place, you can add one or more custom CSS or Javascript URIs to any page on your WordPress site. Neat!
| Tagged with: | Content Management Systems, CSS, Javascript, PHP, Web Design, Wordpress |
Post a comment
Want to know more?
You're reading BlogLESS, a thrice-weekly blog about the ethics of advertising, branding, design, social media and business. We are also fans of zen, although this itself is perhaps not so zen.
Comments on this post
1.
Thanks for the code. But, it doesn’t seem to work. I added the custome filed and the code. The rendered page does not contain any css file links. Any idea what could be wrong?
2.
Hey Amol,
Unfortunately, since nothing’s being rendered at all, we have to assume that both $css_docs and $js_docs are empty arrays. This could be attributed to a rather large number of things. A couple of things to check:
1. Do your custom fields match (case sensitively) the ones called in lines 2 & 3 of the php above?
2. Are you on your WordPress single page template for a post with these fields assigned?
3. Are you running this code inside the Loop?
If you’re good on all those counts, I’d suggest just doing some basic php print_r-style debugging. Here’s another handy resource from the WordPress codex about using custom fields.
Good luck.
3.
Hi,
great idea – but it works only with a specific id for me .. like:
$css_docs = get_post_meta(5, ‘custom_css’, false);
i read something (http://wordpress.org/support/topic/200293) get_the_ID doesn’t work in wp header..? Guess Amol has the same problem..?!
4.
Hi,
have you figured out a way to do this?
I am trying to do the same, to include a dedicated bit of javascript and some css in a particular page. The only way I get it to work is if I call the custom field contents from the sidebar rather than the header. Not sure if that’ll cause problems, because obviously that way the style tags will end up in the body of the html and not in the head where it should be (most browsers don’t care though, but validators do).
If I put the same code in the header.php nothing happens, and the contents of the custom fields don’t show up in the code, like Amos said. I guess this makes sense because the header is served up before the posts get processed, am I right?
If you got any further with this, I’d like to hear how you did it!
thanks, Thijs
5.
I haven’t tried it, but it looks like this might do the trick:
Hope that helps…
6.
wooot! it does work! thanks very much
7.
Glad to hear it. I updated the code in the post.
8.
sorry a bit too fast there… though it does actually serve up the contents of the custom field for the page i need this to happen, it goes wrong on other pages, because there is no content, therefore the link element throws up an error on all pages where the custom field is blank.
Is it possible to exclude the link or script element unless the custom field has anything in it? I’m not sure how to do this.
Also i added ‘echo’ before ‘get_post_meta($ID,’ etc., I left out the second string bit, and I put the whole bit of code inside the src/href attribute quotes. Not sure if that is correct but it made the difference.
Perhaps I need to brush up my PHP first eh? Don’t hesitate to tell me :)
Like this (if i can post code here):
post->ID; echo get_post_meta($ID, 'custom_css', true); ?>"/>
post->ID; echo get_post_meta($ID, 'custom_javascript', true); ?>">
9.
ok that got butchered ;)
10.
Hi my friend,
Thank you so much for developing and sharing this. This will help me out!
Regards!
Jacob
11.
Great code! Thanks! Did exactly what I needed!
12.
This worked perfectly for me. Thanks