The Morning After by Arun Kale is one of best WordPress magazine-style themes available. Arun created the theme based on a brief survey on the WordPress forums about what people would want to see in a unique magazine-style theme. The theme design is grid-based and has the following requested features:
- A three-column home page
- “Featured” post highlighting
- Associating images/thumbnails with recent posts
- Customisable logo/header image
- Easy CSS classes for adding captions and wrapping text around images in posts
- Asides
- Option for readers to email posts to friends
- Option to switch to a print-friendly view to print posts
Unfortunately, Arun did not ask me what I want to see in a magazine-style theme. My answer would have been quite simple: TAGS.
But fortuneately, the quality of Arun’s theme is so good that it is really simple to integrate the tag functions into the template files. How simple? Well, it only needs THREE steps to make your The Morning After tag ready.
Getting started…
Make sure that you run a clean version of The Morning After theme on WordPress 2.3.
Tag Cloud
A tag cloud is a visual depiction of content tags used on a weblog. In my opinion, it is really useful to have a tag cloud on your sidebar. Therefore, you go to the WordPress theme editor and open the sidebar.php. Then, you insert the following code
<?php if ( function exists ('wp tag cloud') ) : ?>
(h3 clasg="mast"›Tag Cloud</h3>
<?php wp tag cloud ( 'smallest=7largest=15snumber=45') : ?>
<?php endif: ?>
above
< ?php if (function_exists('c2c_get_recent_comments')) { ?>
Click on Update file… DONE.
Tags inside the single post
The next step for displaying the used tags inside the post / single.php. Just open this file and add the following line above the_content:
<?php the_tags('Tags: ', ', ', '<br/>'); ?>
Click on Update file… DONE.
Tag archive
Now, you have already reached the last step that adjusts a tag’s archive page to the (beautiful clean) category archive page. Open the archive.php file in your theme editor and insert the following code above elseif is_day:
<?php } elseif (is_tag()) { ?>
<h2 class="archive_name"><?php echo single_cat_title(); ?></h2>
<div class="archive_meta">
<div class="archive_feed">
<a href="<?php echo get_tag_feed_link(get_query_var('tag_id')); ?>">
RSS Feed for this tag.</a>
</div>
<div class="archive_number">
<?php $tag = $wp_query->get_queried_object(); echo $tag->count; ?> posts re filed under this tag.
</div>
</div>
Click on Update file… DONE. Now, your The Morning After theme is tag ready.
Kommentare
56 Antworten zu „The Morning After – Tags, anyone?“
Nicely done!
Thanks!
Hey – code is in an image – no cutting and pasting possible.
I believe the above code has a few errors. Once I get it working I’ll try to post at the TMA forums.
Hi Andrew!
I posted the code as an image because I had problems using the [code] tag.
I will update this post so that you can copy and paste.
Works like a charm.
[…] posted before, I have made the great The Morning After theme by Arun Kale tag ready. Now, I found out, how to add […]
Hi.
Sorry, but I do not get what you mean? Where do you see tag cloud?
Don’t you see the code snippets?
One more addition- make sure that the _tags goes inside the post-meta in the single post. Otherwise, the tags have no styling.
I carefully followed every steps. I couldnt find Tags cloud. I only see these code on the right of sider bar
Tag Cloud
I didnt see tag cloud. The thing I only saw was the code under Categories.
Just code only.
Which WordPress Version do you use?
You need 2.3 or above..
I’m using the newest one 2.3.1
Strange, so the functions posted here should work on your WordPress installation.
Don’t know what the problem is…
I had the same issues as GooMoo
Hi Christopher.
Had or still have the same issues?
I checked your site and I saw a functioning tag cloud in your sidebar.
Perfect. The tag cloud was really missing in that theme. Implemented it as well, works perfect. Cheers!
Flo
Followed your directions, but no dice. I just kept getting code directly underneath the categories. I’m using the most recent version of WP.
I could use a fix, I love your tag cloud in the sidebar. I wish it would f’ing work!
Strange.
The code for the tag cloud is just plain vanilla WordPress Code:
http://codex.wordpress.org/Template_Tags/wp_tag_cloud
By the way, you are using not the most recent version of WP… that would be 2.3.2 (your homepage indicates that you are using 2.3.1).
Anyway, this should not be the problem… I used this tag cloud code already with WP 2.3 beta-2. (I am using WP 2.3.2 now).
Have you tried to deactivate plug-ins to see if they cause the problem?
No I haven’t tried to deactivate plug-ins, what sort of plug-ins could cause that code not to work?
Tag related plug-ins would be my first guess.
Anyway, I will send you my sidebar code via email now.
Let’s see, if there is any mistake in your sidebar code.
I had the same issues with code showing up on the sidebar. I know absolutely nothing about php, but after a half hour of trying to figure out what looked wrong i realized you have spaces before the ? in your code and that is screwing up people who copy and paste.
Hey Nick, thanks for helping out with the side-bar code. I love my tag cloud, but I do have another question to ask?
I’d like to replace the „Welcome to xxx.com“, above the categories section… with an image and a post excerpt. I want it to be interactive though, like a random 100 pixel thumb every 30 seconds, and the excerpt the correlates. Obviously, I’d like my reader to click the post and/or image and be directed to the single post. However, I’d like for the title to link back to the Review page I’ll be creating.
So basically, how can I transform that ugly blue section into an attractive, random image, excerpt of my latest reviews? Can I even add a title to match the rest? Featured, Asides, Categories, etc.
Thanks for the help Nick!
@Joseph: Thanks for the info. This space is caused by the code highlighting plug-in. I think I have to search for new plug-in (when I have more time).
@Sticki: Ahh.. That’s what you mean when you talk about working together on user friendly websites… Well, it is easy to change the headline just exchange the headline tag with < h3 class="mast >. About the random posts… I have no idea how to accomplish that…
Haha, no that’s certainly not what I meant. I guess it fit there though, haha. I’m sorry for asking Nick, I shouldn’t have and I knew it. I just was going bat-shit trying to figure it out. I’ll post and let you know how the random images turn out.
Haha, I was kidding. Asking and discussion is always good…
@Nick, no problem, I appreciate your help in the masterplan discussion forum, I post there as joebabyny and you helped me out with category highlighting. Thanks again.
Hi Nick, i´ve a problem with this addon.
For some reason, when i see my website on Safari the Tag cloud is corrupted, and doesn´ „stay“ in the sidebar, it follows to the right.
I´ve been trying to see what´ my problem but i cannot fix that. ¿Could you help me?
Thanks a Lot.
„Peligro“.
Hi Nicolás!
Is this only a problem related to your site, or does my tag could also „follow to the right“?
I thought that Safari and Firefox do have (nearly) the same CSS compatibility.
Cheers,
Nick
That puzzles me… your site doesn´t have that problem in Safari.
Well, you have it w3c validated :D
Anyway, I found a little „patch“ to mantain the box in all the browsers i´ve seen (that is, FF, IE, Safari, Opera, Flock and Camino). I just added the around the script, and it worked.
Cheers,
Nicolás
[…] have managed to implement tags support in the Morning After theme (including a tag cloud) using Nick Bohle’s tutorial. Just remember to delete the space […]
I managed to get it working, thanks for the tutorial Nick. I had to delete the space between „<“ and „?php“ in the code, as Joseph suggested.
Just a couple of questions:
On the top of each single post, the „tags“ display is right above the first sentence of my post, unless I manually begin each post with a blank space instead of the first line. Is there a way to make it so that the „tags“ display on single posts automatically included a gap below it so that it doesn’t blend in with the text below it?
And on the sidebar, the tags cloud is right above the „recent comments“ part, is it possible to add a line or a space in between the two? I think your website has a blank line between the tags cloud and recent comments on the sidebar but I’m not sure how to do it on mine.
You can cheat by adding < p > < / p > (without the spaces).
cheers
That worked fine. Thanks.
Thanks for the article on how to do this Nick, it seems to be working well, except for one thing.
Does you or anyone else happen to know I edit the parameters of the tag cloud? Changing them via the Simple Tags options screen doesn’t seem to work, I presume because our method here embeds the code directly in the sidebar?
If it’s not possible to change via the option screen, then do you know where I can see a list of the tag-cloud parameters? I can’t see it in the documentation.
(I’d ideally like to make the list have all the same font size, and possibly be displayed as an alphabetical list…) Thanks for any help.
Hi.
I don’t generate the tag cloud with with simple tags.
I am using the tag cloud function of WordPress:
http://codex.wordpress.org/Template_Tags/wp_tag_cloud
Ah, thanks for the speedy response, I’ll look into that.
Nick, how do you get them to display as Capitalized tags? Meaning, if you look at my tags, they are all lowercase…how can I change that?
Hi Dan,
the tags are displayed as I entered them.
If you want to change the display of you tags, you have to edit them directly. For example with the Simple Tags plug-in.
Nick, I entered them the same way, with capitalized first letters, but they show up as lowercase. But then, some show up as capitalized, I don’t understand why that happens.
I installed Simple Tags but there isn’t an option to capitalize the tags. I edited them, but they just reverted back to the original form, lowercase. Any suggestions?
Well, I used Simple Tags to rename the tag „WordPress“ to „WordPress“ yesterday. And, as you see in the tag cloud, it worked fine.
Well, I renamed them and it worked. Thanks!
thanks for your work!!!
Nick, you’re the man!..my site is new but getting there slow. please help with a few ‚tweaking issues‘
1)“You can cheat by adding (without the spaces)“
i have this issue and can’t seem to solve it re: the extra space between tags & start of post, what does the above mean?
2)when you click on my tags it comes up error (in my archives php) any clues?
3)i want my post title(the title below the tags & on home page)and my main title font another color,how do i change this? (have been searching forever!)
4)please confirm my comments box is like yours
your help is so much appreciated, already your posts have helped me so much. Cheers
Hi!
#1
Just remove the space character between every sign.
#2
unexpected ‚{‚ in line 31 :)
#3
Download the add-on Firebug for Firefox and inspect which css is relevant for that stuff.
#4
it is.
thanks Nick! still can’t get #3 working, but maybe because i haven’t set up my archives page yet? my code looks exactly like yours (see below). and second how do we set even up the archives page? the help you gave on the support page has nothing on it (http://codex.wordpress.org/templates)
. thanks so much! ps, i have tried to sign up on the support page but i never get sent an email and i’ve tried on several computers but nothing!
Hi!
This theme uses two differnet archive files.
– Archives.php is a page template which sorts your posts by category and date.
– Archive.php is the relevant one.
I’ve posted my archive.php here:
http://wordpress.pastebin.com/m68eb94c8
cheers
Hey Nick, i copied your exact code into my archive.php, but it still shows http://www.myurl/#. any ideas why it’s doing this?
cheers, craig
The archive.php solved the error that was caused by clicking on a tag.
For the link in the header and the creation of an archive index page (dashboard > write page > apply archive page template).
I suggest that you visit Arun’s TMA forum… everything is answered there..
thanks nick, worked like a charm…last question. do you know much about formmail. i cant see anywhere in the forums that discuss the contact page. if i download formmail, where would i put the code? this is pretty much the last thing i need to do on my page…any help would be fantastic…cheers mate
Sorry, never heard of formmail. But it sounds like a contact form. So, I would place it on a contact page.
[…] I have already added the tagging functionality to my customised version of The Morning After, I am curious about making my theme widget-ready. […]
Cool, thanks!
Hi Lee!
You’re welcome.
You mentioned an upgrade to WP 2.5.1 on the TMA forum. Actually, an upgrade from 2.3.x to 2.5.x is quite easy… And our TMA theme should not make any problems… Well, don’t know what plug-ins you’re using…
[…] When I started with TMA, it did not support tags. I added them. […]