Featured Posts for Thematic

Featured Posts for Thematic

Featured posts are common in WordPress magazine themes. They let you promote hot topics and bring your best articles right in front of your users.

First thing we need to do is create a thematic child theme. This way we won’t make direct changes to Thematic.

The featured posts will be inserted on the home page before the rest of the articles. We’ll display the latest 3 posts which are tagged ‘featured’.

preview thematic child theme

We now have to add the code inside of functions.php file of your child theme (don’t forget the <?php opening tag and the ?> ending tag).

function featured_posts(){
 
		$my_query = new WP_Query('tag=featured&showposts=3');
 
		echo '<ul id="featured-posts">';
		$feat_class = array();
 
		while ($my_query->have_posts()) : $my_query->the_post();
				$feat_class = array();
				// Category for the post queried
				foreach ( (array) get_the_category() as $cat )
					$feat_class[] = 'category-' . $cat->slug;
					$feat_class = join(" ", $feat_class);
				?>
				<li id="featured-<?php the_ID(); ?>" class="<?php echo $feat_class; ?>">
					<?php 
						$posttitle = '<h4><a href="';
						$posttitle .= get_permalink();
						$posttitle .= '" title="';
						$posttitle .= __('Permalink to ', 'thematic') . the_title_attribute('echo=0');
						$posttitle .= '" rel="bookmark">';
						$posttitle .= get_the_title();   
						$posttitle .= "</a></h4>\n";
						echo $posttitle;
 
						the_excerpt();
					?>
 
				</li><!-- .post -->
		<?php
		endwhile;
		echo '</ul>';
}
add_action('thematic_above_indexloop','featured_posts');

The first line $my_query = new WP_Query(‘tag=featured&showposts=3′); defines the name of the tag that targets your posts (you can have any tag name there) and the number of featured articles (three in this case).

Right now it’s just a list of posts so a bit of css styling is in order to make it look attractive to your visitors. Add this css to your style.css file inside the Child Theme.

ul#featured-posts {
    float: left;
    margin: 0;
    padding: 0 0 15px 0;
    list-style: none;
    color: #111;
    font-size: 11px;
    line-height:14px;
    font-family: Helvetica, Arial, sans-serif;
}
#featured-posts li {
    float: left;
    width: 135px;
    padding: 12px 10px 10px 10px;
    margin-right: 15px;
    min-height: 260px;
    background:#f1f1f1;
    border:3px double #ccc;
}
 
#featured-posts li p {
    margin: 0;
    padding: 0;
}
 
#featured-posts li:hover {
    background:#fff;
}
#featured-posts li h4 a {
    font-family:Georgia, Times, sans-serif;
    font-size: 12px;
    line-height: 13px;
    display: block;
    padding: 5px 1px;
    color: #111;
    font-weight: bold;
}

I hope you find it useful and don’t hesitate to post in the comments were you’ve used this.

By This entry was posted in Thematic, Wordpress and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

