How to Create an Archives Page
The Revolution theme download is supplied with an “Archive” page template which will create a page that looks like this. This is an easy thing to create, and only requires a few simple steps.
The only thing you need to do while creating a page, is to enable the Archive Page template. You can name your archive page anything you want - for instance Archives, Sitemap, Library, etc. See the screenshot below for where the Archive Page template can be selected:
You do not need to type anything in the text area while creating your page - simple fill in the page title box and select the Archive Page template. Publish the page and you should have your Archive page ready to go!
Using a Full Width Header Image
Some people have asked me if it’s possible to make their header/logo image full width with this theme, and the answer is yes. It requires making a few changes to the code, which I will walk you through below.
The first thing you need to do is eliminate the header image url (currently displaying the magnifying glass and the gray shaded box) from the style sheet. This can be done by changing to the code below:
#header {
background: #FFFFFF;
width: 920px;
height: 110px;
color: #202020;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
overflow: hidden;
border-bottom: 5px solid #D5D5D5;
}
You will also need to add this code to the style sheet:
#header a img {
border: none;
margin: 0px;
padding: 0px;
}
The next thing you need to do is to upload your new image - to make things easy, continue to use the filename logo.gif and keep it in the theme’s images folder. After you do that, you will need to make the following change to your header.php file. Currently, your header code looks like this:
<div id="header">
<div id="headerleft">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<div id="headerright">
<b>Looking for something in particular?</b><br />
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" value="To search, type keywords and hit enter..." name="s" id="s-head" onfocus="if (this.value == 'To search, type keywords and hit enter...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'To search, type keywords and hit enter...';}" /></form>
</div>
</div>
You will want to delete the calls for <div id="headerleft"> and for <div id="headerright"> and your new code should look like this:
<div id="header">
<a href="<?php echo get_settings('home'); ?>/"><img src="<?php bloginfo('template_url'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a>
</div>
Since you are making the logo full width, there is no longer a need for separate header containers, which is why you deleted them. Now your header logo should show full width, as well be linked to the blog’s home page url.
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.
