One thing I have received the most attention about regarding the design of this blog are those yellow boxes in my sidebar that display random posts on the blog. People like it, and I got a comment on my last Thesis Thursday post asking how to create that box.

I decided that this week I would create a simple tutorial to show you how I did that effect here because I think it is a pretty cool trick.

This tutorial is easily adaptable for use on non-Thesis blogs, but for the sake of the series — the code will be written with Thesis in mind.

1. Preparations

Just to get a little prepared here, these are the things you will need for this tutorial.

• Access to the custom.css file
• Depending on what box you want (or if you even want more than one of them), you will need to use plugins from Rob Marsh. Your choices are:
  • Recent Comments
  • Popular Posts
  • Random Posts
  • Recent Posts
  • …for any one of those plugins, you need the Post-Plugin Library for them to work.
• Add a Widget in your Widgets panel

Once you choose what plugin you want, download it, install it and add it within your Widgets panel. Simple enough preparing, right? As long as you know what you want, the hard stuff is out of the way.

2. The CSS

Depending on the plugin you use, the CSS will be different. But the only difference is the #ID that is used, and that is easily changeable. So, the CSS code I use here is pretty simple, but I will explain it:

#random-posts li {
	background: #FFFBCC;
	border: 1px solid #E6DB55;
	line-height: 1.4em;
	-moz-border-radius: 5px;
	padding: 0.9em;
	-webkit-border-radius: 5px;
}

So what we have going on up there is pretty simple. We have a background which will allow you to switch up the color of the box, the border will surround the whole think, the line height controls the spacing between each line of the link, and the padding is the spacing from the box to the text. The -moz-border-radius & -webkit-border-radius will make the box rounded without images. They will only be round in Safari and Firefox, but it’s a neat trick to those who can actually see it.

I have colored in #random-posts because that is the thing that will change depending on which plugin you choose.

The ID’s you will need to use for the other plugins are below:

• #recent-posts
• #popular-posts
• #recent-comments

3. Customizing the output

You should have the yellow box around the link by default. It looks kind of boring, but because of how flexible this plugin is, making it look better is not a problem at all.

There are a lot of different things you can add to the box to make it look cool. The plugin makes adding things so simple too, and you really don’t need any coding knowledge at all to do it.

So to start, go to Settings → Recent Comments/Recent Posts/Random/Popular Posts → Output → Output Template. This is where we can add anything to the box. I will go over the two things I added to my boxes, which i think look sexy as hell.

66x66 Image

This will only work if you use Thesis teasers and have the 66x66 images for each post

You can paste this code into the Output Template box:

<li><a href="{url}"><img src="{custom:thesis_thumb}" width="66" height="66" alt="" /></a>{link}</li>

NOTE: If you let Thesis auto generate thumbnails, replace thesis_thumb with thesis_post_image in the code above.

The code calls the thesis_thumb custom field from your posts and puts it into the box. You will also need to add this CSS to make the image look right:

#random-posts img { float: left; padding-right: 8px; }

Add the date, and other stuff

If you look in my box, there is a date of when the post was published. The date can be replaces with a variety of things like comment count, views, tags, and a lot more. The code below will show you how to float things to the right.

First, replace the code in your Output Template with this:

<li><a href="{url}"><img src="{custom:thesis_thumb}" width="48" height="48" alt="" /></a>{link} <div class="right">{date}</div></li>

Add this to your CSS:

#random-posts div.right { color: #baaf2e; float: right; font-size: 11px; text-transform: uppercase; }

I added a little style to change the font color, size and case. This will bring whatever you wrap within <div class="right">...</div> to the right. But there will be a bug.

If you look towards the bottom of my box here, you will see a slight overlap

You will also need to add overflow: hidden; to the very first piece of code you added in Step 2. When the image is in the box floating, it will overlap the box, making it looks really weird. So, by adding that line to your CSS, it will make it look right, and the text will be inside of the box again.

Simple Enough, Wasn’t It?

That was pretty simple wasn’t it? The plugins used in this tutorial are extremely powerful, and allow you to customize your output extensively.

I hope you enjoyed this tutorial, as it was the first tutorial in the series. I hope you stick around for more posts here, and next week’s Thesis Thursday post! Is there anything you guys want covered for next Thursday?

PS: This is a really cool Thesis resource. Matt Langford wrote up a kick ass list of 100 Resources For Thesis you guys should definitely check out!

MAY 21ST, 2009

Hello and welcome back to Thesis Thursday! They say if you haven’t posted on a blog for a while to not bring it up, but it’s definitely been a while!

Since the last time I visited Thesis in an article, tons of things have changed with not only Thesis itself — but the community of Thesis owners and developers has seen a big change as well. More and more people are looking to have the best Thesis powered blog around.

For the longest of time, the Thesis theme has claimed to be an easy to use and customizable theme. While it has certainly proven to be a very usable theme, many people who have basic knowledge of a WordPress theme have found it difficult to customize it.

Sure, some pros like Kristarella, Greg Rickaby and many others have found their way through the hooks system like it was nothing. But, for the majority of Thesis users, who aren’t all web developers have been seeking a guide to help them customize their theme.

Lucky for all of us, Thesis 1.6 is close to its full launch and will make editing your theme much, much easier. Take it from me, I have used Thesis 1.6 and I have done a lot of customizing without even touching a single line of code.

But, even these new options won’t help many achieve their dream design. So that leads me to the main point of this post — being a freelancer in the Thesis community. The market for this theme is huge, and all it takes are a few good designs to get you started and on your way to becoming a freelancer.

My Short Story as a Thesis Freelancer

I have been creating designs on Thesis since April 2008. When I announced my return to freelancing, I started taking everything more seriously and really getting my act into gear and learning Thesis to the best of my abilities.

Ever since that post, I have been getting emails at all times of the day, from different people around the world in a vast variety of blog niche’s for me to work on their Thesis blog. I have been getting more requests than I can handle, and I do have to say “no” at times.

Basically, this post I am going to cover the three things you have to know if you want to become a freelancer for Thesis. The three topics I am going to talk about in this post are:

• Learning Thesis and resources for learning how to use it
• Pricing your services
• Marketing yourself

1. Need-to-know-info for any Thesis Freelancer

If you want to freelance for Thesis, it’s probably a great idea to have a clue as to what you are doing when opening up the Thesis options panel and creating your own hooks. Here are some resources I have found to help you get started:

Thesis Basics

• Customizing Thesis with custom.css
• How to customize like a pro with Thesis hooks
• Thesis Hook Reference List [I keep this in my bookmarks bar for quickest access]
• Thesis Hooks for Dummies

Customizing Thesis and Beyond

• Creating new widget areas in Thesis
• Using content filters for easier customization
• Thesis Footers 101
• Thesis OpenHook
• Creating custom Thesis categories
• Customizing the 404 page
• Creating Multiple Custom templates

Thesis pros on Twitter

• @godhammer
• @pearsonified
• @kingdomgeek
• @diythemes
• @girliegeek
• @kristarella

[see: 10 Thesis pros on Twitter you need to follow]

2. Pricing Yourself

I think being a regular freelancer and a Thesis freelancer is a lot different. At the moment, Thesis may have a less competitive market then a regular WordPress freelancer, but the way you price yourself should be looked at differently.

At first, I had trouble determining how I wanted to charge my clients. Should I do it on an hourly basis, or set a fixed price for themes? At first, I went with the fixed price because that was the type of pricing I was most familiar with. But, I felt like I was earning less than I should have which made me switch to an hourly rate.

Each side has its own benefits and disadvantages to them, and if you haven’t already decided how you want to be paid, check out an amazing post from FreelanceSwitch; Hourly vs. Fixed Pricing.

Evaluating yourself

You need to be brutally honest about the quality of your work. Ask yourself the following questions:

• How much background knowledge of Thesis do I have? (ex: who created it, licensing options, etc)
• How well do I know HTML and CSS in general?
• Do I fully understand how to create a function?
• Do I fully understand the options in Thesis and how to use them?
• Can I keep up with the Thesis community, trends, and multiple clients at a time?
• Is freelancing even for me?

It can be tough to determine your price. But ask yourself those questions — no one else but you knows the answers and no one is listening so be as honest as you can with yourself. To get a good idea what kind of numbers are being thrown around as to what to charge, check out this extremely informative thread on the Thesis forums “What would you charge?” (Thesis owners only).

Other useful information to know

• The Thesis market is huge and only getting bigger. Take it from me, if you do good design work then you will get more work then you can handle. So don’t under price yourself even by $1.
• Don’t over price yourself either. It’s a general rule of thumb, don’t charge too less and don’t charge too much. Evaluate yourself the best you can and charge what you are comfortable charging.
• Take into account that most of your clients will already own Thesis and that means they have spent nearly $100 or more to get it. That may limit their budget, so if you are throwing a ridiculous $150 an hour at them, there’s not a chance in hell you’re getting the job.
• Spend the extra money to upgrade to the Developers option. If not, don’t even try and freelance for Thesis.
• There will be people who don’t own Thesis already, so you need that Developers option to be able to buy the Cient Site Option which will allow you to buy a license for $40 and let the client use Thesis. Always make sure to tag that as an expense in the final bill.

3. Marketing Yourself

Marketing is such an important thing for your business. If you blog, then you know exactly how a good advertising campaign or good sales pitch is for your blog to be successful.

Here are some ways I came up with to marketing your Thesis services:

• Create a portfolio of your works

I do not have a portfolio set up 100% yet, but you should really start working on building one for yourself immediately. Let your work speak for itself, and do your best to get a few clients done and added to your portfolio. A few good pieces of work is all you need!

And please make sure you build your portfolio on Thesis and make it your best work. It just defeats the purpose of targeting a market and not even using the product you are working on for yourself.

• ALWAYS recommend Thesis to clients who contact you for non-Thesis work

On the occasion I get people who want a theme done, but they don’t own Thesis. If you ever run into that situation, try and get your client on Thesis immediately. Your client will thank you, and they may even want to go back to you for more work later since you put them on the best theme in the world.

• DIYthemes is the key

DIYthemes, the site that created Thesis is the key to marketing yourself. The company has a forum with thousands and thousands of Thesis owners go to discuss Thesis, get help for it and more. Use those forums and get involved with the community and assert yourself as a Thesis guru. Use the Classified sections to promote your services and answer other Thesis ads.

DIYthemes is also very active on Twitter. The Thesis community has its own little spot on Twitter. Just use the #thesiswp hashtag whenever you tweet something Thesis related, and you will be bound to get some retweets. Tweet about your latest designs, and you are sure to make a huge impact in the community on Twitter by just using the simple #thesiswp hashtag.

Be on your way

Freelancing is the best job in the world. I am 16 and am freelancing to the point where I can turn it into a career for myself. Just be aware that it can be a hard job to get used to, and there is just so much information I did not write about general freelancing. This post is just about getting you into the feel of being a freelancer on Thesis.

If you guys have any questions about Thesis, my business, or questions about the article — don’t be afraid to ask in the comments section! I hope you enjoyed the longest article on Asnio yet. Take care now.

I have said it again and again in this series, the one thing that seems to be a turn off to potentially new Thesis users is seeing blogs that hardly have customized their theme.

All me to briefly rant about this topic for a few paragraphs before I actually get into the real point of this post.

I can actually understand the perspective of the Thesis critics that bring up the point that “If Thesis is so easy to use, why don’t many Thesis users actually have any customizations on it?” Like, what do you answer to that? It’s true, a large portion of us Thesis users don’t have overly customized designs.

For a variety of reasons, this may have the potential to harm the reputation of Thesis. Think about it, one of the things that is boasted the most about this theme is how easy it is to edit and make “your own.” While a lot of us have definitely done that, there are probably more people who haven’t exactly done so.

But don’t get me wrong

I’m not saying that it’s a bad thing to leave Thesis “uncustomized.” I personally love the interface of it, and that’s why I haven’t made as many edits on this blog (opposed to my other blog). I feel like that is why many of us haven’t edited it as well — because the layout and typography is just that damn fine.

Some of the best Thesis designs out there still have some of the default look on them. It just goes to show you that you don’t have to do much to make this thing look good.

So Let Me See What You Came Up With

So with all of that background info, here’s what I want to do. I will review your Thesis design if you post a link to it in my comments section for nothing. I seem to be in a “free” kind of mood these last few days as I have been giving away plenty for free lately.

If you have made enough customizations to your theme, I will review it for you. If you have only done a few things, I’ll still critique it. Just post your URL in the comments and I’ll get to you.

After 30 days, I am closing comments on this post. I kind of have a feeling this could turn big, so make sure to tell all your Thesis friends before this offer is closed!

Notes

• Any review I do will be at least one paragraph (4–6 sentences) long. If I really like your site and have a lot to say, I’ll amp that number up.
• Sorry all of you non-Thesis weirdos, there’s no critique here for you.
• I am going to review every single blog posted in here, which may take so time. So please don’t rush me to get to your blog, I will when I get to it.
• As always, if you could subscribe to my RSS Feed, that will make me feel appreciated for doing this all for no charge.

Let ‘em rip.

With another Thursday comes another Thesis Thursday. This would be the second of the many posts in this everlasting series, and in this Thursday’s post, I am going to showcase 10 blogs powered by Thesis that don’t look like they use Thesis.

