adding inline CSS to a php function that displays categories

Resolved

anonymized-14293447

(@anonymized-14293447)

I’m using one of the 2 following examples to display what category(s) the post belongs to, in the post’s page.

Example 1

<?php 
$terms = get_the_terms( $post->ID , array( 'industry') );
// init counter
$i = 1;
foreach ( $terms as $term ) {
$term_link = get_term_link( $term, array( 'industry') );
if( is_wp_error( $term_link ) )
continue;
echo $term->name;
//  Add comma (except after the last theme)
echo ($i < count($terms))? " / " : "";
// Increment counter
$i++;
}?>

Example 2

<?php
$taxonomy = 'industry';
// get the term IDs assigned to post.
$post_terms = wp_get_object_terms( $post->ID, $taxonomy, array( 'fields' => 'ids' ) );
// separator between links
$separator = ', ';
if ( !empty( $post_terms ) && !is_wp_error( $post_terms ) ) {
$term_ids = implode( ',' , $post_terms );
$terms = wp_list_categories( 'title_li=&style=none&echo=0&taxonomy=' . $taxonomy . '&include=' . $term_ids );
$terms = rtrim( trim( str_replace( '<br />',  $separator, $terms ) ), $separator );
// display post categories
echo  $terms;
}
?>

My problem is that I want to CSS the term displayed and replicate my theme CSS. Where do I change the code?
What’s the best code of those above, anyway?

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

Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

4 years, 1 month ago

I’d output the terms as spans and assign them classes, then use CSS in the normal way rather than doing it inline as that’s much harder to modify later.

So, for example, in the first example,

echo '<span class="my-term-class">' . $term->name . '</span>';
Thread Starter anonymized-14293447
(@anonymized-14293447)

4 years, 1 month ago
Thank you for replying. It does work for Example1. But I need to ask you the same for Example2, because it actually creates a link that opens all posts under that categories and it’s the one I will use 🙂

I don’t want to take advantage of your time, but could you please have a look at this page? My intention is to have the categories listed under “SETTORE COMMERCIALE” as the ones under “GENERE DI SERVIZI”, i.e. with a ul-li tag:
```
<?php  if( !empty($tab->service)): ?>
<div class="company-service">
<h4><?php  _e('Range of Service','globo');  ?></h4>
<ul class="list-inline">
<?php foreach ($tab->service as  $service): ?>
<li><a href="#"><?php  echo esc_attr($service->text);  ?></a></li>									                    
<?php endforeach; ?>	
</ul>
</div>
<?php endif; ?>
```
Moderator Steven Stern (sterndata)
(@sterndata)

Volunteer Forum Moderator

4 years, 1 month ago

The same sort of thing applies. Add a class to your href statement.
Thread Starter anonymized-14293447
(@anonymized-14293447)

4 years, 1 month ago
…no, that code above is the reference for the ul-li class. I need to apply it to Example2, which has no href (I don’t know how it creates a link, but it does, probably in this bit ‘title_li=&style=none&echo=0&taxonomy=’)… sorry I’m no developer yet 🙂

I think this guy has the same problem.
- This reply was modified 4 years, 1 month ago by anonymized-14293447.
Michael
(@alchymyth)

4 years, 1 month ago

My intention is to have the categories listed under …., i.e. with a ul-li tag

do you actually want to output example2 as an ul li list?

then you would need to set ‘style=list‘ in this line of example2:
$terms = wp_list_categories( 'title_li=&style=none&echo=0&taxonomy=' . $taxonomy . '&include=' . $term_ids );
… and you would automatically get specific CSS classes added to the li tag (based on the term id)

Thread Starter anonymized-14293447
(@anonymized-14293447)

4 years, 1 month ago

I think we are almost there Michael…. I now have a ordered list but I wish to have each category as a single button (just like the tags “genere servizi”). Where else should I tweak the code?

Moderator bcworkz
(@bcworkz)

4 years, 1 month ago

Hey arsenalemusica,
It looks like you’ve set $separator to be ' + '. Instead set it to '</span><span class="btn btn-default">' so every link becomes its own button.

Thread Starter anonymized-14293447
(@anonymized-14293447)

4 years, 1 month ago

almost almost there 🙂 the <span> it’s probably getting on top of another…

Moderator bcworkz
(@bcworkz)

4 years, 1 month ago

It looks like you solved the button spacing. The short blank button is unrelated to any code used in this topic. It’s there because there is an extra link inserted between the <ul> tag below “genere di servizi” and the first <li> item for the “aeronautica” button.

If you cannot determine how that extra link got there, post the template code here that’s responsible for the “genere di servizi” section’s buttons.
Thread Starter anonymized-14293447
(@anonymized-14293447)

4 years, 1 month ago
I appreciate you throwing some light onto this section “genere servzi” (“Range of Service”):
```
<?php  if( !empty($tab->service)): ?>
<div class="company-service">
<h4><?php  _e('Range of Service','globo');  ?></h4>
<ul class="list-inline">
<?php foreach ($tab->service as  $service): ?>
<li><a href="#"><?php  echo esc_attr($service->text);  ?></a></li>									                    
<?php endforeach; ?>	
</ul>
</div>
<?php endif; ?>
```
Moderator bcworkz
(@bcworkz)

4 years, 1 month ago

That looks like the right code, but there is nothing there that generates the offending content. Somehow, this is inserted between the <ul> tag and the first <li> item:
<a href="https://agendadelvolo.info/industry/forniture-strumenti/"></a>

Are you sure you pulled that code from the right template? Verify by making some obvious change on the template and see if it appears on the page. For example, under the H4 title line add <h4>*** Template Test ***</h4>.

Thread Starter anonymized-14293447
(@anonymized-14293447)

4 years, 1 month ago

yes yes, that’s the right template from the child theme 🙂
it’s probably because the first section doesn’t have ul-li tags like the second one (which I wish to replicate)

Moderator bcworkz
(@bcworkz)

4 years ago

Your “SETTORE COMMERCIALE” code needs to have a </a> closing tag added before the final </span> that is output after the loop terminates. If you are not sure where to put it, post the code you have now and we’ll take a closer look.
Thread Starter anonymized-14293447
(@anonymized-14293447)

4 years ago
Now it works. I don’t really understand how, since I don’t understand where it picks the opening <a>tag, but this is the code if you want to double check everything is correct:
```
<?php
$taxonomy = 'industry';
// get the term IDs assigned to post.
$post_terms = wp_get_object_terms( $post->ID, $taxonomy, array( 'fields' => 'ids' ) );
// separator between links
$separator = '</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="btn btn-default">';
if ( !empty( $post_terms ) && !is_wp_error( $post_terms ) ) {
$term_ids = implode( ',' , $post_terms );
$terms = wp_list_categories( 'title_li=&style=list-inline&echo=0&taxonomy=' . $taxonomy . '&include=' . $term_ids );
$terms = rtrim( trim( str_replace( '<br />',  $separator, $terms ) ), $separator );
// display post categories
echo '<span class="btn btn-default">' . $terms . '</a></span>';
}
?>
```
Moderator bcworkz
(@bcworkz)

4 years ago

I think the rtrim() is stripping it off the terminal </a> from the full list, thus it needs to be replaced on the echo line. Unverified, since it works it doesn’t really matter.