ThemeShaper Forums » Thematic

[closed]

Stying the top most (latest) blog post

(10 posts)
  • Started 8 years ago by Senny
  • Latest reply from ScottNix
  • This topic is not resolved
  1. Senny
    Member

    Hey everyone, I just want to know how to go about editing the first post on the home page of your bog using thematic.

    I want the first post users see to be display differently, and then have a default look for other posts following. I've looked around and haven't found a solution for Thematic.
    http://i51.tinypic.com/xf24b9.png
    ^like this, where the first post would always be in the purple box, then the other posts the alternate look.

    Thank you for any help and for your time.

    Posted 8 years ago #
  2. Roll your own index loop where you count posts and do something special to the first one. My example applies the 'sticky' selector to the first post since I don't use sticky posts; you would change it to whatever you like. My example also applies excerpts only to the home and category pages, you may not want that.

    function childtheme_index_loop()
    {
    	/* Count the number of posts so we can insert a widgetized area */
    	$count = 1;
    	while ( have_posts() ) : the_post();
    	?>
    		<div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?><?php if ( $count == 1 && is_home() && get_query_var('paged') == 0 ) echo ' sticky' ?>">
    
    			<div class="calendar">
    				<span class="month"><?php the_time('M') ?></span>
    				<span class="day"><?php the_time('j') ?></span>
    			</div>
    			<?php echo thematic_postheader_posttitle() ?>
    
    			<div class="entry-content">
    			<?php
    				if ( is_home() || is_front_page() || is_category() )
    				{
    					echo apply_filters( 'thematic_post' , get_the_excerpt() );
    					?>
    					<span><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title() ?>"> Read More ...</a>
    					</span><br /><br />
    					<?php
    				}
    				else
    				{
    					thematic_content();
    				}
    			?>
    			<?php wp_link_pages( 'before=<div class="page-link">' .__('Pages:', 'thematic') . '&after=</div>' ) ?>
    			</div>
    			<?php thematic_postfooter(); ?>
    		</div><!-- .post -->
    
    		<?php comments_template();
    
    		if ( $count == $thm_insert_position )
    		{
    			get_sidebar('index-insert');
    		}
    		$count++;
    	endwhile;
    }
    add_action( 'thematic_indexloop' , 'childtheme_index_loop' );

    -Jeff

    Posted 8 years ago #
  3. sowingseeds
    Member

    Other ways of achieving this could be:

    1. If you have enabled Thematic post class in functions: i.e. unchecking the line define('THEMATIC_COMPATIBLE_POST_CLASS', true);
    then each post will have a class added .p1, .p2, etc. That then would be a simple task of styling the post in stylesheet with .p1 {background....}.

    2. Another way is to add a class to the posts as follows:
    //adding classes to the post
    function addpost_class($class) {
    global $post, $posts;
    if ( is_home() && !is_paged() && ($post == $posts[0]) ) $class[] = 'firstpost';
    if ( is_home() && !is_paged() && ($post == $posts[1]) ) $class[] = 'secondpost';
    if ( is_home() && !is_paged() && ($post == $posts[2]) ) $class[] = 'thirdpost';
    //and so on to as many as you wish to add a specific class to
    return $class;
    }
    add_filter('post_class', 'addpost_class');

    Posted 8 years ago #
  4. Senny
    Member

    Okay, I'll give it a try!

    Posted 8 years ago #
  5. Senny
    Member

    It seems neither one worked, I'm not sure what I did wrong, but I'm still not getting the classes to edit the first post.

    Can I ask where I am suppose to place the codes? I may have placed them in the wrong location?

    Posted 8 years ago #
  6. sowingseeds first answer is the easiest way go.

    Check your functions.php file in your child theme. By default it is commented out.

    You should be able to change

    // define('THEMATIC_COMPATIBLE_POST_CLASS', true);

    to

    define('THEMATIC_COMPATIBLE_POST_CLASS', true);

    So just remove those two // brackets to uncomment the php and make it active. This is by far the easiest route. Once this is active, it will start adding classes to the post of ".p1, .p2, etc..". You want to then target those classes with .p1 in your CSS file.

    Posted 8 years ago #
  7. Senny
    Member

    Yeah that definitely is the easiest way to go about doing it but for some reason it just doesn't work for me, I even moved the function the the top of the list of functions and it still doesn't assign classes to each of the posts.

    Posted 8 years ago #
  8. sowingseeds
    Member

    Sorry to ask the obvious: you are using firebug or equivalent and can see that .p1 etc. is not assigned? Happy to take a look if you send a link.
    That you are using a child-theme?

    Posted 8 years ago #
  9. Senny
    Member

    http://jordanflemming.com/

    Here is the link, and yeah, I've used the web developer toolbar and checked the source as well as edited the css, no effect. Thanks for your help.

    Posted 8 years ago #
  10. This is a case of actually modifying thematic itself. Looks like sowingseeds had maybe already figured out where the problem was by his last question. Since the thematic theme itself was modified, you may want to get the child theme thing down asap.

    Helgatheviking posted a good site for understanding Child Themes, but there is going to be some extra work now in that you will have to move over changes, maybe someone else can chime in who has had to move themes out of thematic (which is incorrect) and into a correct child theme.

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.