Question: Adding video to the Headline section in Arthemia. I want to retain the current functionality for the headline category whereby a post is shown on the main page with the thumbnail and text. However, I also want to create a new category called "Video" which if selected, will allow me to populate a single video from Vimeo into the headline section.
Answer: It is easier to use an other custom field called 'Video' where you insert the full embed code of the video. In the query for Headline posts we ask first if there is a custom field 'Video'. If this custom field is assigned to a post from category Headline, echo out the video code. If there is no custom field video, use 'else' and display the image and excerpt as ususal.
I give you here a part of the code of index.php of Arthemia free version, modified to display a video if you assign custom field name: Video and a Value with the full code as you get from Vimeo or Youtube to embed a clip on your site:
<div id="headline">
<img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/headline.png" width="75px" height="21px" alt="" />
<?php query_posts("showposts=1&category_name=Headline"); ?>
<?php while (have_posts()) : the_post(); ?>
<!-- first new part, check for customfield Video -->
<?php $videovalues = get_post_custom_values("Video"); if (isset($videovalues[0])) { ?>
<div id="headlinevideo">
<?php echo $videovalues[0]; ?>
</div>
<?php } else { ?>
<!-- end first new part -->
<div class="title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></div>
<div class="meta">[<?php the_time('j M Y') ?> | <?php comments_popup_link('No Comment', 'One Comment', '% Comments');?> | <?php if(function_exists('the_views')) { the_views(); } ?>]</div>
<?php $values = get_post_custom_values("Headline");?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/<?php
$values = get_post_custom_values("Image"); echo $values[0]; ?>&w=300&h=275&zc=1&q=100"
alt="<?php the_title(); ?>" class="left" width="300px" height="275px" /></a>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Read the full story »</a>
<!-- second new part, end else do normal stuff -->
<?php } // end if video or else normal ?>
<!-- end second new part -->
<?php endwhile; ?>
</div>
<div id="featured">
Actually I inserted two pieces here, first above <div class="title"> and second just before the <?php endwhile; ?> of Headline part.
The Video code is in a new div id="headlinevideo" so you can style it as you like, ie put in style.css this:
#headlinevideo {
margin:5px;
text-align:center;
}
this should center the video and give some space around.
Happy coding, you are welcome to ask here if you get problems