Skip navigation

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 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



Site Search Tags: , , , , , , , , , , , , , , , , , , , ,

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

25 Comments

  1. Posted June 23, 2007 at 9:13 am | Permalink

    I realize this is an old post, but I’ll ask anyway.

    I want to change my comment link so that it has the title of the post there. I’ve tried adding PHP code that you have here, but I’m not having any luck with it at all.

    I got it to work on the Read More link though, so this makes me think that it is possible somehow.

  2. Posted June 23, 2007 at 4:55 pm | Permalink

    I assume you want your comment “title” to say something like:

    4 Responses to “My Post Title”

    Right?

    The Default/Kubrick WordPress Theme offers that automatically, so you can find the code there. It’s:

    <h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?> to "<?php the_title(); ?>"</h3>

  3. Adam
    Posted December 5, 2007 at 7:15 pm | Permalink

    I’ve heard it’s possible to have the title itself link directly to another outside website, such as http://www.cnn.com, although I cannot figure out how to accomplish this. Any ideas? Thanks.

  4. Posted December 5, 2007 at 8:03 pm | Permalink

    @Adam:

    Do you mean have the post title of your blog posts link to CNN? That’s bizarre. I don’t think I understand what you want to do. Why would you want that? The post title links link to posts. That’s their job. A redirect would be…bad manners and wrong.

    Put links to other sites in your blog post content. That’s where they are supposed to be. If you want to put a list of links to other blog posts or sites in your blog post, put them there, not in the post title.

  5. Adam
    Posted December 5, 2007 at 11:17 pm | Permalink

    Thanks for the reply. I have seen this done before and I want to know how it can be. Suppose I am discussing a news article and the whole post is visible on the main page anyway, I would like the reader to be able to click the title and be taken to the original article. I understand that it is unorthodox blogging practice, but I still would like to know if its possible. Thanks.

  6. Posted December 6, 2007 at 10:21 am | Permalink

    @Adam:

    If you are discussing a news article and the whole post is visible, then the user would click on the news article you have in the link, not on the post title. I’ve never seen this done, converting the post title into a link elsewhere. You may be confused by designs that promote the first link on a post as the link to the original article.

    Technically, I find no way of doing this as WordPress generates the post title automatically into a link from the Write Post Panel. You would need to bypass the default core programming and put in a custom field or something that would have to change the way WordPress works, and then change the WordPress Theme to accommodate this new twist. I can’t see how it would work. It would break too many things.

    Put the link to the article you are referencing at the top of your blog post in a heading tag like H2, H3, or whatever is large in your WordPress Theme and make sure everyone knows that this is the referenced post.

    Also, while not a copyright issue, it is bad manners to title your post title the same title as another. It help everyone to make the title different or include some reference to distinguish it from your own title. No one likes a copy cat, in any form. :D

  7. forksteel
    Posted December 23, 2008 at 1:26 am | Permalink

    hey lorelle…

    a long time since the post… but i’ll go ahead and ask anyway :-)

    great insights on the title tag… i am one of those people who would like the post title NOT to show up on the homepage and for posts that belong to certain categories… i’m trying to do this via the loop, but no success up to now…

    how would you, using the_title(), structure the following condition in the loop:

    if is_home or in_category(1) or in_category(2), then ‘do not display the title of the post’

    i guess i’m not that fluent in php, i’m having trouble setting up this conditional in the loop… that’s why i’m asking…

    any insights greatly appreciated

    cheers
    anton

  8. Posted December 23, 2008 at 11:10 am | Permalink

    I’ve updated the post to cover Conditional Tags which contains the code structure you are looking for. Thanks for the reminder.

  9. Mantas
    Posted May 12, 2010 at 5:46 pm | Permalink

    This is a great post. The first one I’ve read thoroughly in a while. Very helpful information. I do understand this to be an old post, and I am not sure whether you will ever respond to this, but here I go seeking help anyway :

    I have a blog where every post has an image, and I would like each one of those images to link to the_permalink of the post it self. To clear it up, my goal is when the post is in preview on the main page, the user can either click on the title, the image, or read more button. Doing this manually, takes up a lot of time..

    I would be very grateful if you provided me with a solution or pointed me in the correct path. Thank you very much in advance.

    Regards,
    Mantas

    • Posted July 6, 2010 at 10:32 pm | Permalink

      You are using a post thumbnail feature which is now built-into WordPress, or you can use one of the many post thumbnail Plugins.

  10. Posted September 22, 2010 at 11:45 am | Permalink

    Lorelle, great article. I was wondering – how can I search a term in ONLY post title as opposed a whole category or blog post? For example, if I specify ‘Bon+Jovi as the term for a category its written as http://example.com/category/songs/?s=Bon+Jovi – but what if I want to search ONLY a blog post title?

    • Posted September 22, 2010 at 3:34 pm | Permalink

      A database search is the best to offer. I’m not sure what you are looking for, but search covers the whole site, including every post title, post content, etc. It doesn’t confine itself to categories or tags. There isn’t a reason. Site searches search all the words, no matter where they are.

  11. Posted April 9, 2011 at 9:34 am | Permalink

    Hi,

    I’d like my post titles to NOT be underlined, except when you hover over them.

    But, I’d like my other hyperlinkes to always be underlined.

    How do I make them different? If I change the CSS styles for links, it applies to links acros the whole site.

    Thanks,
    Erica

    • Posted April 9, 2011 at 11:06 pm | Permalink

      There are three core states for a link to be in, active (doing thing), hover (when someone moves the mouse or their finger over it), and visited (the past tense link). These are set in the CSS as:

      a:active {description selectors}
      a:hover {selectors}
      a:visited {selectors}

      The selectors may include underlines or not. You can also get very specific with your links, making the links look and behave differently in the post content than they do on the sidebar:

      .content a:active {}
      .content a:hover {}
      #sidebar a:hover {}
      #footer a:visited {}

      It’s up to you. Whatever you want to do with them in the stylesheet. Check out W3 Schools for more help on how to handle link styles.

  12. Krishna
    Posted April 18, 2011 at 8:33 am | Permalink

    I am new to wordpress. I want to put a border line below and above the post title when clicking the post title in the recent post content. Can anyone help me pls?

    • Posted April 18, 2011 at 12:10 pm | Permalink

      The WordPress Support Forums are excellent help, as are the many CSS and HTML design sites. To add a graphic design element to your WordPress Theme, you need to edit the Theme’s stylesheet.

  13. Posted June 5, 2011 at 10:00 pm | Permalink

    Hola e dado hasta aqui despues de volverme casi loco, bien es mas o menos lo del tema pero enrealidad yo solo quiero mostrar en el titulo de una entrada el boton de megusta de facebook, bien lo quiero porke al darle click a las noticias por asi decir a una categoria se muestran varias entradas ejemplo 8 noticias y cada una con una imajen y una porcion de la noticia.. ahora quiero que se muestre el boton me gusta de facebook a simple vista despues del titulo sin tener q entrar ala entrada y ahi ver el boton.. se puede? uso arras theme

    • Posted June 6, 2011 at 12:31 am | Permalink

      Estoy un poco confundido por la traducción, así que me perdone por usar la traducción automática.

      Usted desea cambiar o agregar un botón facebook o crear un botón que enlace a sus páginas categoría que se parece a un botón de facebook?

      Si pudieras ser más claro acerca de lo que están pidiendo, yo podría ser capaz de ayudarle mejor, pero los foros de soporte de WordPress son la mejor fuente para obtener ayuda.

  14. Rakesh Juneja
    Posted November 14, 2011 at 11:42 am | Permalink

    Hi,
    I have installed a customised font and have done necessary settings in stylesheet, so now i can copy and paste the post in back end in my language, But if i try to paste in Title field it turns in to Junk, although after saving it appears fine at front end, but at back end Title remains junk. Can you suggest how to paste Title of the post in desired font?

    • Posted November 14, 2011 at 12:04 pm | Permalink

      Fonts have nothing to do with languages. Please make sure that the language settings are set and that you have the right language files. If the browser doesn’t recognize the language character set, it cannot match it with the font, and vice versa.

    • Rakesh Juneja
      Posted November 14, 2011 at 12:14 pm | Permalink

      Thanks for your reply, And what if i copy and paste content and title in english , this also now gets transformed to my font at front end, do you mean that it will not be stable or will not reflect correct content?

    • Posted November 14, 2011 at 1:28 pm | Permalink

      You will need to set the language for the site. Once set, you will need to stay in that language. As for the font, I don’t know how you are embedding it but seriously, stick to the most common web fonts and focus on readability, and getting people excited about reading your content not looking at it.

      If the font works with that language, it will display right. If it doesn’t, it displays garbage. Consider using a multiple language WordPress Plugin that allows you to blog in multiple languages. I don’t know how it will impact the font, but getting your message out is always more important than the pretty.

  15. Bjarni Wark
    Posted December 6, 2011 at 7:25 pm | Permalink

    Thanks for the thorough explanation, most helpful.

  16. Aditya
    Posted November 5, 2012 at 8:22 am | Permalink

    Thank you so much Lorelle. My post would only show the title but not the link and the tutorial here was perfectly clear and I got the permalink with added SEO. Thanks again!

    Aditya

    • Posted November 5, 2012 at 2:33 pm | Permalink

      You are welcome. I’m not sure what you mean about added SEO. Putting in the title attribute is required now by US Federal Law, so I’m glad you were able to fix it. Thanks.


11 Trackbacks/Pingbacks

  1. [...] Dissecting the WordPress Post Title Link [...]

  2. [...] Dissecting the WordPress Post Title Link [...]

  3. [...] Dissecting WordPress permalinks [...]

  4. [...] Dissecting the WordPress Post Title Link [...]

  5. [...] Dissecting the WordPress Post Title Link [...]

  6. [...] Dissecting the WordPress Post Title Link [...]

  7. [...] Dissecting the WordPress Post Title Link [...]

  8. [...] Dissecting the WordPress Post Title Link – Lorelle on WordPress [...]

  9. […] Dissecting the WordPress Post Title Link […]

  10. […] Dissecting the WordPress Post Title Link […]

  11. […] http://lorelle.wordpress.com/2006/05/22/dissecting-the-wordpress-post-title-link/ […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,007 other followers

%d bloggers like this: