Add a unique style sheet to your homepage

You can make your homepage look totally different from the rest of your site by adding a unique inline style sheet, just on the homepage, through your custom_functions.php file…

The inline style sheet can be styled right in the functions file instead of the custom.css file. Here’s a real simple example.

First create a function and name it whatever you want…

function homepage_stylesheet () {
}

Next, run that function only on the homepage and turn off PHP by adding the following…

function homepage_stylesheet () {
if (is_front_page)) { ?>
}}

Next, add an inline style sheet…

function homepage_stylesheet () {
if (is_front_page)) { ?>
<style type=”text/css”>
</style>
}}

Next, turn PHP back on and add the style sheet to the head of the page with a hook…

function homepage_stylesheet () {
if (is_front_page)) { ?>
<style type=”text/css”>
</style>
<?php
}}
add_action(’wp_head’ , ‘homepage_stylesheet’);

Finally, you add whatever styles you want between the opening and closing tags of the style sheet. For example say I wanted to make the content area of just the homepage black I could add this code….

function homepage_stylesheet () {
if (is_front_page)) { ?>
<style type=”text/css”>
#content {background-color: #000;}
</style>
<?php
}}
add_action(’wp_head’ , ‘homepage_stylesheet’);

Tagged as: functions, homepage, inline style sheet, style sheet