Make Sections MSNBC Style in WordPress
Posted
For WordPress Day I decided to pull out an old trick of mine. When I first saw the MSNBC redesign I immediately wanted to recreate the sections in a theme. It proved to be a bit more involved than I had first imagined. Look out ahead, heavy php content coming!
The Goal: People in Hell Want Ice Water
I wanted to break each category into a section. The latest article would be displayed with a short summary with a thumbnail. To the right of the latest article would be a list of the other stories in the category(section). And to the right of that display the subcategories in a list. This should be done for each category chosen by the user.
Lets Start: Elephants Learn to Fly
The code below is going to setup everything. Let me step through it.
- First $index_cats gets which categories are to appear from a theme options page (Learn to setup theme options here).
- I then setup the arguments I will pass along to the get_categories function in the variable $args. I store those categories in a variable named $cats and then start a foreach loop.
- The next few lines are setting up some variables to use in the code.
<?php
$index_cats = get_option('ch_index_cats'); // What categories to show on Index page
$args = array(
'orderby' => 'ID',
'hierarchical' => 0,
'include' => $index_cats, ); //Which categories to include, set on the theme options page
$cats = get_categories($args); //sets up everything to be looped through
foreach ($cats as $key => $category) { // loops through categories in array and creates a section for each
$catID = $category->cat_ID; //sets catID to category ID number
$catName = $category->cat_name; // sets catName to category Name
$cat = $cats[$key]; // Sets category
?>
Output It: Monkeys Fly Out of My Buttocks
First the title of the section and a link to the rss feed. This is pretty straight forward WordPress stuff here.
<? //Category Title ?>
<div class="column span-15 cat_sections">
<h3>
<a href="<?php echo get_category_link($catID); ?>"><?php echo $catName; ?></a>
<a href="<?php bloginfo('home'); ?>/wp-rss2.php?cat=<?php echo $catID ?>" class="rss"> </a>
</h3>
Now to display the lead story. I used query_posts to retrieve one post from the current category ID then it is the loop as normal. The thumbnail image is pulled from a custom field. If the call fails error_form.php is called(this can be anything you want).
<?php // Latest Story and Thumbnail
query_posts('showposts=1&cat='.$catID); //gets the latest post
if (have_posts()) : while (have_posts()) : the_post(); //the loop
?>
<div class="column span-7 border">
<?php //get thumbnail (custom field)
$image = get_post_meta($post->ID, 'thumbnail', true);
if($image !== '') {
?>
<a href="<?php the_permalink() ?>">
<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" />
</a>
<?php } else { ?>
<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_directory'); ?>/images/default.jpg" title="<?php the_title(); ?>" />
</a>
<?php } ?>
<h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
<?php endwhile; else:?>
<?php include(TEMPLATEPATH . '/error_form.php'); //includes error form if no posts are found ?>
<?php endif; ?>
Now we need to display the latest headlines. I use the get_posts function to do this, but there are a few ways you could get these headlines. Notice the offset to exclude the first article and the number of posts is set to 4. Then once again its loops stuff as normal.
<? //Displays 4 latest headlines from current category ?>
<div class="column span-5">
<h4>Latest Headlines</h4>
<ul>
<?php
global $post;
$myposts = get_posts('offset=1&numberposts=4&category='.$catID);
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
Lets output a list of subcategories now. Use the wp_list_categories function and your done. Then finally close the entire loop.
<?php // Displays list of subcateogries ?>
<div class="column span-3 last">
<ul>
<?php
wp_list_categories('title_li=&hide_empty=0&child_of='.$catID); ?>
</ul>
</div>
</div>
<?php } ?>
Enjoy: Your New Awesome Sections
Thats it, you have sections! This is a pretty basic script that you could easily extend to pull in more information. Sections are a great way to organize content on sites with lots and lots of content, so get writing. Here is the entire code in its whole:
<?php /*Below is the code needed to get the news style look on the index page. It uses categories set on the theme options page. It gets the latest story from the cateogry and its thumbnail, then lists the 4 latest stories from that category, then lists the subcategories. It then loops through all the cateogries that have been set to show up in the themes options page */
$index_cats = get_option('ch_index_cats'); // What categories to show on Index page
$args = array(
'orderby' => 'ID',
'hierarchical' => 0,
'include' => $index_cats, ); //Which categories to include, set on the theme options page
$cats = get_categories($args); //sets up everything to be looped through
foreach ($cats as $key => $category) { // loops through categories in array and creates a section for each
$catID = $category->cat_ID; //sets catID to category ID number
$catName = $category->cat_name; // sets catName to category Name
$cat = $cats[$key]; // Sets category
?>
<? //Category Title ?>
<div class="column span-15 cat_sections">
<h3>
<a href="<?php echo get_category_link($catID); ?>"><?php echo $catName; ?></a>
<a href="<?php bloginfo('home'); ?>/wp-rss2.php?cat=<?php echo $catID ?>" class="rss"> </a>
</h3>
<?php // Latest Story and Thumbnail
query_posts('showposts=1&cat='.$catID); //gets the latest post
if (have_posts()) : while (have_posts()) : the_post(); //the loop
?>
<div class="column span-7 border">
<?php //get thumbnail (custom field)
$image = get_post_meta($post->ID, 'thumbnail', true);
if($image !== '') {
?>
<a href="<?php the_permalink() ?>">
<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>" />
</a>
<?php } else { ?>
<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_directory'); ?>/images/default.jpg" title="<?php the_title(); ?>" />
</a>
<?php } ?>
<h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
<?php endwhile; else:?>
<?php include(TEMPLATEPATH . '/error_form.php'); //includes error form if no posts are found ?>
<?php endif; ?>
<? //Displays 4 latest headlines from current category ?>
<div class="column span-5">
<h4>Latest Headlines</h4>
<ul>
<?php
global $post;
$myposts = get_posts('offset=1&numberposts=4&category='.$catID);
foreach($myposts as $post) :
setup_postdata($post);
?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<?php // Displays list of subcateogries ?>
<div class="column span-3 last">
<ul>
<?php
wp_list_categories('title_li=&hide_empty=0&child_of='.$catID); ?>
</ul>
</div>
</div>
<?php } ?>