Creating a Dynamic Home Page

August 30, 2007  

Since the Revolution theme was built to be used as a CMS, the current home page is coded to be static. However I have received many request on how to change that to pull dynamic information. On the lower section of the home page, you will see three columns - here’s how you can change the code to pull dynamic information.

The first thing you will want to do is open the home.php file, and find this piece of code:

<div id="homebottomleft">
<img src="<?php bloginfo('template_url'); ?>/images/hp-1.jpg" alt="<?php bloginfo('name'); ?>" />
<h2>Featured Section #1</h2>
<p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.<br /><a href="http://www.revolutiontheme.com/demo/sample-page">See a Sample Page in action »</a></p>
</div>

As of right now, this code dictates what is shown in the first column of that section - as you can see, it is constructed of static text. If you would like that column to show the latest post(s) of a particular category, replace that code with this:

<div id="homebottomleft">
<?php $recent = new WP_Query("cat=1&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<?php the_excerpt(__('Read more'));?><div style="clear:both;"></div>
<?php endwhile; ?>
</div>

The cat=1 piece is where you specify which category you want to pull, and the showposts=1 piece is where you can specify how many posts you want to show. You can find the category ID # on the “Manage Category” tab of your WordPress dashboard.

As you can see, this will show “excerpts” of each post. To show the entire post, replace:

<?php the_excerpt(__(’Read more’));?>

with:

<?php the_content(__(’Read more’));?>

To replace the middle and right columns of your home page, you can repeat the process - but look for the <div id=”newspagemiddle”> and <div id=”newspageright”> sections of code respectively.