Outputted CSS Class Not Hooking WordPress
- SOLVED
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="http://cl.ly/1I0A412L0O333Y0f2E24"]]http://cl.ly/1I0A412L0O333Y0f2E24[[/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="http://cl.ly/3y002r2o1H2u3G2Q2u3G"]]http://cl.ly/3y002r2o1H2u3G2Q2u3G[[/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="http://pefriends.com/flexed-arm-hang-fitnessgram-test/"]]http://pefriends.com/flexed-arm-hang-fitnessgram-test/[[/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">
<?php
// 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…
// CUSTOM CODE FOR GRADES AND CATEGORIES
//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:
Hi,
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="http://pefriends.com/grade/2-12/">2-12</a>
Your css class will be
.level-2-12{
}
.level-3-5{
}
.level-k-12{
}
Just do that for all your other "grades" term slug.
Thanks
Denzel
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="http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names"]]css [[/LINK]]
[[LINK href="http://www.w3.org/TR/CSS21/grammar.html#scanner"]]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.