10 Useful Answers to Common Thesis Questions

If you’re reading this, you probably already know about Thesis – you may have even already purchased it, and now you’ve got dozens of questions about how to tweak it. You’ve probably been lurking on the DIYThemes forums for a while, and you may have noticed there’s a lot of people just like you. There are probably thousands of questions being answered on those forums, but sometimes it’s hard to find the right answer to your particular question amid all the noise. So here’s a list of some common questions about customizing Thesis, with a quick solution for each.

Table of Contents:

How Can I Display Different Background Images in Different Regions?

You may already know that you can add a background image to your site adding this to the body:

body {
 background: #fff url(images/bkgnd.jpg);
}

But that modifies the background for the whole page – what if you want to use different background images in different sections?

First, for this tutorial, make sure you’re using the “Full-Width Framework” (accessible in the Design Options of Thesis). Then, make sure you upload any images you’re going to need into wp-content/themes/thesis/custom/images/ To add a background for just the header “region”, for the full width of the window (and including the navbar), use the following code in your custom.css:

.custom #header_area {
 background-image: url(images/bkgnd.jpg);
}

Below that, for the content “region” (where posts and pages appear), use:

.custom #content_area {
 background-image: url(images/bkgnd.jpg);
}

And for the footer “region”, use:

.custom #footer_area {
 background-image: url(images/bkgnd.jpg);
}

Note: you may want to have your body background match your #footer_area background so that when a page doesn’t extend all the way down to the bottom of the window, the body background will make the footer appear to fill the bottom of the window.

Now you may have noticed that while your backgrounds are styled, the main “page” of your site is still white, and it hides the background images you just placed. If this is not what you want (e.g., you want your backgrounds to show through), you need to style the .page class of each of those areas (in this case, remove their default white background). So for the header area, you’ll use:

.custom #header_area .page {
 background: none;
}

Last tip – now that you know how to style the .page class independently, you can add a custom background image just for the .page “region” in each section, separate from the #content_area, #header_area, and #footer_area.

I Just Learned How to Use Hooks, So I’m Creating My Own Super-Cool Header from Scratch – How Do I Get Rid of the Ugly Default Header?

Hooks aren’t just for adding stuff. They’re also super-handy for removing stuff. Drop this in custom_functions.php:

remove_action('thesis_hook_header', 'thesis_default_header');

Can I Have a Second Navbar? (or a Third?)

You’ve already got your primary wordpress-generated navbar, automatically displaying the pages and categories that you have chosen in your Thesis Options. How do you display another navbar somewhere else without screwing up the first one? Don’t mangle your wp_query(), just make your own! Build a simple HTML unordered list, fill it with links, and format it with CSS to match the default navbar (Thesis’ .menu class) or any way you like. Place the following in custom_functions.php:

