Creating a Dynamic Home Page
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.
Using a Background Image
If you are looking to use a background image with your design, the instructions below will show you how easy it is to do. Look for this code in the style.css file:
body {
background: #DDDDDD;
width: 960px;
color: #222222;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}
Currently, the background is set to display #DDDDDD, which is the gray that surrounds this site. If you plan on using any of the free background images that I’ve supplied on the Extras page, all you’ll need to do is change your code to look like this:
body {
background: #DDDDDD url(images/bg.gif);
width: 960px;
color: #222222;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}
The bg.gif is an example of the background image - you may have named it something else, in which case it should match what’s on that line. Make sure the background image is found within the Revolution theme folder on your server.
Generally, I always keep the hexcode (#DDDDDD) there in the event that something unexpected to the background image on my server. At least this way the design will fall back to the hexcode and still give you a solid background color.
Creating Multiple Featured Pages
I have already been emailed a few times asking how to create multiple Featured Pages, so this is a tutorial that should help many users.
To start things off, the first thing you will want to do is open the page_featured.php file in your text editor. Now before you start, I would suggest saving it as a different file name, so you don’t accidentally save over the file as it is now. You can give it any name you want, but if the intent is to use the Featured Page multiple times, I’d name it something you can recognize.
For instance, the people that have emailed me have wanted to use it as a lead-in page for many sections - primarily for news sites. (i.e. Sports, Technology, Politics, Entertainment, etc.) So I would call the filename something like page_politics.php, or something similar.
After saving the file, the next thing I would suggest is to rename the page template title that is found at the top of the file. Here’s a screenshot of the page_featured.php file to show you where that can be found:
Again, I would change that to look something like this:
/*
Template Name: Politics Page
*/
?>
Once you change the page template name, save the file, and then upload it to the theme’s folder on your server. At this point, you are ready to create your page. Go into the write page section of your WordPress dashboard, and make sure you select the page template you created for your new page. If you created page_politics.php, then your screen would look like this:
At this point, all you need to do is save your page and it should be ready to go! Keep in mind that the Featured Page is comprised of 4 main containers, of which some are hardcoded and some are dynamic. For a map/explanation of those sections, take a look at the Creating a Featured Page tutorial, which will explain how each of those containers are built.
Adding a Padded Color Border to Images
If you are looking to add a colored border to your images, this tutorial will show you how. Keep in mind that there are a few areas within the stylesheet that define images, so you might have to apply this code to more than one area. Look for this code in the style.css file:
#contentleft p img {
border: none;
float: left;
margin: 0px 10px 10px 0px;
}
If you are looking to add 5px of padding to your image, and then wrapping it in a colored border, change your code to look like this:
#contentleft p img {
float: left;
border: none;
margin: 0px 10px 10px 0px;
padding: 5px;
border: 1px solid #000000;
}
The #000000 specifies what hex code you want to use for the color of the border that you want surrounding your image. If you want a thicker border, try using border: 2px instead.
Customizing the News Page
There are a number of developers who want to use WordPress as an aggregated news source - this is the number one reason I created the News Page. The News Page template is pretty easy to understand, and consequently easy to modify.
Each column in the News Page is defined in the stylesheet - here’s the breakdown of each column in the page_news.php file:
- News Section #1 is defined as <div id=”newspageleft”>
- News Section #2 is defined as <div id=”newspagemiddle”>
- News Section #3 is defined as <div id=”newspageright”>
By default, the code written for each of these three columns is the same - the code is calling to publish the excerpt of the latest post in category ID #1. I did it that way because on every WordPress install there will always be a category ID #1, and always an initial post.
However the beauty of the Revolution theme is how customizable it is, and how simple it is to change things around. I’ll break down each section to make it easier to customize. The following code defines the image that’s in each column:
<img src="<?php bloginfo('template_url'); ?>/images/np-1.jpg" alt="<?php bloginfo('name'); ?>" />
The code below is really the heart of the news page. This is where you can define which category you want to pull, and how many posts you want to show:
<?php $recent = new WP_Query("cat=1&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
<b><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></b>
<?php the_excerpt(__('Read more'));?><div style="clear:both;"></div>
<?php endwhile; ?><br />
The code that says “cat=1″ is the category that is being pulled, where 1 is the category ID #, and then the “showposts=1″ is where you can define how many posts of that category you want to show.
Lastly, there is a list at the bottom of each column that currently shows the previous post titles of the category you are specifying. The code below acts in the same way as mentioned above, the only exception is that the post content isn’t shown:
<ul>
<?php $recent = new WP_Query("cat=1&showposts=5"); while($recent->have_posts()) : $recent->the_post();?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
