Forums

charlie

How can I target pages with CSS in Wordpress. I would like to spec different styles in the index.php, single.php, archive.php etc.

Those pages don't have a unique opening body tag.

TheDoc

Have you set up your body tag like this:

<body <?php body_class(); ?>>

Because that will spit out all of the selectors you could need.

charlie

YES!

How do I get started? I know very little about php.

TheDoc

Find your header.php file, that's where you should have the body tag.

Simply replace:

<body>

with:

<body <?php body_class(); ?>>

And check the results on your website.

charlie

Do I have to target the whole class?

<body class="archive category category-marketingbytes logged-in">

or can I just use archive or single etc.?

TheDoc

You can target whichever you like!

If you want to target the category "marketingbytes", for example, you could do this in your css:

.category-marketingbytes #wrapper #content a {
    color: blue; /* Marketing Bytes links will be blue! */
}

charlie

What about just "archive" or "single?"

.archive h2 {}

TheDoc

That would work fine, too.

So '.archive h2' would target all h2's within any archive page.

single.php is used for posts, page.php is used for pages, etc etc.

charlie

That's great. Thank you!

treehouse : what would you like to learn today?

Forums

Target pages in Wordpress?