WordPress.org

Support

Support » Themes and Templates » Stylish way to display category title?

Stylish way to display category title?

Viewing 15 replies - 1 through 15 (of 24 total)
  • Hristo Pandjarov
    Participant

    @hristo-sg

    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.

    Michael
    Forum Moderator

    @alchymyth

    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, …?

    http://codex.wordpress.org/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…

    Michael
    Forum Moderator

    @alchymyth

    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?

    Michael
    Forum Moderator

    @alchymyth

    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?

    Michael
    Forum Moderator

    @alchymyth

    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="http://www.midnightpalace.com/wp-content/uploads/2012/12/bookreviews.png" />
    <?php } elseif if( in_category( 'film-reviews' ) ) { ?>
    <img src="http://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…

    Michael
    Forum Moderator

    @alchymyth

    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?

    Michael
    Forum Moderator

    @alchymyth

    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.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Stylish way to display category title?’ is closed to new replies.