The sites showcased here you may have not seen before, and I can tell you that I did not just pluck out these sites from the Thesis Showcase at DIYthemes. I just figured that it would be pointless to show you sites you have already seen, so I took the extra time to find some very unique themes from the Thesis community.

Why Do This?

The reason why I am showing you these blogs is because the one complaint I hear a lot about Thesis is that “all the blogs that run it look the same.” I want to prove to those people that you can use Thesis and not leave much to recognize it later by showing off these awesome blogs.

WPBandit.com

Not only do they release some cool Thesis themes at their site, but they are running on a very cool theme themselves!

The design is not only very appealing to the eye, but the additions to the header are what makes this theme so great to look at. Navigation is very easy, and the way the content is displayed on the blog is very elegant and totally readable.

Visit Site

MakeThingsFair.com

Not only is the cause for the site amazing, so are the customizations made to the theme!

At first glance, the only thing that gave this site away are the forms in the sidebar, but pretty much from there it is all solid customizations.

This theme is rockin’ the 3 column look, and really makes the content stand out from the rest of the site by adding an easy to look at yellow background to each title. Truly, a great use of the Thesis theme.

Visit Site

Kuronoir.net

I can’t tell you how to pronounce that, but I can tell you that this is one pimpin’ Thesis customization!

Here is a great example of how well you can make Thesis look by inverting it’s original colors and going dark. There are so many cool things about this design. To name a few, the borders around the whole wrapper, the use of images as headings in the sidebar, an awesome header and footer, and plenty more.

Visit Site

Ahjira.com

Someone I have talked with quite a bit on Twitter, and also a bearer of a nicely customized Thesis.

What I love most about this is the effect in the header (for all of those crazy colors), and how she connects the subscribe box between the header and sidebar. Besides that stuff, she has some cool gradients all throughout the blog to add a 3D effect to her containers, as well as a great navigation menu and sidebar, along with a great, big footer.

Visit Site

PhillipBarron.net

Definitely the most interesting theme in this mini-showcase, however Phil Barron has really done a number on his theme.

All throughout the design, he has some really interesting textures going on. A cool grungy on as the background, a rough texture for the content box, and a field as his footer. The other thing is great about this is the trick he did to keep the navigation bar at the top of the page at all times. Great work Phil.

Visit Site

Blogussion.com

Shameless self promotion or is this actually a well done theme that you may not have seen?

I designed this site, and I did my best to take out the standard Thesis look in just about every aspect of the design. A simple header with plenty of links and simple navigation, a tricked out sidebar, and an overhaul of the standard comments look.

Visit Site

CreepyLA.com

A blog full of creepy content, but there is nothing creepy about their awesome customizations.

The logo is really cool, as are the textures used throughout the site. I personally think that the font they use on the site is really fun, matches the site’s theme well, and more importantly — uncommonly used.

Visit Site

BlueAnalytics.com

I love the simplicity here, and the way the content is organized is totally unique. It is light on images (as a matter of fact, I only see 8 images, 7 of those being tiny icons) and uses the sexy Trebuchet MS to support that “clean” vibe the site gives off.
No Longer on Thesis

CuteOverload.com

Cute animals and a really cool design. What’s a better combination?

Even though this site has that standard Thesis navigation, I still find this to be a very unique design. The colors, the images, and the amazing header are all what contributes to this awesome Thesis theme.

Okay, maybe those little furry animals made me add this design to the showcase. I mean seriously, look at those dogs. One of them is literally eating the other one.

Visit Site

Shatterboxx

Yeah, really, it’s Thesis. Seriously.

The simplest one in this showcase, this design has no sidebar, or anything else you would expect from a site using Thesis. The header is beautiful, and you have to admire the whole one column look.

Visit Site

Need Tips For Customizing Your Thesis theme?

With all of those awesome sites listed above, I don’t blame you for feeling like your Thesis theme just isn’t meeting it’s true potential in looks.

There are tons of sites out there for Thesis to help you customize it. Not a lot of people understand the hook system, so these are the kind of sites you may be interested in for customizing Thesis.

• Thesis Hacker
• Thesis Theme HQ
• Sugarrae
• Kristarella
• Blogussion
• MattFlies
• Berchman
• HowToMakeMyBlog
• GrayWolf
• Franklin Bishop
• DoubleMule
• FergusWeb
• Rick Beckman
• Empty Cabin Media

Enjoy! That took like 2 days to do, such madness.