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

≡ Menu

Step 58: How to add a featured content badge in Thesis 2

Complete Guide to using Thesis 2 with WordPress

In this post we’re going to add a featured content badge to our Thesis 2 WordPress site.  You’ve been working hard on adding great content to your site.  Now it’s time to draw attention to it.  Maybe you’ve added a custom landing page.  Or, you’ve created some cornerstone content that you want to be ranked on.  Adding a call-to-action badge is a great way to help get your featured content found by your visitors.

I’ve been saving a default Thesis 2 function for a future use.  I now know what I’m going to do with it.  You have likely noticed the “Text Box 1” at the top of your sidebar (see picture below).

Thesis 2 Text Box 1

You cannot access this from the WordPress Widgets page.  It is in the Sidebar of the HTML Template.  I am going to use this to place my featured content badge.

From your WordPress Dashboard go to Thesis Skin Editor > HTML Home Template.

Thesis 2 HTML Home Template

Scroll down the page to the Sidebar and click the black arrow to expand the box.

Thesis 2 HTML Home Sidebar

Next, click the gear icon on the blue Text Box 1 box.

Thesis 2 HTML Text Box 1

I’m going to paste my HTML into the pop-up that opens.  This includes linking to a graphic I created using GIMP that draws site visitors attention to my Complete Guide for Using Thesis 2 For WordPress.  I have the cool bar at the top of the site, but I want to make extra sure that new visitors find my guide page.  You will need to upload a graphic to your media library.  Creating graphics is beyond the scope of this guide (honestly, I’m just not a graphic guy and I struggle myself).

Thesis 2 Text Box 1 HTML

Click the “X” at the top-right of the pop-up.  Next, save your template change by clicking the green “Save Template” button.

Thesis 2 Save Template Button

The HTML I used is below.

<a href="http://thriftyzizel.com/complete-guide-to-thesis-2-theme-for-wordpress/"><img src="http://thriftyzizel.com/wp-content/uploads/Complete-Guide-to-using-Thesis-2-with-WordPress.png" class="textbox1" title="Complete Guide to using Thesis 2 for WordPress" alt="Complete Guide to using Thesis 2 for WordPress"></a>

Note that I used class=”textbox1″ so we can target this image with custom CSS.  Navigate to the Thesis 2 Skin Editor CSS page and select the “Custom CSS” tab.

Thesis 2 Custom CSS Tab

Scroll down and add the following CSS.  This will place the badge in the correct place with the proper margins to look nice.

/* Add comment bubble to number of comments */
.textbox1 {
margin-top: 10px;
margin-left: 7px;
}

Click the green “Save CSS” button.

Thesis 2 Save CSS

Refresh your home page and you will now see your featured content badge at the top of your sidebar.

Thesis 2 Sidebar Featured Content Badge

Notice that my featured content badge is clashing with my site search.  Removing the Site Search title is something I’ve wanted to do for a while.  It’s unnecessary to title the search box.  One, everyone knows what a site search box looks like.  Two, Google has added the “Google Custom Search” text inside the box anyway.

Navigate to your sidebar widgets. From the WordPress Dashboard > Appearance > Widgets.  You will see in the Widgets 1 box the “Thesis > Google Custom Search: Site Search” box.

Thesis 2 Google Custom Search Widget

Click the light colored arrow to open the box.  Remove the site title and click “Save”.

Thesis 2 Google Custom Site Search

Again, refresh your home page and see how your site looks.  Be sure to test your link to ensure it takes you to the desired page.

Thesis 2 Text Box 1 Featured Content

The featured content badge is placed, the link works, and the site search looks good.  But I don’t like how the badge is so far down from the nav menu.  This is pushing the rest of the sidebar content down so I’m going to take this opportunity to tighten up my sidebar spacing.

Navigate to the Thesis 2 CSS page.  From your WordPress Dashboard > Thesis > Thesis Skin Editor > CSS.

Thesis 2 CSS Page

Locate and click on the Columns CSS Package.

Thesis 2 Columns CSS

Click the “Options” tab then expand the “Column 2” section using the black arrow.

Thesis 2 Column 2 CSS

Scroll down to Column 2 Padding and expand it using the black arrow.  Remove the Top Padding value.

Thesis 2 Column 2 CSS Top Padding

Click the green “Save” button on the pop-up.  Then click the green “Save CSS” button.

Thesis Save CSS Button

Refresh your home page and check your results.

Thesis 2 Featured Contet Badge Results

I’m happy with my results so I’m finished adding a featured content badge using the Thesis 2 Text Box 1 feature.

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

{ 0 comments… add one }

Leave a Comment