How to Give Your First Post a Unique Style in WordPress

You don’t always need a fancy, sophisticated theme for a blog. Sometimes a simple, plain, newest-post-first type blog is fine.

That said, it’s also nice to have a little bit of extra pop on a blog, especially near the top. If nothing else, it helps draw the reader’s eye down into your content and also break things up a little.

One way you can get that extra pop is to simply give the first post on your homepage a different style from all the other posts.

We’re going to go over at least one way that you can do that. Just follow the steps below.

featured-black-sheep


Here’s What We’re After

This is just a simple example, but this is what we’ll be aiming for in the steps below.

Here’s my regular-looking blog before styling.

regular-post

And here’s the version with the styled first post.

unique-first-post

Using a Child Theme

Because you will be changing your theme, it’s best to use a child theme so that your changes don’t get overwritten when your theme is updated.

You can learn how to make a child theme here.

Once you have a child theme, you’ll want to copy the index.php file from your original theme and put it in your child theme. We’re going to change a small piece of that.

Finding the Content ID

Next you’ll need to find the ID for the main content on your homepage (in your new index.php file).

Go to Appearance > Editor > Main Index Template — index.php.

Relatively near the top, you should probably see a line of code that begins like this:

<div id= “content”

It will probably look something like this:

id-content

Yours may not say “content.” It may say something else. Or your theme might be much more complex and confusing than this. If that’s the case, you should probably ask the author of your theme about it.

We’re going to change that “content” (or whatever it says) to something else. The reason is that we only want these effects to take place on the homepage, and so we’re going to give it a unique name.

I’m going to change my ID to “homepage-content” like this:

homepage-id

Style the First Post

Now that we have our unique ID, we’re going to go to our style sheet and add a new style. (Appearance > Editor > Stylesheet – style.css)

Put the following code in for the new style:

#homepage-content article:first-child {
/* YOUR STYLE HERE */
}

For example, in my case, I’m going to make everything in the first post a little larger to make it stand out a little more.

I’m also going to put a light blue background on the post to somewhat match the blue in my header.

And then I’m going give the post some padding so that my text doesn’t run up against the now colored sides of my background box.

#homepage-content article:first-child {
 line-height:125%;
 font-size:150%;
 background-color: #CCDBF1;
 padding:20px;
 }

Again, here’s the image of the styled first post again.

unique-first-post

And that’s it. Pretty simple, but a pretty nice little bit of extra style.

And of course you could do more than this. You’re only limited by your CSS skills.

Photo: black sheep