Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

2 Answers 2

up vote 0 down vote accepted

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.

share|improve this answer
    
Thank you. I guess I had narrowed my vision too much and just kept on focusing on singular classes. :) –  LWTBP Apr 21 at 6:18

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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