WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] style post titles according to category (12 posts)

  1. steve_drake
    Member
    Posted 2 years ago #

    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

  2. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

  3. steve_drake
    Member
    Posted 2 years ago #

    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

  4. steve_drake
    Member
    Posted 2 years ago #

    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.

  5. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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 { ... }

  6. steve_drake
    Member
    Posted 2 years ago #

    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.

  7. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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?

  8. steve_drake
    Member
    Posted 2 years ago #

    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?

  9. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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 ;-)

  10. steve_drake
    Member
    Posted 2 years ago #

    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.

  11. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    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.

  12. steve_drake
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic