Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 38: How to display tags in Thesis 2 Theme

Thesis 2 HTML Home Template

You have probably noticed that you don’t see your WordPress “tags” on your posts.  WordPress tags are a great way to help your site visitors discover topically related content within your site.  It turns out that adding tags to your posts is one of the easier things to do with the Thesis 2 Theme.  While I’m a little surprised they aren’t shown by default, it is so easy to add them that I can overlook this.  After all, it is a matter of taste.  Again, we’ll start from the Thesis 2 HTML “Home” page.

From the Thesis 2 HTML Home page, scroll down to the “WP Loop” area.  The WP Loop contains the controls for the WordPress Loop.  The WordPress Loop is where all the WordPress magic happens.  It is called the “loop” because it contains the programming code to loop through and display all your posts.  It is here where we can set the loop items we do or do not want to be displayed for each post.  Remember in Step 22 when we changed how the WordPress byline was displayed?  This was also in the loop.

Thesis 2 WordPress Loop

Note the gray bar labeled “show tray” in the picture above.  Click on this gray bar.  It will expand to show you a bunch of green bars.  These green bars are the loop items that are not currently being displayed by the WordPress Loop.

Thesis 2 WordPress Loop Tray

Look for the bar labeled “Home Post Box -> Tags” (see image above).  Click on this bar.  It will automatically be added to the WordPress loop.  That was easy!

Add WordPress Tags to Thesis 2 Post

However, I personally don’t like the placement.  In this case, Tags were added below the Num Comments Wrapper.  The order these bars appear in the loop is the order they are displayed on your site.  I would like to display my tags above the comments counter.  Click and hold on the Tags green bar and drag the box to just above the comments wrapper and release.

Move the Thesis 2 WordPress Tags Location

Thesis 2 will add the following title to the tags, “Tagged as:”.  I prefer to title them as “Topics:”.  Just like we did in our tag cloud step.  Hover your cursor over the Tags box and click on the gear icon when it appears.  Inside the “Intro Text” change the text to “Topics”.  Click the “X” at the top right of the pop-up to save your changes.

Changing Thesis 2 Tags Description

Now we’ll click the Save Template button at the top right of the Thesis 2 HTML page.  This will make our changes live on our site.

Thesis 2 Save Template Button

Refresh your site’s homepage and scroll down to the bottom of your first post.  You will now see the tags you used when writing your post.  See how easy it is to add WordPress tags to your posts using the Thesis 2 Theme?

Thesis 2 WordPress Tags

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 7 comments… add one }
  • Melanie Jongsma April 28, 2013, 7:29 PM

    Thanks for this post! I searched the Thesis forums and could not find this information. Would you also be able to help me change the font, size, and color that my tags appear in? Is this done in the CSS area?

  • Doug Macklem April 29, 2013, 5:53 PM

    Yes, you can do this in CSS. Tags are in 2 parts, the label and the tags. For me I have “Topics: Thesis”. You can style the label “Topics” using the “.post_tags” property. The color of the label is controlled here along with the font size and other properties. The link to “Thesis” is styled by the CSS package “Links”. Be careful with changing “Links” as it is global. If you just want to change properties for tags you would need to do something like “.post_tags a { properties here }”. Hope this helps.

  • Eric June 22, 2013, 1:31 PM

    My display tags under my “Topics:” show up as very small fonts in bright red color. I would like to make the font larger and the color something other than red.

    I read your answer to Melanie above, however, I don’t understand how to do what you are saying. Can you help me?

    I am a beginner at this.

    Thanks!

  • Doug Macklem June 22, 2013, 5:11 PM

    Eric: Your site shows the same as mine. This is because the Tags are hyperlinks and are following the same CSS pattern as all links on the site. You can write Custom CSS for class “post_tags” (controls the color and font size for the tag links) and “post_tags_intro” (controls the look of “Topics:”).

    Something like this might work:
    .post_tags {
    font-size: 18px;
    }

  • Dan Coggins November 13, 2014, 1:08 PM

    I was looking through the interface for at least a couple of hours for this. THANK YOU!

  • Dan Coggins November 13, 2014, 1:33 PM

    Hi again. Because I’m new at Thesis 2.1, I’m using it to copy existing websites in my local MAMP environment. Right now I’m working on copying http://www.classetouriste.be. I’ve working on the Tags and Comments line at the end of a post. (It’s the line that starts with “MORE ABOUT:”.)

    I note that Thesis wants to put the number of comments on a new line. What I’d like to do is put them on the *same line* as the tags. I imagine I’m going to have to edit a PHP file in Dreamweaver. Fine.

    My questions is: What PHP file do I edit and where is it in the Wordpress/Thesis directory?

    Thank you for your site. It is so worthwhile!

  • Doug Macklem February 24, 2015, 5:47 PM

    My goal is to not edit PHP files. 🙂 I’m not sure I can help you on this.

Leave a Comment