Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Outputted CSS Class Not Hooking WordPress


I recently had a developer work on displaying 2 icons: one icon for suggested grades, and another for category…

Both of these are selectable when adding a new post. Here's a screenshot of what it looks like in the backend - [[LINK href=""]][[/LINK]].

Everything works great, except for one thing. When I check a grade level like 2-12, it won't create a hook within the CSS. It outputs the class within the markup, shown here - [[LINK href=""]][[/LINK]], which is exactly what I'd like it to do. But when I try to add the icon within the CSS file by putting .2-12, it won't apply the style.

You can see the missing Suggested Grade icon on the green flag on this page - [[LINK href=""]][[/LINK]].

But, let's say I select K-2. Because there is a letter at the beginning, it lets me apply the icon. Weird, huh?

<strong>So, I guess I need a way somehow output the CSS into markup to where it's not all numbers, even though I'm selecting grades 2-12, or 3-5, or 6-8, etc. Maybe have it output by spelling out the first grade, like two-12, or three-5, or something like that. </strong>

Could anyone help me with this? Here is the code within the single.php file...

<div class="downflag">

// set vars
$post_id = get_the_ID();
$html = '';

// get post taxonomies(skill & grade)
$skills = get_the_terms ( $post_id, 'category' );
$grades = get_the_terms ( $post_id, 'grade' );

// do for each category(skill)
if ( $skills && !is_wp_error( $skills ) ) {
foreach ( $skills as $term ) {

$html .= '<a href="' . get_term_link( $term->slug, 'category' ) . '" class="skill ' . $term->slug . '">' . $term->name . '</a>';


// and for each taxonomy(grade)
if ( $grades && !is_wp_error( $grades ) ) {
foreach ( $grades as $term ) {

$html .= '<a href="' . get_term_link( $term->slug, 'grade' ) . '" class="grade ' . $term->slug . '">' . $term->name . '</a>';


// print the results on screen

<?php echo $html; ?>

</div><!--end downflag-->

And here is the code within the functions.php file…


//hook into the init action and call create_book_taxonomies when it fires
add_action( 'init', 'create_custom_taxonomies', 0 );

//create two taxonomies, genres and writers for the post type "book"
function create_custom_taxonomies()

// Add new taxonomy, make it hierarchical (like categories)

$labels = array(
'name' => 'Grades',
'singular_name' => 'Grade',
register_taxonomy('grade',array('post'), array(
'hierarchical' => true,
'labels' => $labels,

Thanks so much for your help!

Answers (3)


Denzel Chia answers:


Add some word before the term slug number for your "grade" link.

Example, by prefixing the word "level-" to all your grade term slug.
Resulting in level-2-12 , level-3-5 , level-k-12, level-k-5 etc....

$html .= '<a href="' . get_term_link( $term->slug, 'grade' ) . '" class="grade ' . 'level-'.$term->slug . '">' . $term->name . '</a>';

Your link will be something like this

<a class="grade level-2-12" href="">2-12</a>

Your css class will be





Just do that for all your other "grades" term slug.


Spencer Barfuss comments:

That worked! Congratulations!


Jerson Baguio answers:

Try prepending a character first on your digit/number css class cause digit or number
might not be recognized in css
same thing with variables no digit is allow to be as a varible i think same thing applies to php

Hope it helps.


Romel Apuya answers:

I guess the main problem is with css ruling.. CSS wont allow numbers to be first in a class name.

[[LINK href=""]]css [[/LINK]]

[[LINK href=""]]css grammar[[/LINK]]

Spencer Barfuss comments:

That's my question: how would you set it up in the PHP to where it would not output a number first? Thanks for your help!

Romel Apuya comments:

try something like this in your code on the loop

. '" class="skill ' ."myclass"+.$term->slug . '">'

the code above might not work..but the idea is you just have to prepend a letter on $term->slug class in you anchor tag.

Spencer Barfuss comments:

Yeah, that didn't work. Thanks though.