Customised Front Page

Posted on October 26, 2009 and last modified on October 29th, 2009.

It is not difficult to choose the front page on WordPress anymore. You can use the options available in the Dashboard – Reading section to easily set the page of your choice.

However, the FreshlyPressed theme offers a unique front page template which can be used on the front page or anywhere else for that matter. All you need to do is select the front page template when you write your page via the Dashboard – Writing A Page option.

There are quite a few aspects to the front page though and you will need to set up a specific category and change a couple of ID’s within the code for it to work properly.

So, let’s dissect the front page and see what it is all about and how you can use it most effectively. And don’t worry, it is not difficult, so hang in there…

Showcase

The first thing you see is the Showcase [that's the top rotating image area for those who can't work it out] and how to use this area is explained here. As you can see, I have placed some abstract imagery in there but it could be used for a wide range of items such as portfolio screenshots, written text [in the form of an image], or anything else you desire.

Featured Articles

The featured Articles area is controlled by yet more code in the page_front.php file and looks like this:

<?php
$featuredPosts = new WP_Query();
$featuredPosts->query('category_name=featured&showposts=3');
while($featuredPosts->have_posts()) :
$featuredPosts->the_post();?>

The only part you need to worry about is the word ‘featured‘ which relates to the category to show in these 3 top posts. If you just go with the category name of ‘Featured‘ at this point then you have no need to change anything here whatsoever. But if you do want to change the category choice here, just type in the appropriate category name. Save and that’s all sorted.

One other point to note there though. You will notice that I have chosen to use three images [all the same size - because that's how theme developers work] in the Featured Articles area. It may appear that these images are contained within the posts themselves, but that is not how it is my friends. The Featured Articles area has another little feature called the ‘featurethumb‘ which is actually a custom field option.

To add the images to each of the three posts you will need to type in featurethumb into the custom field name option and then add the location of the image within the custom field value. Of course, if you choose to insert a huge image here, that’s your choice but let me tell you right now, I am not responsible for your crazy behaviour and you can fix it yourself. Just so you know, the images that are currently in place on this site within this section are small [as in 64x64 pixels small]. You do not have to use images, but at least if you choose to do so, you now know how.

The Post

The next part of the front page is easy, easy, easy. It’s just a normal page as written via the Dashboard – Writing panel so need to to go into a long explanation here is there? The only thing you do need to keep in mind is that if you write a very long post here, it may throw the whole page into a weird ‘look. Also note, the MORE function dos not work on this page. And before you ask, the ‘Eclectic’ music by James is part ofthe post and nothing more than an object incorporated in the normal fashion.

Category Boxes

Below the post we have 4 more boxes containing content from various categories.This where you need to change the ID’s I mentioned earlier. don’t panic at this point – it’s just as easy as everything else we have done so far. Open the file called front_categories.php and you will see the following code:

<?php ?>
    <div class="front-cols">
    <div id="leftcol">
<?php $posts = get_posts( "category=5&numberposts=1" ); ?>
<?php if( $posts ) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
    <h3 class="frontcatbox1"><?php the_category(',') ?></h3>
    <h4 class="frontcatbox1a"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
<?php the_excerpt(__('>> full article')); ?>
<?php endforeach; ?> <?php endif; ?>
    </div><!-- Close leftcol -->
    <div id="rightcol">
<?php $posts = get_posts( "category=6&numberposts=1" ); ?>
<?php if( $posts ) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
    <h3 class="frontcatbox2"><?php the_category(',') ?></h3>
    <h4 class="frontcatbox2a"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
<?php the_excerpt(__('>> full article')); ?>
<?php endforeach; ?> <?php endif; ?>
    </div><!-- Close rightcol -->
    </div><!-- close front-cols -->
    <div id="frontquotes">
<h3 class="randomquotes">Random Quotes</h3>
<?php get_random_quotes(); ?>
    </div>
    <div id="frontcatbox3">
<?php $posts = get_posts( "category=7&numberposts=1" ); ?>
<?php if( $posts ) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
    <h3 class="frontcatbox3"><?php the_category(',') ?></h3>
    <h4 class="frontcatbox3a"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
<?php the_excerpt(__('>> full article')); ?>
<?php endforeach; ?> <?php endif; ?>
    </div><!-- Close frontcatbox3 -->
<div id="frontcatbox4">
<?php $posts = get_posts( "category=25&numberposts=1" ); ?>
<?php if( $posts ) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
    <h3 class="frontcatbox4"><?php the_category(',') ?></h3>
    <h4 class="frontcatbox4a"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
<?php the_excerpt(__('>> full article')); ?>
<?php endforeach; ?> <?php endif; ?>
    </div><!-- Close frontcatbox4 -->

It may appear to be daunting but all you need to do is change 4 little parts to it.

Look for these lines and change each one to the catgory ID of your choice.

category=5
category=6
category=7
category=25

Save and you are all finished. Yes, really – that’s it! If you are not sure how to find the ID of your categories, either install the Reveal IDs for WP Admin plugin that is bundled within the theme zip or alternatively, follow the instructions outlined here. I really do recommend you go for the first option though because it is a very handy plugin.

Random Quotes

The random quotes, which can be used for anything – not just quotes, is explained in detail here.

Only two more items on the front page, the Adsense box and the social networking images.

And after all that, you should be well versed with how to adjust the varying sections of the front page template.

Peel-Back Corner

Set Individual Styles for Specific Posts

Set Specific Stylesheets for Pages

Adsense Code in Post and Pages

About the author

James has added 29 posts to this site so far...

Founder and co-admin at FreshlyPressed, James also runs and maintains many, many other sites including JamesICT which is very much focussed on WordPress and all of its little idiosyncrasies. He now lives in Brighton, England with his fiancée and writes novels in his spare time. His latest work, 'Procrastination Expectancies' is due out later this year - or maybe the year after that! [more...]