WordPress wizards: best way to modify css based on page we’re on?

  • my goal is to have a slightly different look for the home page and other top-level pages (i.e. ‘about us’)

    currently im changing the css simply by inserting an inline style for each page respectively.

    from what i understand reading the forums here it looks like the best way is to use the functions.php to detect this and swap accordingly?

    If so I’m afraid my function isn’t working, nor is it ideal as it seems to me this would be simply injecting the same inline styles as before, but i’d really rather keep my markup clean – how to do this?:

    <?php
if (is_home()) {
   <style type="text/css">#banner2 { background-color: #CCC; }</style>
} else {
   <style type="text/css">#banner2 { background-color: #AAA }</style>
}
?>
Viewing 3 replies - 1 through 3 (of 3 total)

  • If you want a different layout on the homepage, you can use home.php. WP will look for home.php before index.php in the theme folder. This is usefull if you want a totally different homepage than, say, archive or category view.

    Also, if you’re using a static page as your homepage, the conditional tag is is_front_page() instead of is_home().

    Thread Starter sethwb

    (@sethwb)

    That kind of defeats the whole purpose doesn’t it?

    sprinkling hard coded style tags throughout my site is not something i’m planning on doing, this site needs to be scalable!

    perhaps I’m not understanding what you mean by “you can use home.php” Isn’t that what I said I did already (before trying the php route)?

    I’m not sure what you want to achieve, you’re not particularly clear. Saying you want a different theme on your homepage isn’t the same as saying you’re using home.php – not all themes have a home.php, but use index.php. The home.php is optional, and the purpose of it is exactly to achieve what you you say:

    my goal is to have a slightly different look for the home page and other top-level pages

    You don’t have to ?sprinkle hardcoded style tags?; you can add classes to your CSS, and then call them when needed, either with conditional tags (like then one you mention in your first post), or with simply using home.php, index.php and page.php correctly.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WordPress wizards: best way to modify css based on page we’re on?’ is closed to new replies.