1 - CREATE THE TEMPLATES
Start your new template page (which you call events.php) with
<?php /*
Template Name: Events
*/ ?>
then, right underneath, copy and paste the entire content of index.php of your theme.
Do the edit below:
Right in between <?php if(have_posts()) : ?> and <?php while(have_posts()) : the_post(); ?> you add the query of the category you want to display (change the number to your own category ID, of course), like this:
<?php if(have_posts()) : ?>
<?php
if (is_page()) {
query_posts("cat=29");
}
?>
<?php while(have_posts()) : the_post(); ?>
This is the same thing you should have in your "Latest News", because it's the index page with the query for that category. Right?
Repeat the steps and do the same for the other "Press Releases" template (press.php), with the appropriate category ID in the query.
Upload the files into your theme folder, just where you have sidebar.php, header. php, index.php, etc.
2 - CREATE THE PAGES IN WORDPRESS
Go to your Admin --> Write --> Page, and create two new pages (this is the name that will appear in the tabs), and call one "Events" and the other one "Press Releases".
Don't put any text in there, leave blank, BUT from the "Page template" drop down menu, pick the right template you have created for each. Save and publish.
3 - THE MENU IN THE HEADER
In header.php of your theme, use the call to the pages for your menu (I have changed "Home" with "Latest News" for you, which is the call to the index.php page you already have with the news category query)
<ul class="menu">
<li class="<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists('is_tag') and is_tag()) )
{ ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a title="<?php bloginfo('name'); ?>" href="<?php bloginfo('url'); ?>">Latest News</a></li>
<?php wp_list_pages('depth=1&title_li=&exclude='); ?>
</ul>
4 - THE STYLE.CSS
This is the call to the classes mentioned in the header. Adjust according to the look, colors, etc. you want.
/*-----main-menu*/
ul.menu{position:absolute; right:25px; padding:5px 10px 0;}
ul.menu li{float:left; margin:0 0 0 5px; background:#777; font:bold 11px/1 'trebuchet ms', arial, sans-serif;}
ul.menu li a{display:block; color:#fff; padding:5px 10px;}
ul.menu li a:hover{text-decoration:none; background:#888;}
ul.menu li.current_page_item a, ul.menu li.current_page_item a:hover{color:#444; background:#ccc;}
ET VOILA'!!!! I don't think I forgot any steps... Let me know if this worked for you!
jhames
