How to Change Only the Main Index/Frontpage Background of your WordPress Blog

With the Custom Post Background, WordPress users can change individual post or page backgrounds in the admin control panel. But what if you want to change the background of the front or mainpage of your WordPress blog? Unfortunately there is not a plugin that will allow you to do that. That is why I have taken the time to write a fairly basic PHP script that will allow you to change only the frontpage of your WordPress blog.

Script Instillation

1. Click the Editor button below the Appearance tab in your WordPress admin control panel.

2. Click on Header (header.php) in the right-hand sidebar and paste this code at the very bottom:

function curPageURL() {
$pageURL = 'http';

if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
>if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}

return $pageURL;
}

3. Click on Header (header.php) in the right-hand sidebar (while still in Editor under the Appearance tab). Paste this code below your <body> tag:

**Newer themes will have a body tag that looks something like <body <?php body_class( $class ); ?>>.

<?php

custom_home();
$url1 = curPageURL();
$urlhome = get_option('home') . "/";

if ($url1 == $urlhome)
{
echo "<div id="main_bg">";
}
?>

4. Click on the Footer (footer.php) file in the right hand sidebar and post this code before the </body> tag (close body tag):

<?php

custom_home();
$url1 = curPageURL();
$urlhome = get_option('home') . "/";

if ($url1 == $urlhome)
{
echo "</div>";
}
?>

5. Click on style.css (while still in the Edit Themes page) and add this code:

div#main_bg
{
background-color: #000000;
}

And Presto! Your done.

Changing the hexadecimal in div#main_bg will change the background color of your frontpage. If you are not familiar with hexadecimals, use a tool like this one to generate one for you.

Typically background changes for a web page are made by changing the style of the HTML <body> tag. With WordPress (like most CMSes) a theme’s template files (header.php, index.php, footer.php, etc.) are used to generate output to the browser for each post or page (including the index page). WordPress will use a template file like header.php to create every post or page on your blog. If the style for the body tag is changed in header.php, it will also be changed for every post or page on your blog as well … that is why a script is necessary.

In summary, the script above gets the current URL of the page, compares it to what the homepage URL should look like (using the get_option(‘home’) function) and outputs an HTML element (it can be any HTML element but in this case it’s a <div>) depending on whether the strings match. It’s one of my first PHP scripts so don’t be too harsh if you feel it could be done an easier way. I realize script instillation would not be necessary if I released the script as a WordPress plugin. I will most likely implement it sometime in the near future in the Custom Post Background plugin.

Leave a comment if you are having difficulty with this script or if this script helped you.

Update – 40 seconds after writing this post

WOW. I Just realized that with the new WordPress 2.8 body_class() function, you can style the body tag and child elements based on location and other variables … I guess I wrote that script for nothing icon cry How to Change Only the Main Index/Frontpage Background of your WordPress Blog . O well, I will research the body_class() function later and post my findings here. For now I am going to have a few scoops of ice cream … maybe a few dozen.

Like this page?
Subscribe to the RSS feed or to email updates, right now!

Email address:

Tags: ,


You might like:

Leave a Reply

CAPTCHA Image
*