setting post background color - only via CSS not on the fly?

4 views
Skip to first unread message

Shelly K.

unread,
Apr 28, 2012, 3:38:57 PM4/28/12
to wordpres...@googlegroups.com
Hello WP Experts out there, WP beginner here.

Would you please confirm the following regarding setting the background
color of a post..

After considerable searching, it seems i can't set the background color
of an individual post on the fly - is this so? Not through the HTML
editor (because bgcolor has been deprecated), and there is not an icon
as part of the wysiwyg editor.

it seems the only way to really do it is to edit the css file to include
something like:

/* Set "sample" category posts to have yellow background */
.entry-category-sample { background-color: #FBEC5D; }

So, the author or category or something else of the post must be
defined... again, can't just set the post color on the fly, eh?

Please advise.

Thank you,
Shelly K.


Brandtley McMinn

unread,
Apr 28, 2012, 4:16:33 PM4/28/12
to wordpres...@googlegroups.com
Hey Shelly,

You would be better off defining a function in your themes' functions.php file that adds the post category to the post_class filter hook on the post container.

For example:

<?php

  // Practically verbatim from the WordPress codex
  // http://codex.wordpress.org/Function_Reference/post_class#Add_Classes_By_Filters

  add_filter('post_class','MYTHEME_post_class_cats');

  function MYTHEME_post_class_cats($classes) {
     
    global $post;
    foreach((get_the_category($post->ID)) as $category) {
      $classes[] = $category->category_nicename;
      return $classes;
    }
  } // MYTHEME_post_class_cats($classes)

?>

All this does is it uses the post ID to determine its category, and then adds the category slug name to the array of html class attributes that are outputted when the page loads.

So you effectively get this as your markup:
  ...
<div id="post-example-342" class="post single hentry POST_CATEGORY">
  ...

Where POST_CATEGORY is actually the lowercase hyphenated slug which you can then target in your theme CSS as you were attempting to do before.

You can also add any classes names/strings you want by using $classes[] = 'your-string-here'.$orStringVariable; which appends your new string to the array.

Hope this helps,

--
Brandtley McMinn - Owner/Creative Director
http://giggleboxstudios.net
c. 512.406.1666
@brandtleymcminn


Saturday, April 28, 2012 2:38 PM

Shelly K.

unread,
Apr 28, 2012, 9:05:57 PM4/28/12
to wordpres...@googlegroups.com
Wow -

Thanks for taking the time to spell it out, Brandtley. I appreciate the correct answer.

It's a little over my head, so I'll print it out and break it down.

Thanks again,
Shelly K.
--
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.
To post to this group, send email to wordpres...@googlegroups.com
To unsubscribe from this group, send email to wordpress-aust...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/wordpress-austin?hl=en
 
Our meeting information is available at http://www.meetup.com/austinwordpress/

Bobbie Wilson

unread,
Apr 28, 2012, 10:50:17 PM4/28/12
to wordpres...@googlegroups.com
Shelly,

You could do it with a custom field. This is found under the post entry area - if not visible, click screen options in the upper right and select the checkmark next to "Custom Fields".

Enter an easy to remember name, such as background. Then enter the value of the background color you'd like to use.

In your theme's single.php, place the following code at the beginning:

<?php $background = get_post_meta($post->ID, 'background', true);?>

The 'background' after $post->ID is the name of the custom field.
$background is just the variable name I used for this example.

Where ever you would like the background color to be applied, add this code to the element:
style="background: <?php echo $background; ?>;"

You won't have to worry about it breaking if it doesn't find the custom field.

Hope this helps,
Bobbie
compose-unknown-contact.jpg
Reply all
Reply to author
Forward
0 new messages