WordPress.org

Support

Support » Themes and Templates » [Resolved] style post titles according to category

[Resolved] style post titles according to category

  • Hi everybody,
    I’m new [well, about 6 weeks] to WordPress though I have an understanding of CSS and HTML.
    I’d like to style the post titles according to category [using icons you see in the sidebar] and I think I need to use the post_class template tag and this would be needed in every page template that shows posts [having read the related WordPress codex].
    The problem is my lack of PHP knowledge so I don’t know where to insert the post_class code in relation to the existing post tile code code [which currently has a theme determined class of .posttitle].
    The blog is: dico.stevedrake.net [the link wouldn’t show using the link button :-(]
    Thanks a bunch.
    steve

Viewing 11 replies - 1 through 11 (of 11 total)
  • esmi

    @esmi

    Forum Moderator

    Yep, that’s the article I mention in the post.
    I’m unsure how to change the existing code [below] to include the post_class tag [being a complete novice with PHP].

    <h2 class="posttitle"><a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
              </a></h2>

    steve

    Okay, the code below partially works [it isolates the category] but any CSS applies to all the content in the post whereas I just want to style the post title according to category.

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    		<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a>

    Any ideas? What did I do wrong?
    Thanks
    steve
    P.S. I’m working locally [thankfully] so you won’t see the above on the live site.

    Moderator Michael

    @alchymyth

    Forum Moderator

    http://codex.wordpress.org/Function_Reference/post_class#Adding_More_Classes

    <h2 <?php post_class('posttitle'); ?>><a href="<?php the_permalink(); ?>">

    you can add the existing class as an argument into the post_class()

    example styles for a post in the category ‘monkey’:

    h2.category-monkey { ... }
    or
    h2.posttitle.cotegory-monkey { ... }

    Thanks alchymyth,
    I now understand the bit about adding the existing posttitle class [looking at your sample].
    However, when using the sample code I get an error [missing a closing bracket or quote] and PHP isn’t my strong point.

    Moderator Michael

    @alchymyth

    Forum Moderator

    i double checked the line that i posted, and it does not cause an error.

    can you post the full text of the error message, and the code that lead to it?

    Hi,
    Thanks for the reply.
    The error message [in the Properties tab in Dreamweaver CS5] says:
    “Marked invalid because it’s an overlapping or unclosed tag.
    If the display looks correct it is safe to delete these tags”.
    I’m no PHP expert but comparing it to other PHP on the page it looks right. Below is the code for the first part of the post box area until the comment code starts.

    <div class="box">
    <h2 <?php post_class('posttitle'); ?>><a href="<?php the_permalink(); ?>">
            <p class="metablock"><span class="meta">Posted on
              <?php the_time('F j, Y'); ?>
              by <?php the_author_posts_link(); ?>

    Maybe a typo on my part?

    Moderator Michael

    @alchymyth

    Forum Moderator

    my suggested line was only to replace the first line of your posted section, not the whole section;

    the full section now:
    from:

    <h2 class="posttitle"><a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
              </a></h2>

    to:

    <h2 <?php post_class('posttitle'); ?>><a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
              </a></h2>

    ————

    applied to the code you posted in your last reply:

    <div class="box">
    <h2 <?php post_class('posttitle'); ?>><a href="<?php the_permalink(); ?>">
              <?php the_title(); ?>
              </a></h2>
    
            <p class="metablock"><span class="meta">Posted on
              <?php the_time('F j, Y'); ?>
              by <?php the_author_posts_link(); ?>

    this should make the old dreamweaver happy 😉

    Thanks – that did the trick.
    I know I’m cheating by using Dreamweaver but I’m a WordPress novice so need the visual assistance Dreamweaver gives me when adjusting CSS, building things for the sidebar, etc.
    I take my hat off [if I had one] you all who do this in code only without any visual assistance.

    Moderator Michael

    @alchymyth

    Forum Moderator

    I know I’m cheating by using Dreamweaver

    not at all – i use dreamweaver as well – as a perfect editor with syntax highlighter and syntax check; saved a lot of searching for typing errors.

    who do this in code only without any visual assistance

    a local wp install running with xampp helps a lot; and firefox’s web developer add-on for checks of css and html in the html code in the browser helps massively.

    Thanks again for your help alchymyth.
    I’m not using XAMP; on a Mac so I use MAMP.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] style post titles according to category’ is closed to new replies.