Stylish way to display category title?

Hi,

As far as I understand you want to achieve two things:

1. Display the post’s category above the title
2. To style category names differently

The first can be achieved with the following code:
<?php echo get_the_category_by_ID($cat); ?>

As to your other questions, you can check for the category ID and add different CSS id to the code above like that:

<?php if ( in_category(28) ):?><span id="Category 28"><?php echo get_the_category_by_ID(28); ?></span><?php endif;?>

In such case, however, you need to add all of your categories as mentioned above.

I’d like any post from a certain category to have its respective category displayed in this fashion

if you don’t just want to add a fancy category title to the category archive, but to each post in the index page and each single post, add the code before the line with the_title() in your theme’s single.php and index.php;

something like:

<?php $cats = get_the_category();
foreach( $cats as $cat ) {
  echo '<span class="fancy-cat cat-' . $cat->slug . '">' . $cat->name . '</span>';
} ?>

details depend on your currently used theme.
the styling depends on your idea of ‘fancy’ – do you want to use images, or special fonts, …?

https://codex.www.ads-software.com/Function_Reference/get_the_category

I am using a custom template for my posts. Here is the code:

<?php
/*
Template Name: 2Column
*/
?>

<?php get_header(); ?>
<div class="art-content-layout">
    <div class="art-content-layout-row">
        <div class="art-layout-cell art-sidebar1">
          <?php get_sidebar('default'); ?>
          <div class="cleared"></div>
        </div>
        <div class="art-layout-cell art-content">
			<?php get_sidebar('top'); ?>
			<?php
				if(have_posts()) {

					/* Start the Loop */
					while (have_posts()) {
						the_post();
						get_template_part('content', 'page');
						comments_template();
					}

				} else {

					 theme_404_content();

				}
		    ?>
			<?php get_sidebar('bottom'); ?>
          <div class="cleared"></div>
        </div>
            </div>
</div>
<div class="cleared"></div>
<?php get_footer(); ?>

Where exactly would I add the code? I apologize; I’m not too experienced in php…

the custom template calls a file content-page.php (or if this doea not exist, a file content.php) with this code:

get_template_part('content', 'page');

you would need to make the edits in that file.

Okay so if I wanted to add an image for a category, let’s say it’s called “reviews-head.png”. How would I implement that into this code:

<?php $cats = get_the_category();
foreach( $cats as $cat ) {
  echo '<span class="fancy-cat cat-' . $cat->slug . '">' . $cat->name . '</span>';
} ?>

Would I actually have to code the graphic into it?

example assuming ‘reviews’ is a category slug;

<?php $cats = get_the_category();
foreach( $cats as $cat ) {
  echo '<img src="' . get_stylesheet_directory_uri() . '/images/' . $cat->slug . '-head.png" alt="" />';
} ?>

the example code is for an image in the /images folder of the theme;
the exact img src depends on where the image is saved in your site.

obviously, if there is no image defind for a post category, you’ll end up with an empty image tag.

Where in the code does it specify that it’s for the ‘reviews’ category?

it outputs the category slug:

$cat->slug

alternatively (possibly easier and less problems):
if you only want this for a few categories, you could work with ‘if/elseif/else’ statements using in_category()

this replaces the whole suggested code:

<?php if( in_category( 'reviews' ) ) { ?>
<img src="reviews-head.png" />
<?php } elseif if( in_category( 'whatever' ) ) { ?>
<img src="whatever-head.png" />
<?php } ?>

again, the exact image src depends on the image location.

Thanks for all your help! ?? I will give this a try shortly and let you know how I make out….

Okay…I’ve tried in vain to add this code.

Here’s the code I’m using:

<?php if( in_category( 'book-reviews' ) ) { ?>
<img src="https://www.midnightpalace.com/wp-content/uploads/2012/12/bookreviews.png" />
<?php } elseif if( in_category( 'film-reviews' ) ) { ?>
<img src="https://www.midnightpalace.com/wp-content/uploads/2012/12/filmreviews.png" />
<?php } ?>

…and here is the code from my content-page.php file:

<?php
	global $post;
	theme_post_wrapper(
		array(
			'id' => theme_get_post_id(),
			'class' => theme_get_post_class(),
			'title' => theme_get_meta_option($post->ID, 'theme_show_page_title') ? get_the_title() : '',
			'before' => theme_get_metadata_icons('edit', 'header'),
			'content' => theme_get_content()
		)
	);
?>

You said it’s supposed to go before the line with the_title(). Right? How should it appear? Nothing I’ve tried so far has worked…

before the line with the_title()

this would generally the line to look for – however, the exact location depends on the used theme.
custom themes or ‘premium’ themes are sometimes totally different.

what theme are you using?

I’m using a theme I created in Artisteer. Is there some code I can provide that might make it easier?

possibly try to ask in the artisteer forum;

I personally stop here as those artisteer themes are just too alien for me ??

Thing is, every other wp hack I’ve done with my theme has worked. I really just think it’s me putting the code in the wrong place.