Designing Headings
Contents
A Heading Isn't a Header
The heading isn't your header, but a heading can be in your header. Confused yet? Ah, but you are here to learn.
The heading is simply like a title. In HTML, it is structured by using heading tags such as H1, H2, H3, and H4. Normally, as the heading number gets bigger, the font gets smaller.
In WordPress, the H1 heading is typically reserved for the Blog title found in the header or masthead of a page. The H2 heading is generally found in the post title, the comment title, and the sidebar. Each of these can be styled differently, dependent upon their division ID. The H3 heading is usually found in the comments, though it may be replaced by the H2 heading, dependent upon the Theme.
The H1 Heading
By default, the H1 heading sits inside the header, commonly known as the masthead, of your web page theme. It often features the bloginfo() template tag:
<h1><?php bloginfo('name'); ?></h1>
You will find its style information in the style.css file in your Theme folder. It is usually listed as:
h1 {attributes}
or
#header h1 {attributes}
Here you could change the look of the heading inside the #header of your web page.
Many people want to replace their header with an image, but still leave the text there to meet accessibility standards and for search engines. You can leave the h1 and description in place by adding the following to your style.css header references or in the header.php template file style listed in the head section:
h1 {display: none; font-size: 150%; color: white....}
The display:none instructs the browser not to display the content within the h1 tag.
The H2 Headings
The H2 headings are found throughout the various WordPress Themes. It can be found most commonly in the post title, in the comment title, and in the sidebar or menu. Styling these many H2 headings can get a little complicated.
Let's look at what might be the styles in your style.css for the different H2 headings:
h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 110%; color: green; font-weight: bold; }
#comments h2 {font-size: 90%; color: yellow; font-weight: bold;
padding: 2px; background: green; border: solid 1px navy; }
#sidebar h2 {font-size: 85%; color: navy; background: transparent;
font-weight: bold; border-bottom: dashed 2px yellow; }
Each of these sections features an H2 heading in WordPress, but each one is styled completely differently.
By default, using the first example, any time the H2 is listed, it would look that way. By putting an ID or Class selector in front of the H2 tag, you can modify the look. But, and there is always a but with CSS styles, outside of an identifying ID or Class selector, it acts like a parent, influencing the other H2 headings.
For instance, if we hadn't designated the font color for the #comments H2, then the color would be that of the parent H2, which is green. Be careful to list all the different attributes you want changed, and remember that the parent H2 will fill in any blanks you leave out.
You can learn more about the CSS parent/child relationship in the Codex article on CSS Troubleshooting called The CSS Parent and Child Relationship
H3 and H4 Headings
If you tend to write long posts, using headings can separate the sections, announce a change in subject or just add a little artistic "space" or graphic element. Post section headings are created by you as you write your post. Generally, the h3 and h4 heading tags are used, though sometimes the h5 might also be included.
Your Theme may or may not include h3 and h4 headings. In some Themes, h3 tags are used within the comments. You can easily check in your style.css with a search for h3. If it isn't used, you can create your own, or if it is, use the h4 tags.
To use them, you manually type in the tags around the section titles with double spaces before and after, if you are not using HTML in your posts. This way, WordPress will know to automatically add the paragraph tags when generating the post. It might look like this in your Write Post screen:
...uses with WordPress that I enjoy using. <h4>More Talk About WordPress Features</h4> We enjoy talking more about the many features WordPress has to offer the blogger....
Web standards features the h3 tag with type that is by default slightly smaller than the h2 tag but larger than the h4 tag font. You can control the size differences within the style.css style sheet. But you are not limited there.
Dividing up your content within a post can feature more than colorful and larger fonts. You can add graphics and styles to these section dividers to enhance the look of your site. Let's look at two examples.
In the first example, we are using a graphic of a leaf set in the background of the heading to the left of the text. The padding is adjusted so that the heading's text will move over 45px to make room for the background graphic. Note that we've also set the background graphic to no-repeat so only one leaf with appear. Otherwise we'd have a whole heading filled with leaves.
More Talk About WordPress Features
We enjoy talking more about the many features WordPress has to offer the blogger....
The CSS in the style.css for this might look like this:
h3 {font-size:130%; color:#A30000; font-weight:bold;
background:url(leaf.gif) left no-repeat;
padding: 10px 10px 10px 45px}
More Talk About WordPress Features
We enjoy talking more about the many features WordPress has to offer the blogger....
In the second heading example, we've moved the leaf graphic so it is above the heading, which makes it look like it is floating between the sections. This adds more space between the sections. The CSS in the style.css for this might look like this:
h3 {font-size:130%; color:#A30000; font-weight:bold;
background:url(leaf.gif) no-repeat top center;
padding: 60px 10px 10px; text-align:center}
Headings can add a lot to the overall design of your site, so use your imagination and have fun with these.
Heading Details
In WordPress, many post titles feature information in addition to just the title of the post. Many titles include the time, date, author, and categories that the post is in. You can choose what elements to include or exclude in your title headings.
Here is an example of a fully loaded post title.
<h2>
<a href="<?php the_permalink() ?>"
rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>">
<?php the_title(); ?></a>
</h2>
<small>
Posted <?php the_time('F jS, Y') ?>
by <?php the_author() ?>
in <?php the_category(', ') ?></small>
It begins with the h2 heading tag, and then includes a link to the title of the post. In the next section, controlled by the <small> tag, is the template tags for the time, author, and categories. It might look something like this:
Telling Tales in WordPress
Posted Monday, 21 February 2005 by Harriet Smith in WordPress, Tales
You can change the author tag to the_author_posts_link(), or add more information like the time to the post title information. Or remove these tags. You can learn more about the post meta data section in the article on Customizing Your Post Meta Data Section.
Designing Headings
Now that you've learned where to find the basic headings in WordPress Themes, it's time to have some fun with them designing or modifying your own theme. There are many ways to the control the design of your headings. You can change font sizes, colors, font families, or add graphics and interesting backgrounds. Let your imagination take over!
To help you design your headings, here are a few resources.