25 Comments

  1. tolmarc
    Posted June 26, 2009 at 6:23 pm | Permalink

    thanks for a great post.

    how can this be accomplished with sticky posts? isn’t it better than adding the custom field each time?

    • Posted June 26, 2009 at 7:10 pm | Permalink

      There is no custom field involved. You just tag your post with “featured” and that’s it! Also this is somewhat “best practice” when it comes to adding featured posts.

      You can have this code duplicated on multiple places on the homepage (you’ll just need to change $my_query to $my_query2 for example) and have multiple featured posts displayed like best posts, videos, reviews etc. This is something you can use to build a magazine WordPress theme.

  2. Posted June 26, 2009 at 6:42 pm | Permalink

    Great post you are always churning out great stuff with Thematic.

    @tolmarc
    Look at this post by Justin Tadlock for grabbing sticky posts. You could just add this code before the loop.

    http://justintadlock.com/archives/2009/03/28/get-the-latest-sticky-posts-in-wordpress

  3. Posted June 26, 2009 at 8:19 pm | Permalink

    Awesome I didn’t see that in the query (tag=featured) very nice.

  4. rgregory
    Posted June 27, 2009 at 2:48 am | Permalink

    Great stuff, you guys are contributing some amazing stuff to the wordpress community. I have been looking for something like this for a while! I use hybrid as well as thematic, any chance you could just change the last line of the php for the functions.php file and use it in hybrid?

  5. Posted July 18, 2009 at 6:45 pm | Permalink

    I think the featured posts concepts moves Thematic beyond the simple blog format. However, is it possible to extend the featured post area above the sidebars, as well, so that the area spans the entire front page?

    • Posted July 18, 2009 at 7:32 pm | Permalink

      Yup… Remove “thematic_above_indexloop” with “thematic_navigation_above”. You’ll just have to change the css to for the featured posts to span the entire with of the layout!

  6. Posted July 18, 2009 at 7:40 pm | Permalink

    @Cristi: Thanks. I’m having trouble with the drop-down category display text. I should have “home,” plus two categories. However, only one category – “designs” – displays; “home” and “uncategorized” do not display any text.

    I appreciate your help – especially for Thematic newbies, such as myself.

    • Posted July 18, 2009 at 7:49 pm | Permalink

      From what I can tell the entire menu displays text, including the drop down. You just have the css messed up and the text is white. You see the blue menu for Design and Uncategorized because that is the css for a:visited.

  7. Posted July 18, 2009 at 7:41 pm | Permalink

    I forgot: the site is http://www.wpdesigners.net

  8. Robert
    Posted August 7, 2009 at 6:27 am | Permalink

    This is cool but how do you exclude the featured posts from the loop below?

  9. Brian
    Posted October 29, 2009 at 6:58 pm | Permalink

    Say, for magazine style theme, the post in the feature post section has multiple tags…say: feature, theme, design, wordpress

    How do I get the “feature” to not repeat outside of the feature box?

  10. tzShaper
    Posted March 7, 2010 at 4:55 pm | Permalink

    Excellent, it looks like tagging articles with Featured work in the Commune theme, I guessed maybe you had used this technique there, looks like you did then?

    Thanks,
    T

  11. tzShaper
    Posted March 7, 2010 at 7:00 pm | Permalink
  12. jeandiesel48Ðáo
    Posted August 27, 2010 at 4:32 pm | Permalink

    Hack again?!

  13. Rob
    Posted September 1, 2010 at 12:24 pm | Permalink

    This is great. Yet I have a question:
    I my blog the featured posts are displayed on every page. Is there a way to restrict the featured posts to show only on certain pages, the start page maybe.

    Thank you.

  14. Posted November 15, 2011 at 6:34 am | Permalink

    awesome. that is missing from thematic and i was about to undertake that task.
    perhaps the sticky feature is also based on the tag concept.
    and no reason not to use the tag ‘sticky’ instead of ‘featured’

  15. Anthony
    Posted April 11, 2012 at 7:54 am | Permalink

    I’m a newbie to wordpress theme development so please put up with my ignorance. Lol. I copied your code to the functions and style respectively and still cant get it to work despite my development theme having published posts.

    Your help will be highly appreciated.

4 Trackbacks

  1. [...] Add “Featured Posts” to Your Thematic Child Theme [...]

  2. By Test av ny funktion i Thematic on October 4, 2009 at 8:14 pm

    [...] till nya funktioner till temat Thematic som jag hittade hos Cozmos Labs. Att lägga till ”Featured posts” i temat genom att kod i det childthemes som jag har börjat med. Spara / dela med [...]

  3. By TeeOff Post Redesign on November 9, 2009 at 9:30 pm

    [...] to keep the prominent feature section at the top, which was made possible (and easy) with code from CozmosLabs.com.  Finally, I still wanted to have links to other categories and their recent titles.  In the [...]

  4. [...] Add “Featured Posts” to Your Thematic Child Theme [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

* Copy this password

* Type or paste password here:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>