I want CSS!

Resolved Adrien L
(@adrien-l)

10 years, 7 months ago
Eyh dudes!

Your plugin seems really fine, I would like to use it. Sadly, what I need is a more complicated than adding color styles in my PHP templates. I would rather have your plugin generate some classes for each category, such as
```
.category-ID-color {
  color: the_color !important;
}
.category-ID-background {
  background-color: the_color !important;
}
```
I saw this functionality has already been asked around, so it might be a good thing to add it.

I need to find a workaround, but I’m a bit lost with the hooks. Could you tell me to which hook I should add a ‘add_action’ if I want to create a function to generate my CSS by calling your theme after a category is created or modified, please?

Anyway, thanks for the plugin, and keep up the good work!

https://wordpress.org/plugins/category-color/

Viewing 2 replies - 1 through 2 (of 2 total)

Thread Starter

(@adrien-l)

So, I answered my own question. I generate static CSS everytime a category is added or modified. This way, no PHP overload on the client side.

In functions.php (or a different file called with require_once, to make it cleaner):

// Function called after every category edit or creation
function save_category_color_css( $term_id ) {
	// URL of your css directory
	$css_dir = get_stylesheet_directory() . '/assets/css/'; // Shorten code, save 1 call
	ob_start(); // Capture all output (output buffering)

	require($css_dir . 'category-color.css.php'); // Generate CSS

	$css = ob_get_clean(); // Get generated CSS (output buffering)
	file_put_contents($css_dir . 'category-color.css', $css, LOCK_EX); // Save it
}

function category_color_css_init() {
	// Require the Category Color plugin
	if( !function_exists('rl_color') ) return false;

	// Only execute on admin pages
	if ( !is_admin() )
		return false;

	// Get a list of all the categories
	$categories = get_categories(array(
		'hide_empty'               => 0
	));

	// attach the save_category_color_css function to each category's edited and created hook
	foreach ( $categories  as $cat ) {
		add_action("created_category", 'save_category_color_css', 10, 1);
		add_action("edited_category", 'save_category_color_css', 10, 1);
	}
}
add_action('admin_init', 'category_color_css_init');

// Enqueue our brand new CSS
function enqueue_category_color_css() {
	if( function_exists('rl_color') )
		wp_enqueue_style( 'category-color-css', get_template_directory_uri() . '/assets/css/category-color.css', array(), '', 'all' );
}
add_action('wp_enqueue_scripts', 'enqueue_category_color_css', 999);

In category-color.css.php:

<?php

// remove error reporting so that we don't break the CSS in debug mode
$reporting_level = error_reporting();
error_reporting(0);

// get all the categories
$categories = get_categories( array(
	'hide_empty'               => 0
));

foreach( $categories as $category ){
	// get the color
	$cat_color = rl_color($category->term_id);

	// create a CSS block only if the color is set
	if( ! empty($cat_color) && $cat_color != '#' ) : ?>

/* <?php echo $category->name; ?> */
.category-<?php echo $category->term_id; ?> {
	background-color: <?php echo $cat_color; ?> !important;
}

	<?php
	endif;
}

// re-enable the error reporting
error_reporting($reporting_level);
?>

I think your plugin would really benefit this addition, so feel free to steal my code.

Also, you have some notices in the category edit screen:

Notice: Undefined property: RadLabs_Category_Colors::$js in /whatever/wp-content/plugins/category-color/rl_category_color.php on line 75
Notice: Undefined property: RadLabs_Category_Colors::$css in /whatever//wp-content/plugins/category-color/rl_category_color.php on line 57
Notice: Undefined index: desc in /whatever/wp-content/plugins/category-color/rl_category_color.php on line 126

sublines

(@sublines)

10 years, 2 months ago

hey, i found a super easy, yet hacky way around it!

simply change this line (from the FAQ page)

$output .= '<a href="'.get_category_link( $category->term_id ).'" style="color:'.$rl_category_color.';">'.$category->cat_name.'</a>'.$separator;

into this

$output .= '<a href="'.get_category_link( $category->term_id ).'" class="'.$rl_category_color.'">'.$category->cat_name.'</a>'.$separator;

this way the category is assigned a class that has the name of whatever color you picked. Then you can target it via css.

but thats not all, because classes can’t include hastags or start with a number, but the colors do.
simple trick: when you pick a color for a category, make sure its a color that starts with a letter (not a number) and then remove the hashtag #.

i chose colors for my categories like aaaaaa and bbbbbb and then target them as classes with my css file.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘I want CSS!’ is closed to new replies.

Tags