Dissecting the WordPress Post Title Link

One of the most important elements in your blog’s web design is the post title. It reaches out and grabs people’s attention. It informs them of what the post is about, hopefully. On a multi-post page view, the title should stand out so the reader’s eye can flow down the page, noting each titled article from the rest of the text and images. The title should separate each post along the long line of posts. It is the most important “sales tool” for getting people to read your post.

WordPress uses a template tag called “the title” or “the post title” to generate the title of your posts. According to the WordPress Codex List of Template Tags, the PHP template tag for generating the post title is:

<?php the_title(); ?>

There are three parameters for the post title template tag:

<?php the_title('before', 'after', display); ?>

The most common usage of the “before” and “after”is to put a heading tag around the post title:

<?php the_title('<h2>', '</h2>'); ?>

The “display” parameters is for PHP coding, instructing the code on whether or not the title should show. The default is “TRUE” which means “show the title”. If you were working with a conditional statement in the WordPress Loop with instructions to show the title if the conditions were met, but not to show it otherwise, or visa versa, then you would set the “display” parameter accordingly. I’ve yet to think of a condition and situation when you would not want the title to show, but the option is there.

One of the neat things about the title template tag is that it can be set inside of a link that will open the post when the title is clicked. For most WordPress users, this is a no brainer. Aren’t all post titles links? No, not always. A few WordPress Themes and many other blogging tools set the link to the full version of the post, known as the single post view, in a permalink or in the “read more” link. In order to view the entire post, you have to click one of those two links. Having the title be a link directly to the single post view speeds up the process, since it is usually the title that suckers people in to reading the post anyway.

To put the title template tag into a link, we have to use another template tag that generates the link to the single post. It is called the permalink:

<?php the_permalink(); ?>

In order to make the link to the post meet accessibility web standards, we need to add a “title” to the link. Using the same title template tag, we can insert the title of the post into the link to the post in the post heading.

To use this to create a link to the post, the code looks like this:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title('<h2>', '</h2>'); ?></a>

When the link is generated, the HTML would look like this:

<h2><a href="http://example.com/2006/10/12/my-post-title" title="My Post Title">My Post Title</a></h2>

In the last example, the heading tags are used within the title template tag. You can also put tags outside of the template tag. And in this example, I’ve added a link relationship attribute which establishes this link as a bookmark:

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

WordPress allows you to customize just about every element of your web page design, and one of those features allows you to set your styles to be different on a per post basis. For example, if your WordPress blog is dedicated to book or movie reviews, you can set a style to reflect the graphic characteristics of a specific book or movie. If it is about pirates, you can have that post feature water patterns in the background with a skull and crossbones graphic next to the title. If it is about raising children, then you can have a crib or toy blocks be part of your graphics, along with blue and pink colors.

The template tag that allows you to customize individual posts, if you want, is called the Post ID, and it generates the post ID number.

If you only want to change the look and presentation of the post title, you can add the post ID to the heading tag, and then set the styles in your stylesheet to reflect the different look.

<h2 id="post-<?php the_ID(); ?>">

Put together with the permalink and title template tags link, it would look like this:

<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

From here, it us up to you to design what that title link would look like. The following styles and tags involved are:

• h2
• #post-X such as #post-423 (post number)
• h2 a:link
• h2 a:visited
• h2 a:hover

You can add more style references, like DIV or SPAN, to the title to further its design elements. From here, the design elements are infinite.

With the use of Conditional Tags, you can add conditional elements to your code to change the results of the post title and blog post title structure depending upon which category the post is on, if it is a Page not a post pageview, if you are viewing archives, categories, or other pageviews in WordPress. See Conditional Tags in the WordPress Codex for specifics on customizing your title tag depending upon the page viewed.

Related Articles

• CSS Experiments with Web Page Elements in Web Page Design
• Editing the Edit This WordPress Template Tag
• WordPress Template Files and Style Sheets – Give Them a Name
• Show Just One Category in WordPress Categories
• WordPress Tips and Tricks for Template Files
• Enhanced Trackbacks – Making Trackbacks Work for You
• Putting the Description Back Into Your WordPress Head
• Creating Multiple Single Posts for Different Categories
• WordPress Tips and Tricks for Style Sheets
• Separating Comments and Trackbacks in WordPress – The Answer
• Future of Header Art in WordPress 1.6?
• Why Do You Comment in the Comments?
• Archives Pages Tip from Photomatt
• Changing Titles in The Titles of WordPress Posts

---

Site Search Tags: wordpress, post, title, link, permalink, id, template, tags, design, themes, theme, file, files, codex, how to, wordpress themes, post title structure, post titles, seo, seo titles, conditional tags

Subscribe Via Feedburner Subscribe by Email Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.