WordPress:Creating a Static Front Page
UPDATE: With the release of WordPress Version 2.1, the option to set your own front page can be accomplished via your Administration > Settings > Reading panel. However unlike the old explanation that follows, you must NOT name your home page template file "home.php". If you do, this will cause a conflict with the WordPress 2.1 system. The approach that follows on this page is no longer necessary with WordPress 2.1 or newer
Known as a static front page or splash page, this is the first page seen by users entering your site. Unlike a traditional WordPress front page, featuring the WordPress Loop which generates a list of your most recent posts, the static front page is a customized page that lacks WordPress:The Loop and displays static information that can either invite people to "click through" to the real good stuff or offer highlighted post or article features and information that direct users to different areas of your WordPress site. It can have static information and links that do not change, or it can incorporate some automatically changing information.
This page contains a technique that requires editing several files. There's a different, shorter technique to get a static front page while maintaining a separate blog area, that is based on WordPress's static pages, and another one that works entirely with template files. Both of these techniques, unlike WordPress 2.1's front page setting, lend themselves to creating a richer, more interactive front page.
Using WordPress as CMS
If your goal is to have a WP-created Page with static information called "Home" at example.com/, and the standard blog index at example.com/news/, the method below may cause the more tag to fail.
Use a plugin such as Filosofo Home-Page Control instead. It works fine with WP installed in root.
Create and Upload a Static Front Page
By default, most websites feature their main page as one of the following, and you can set yours to be any of these:
- index.html
- home.html
- index.php
- home.php
- default.htm
To create your static front page:
- Using a text editor, open a blank document.
- Design the inside of your Static Front Page.
- Save it with any name listed above (Example: home.php).
- If you have WordPress in another folder, upload your static page to your root HTML folder.
Please note that your static page may need to have the file extension ".php" in order for the PHP code to be processed. If your static page is "index.html", then the PHP code may not be executed.
Install WordPress in its own folder or, if you have already installed it, consider moving WordPress to its own folder (or follow instructions below if you do not want to move entire WordPress core files -- but you might have some problems when upgrading).
If WordPress is in Root
If you do not want to move your WordPress installation to another folder, or you are in a hurry, you can use these instructions or look [[WordPress:#Change Apache Configuration File|below]].
- Create a new folder on your site server for WordPress index.php file.
- Download index.php WordPress file and open it in a text editor.
- Change the require('./wp-blog-header.php'); line to require('../wp-blog-header.php');
- Save and upload the modified index.php file into the new folder.
- Login into your WordPress Administration Panel and go to Settings > General.
- Change your Blog URI pointing to the new folder. For example, if your site is http://example.com, and the new folder is called blog, enter http://example.com/blog.
Now, upload your splash page to your root server folder.
Change Apache Configuration File
There is another form to upload your static front page without moving all your WordPress files to another folder.
When you request a folder in a Apache web server (for example the folder called /chouette), the core of Apache will search for a file with any of the names in a list saved in httpd.conf. If your server lets you use .htaccess files for change the original configuration, you can follow these steps:
- Open the .htaccess file from your root web folder in a text editor.
- At the top of the file, add:
DirectoryIndex home.php index.php
Save and upload the modified .htaccess file.
You need to mention index.php as a second choice, otherwise you will not be able to access the index.php in directories below the wordpress root directory unless you explicitly mention it in the URL. For instance, the url:
http://<wordpress root URL>/wp-admin/
would not work.
Integrating WordPress
To incorporate or integrate WordPress with your static front page, you can include the header, sidebar, footer, and even a mini-version of the WordPress Loop.
Include the Header
To include the header from your WordPress Theme to maintain a consistent look, add this to the top of the page, using the folder path name you installed WordPress into:
<?php
define('WP_USE_THEMES', false);
require('./wordpress/wp-blog-header.php');
get_header();
?>
The purpose of requiring or including wp-blog-header.php is to let you make use of any WordPress function or template tag. When you include it in your page a function such as get_header() becomes available, just as it is in the standard WordPress templates.
Note: In rare cases defining the WP_USE_THEMES constant to false may produce non-CSS formatted page output. To workaround this you can try replacing ('WP_USE_THEMES', false) with ('WP_USE_THEMES', true).
To add the sidebar and/or footer from your WordPress Theme, include one or both of the following at the bottom of the page, using the same folder path:
<?php get_sidebar(); ?> <?php get_footer(); ?>
Adding a Mini-Loop
You can incorporate a customized-version of the WordPress Loop in a static page to generate a short list of the latest posts on your WordPress blog. This "mini-Loop" acts like a feed, displaying your posts in a non-WordPress, PHP document. Change the value for $how_many to reflect the number of posts you want to show, and make sure the path to your wp-config.php file is correct.
<?php
$how_many=5; //How many posts do you want to show
require_once('wp-config.php'); // Change this for your path to wp-config.php file ?>
<ol id="whats-new">
<?
$news=$wpdb->get_results("SELECT `ID`,`post_title` FROM $wpdb->posts
WHERE `post_type`=\"post\" AND `post_status`=\"publish\" ORDER BY post_date DESC LIMIT $how_many");
foreach($news as $np){
printf ("<li><a href=\"index.php?p=%s\">%s</a></li>", $np->ID,$np->post_title);
}?>
</ol>
Also, change "index.php" in the printf statement to include the path to the index.php in your installation directory.
Alternatively, if using custom WordPress:Permalinks on your blog, you can set the code to retrieve the permalink for each article and use this as the link to the post. This helps with indexing of your site by search engines such as Google, which can blacklist your site if it considers that pages duplicate content (the same content would be accessible both by using the address {YourWordPressURL}/?p=x and {YourWordPressURL}/permalink-address/). To use permalinks on your static page:
<?php
$how_many=5; //How many posts do you want to show
require_once('wp-config.php'); // Change this for your path to wp-config.php file ?>
<ol id="whats-new">
<?
$news=$wpdb->get_results("SELECT `ID`,`post_title` FROM $wpdb->posts
WHERE `post_type`=\"post\" AND `post_status`=\"publish\" ORDER BY post_date DESC LIMIT $how_many");
foreach($news as $np){
printf ("<li><a href=\"%s\">%s</a></li>", get_permalink($np->ID),$np->post_title);
} ?>
</ol>
In either case, posts will appear in an ordered list with the CSS ID whats-new. With WordPress:CSS you can change the look of the mini-Loop to suit your own site design.
Using Feedburner?
If you are already using Feedburner to manage your feeds, have a look at their "BuzzBoost" feature under Publicize.
With just a small piece of javascript you can add your recent posts to any html page. Very customizable as well.
(More on WordPress:Using_FeedBurner)
Examples
What you do with your static front page is up to you and your imagination. Here are a few examples to help you see the possibilities.
Typical Page
thumb|right|Look of the code on your left A typical welcome static page may feature a greeting that explains what the site is about and welcomes users to click on various links to enter the site. It could include summaries or links to articles or posts within, changed manually by the site administrator.
Here is an example of a simple, typical page structure:
<?php
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
get_header();
?>
<div id="content" class="narrowcolumn">
<h1>Welcome to my site</h1>
<p>Hello and welcome to my site. You can go to my web
page about how to improve your digital photography
techniques with your new digital camera; or you
can <a title="Go to my Blog" href="/wordpress/index.php">go
to my blog.</a></p></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Static Page with Mini-Loop
To incorporate the mini-Loop into your static page review this example of a possible structure:
<?php
define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
get_header();
?>
<div id="content" class="narrowcolumn">
<h1>Welcome to my site</h1>
<p>Hello and welcome to my site. You can go to my web page about how to improve your
shoots with your digital camera; or you can go to my blog</p>
<h2>Latest posts in my blog:</h2>
<?php
# Here starts Mini Loop trick: You can use this code, but _at your own risk_
# If you want to improve this code, you're welcome ;)
$how_many=7; //How many posts do you want to show
?>
<ul class="whats-new">
<?php
$news=$wpdb->get_results("SELECT ID,post_title FROM $wpdb->posts
WHERE `post_type`=\"post\" AND `post_status`= \"publish\" ORDER BY `post_date` DESC LIMIT $how_many");
foreach($news as $np){
printf ("<li><a href=\"index.php?p=%s\">%s</a></li>", $np->ID,$np->post_title);
}
?>
</ul></div>
<?php
get_sidebar();
get_footer();
?>