WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Custom Title Look for Posts Containing.. (15 posts)

  1. filipx
    Member
    Posted 6 years ago #

    Is there a plugin or a way to make particular post titles appear in a different colour?
    For example, I use twittertools and it would be great to have my tweets appear different in the listing of entries rather than all of them look the same. Is it maybe possible for particular category that the title is switches from h3 to h4 format for example?

    Many Thanks!

  2. Roger Theriault
    Member
    Posted 6 years ago #

    Good question. Easy solution.

    Try this in your templates (using the correct category slugs):

    <h3<?php if (is_category(array(3,'twit','Tweet'))) {
               echo ' class="tweet"';
         } ?>><$php the_title(); ?></h3>

    and then of course add a style for h3.tweet

    Docs: http://codex.wordpress.org/Conditional_Tags

  3. filipx
    Member
    Posted 6 years ago #

    Thanks for reply Roger,

    Unfortunately I can't seem to get it to work ...if I just paste it into index.php and modify the category slugs it only duplicates the titles of posts. I've done the style but nothing. Sorry, I think I am missing the basics here...
    Any ideas?
    Thanks!

  4. Roger Theriault
    Member
    Posted 6 years ago #

    I looked at your site, it looks like all the posts are flagged as in the tweets category. You might want to run your pages through the XHTML validator, I saw a mismatched </p>.

    But you said

    if I just paste it into index.php and modify the category slugs it only duplicates the titles of posts.

    The operative code is just this:

    if (is_category(array('tweets','Tweets'))) {
               echo ' class="tweet"';

    Which adds an extra class to the tag you are wrapping around the post title, so you can style it differently.

    If you can post some of your code (especially the Loop), it will help us help you.

  5. filipx
    Member
    Posted 6 years ago #

    Hi Roger,

    Here is the code:

    <?php get_header(); ?>
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <div class="post" id="post-<?php the_ID(); ?>">
    	 <h3 class="storytitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
    	<h4><p><?php _e("Tag:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time('F j, Y'); ?> at <?php the_time('G:i a'); ?></p></h4>
    
    <?php the_content(__('(more...)')); ?>
    
    <?php comments_template(); // Get wp-comments.php template ?>
    
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    
    <h5><?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?></h5>
    
    <?php get_footer(); ?>

    I am sorry, i am probably not getting the basics..

  6. Roger Theriault
    Member
    Posted 6 years ago #

    No problem Filip,

    Change the beginning of just this line, as follows:

    <h3 class="storytitle"><a href [ ... rest omitted ]

    to

    <h3 class="storytitle<?php if (is_category('tweets')) {
               echo ' tweets';
         } ?>"><a href

    and it should generate either
    <h3 class="storytitle tweets"> -- if a tweets category
    or
    <h3 class="storytitle"> -- for all other categories

    Then add a style in style.css

    h3.tweets {
       background: green; /* or whatever */
    }

    Roger

  7. filipx
    Member
    Posted 6 years ago #

    all done..but no change. I think its something to do with the stylesheet. I think i have something in there that overwrites all styles for links ..whenever there is a link, it appears white background and black text.

    a { text-decoration: none; color: #252525;
    	background: #fff fixed 11% 11%;
    	padding: 1px 10px;
    	border-style: outset;
    	border-width: 1px;
    }
    a:hover { color: #eee;
    	background-color: #666;
    	border-style: outset;
    	border-width: 1px;
    }

    Is it this?

    and here is the <h3> style

    h1, h1 a { margin-bottom: 0px; text-align: left; color: #444444;
    	text-transform: uppercase;
    	font-family: Helvetica;
    }
    h2 { margin-top: 10px; margin-left: 5px; text-align: left; margin-right: 5px;
    	font: 1em verdana;
    }
    h3 { margin-bottom: -9px; margin-top: 30px;
    	border-top: 1px solid #a5a5a5;
    }
    h3.tweets {
       background: #34a0bb;
    }
    h4 { margin-bottom: -10px; margin-top: 10px;
    	font-size: .5em;
    	color: #666;
    	text-transform: capitalize;
    	left: 0;
    	position: relative;
    	float: right;
    	bottom: 32px;
    }

    Any ideas?
    Thanks Roger, much appreciated.

  8. Roger Theriault
    Member
    Posted 6 years ago #

    If you're using firefox, install the firebug extension, it will allow you to navigate through the structure to the item that isn't displaying correctly, and it will show you the CSS that is being applied... you can even edit it temporarily to see what works. But you're not there yet...

    According to the html generated on your site (View source in your browser), your template code is not adding the extra style. You may be editing the wrong file... you may want to do the same change on all pages which display posts in a loop.

    Separately, since it's the a tag applying the color, you'll need to apply your color to the a tag, like this:

    h3.tweets a {
       background: #34a0bb;
    }
  9. filipx
    Member
    Posted 6 years ago #

    It seems like it works, kind of .. but only when clicked to list all posts categorised "tweets". For some reason it doesn't do it on the front page ..

    hmmm...

  10. Roger Theriault
    Member
    Posted 6 years ago #

    In your theme folder, if you have any of these files you may need to edit them as well... pretty much any .php file where you output the_title()...

    home.php
    archive.php
    category.php
    index.php
    single.php

    You may want to read: http://codex.wordpress.org/Template_Hierarchy

  11. filipx
    Member
    Posted 6 years ago #

    The only files I have are:

    footer.php
    header.php
    index.php
    searchform.php

    and of course style.css.

    here is the code of the header.php file but I am not sure if this is causing the problem. Do i need to create a home.php file to get this working?

    What I don't understand is why isn't it applying to the home page and it does to the category page ... hmmm..

    header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title><?php wp_title(); if (function_exists('is_tag') and is_tag()) { ?>Tag Archive for <?php echo $tag; } if (is_archive()) { ?> archive<?php } elseif (is_search()) { ?> Search for <?php echo $s; } if ( !(is_404()) and (is_search()) or (is_single()) or (is_page()) or (function_exists('is_tag') and is_tag()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
    
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
    
    <meta name="copyright" content="Copyright <?php wp_title(''); ?>" /> 
    
    <!--style-->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    
    <?php wp_head(); ?>
    </head>
    <body>
    <ul id="search"><small>Search</small><?php include (TEMPLATEPATH . '/searchform.php'); ?>
    </ul><!--end search-->
    <div id="main">
    
    <ul id="nav">
    <li <?php if( (is_home()) or (is_single()) or (is_archive()) ) {?>class="current_page_item"<?php } ?>><a href="<?php bloginfo('url'); ?>">HOME</a></li>
    <?php wp_list_pages('title_li='); ?>
    </ul><!--end navigation-->
    
    <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
    <h2><?php bloginfo('description'); ?></h2>
    
    <ul id="flickr">
    <h9><?php get_flickrRSS(); ?></h9>
    </ul>

    and this is the full index.php file:

    <?php get_header(); ?>
    
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <div class="post" id="post-<?php the_ID(); ?>">
    	 <h3 class="storytitle<?php if (is_category('tweets')) {
               echo ' tweets';
         } ?>"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
    	<h4><p><?php _e("Tag:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time('F j, Y'); ?> at <?php the_time('G:i a'); ?></p></h4>
    
    <?php the_content(__('(more...)')); ?>
    
    <?php comments_template(); // Get wp-comments.php template ?>
    
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    
    <h5><?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?></h5>
    
    <?php get_footer(); ?>
  12. filipx
    Member
    Posted 6 years ago #

    it worked!!!
    i changed (is_category('tweets')) into (in_category('tweets')) and it worked.

    Many thanks Roger and sorry for troubling you so much... very pleased.

  13. Roger Theriault
    Member
    Posted 6 years ago #

    My bad! Glad you've got it going.

  14. gio50000
    Member
    Posted 6 years ago #

    Is it possible to do this with page slugs?

    Gio

  15. flick
    Member
    Posted 6 years ago #

    Really useful q&A! Thank you very much, filipx and Roger!

Topic Closed

This topic has been closed to new replies.

About this Topic