1

I am a beginner but have spent a lot of time in trying to figure this out and to no avail.

Using the developer tool in Chrome I have tried to find a particular class that's unique to the posts that show as previews in the homepage of a new WP site I am creating. But all of them are also applied to the main post that arrives when you click the link to the post.

So, what's the solution?

I want to make the home page links look most like featured posts that many sites have with a rectangular shape, with the posts main image as background or something.

2 Answers 2

0

As long as your theme is set up in the "normal" way, this is fairly easy.

Lets take the markup for the Twenty Fourteen as an example. The type of page you are currently viewing creates a class on the <body>. So for a front-page blog (several articles) the <body> element contains the class "blog", A single post contains the class "single". (There are also classes like "archive" and "page" and so on.)

So to format a single post, you add ".single" to your css.

/* css */
.single .post { 
    /* affects only single posts */
}
.single .post h1 { 
    /* affects only the <h1> of .single posts */
}

To format the list of posts on a blog page, you add .blog.

/* css */
.blog .post { 
    /* this affects only posts on a .blog page */
}
.blog .post h1 { 
    /* this affects only the <h1> of posts on a .blog page */
}

So keep using DevTools, but take a look at the classes of the <body> element.

1
  • Thank you. I guess I had narrowed my vision too much and just kept on focusing on singular classes. :)
    – LWTBP
    Apr 21, 2014 at 6:18
0

I agree with isNaN, but would also add that if in your "Settings > Reading" settings, you set a page (like "Home") to be your homepage, and not your latest posts, the body tag will have a class of .home. So you could style the posts like so:

.home .post {}

But the best way for others to help is to provide a link to the page you are working on, then we can be very specific.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.