function my_other_navbar() { 
     <ul id="secondary_nav">
	<li class="first"><a href="sitemap">Sitemap</a></li>
	<li><a href="search">Search</a></li>
        <li class="last"><a href="http://www.myothersite.com">Visit my Other Site!</a></li>
     </ul>
add_action('thesis_hooks_before_header','my_other_navbar');

This particular hook will place our new navbar at the top of the page before the header. Consult the Thesis Hook Reference List for other location options. Combine this tip with the last one about removing hooks, and you could kill the Thesis navbar altogether and replace it with your own hand-coded nav!

remove_action('thesis_hook_before_header', 'thesis_nav_menu');

How Can I Display an Image from the Post Next to the Headline?

Headlines can be much more eye-catching when they have pictures next to them. You already have images in the content of your posts, but what if you want to display a specific image for that post elsewhere, like on the home page (for featured posts) or on archive listings? How can you retrieve a post’s picture without using a plugin or dealing with cryptic custom fields?
Thesis has a solution: when editing a post, Thesis includes a metabox named “Post Image and Thumbnail”. If you place an absolute URL to any image (even ones you have uploaded already in your post content), Thesis will associate that picture with the post, generate a thumbnail version automatically, and you can retrieve that picture anywhere you want. Use the image upload buttons while editing a post to upload a picture, and copy the direct link to the file you just uploaded. Paste that link in the “Post Image” field below your text editor. You can leave all the other settings alone, and Thesis will use the defaults set in Thesis Options for post image formatting and thumbnail sizes, or you can override those settings just for this post.
postimage

If you want to create your own thumbnail (different from the Post Image), you can upload it the same way and paste the link in the “Thumbnail Image” field. If you leave that field blank, Thesis will generate a thumbnail for you based on the Post Image field. Save your post, and if you are displaying Teasers anywhere on your site, you should notice the thumbnails appearing next to the teaser text already.
If you want to manually retrieve these pictures somewhere else (featured posts, sidebars, etc.) use one of the following code snippets in a function:

// grabs the post thumb
global $post;
$post_image = thesis_post_image_info('thumb');
echo $post_image['output'];
// grabs the post image
global $post;
$post_image = thesis_post_image_info('image');
echo $post_image['output'];

For example, the following placed in your custom_functions.php will add thumbnails to any archive listing

function archive_thumbs() {
if (is_archive() || is_category()) {
  global $post;
  $post_thumb = thesis_post_image_info('thumb');
  echo $post_thumb['output'];
  }
}
add_action('thesis_hook_before_post','archive_thumbs');

How Do I Insert an Image Before the Post Content? Only on Certain Posts or Pages?

This technique works for anything – flash animations, videos, banner ads, etc. – that you want to appear above the post content (and just by changing the hook, anywhere else). Really, you can insert any chunk of html you can dream up. This is the basic method in Thesis of adding any content beyond what wordpress automatically generates. Start by copying the image you want to place into wp-content/themes/thesis/custom, then open your custom_functions.php file and add the following:

function insert_my_banner() { 
	<img class="my_banner" src="/images/my_banner.png" alt="" />

Now you should see your image inserted once before the content begins (but alongside the sidebars) on every page. If you want to have the image span the entire page (thus above the sidebars as well), just modify the <code>add_action()</code> line to read:

add_action('thesis_hook_before_content_box','insert_my_banner');

On pages that list multiple posts, if you want the image to appear repeatedly before each post, change it to read:

add_action('thesis_hook_before_post_box','insert_my_banner');

The possibilities are endless – you can discover all sorts of places to hook into by reading the Thesis Hook Reference List
Now, if you only want the image to appear in certain places, you need to add a conditional statement to your function (in this case, to limit the banner to the home page only):

function insert_my_banner() {
	if (is_home()) { ?>
		<img class="my_banner" src="/images/my_banner.png" alt="" />
}
add_action('','insert_my_banner');

Now your image will only be inserted into the page if the condition is met. You can check for category listings <code>(is_category())</code>, pages <code>(is_page())</code>, a single post <code>(is_single())</code> and many other possibilities that  <a href=”http://codex.wordpress.org/Conditional_Tags”>you can explore here</a>.

How Can I Get Rid of All the Border Lines between sections?

There’s always a border somewhere that just won’t die… so place this CSS in your custom.css file to wipe out all the borderlines:

.custom #header, .custom .post, .custom .teasers_box, .custom #footer, .custom #footer a, .custom #footer a:active, .custom #archive_info, .custom .prev_next, .custom #comment_list, .custom #comment_list dd, .custom #commentform, .custom #sidebar_1, .custom #sidebar_2, .custom #comment_list dt.comment, .custom #comment_list dd.comment, .custom #comment_list dl .bypostauthor .format_text, .custom #trackback_list {     border-bottom: 0px;
 border-top: 0px;
 border-right: 0px;
 border-left: 0px;
}
.custom #content_box, .custom #column_wrap {
background: none;
}

Can I Use Different CSS Styles for Different Pages on My Site?

Of course! While you can test for certain conditions in PHP [like is_category(3), is_page(15)] and insert css styles via custom_functions.php, it’s quite easy to just add specific CSS styles to your custom.css file. Thesis automatically generates custom CSS classes for pages and categories. For example, if you have a page called “About”, you can style the headlines red just on that page by adding this to your custom.css:

.about h1 {
 color: #fe2600;
}

On category listing pages (e.g. posts in the category “Gizmos”), use the category slug like this:

.cat_gizmos h1 {
 color: #fe2600;
}

For a single post that is in a certain category, target it like this;

.custom .category-gizmos h1 {
 color: #fe2600;
}

You can do anything – change backgrounds, font sizes, show/hide things – that you could already do with custom.css, but these styles will only target specific pages, and will override any site-wide styles.

How Can I Transfer My Thesis Settings from One Blog to Another or Preserve Them when Moving My Site to a Different Domain?

Thanks to the Thesis wizards at 3DogMedia, you can easily transfer all the settings you’ve customized in the Thesis admin panels. Combined with the files in your custom folder, you now have everything you need to perfectly recreate your site somewhere else.
First, get the plugin: Thesis Import/Export. Install it, activate it, and go to the plugin settings page. There, you need click the button to “download current layout” for BOTH the Thesis Options and Design Options. This will result in two files downloaded to your computer. On your new site (or fresh wordpress install), you must install the plugin first, then just reverse the process and upload the files you grabbed from the old site (make sure you’ve kept them straight) with the “upload layout” button.
Also, make sure you’ve replaced the new site’s default custom folder with the contents of your old “customized” files (custom_functions.php, custom.css, images folder, etc.), and that’s it!

How Can I Add More Information to the Byline?

By default, WordPress displays the author of the post and when it was posted. How about adding some additional information? This example adds tags and categories to the Thesis byline, each on a new line, and with the needed classes to match the other byline items.

function add_to_byline() { ?>

', ', ', ''); ?>

' . get_the_category_list(',') . ''; ?>

If you want truly unlimited power to customize the byline, you can utilize the custom fields meta box to enter special data about the post (original source credits, designer, etc.). Then retrieve the custom field data and display it in the byline:

<pre lang="php">function add_to_byline() {
	global $post;
	$source = get_post_meta($post->ID, 'Source', true);
	if ($source) {
		echo '

Source: ' . $source;
	}
}
add_action('thesis_hook_byline_item','add_to_byline');

These byline hook functions can easily be adapted to display the author’s twitter feed, geolocation data, or any other snippet of code you might find useful.

Do Teasers Always Have to Display in Two Columns?

If you’ve fallen in love with Thesis’ “teaser” display option, but can’t live with the two-column layout they default to, you’re in luck! Place these styles in your custom.css:

.custom .teaser {
   width: 100%;
   margin-top: 2em;
   padding-top: 2em;
   border-top: 1px dotted #bbb;
   text-align: justify;
}
.custom .teasers_box {
   padding-top: 0;
   padding-bottom:0;
   border-top: 0;
}

Now each teaser will fill the full width of your content column! Just tweak your css a bit more to mimic the layout of sites like www.motorcademag.com and www.tutsplus.com

Still Hungry?

This list just scratches the surface. We’ve done some excavating for you, but there’s much more to be found by digging around the DIYThemes forums. If you can’t find what you need, don’t be afraid to post your question – there’s a huge community of Thesis users (and some full-time staff hovering nearby) who are ready to help.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Israel Curtis

Israel is a music producer / designer / entrepreneur based in Utah. He codes exclusively for Wordpress and Thesis. Check out his portfolio at www.somaticstudios.com or follow him on twitter @israelcurtis

Comments

  • DanR says:

    Solid article Israel, thanks for collecting these together. There’s some new ones there I hadn’t thought of looking for yet but can definitely use. Art Of Blog goes from strength to strength!

  • 2010 The Year: the Affiliate Extactor Model Died — NicholasReese.com Nicholas Reese says:

    […] was an interesting day. Originally I got my camera/mic setup to do a Thesis theme tutorial for Art of Blog when I found out someone had ripped a post that took several hours to compile and […]

  • Chris says:

    This is great; thanks!

    I’m wondering about turning a category page (“Servies” on my site) into a two-column look like the teasers. Is that something you could explain in a tutorial?

    Thanks again!

    • Nick Reese says:

      If I understand correctly you are looking to just add teasers to the category pages simply log into Thesis 1.6 go to Thesis Options -> Under Display Options “Categories” -> Toggle “Everything is a Teaser”

      This should do it for you.

  • jerome robins says:

    how hard is it to implement those featured sliders u see on most premium themes?

    • Israel says:

      It all depends on which plugin you choose to provide the featured slider functionality – but once you’ve got the plugin’s particular quirks figured out, adding the slider to thesis is as easy as adding a single line of code in a hook. I’ll be posting a new article very soon that will demonstrate one possible solution to this popular request.

      • jerome robins says:

        so if u have decent html skills & good photoshop skills, u can build whatever u want in thesis? its effectively a psd to wordpress theme?

        • Israel says:

          Well, Thesis isn’t a direct PSD->Wordpress system exactly, but it does make it much easier to customize WordPress than WordPress alone. I just introduced a friend to WordPress (without Thesis) and I was surprised just how much harder it is to customize WordPress without Thesis’ extensive hook system. Thesis provides an abstraction layer on top of WordPress (what we usually call “frameworks”) so you don’t have to hack the core wordpress files. Basically with one extra .css file and a custom_functions.php file, I can modify and extend almost anything in WordPress – I don’t have to worry about upgrading my core files (or even Thesis), and transferring those customizations to another site is dead simple…

  • Thank you for the wicked quick collection of answers to some burning questions I had about Thesis. I am particularly interested, as per one clients request, in using custom navigation images, and styling, and location, in addition to the Thesis Navigation.

    Is this easily doable? Any one have an example?

    • Israel Curtis says:

      absolutely doable. check out my latest thesis customization: http://www.hypnobirthingutah.com. The standard thesis nav is at the top, and there’s a secondary nav in the sidebar (hand-built). At the very least, you could have a widget placed anywhere with a list of pages or popular posts. Then you can style just that list anyway you want..

      • Fantastic customization, love the rounded corners, and the well rendered images beside each heading on the secondary navigation. Did you build it into a sidebar using a text widget? Then code the list, with the images beside it in html, and then use css for the mouse over styling?

        • Israel Curtis says:

          I did hand code the list (though I could have used wp_page_menu() to generate it), and styled with CSS the icons (as background images) and the rollover action (which I’m probably going to migrate to jQuery). But no, I didn’t use a widget. I hardly ever use widgets these days – I prefer to just insert functions with thesis hooks, allowing me to add any HTML I want, spiced up with PHP functions and variables, without worrying about the widget executing things properly.

  • I would love to have thumbnail photos listed with my post titles when browsing archives & performing site search. I tried add link to Thumbnail slot on a few posts & I pasted the paragraph in the functions php (but I’m not a web designer so I could have screwed that up) but it doesn’t seem to be working there or for my teasers. Any ideas?

    • Israel Curtis says:

      In Thesis Options -> Display Options -> Archives you could select “everything’s a teaser” and then you should have thumbnails listed alongside each entry (provided the images have been properly added to each post).

      Then you could format the teasers to look more like a typical archive page by showing them one across instead of two-column (see the last tip in the article above). You could even set the excerpt text to “display: none” so you have only titles and thumbs.

  • Thesis Wordpress Theme Tutorial Compilation says:

    […] 10 useful answers to common Thesis questions – http://www.artofblog.com/answers-to-common-thesis-questions/ […]

  • craig sunney says:

    Very nice collection of tutorials all in one place. Congrats!

  • Jim says:

    Any way to have 3 or 4 teasers side by side? I’m seeing that there are always TWO teasers in teaser_box, so when I set the width to 30%, I get two teasers with lots of space in between.

  • It’s really great. I am damn sure you have been passed lots of time to accumulate such type of beautiful thesis tips collection.

    Thanks.

  • CoreBloggers says:

    Very useful post…thanks thesis theme is a awesome ..by far the best wordpress theme i have ever used

  • TaosJohn says:

    “First, get the plugin: Thesis Import/Export.”

    This plugin COMPLETELY busted the f**k out of a perfectly good website of mine. Be very, very, very careful.

  • Tan says:

    Hi Israel,

    I want to have a author resource box as what was shown in your post, what is the code, and how should I go about it?

    Thanks.

  • […] 10 Useful Answers to Common Thesis Questions – A collection of simple solutions to mostly simple Thesis problems. This one is also from Art of Blog. […]

  • […] 10 Useful Answers to Common Thesis Questions […]

  • Great work! thanks so much.
    One question, how did you add the effect on you nav menu? (top bar, different color in each tab…) ?

    thanks, Gustavo

  • Ahmed says:

    Hello Israel,

    I hope you are still around. Can you tell me how I can have a 3 column setup in homepage and have teasers in all 3 columns? No sidebar. Only for homepage.

    I really hope you can help.

    Thanks
    Ahmed

    • Clarence Johnson says:

      Anybody?

      If you have a solution, please share. I would love to know if this is possible.

  • Brijesh says:

    One question regarding “Post image and thumbnail” option in thesis theme. I use only thumbnails with this option.

    If I use absolute URL(including http:// i.e. http://brijux.com/wp-content/uploads/2009/09/example.jpg) in Post image and thumbnail section, the image is not showing up.

    But it shows up if I only put image url starting from wp-content/ (i.e wp-content/uploads/2009/09/example.jpg), the images and thumbnails works. I get the expected thumbnails on the home page.

    But if I go to page 2 of my website, the thumbnail is replaces by only alt-text of image. And the thumbnail path is http://brijux.com/page/2/wp-content/uploads/2009/09/example.jpg which is wrong.

    Any suggestion on how I can make the absolute URL to work with Post image and thumbnail section in Thesis theme?

  • Fusiondiary says:

    I came to your site looking for a way to display excerpts on category pages, did not find what i was looking but found a lot of other cool things.

    You are doing really great!

  • Sorin says:

    Hello,
    Please help me with a information. You have in sidebar different color on title h3 text. How you made this?

    Ex: Popular Posts you have bg blue, other have green, how you made this?

    thank you

  • Martina says:

    hey Israel

    Thanks for the post, I have not used your tutorials yet, I have a question to you

    on the website you have mentioned: http://www.hypnobirthingutah.com.
    you have really nice borders-shadow that surround the main layout.
    How to do it?
    thanks
    Martina

  • Gouri says:

    Thanks for this great post. I am using the diplay setting of 10 features to show single column content layout.

  • Hello! I know this is kind of off topic but I was wondering if you
    knew where I could find a captcha plugin for my comment form?

    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

  • TOufiq says:

    Becoming your fan, when i read your post about thesis theme!

  • Keira says:

    How can I get images for teasers when I never used post image or teaser image field (mainly because I just started using thesis). I don’t want to go through 2000 posts to add them.