Journal of Tormod Haugen

As you might have noticed; I’ve got a tag cloud in my sidebar. And there were no tags under the entries, and none on the single post page. That is because, as with the widgets, this is an old theme - from when the dinosaurs roamed the earth and whatnot. And tagging wasn’t in Wordpress core.

I’ve quickly added the tags as a new line below the post’s category, setting a class to the span for markup, wrapping it in a div for that new line business. The change is to insert the three last lines below into index.php (lines 21 through 23). This fixes both the index page and the single post view, as there’s no specific markup code for single posts, pages or archives. I’ll add some beautifying code for this later, and individual templates for my own theme modification.

17
18
19
20
21
22
23

                <div class="postinfo">
                        <span class="postedby">Posted by <?php the_author() ?></span>
                        <span class="filedto">Filed in <?php the_category(', ') ?> <?php edit_post_link('Edit', ' | ', ''); ?></span>
                </div>
                <div class="postinfo">
                        <span class="tagged">Tagged <?php the_tags('', ', ') ?></span>
                </div>

In addition, we need to add some css to style up the tags listing with an icon as the other post info. I chose the page_component.gif image from the same icon series as Simpla uses; the Minis from Famfamfam. Put it in the /images/ folder in your theme’s folder and add the following code to styles.css:

121
122
123
124
125

.tagged{
        background:#fff url(./images/page_component.gif) no-repeat;
        padding:3px;
        padding-left:20px;
}

You can probably see that the style information of the last couple of entries in styles.css are very much alike? Just the file names are different. I get an urge to extract the redundant information as a separate style class, like below, and let each line with an icon get marked with two classes. This makes the file look like this from line 106:

106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

.icon{  
        padding:3px;
        padding-left:20px;
}
.postedby{
        background:#fff url(./images/user.gif) no-repeat;
}
.filedto{
        background:#fff url(./images/post.gif) no-repeat;
}
.commentslink{
        background:#fff url(./images/packaged.gif) no-repeat;
}
.tagged{
        background:#fff url(./images/page_component.gif) no-repeat;
}

I must now change each line with one of the above class descriptions and add icon. This is easy, as they are collected together in the index.php file. And if nothing else; it saves a tiny bit on bandwidth. Not that it is optimized for it. The programmer in me like to pull out shared information.

From my last change this will now look like this:

16
17
18
19
20
21
22
23
24
25

                <div class="entrymeta">
                <div class="postinfo">
                        <span class="icon postedby">Posted by <?php the_author() ?></span>
                        <span class="icon filedto">Filed in <?php the_category(', ') ?> <?php edit_post_link('Edit', ' | ', ''); ?></span>
                </div>
                <div class="postinfo">
                        <span class="icon tagged">Tagged <?php the_tags('', ', ') ?></span>
                </div>
                <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;', 'icon commentslink'); ?>
                </div>

Find all four icon additions? The last is at the end of the comments_popup_link thingey. Great! I also downloaded page_package.gif, page_tick.gif and page_cross.gif for marking of todo lists as I was picking out the tags icon. That is something not directly connected to upgrading Simpla - and perhaps I should find or make a plugin for it. But it’s for another post.

Agree or disagree on method, markup, choice of icon or anything? Speak up, I’d love to hear.