Sometimes, a specific post needs to be styled with some custom css styles. Sure, you can directly embed CSS in your post, but that not very clean. In this recipe, I’m going to show you how to embed css in a clean way, by using a custom field.
First, open your header.php file and insert the following code between the <head> and </head> html tags:
<?php if (is_single()) {
$css = get_post_meta($post->ID, 'css', true);
if (!empty($css)) { ?>
<style type="text/css">
<?php echo $css; ?>
</style>
<?php }
} ?>
Once done, when you're writing a post or page which require some custom css styling, you'll just have to create a custom field named css and paste your custom css styles as a value. That's simple as that!
If you enjoyed this article, please consider sharing it!
Leave a Comment
- ModThemessave 15% off your purchase […]
- Zidalgo Themessave 20% on your order […]
- WooThemessave 20% on your purchase […]
- Autobloggedsave $40 on multi-site licence […]
- Kreative Themessave 50% on your purchase […]
- Smarter Themesave $5 on your order […]
- Classipress Themesave 20% on your purchase […]
- ReviewAZONsave $15 on your order […]
- Headway Themeget 20% off your licence […]
- Gorilla Themesget 10%off any theme […]
On Twitter : @VPSneeded trois pour commencer, j'espère que ce sera suffisant car niveau prix c'est pas donné
Theme & content : Copyright © 2008 - 2010 Jean-Baptiste Jung. Graphic art by GreenBubbles.org.ua, all right reserved.
38 Responses
Yeah. Thanks for this great recipe
I love your blog.
@Jared: Thanks for the compliments
Hmm, I like the idea. But I would suggest to change the class of the post with the custom field and have the CSS in the style sheet. That way you keep the style and content apart. If I want to change theme later on, all custom CSS won’t haunt me then.
Nice recipe
Im a big fan
@Yannick: Sure it is possible (and a good idea) to do that. But sometimes, even if embedding css directly in html files isn’t pretty, it can be useful
@Dr.WordPress: Thanks for your support! You WpRecipes readers are AWESOME!
Nice idea.
Wrap a function around and put it in your functions.php like:
function my_custom_css() {
.. your code
}
add_action('wp_head', 'my_custom_css');
Thanks for the tip! I can’t wait to try this out on my blog!
How about using another custom field for different post? can I use this code too? what’s the code exactly? thanks for the recipes
I have tried it and have two comments:
a) As it is written it only appears when you are looking at the post itself. Else you must eliminate in the first line “if (is_single()) {” and in the last “}”
b) it must be put before the call wp_head (at least in the theme I’m using
This is freaking crazy great.
I think you forgot to close your tag
Also: what’s the best way of using this technique for the main loop? As in, not just for single pages
Your form ate part of my post – I was referring to the style tag (it opens twice)
Hello, can u help me out on sumthing?!
Ill try to explain:
My website will have usual posts and book posts. In the book posts, i want the page to show the publisher, the author etc, in custom fields. But I dont want it to be shown in normal posts.
Is there a code (visible/hide tables) that I can use, IF the post contains the custom field type book?
Could you please give a brief example of this? I don’t understand what “a custom field named css” and “paste your custom css styles as a value” means. Thanks.
Is this code complete? I’ve gotten some errors and it looks like the tag wasn’t close completely. Thanks for sharing though.
I don’t know… it’s just not making sense to me… If I label a custom field with a name of “css” and a value of “{font-size:20px;}”, what do I have to do in the content to apply it? I’ve tried wrapping it in span, etc.
Can you show a screen-cap or something for how to use this? Thanks!
@len: easy: Just put #content{font-size:20px;} in your custom field.
Jean Baptiste, this was a handy tip.
As Bretton pointed out though, it looks like you forgot to put in a “/” to close the style block correctly…
I also had to do what fahirsch suggested for it to work in my theme.
Otherwise works great.
@Hank : Sorry for that mistake! It is corrected now
Trackbacks: