Simple Guide to Styling Your Post Headers for Those with Limited Technical Skills

Part three of: “Stylizing Your Content”.

I’ve decided to focus on WordPress for this series of posts because it seems most of you use it. However, most of the customization tips use html and css so they can be applied to many other blogging tools such as Movable Type, Blogger, etc. I will be using the default WordPress theme to illustrate the customizations - it shouldn’t be too difficult to relate them to your own theme.

There are two files you will be working with:

1. single.php
2. style.css

You can find these in your WordPress admin under Presentation > Theme Editor - they’ll be listed on the right hand side.

Post Header (title of the post)

Step 1:

Open up “single.php” and find the code that looks something like this:

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php echo get_permalink() ?>” rel=”bookmark” title=”Permanent Link: <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”entry”>

Looks complicated already I know, but this simply means:

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2>Title and link to Your Post</h2>
<div class=”entry”>

But, all we really care about is the fact that we found where the post title is located, and now we can customize it to our liking.

Step 2:

So, lets take that code we found in step one and add a “class” to the <h2> tag, like so:

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2 class=”myHeaderStyle”><a href=”<?php echo get_permalink() ?>” rel=”bookmark” title=”Permanent Link: <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class=”entry”>

I named it “myHeaderStyle“, but you can name it whatever you like as long as you remember it for step three. Save the “single.php” file and lets move on.

Step 3:

Open up “style.css” and scroll all the way to the bottom. We’re going to add a new style so the <h2> tag in which we gave the class “myHeaderStyle” (or whatever you called it), will mirror what we tell it to here:

h2.myHeaderStyle {
font-family: Verdana, Arial, Sans-Serif;
font-size: 25px;
color: #000000;
text-align: center;
}

Make sure you copy the entire block of code above and past it into your “style.css” file. Each red line can be deleted if you don’t wish to change that property.

You can also add different properties. Here’s a few links for figuring out just what you can add:

• Text Properties
• Font Properties
• Hex Color Values

For example, say you wanted your title to be in Arial font, 50 pixels in size, green, centered, italic and all capitol letters:

h2.myHeaderStyle {
font-family: Arial, Sans-Serif;
font-size: 50px;
color: #008000;
text-align: center;
font-style: italic;
text-transform: uppercase;
}

Play around until you get what you like.

Content Headers (multiple headers throughout the post)

Step 1:

Now that we’ve got the above stuff out of the way this is going to be much easier. Lets take another look at that code from step one up above:

<div class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php echo get_permalink() ?>” rel=”bookmark” title=”Permanent Link: <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<div class="entry">

So now we know that everything below the <h2> title has a div wrapped around it with a class called “entry“. So now all we have to do is translate the English phrase: “I want all the header tags within the div “entry” to style the way I want,” to the correct code phrase.

Step 2:

Open up the “style.css” file and add the following:

.entry h1 {
font-family: Verdana, Arial, Sans-Serif;
font-size: 25px;
color: #000000;
text-align: center;
}

.entry h2 {
font-family: Verdana, Arial, Sans-Serif;
font-size: 25px;
color: #000000;
text-align: center;
}

.entry h3 {
font-family: Verdana, Arial, Sans-Serif;
font-size: 25px;
color: #000000;
text-align: center;
}

.entry h4 {
font-family: Verdana, Arial, Sans-Serif;
font-size: 25px;
color: #000000;
text-align: center;
}

.entry h5 {
font-family: Verdana, Arial, Sans-Serif;
font-size: 25px;
color: #000000;
text-align: center;
}

You can play with the different properties the same way you did with the title header in step three up above.

I’ll see you soon for the: “Simple Guide to Styling Images Within Your Posts for Those with Limited Technical Skills.”

Image credit: robert lz.