Theme The Morning After

The Morning After – Related Posts, Anyone?

WordPress 2.3 has a built in native tag management. However it is limited and you need some plug-ins to exploit it. For this purpose, I am using the „Simple Tags“ plugin. Simple Tags features “type-ahead” input tags, auto suggestion, tag clouds, tag management, listing no-tagged content, mass editing of tags, tags for Pages, and tag related content / posts.

As posted before, I have made the great The Morning After theme by Arun Kale tag ready. Now, I found out, how to add related posts to the single post page.

Simple Tags

Dowload, upload and activate the Simple Tags 1.3.6 plug-in.

style.css

Open the style.css in your theme editor and insert the following (I placed it above the comment area styles).

/* Related Posts */

ul.st-related-posts { list-style: none; margin: 0; }
ul.st-related-posts li { border-right: 3px solid #dadada; border-bottom: 1px solid #dadada; margin: 0 0 0.5em 0; padding: 0 1em 0.5em 0; overflow-x: hidden; }
ul.st-related-posts li a { color: #000; }
ul.st-related-posts li a:hover { color: #FFF; background: #000; }

single.php

Finally, you have to open the single.php file with the theme editor. After scrolling down to the code for the „Discussion“ headline, you insert the following above it:

<h2 class="post_comm">Related Posts</h2>

<?php st_related_posts('number=3&title=&include_page=false&xformat=<a href="%permalink%" title="%title% (%date%)">%title%</a>'); ?>

Done.

  1. Hi Nick,
    Thanks a ton for this great tutorial. I’m in the process of customizing the TMA theme (hopefully I’ll finish this week) for my own blog and adding a related post area was a must.
    Anyway, I think there may be a problem with your code in the sidebar.php file. Adding the code exactly as written created an issue where the next heading below the related post section turned into a link pointed towards whatever related post was last on the list. Using your page as an example, it would have pointed the header „Web Badges“ to your XING post.
    To fix the problem, I added a close link tag () right after the second %title% and before the ‚ so that the code looks like this:
    <?php if (is_single()) { st_related_posts(’number=5&include_page=false&xformat=%title%‚); } ?>
    Everything now works beautifully.
    If you’re interested, I’m running WordPress 2.3.2, Simple Tags 1.2.4, and The Morning After 1.2–all on a local server via MAMP.
    Thanks again for this wonderful guide.

  2. Darn, it butchered my code. I can email it to you tomorrow if you want.

  3. Hi Eric!
    Thank you very much. I have realised that this problem is caused by the code highlighting plug-in.
    The visual editor displays the code/post correctly, but here, the closing link tag is missing.
    Nick

  4. I have moved the related posts from the sidebar to the single post page. In my opinion, it looks much better now.
    That’s the reason, why I have also updated this tutorial.

  5. Hello Nick
    I have downloaded Simple Tags 1.3.5 and there is nowhere in the code that has the code mentioned in Step 3 of your tutorial.
    Instead, I replaced all 5 instances of the word ’st-related-posts‘ with ‚related‘.
    After I did that it seems to work.

  6. Hi Tysen!
    I’ve realized that too. Amaruy changed the structure of his code.
    That’s why I have updated this post now. Instead of changing the css class inside the plugin, I renamed the unordered list style from ul.related to ul.st-related-posts.
    Now, the design should not be affected by a plug-in update.

  7. […] added two more improvements to my site. I followed Nick Bohle’s tutorials for adding related posts to The Morning After theme and adding highlighted comments to The Morning After theme. I prefer a ‘bullet points’ […]

  8. Hi again nick, i was wondering if is there any way to put the related posts in the sidebar. I´ve tried, but i cannot make this to appear only when i´m seeing a single post.
    Thanks !

  9. Hi!
    Yes, it’s possible. You can accomplish this with the condidtional tag is_single.
    Visit http://codex.wordpress.org/Conditional_Tags and scroll down to „Variable Sidebar Content“ for an example.

  10. oh man, thanks a lot!

  11. There’s a plug-in that will do this, too. Similar Posts…it’s worked fine for me through many theme changes. Add a single line of code to the single.php, and you’re all set.
    http://rmarsh.com/plugins/similar-posts/

  12. Hi Steph!
    Thanks for the info. I’ve used a comparable plug-in before.
    Now, I prefer Simple Tags because it gives me related posts, back-end tags management, etc.
    cheers
    Nick

  13. Hey Nick,
    Thanks for using an image for the code snippets. This way is being a lot more userful than just simply copying them :P

  14. Hi, nick
    could you email these code to me. I tried to type the code and put in the php file, but it doest work at all. Must be something wrong with the code i typed.
    Thx ;-)

  15. Nick – This is fantastic and I came across this just as I was trying to add related comments to my blog.
    Like GooMoo – would you mind emailing me the code? I’m anxious to get this implemented.

  16. You can copy&paste now…

  17. Thanks Nick! You’re always so helpful

  18. Would running TMA 1.3.2 and WP 2.5.1 cause this code not to work? I added the code as stated above and the page renders down to where it says „Related Posts“ then it stops. No sidebar, no comments, etc…
    I’m sure I’m doing something wrong since it’s working fine here.

  19. Hmmm.. strange…. but you have installed Simple Tags?

  20. […] posts were missing, […]

  21. NIck, bare with me here….how do i remove the RECENT POSTS section from the TMA home page.

    • Well, that’s a related comment on a post about related posts. :-)
      To remove the recent post section, just open your home.php and delete / comment out the respective code.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.