Add “Featured Posts” to your Thematic child theme

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.

About Cristian Antohe

Cristian Antohe is the co-founder Cozmoslabs. He's a WordPress developer, web designer and Open Source fanatic. He's part of the team that developed Profile Builder and WordPress Creation Kit and also helps curate wpMail.me.

Find me on: Google + | Twitter

29 thoughts on “Add “Featured Posts” to your Thematic child theme

  1. thanks for a great post.

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

    • 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. 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?

  3. 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?

    • 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!

  4. @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.

    • 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.

  5. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework | Es Developed - Fresh Website and Graphic Design

  6. Pingback: Test av ny funktion i Thematic

  7. 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?

  8. Pingback: TeeOff Post Redesign

  9. 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

  10. Pingback: Build WordPress Sites Fast With the Thematic Theme Framework ‹ Wordpress Expert – Just another WordPress Expert

  11. 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.

  12. 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’

  13. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *


9 × = forty five

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>