Customize Thesis

By request, here’s how you add a sidebar below blog posts & pages. For today, we’ll be inserting teasers of featured posts but you could easily use it to insert adsense code or something else.

Add this code to custom_functions.php

register_sidebars(1,
 array(
 'name' => 'Below Post',
 'before_widget' => '<li id="%1$s">',
 'after_widget' => '</li>',
 'before_title' => '<h3>',
 'after_title' => '</h3>'
 )
);

function add_sidebar_below_post_area(){
 if (is_single()){
 echo "<div class='below_post_teasers'>";
 !dynamic_sidebar('Below Post');
 echo "</div>";
 }
}

add_action('thesis_hook_after_post_box', 'add_sidebar_below_post_area');

This will add a sidebar below your post/page. Now install my Thesis Sidebar Teasers plugin and insert a Thesis Sidebar Teasers widget into the “Below Post” sidebar from the Appearance > Widget page. To get some of the basic styles to look right, add this code to custom.css:

#content .below_post_teasers .teaser {
 width: auto;
 padding: 20px;
 float: none;
}

#content .below_post_teasers li {
 list-style: none;
}

You’ll obviously need to make sure you customize the css to match your needs but this should get you on your way.

{ 7 comments }

Wordpress 2.7 introduced an awesome new feature called Threaded Comments but it’s not turned on by default.

You’ll need to go to Settings > Discussion from the left side menu, check off the “Enable threaded (nested) comments” option and hit the Save Changes button at the bottom.

PS: Thesis supports threaded comments so you don’t have to do anything to make it.

{ 0 comments }

A Dual Identity For Your Domain Isn't Good for Search Engines

Bottomline: Be consistent in the website address you use everywhere online. Dual Identity = Bad for SEO.

In Google’s robotic eyes, YourDomain.com and www.YourDomain.com are very different websites. This means that if some of your links are pointing to YourDomain.com and some are pointing to www.YourDomain.com, you’re not getting the full credit for your links and your search rankings will not be as high as they could be.

If you’re leaving comments, getting links or do anything on the web, be sure to pay attention to what your real website address is. If when you put in http://www.yourdomain.com, it redirects you to http://yourdomain.com, that is what you want to use in all your links and comments.

If you’ve already got all the links and comments pointing to www.yourdomain.com and your website address is http://yourdomain.com, you can change your settings by going to Settings > General from the left side menu and making the change over there. How can you find out? Use a tool like MajesticSEO.com.

{ 4 comments }

Don’t you hate it when you have to keep coming back to a blog post to keep up with the discussion on a web page? I love it when I can just tell a blog to notify me whenever there is a new comment added. That is exactly what the Subscribe to Comments plugin does. And the neat thing is that Thesis already supports it by default so all you have to do to use the plugin is install it and activate it. Cool ahe?

PS: The plugin info page says it works up to Wordpress 2.3.1 but Chris Pearson is using it on his blog and I just activated it on one of my blogs (running WP 2.8.5) so it’s not limited 2.3.1.

{ 0 comments }

Adding a masterhead into the header requires you to style two elements of your page: your #header div & the #logo element. Here’s the code you’ll need to add to your custom.css file:

#header {
 border: none;
 background-image: url(images/header.gif);
 background-repeat: no-repeat;
 height: 160px;
 padding: 0;
}

.custom #header #logo a {
 text-indent: -9999px;
 width: 170px;
 height: 160px;
 display: block;
 float: left;
}

Additional Notes

• In the above code, you’ll need to customize the orange parts of the code.
• The header image will go into the /thesis_16/custom/images directory.
• From the Thesis Options page, in the Display Options page there is an option set for Header. Expand this option set and disable ‘Show site tagline in header’ and hit save.

This is the same technique I’ve used on http://www.sacramentocomedy.com so I know it works.

Got questions or comments? Feel free to leave a comment below. I’ll respond back as quickly as I can.

{ 7 comments }

Adding an image logo instead of the text site title is simple. Add the following code into the custom.css file which is located in the /wp-content/themes/thesis_16/ directory.

#logo a {
  background: url(images/logo.gif) no-repeat center center;
  width: 295px;
  height: 61px;
  text-indent: -9999px;
  display: block;
}

#tagline { display: none; }

The last line will hide the tagline. I prefer not using this last link and instead just hiding it from the Thesis Options page in the Header section.

Also, be sure to change the width & height to match your logo.

{ 6 comments }

Being able to add custom javascript to your website can help you do lots of cool things. I’ll save all the cool things for now and simply demonstrate how to add the custom javascript and do a simple thing. In later posts we can dig into the cool things you can do using this technique.

Add the following code to your custom_functions.php file inside your custom folder:

function add_custom_javascript(){ ?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/custom/custom.js"></script>
<?php
}

add_action('wp_head', 'add_custom_javascript');

Then create a text file called custom.js inside your custom folder and add the following:

// This will look for all links with rel="external"
// and cause the link to open in a new window.
$(document).ready( function() {

 $('A[rel="external"]').click( function() {
 window.open( $(this).attr('href') );
 return false;
 });

});

As the comment above the indicated, this javascript code will look for all links with the rel attribute set to external and open them in a new window. Why do it using javascript and not just the option that Wordpress has built in? Because the _target property which the Wordpress approach doesn’t validate.

{ 3 comments }

The feature box is a cool feature of Thesis. It basically gives you a box/area to put content into. However, sometimes you want to show different content inside the feature box based on what page you’re on. You might want to have a graphic for section 1 and a different graphic for section 2.

To get this to work, you’ll first need to go into your Thesis options and set the Feature Box to show site wide.

Next, add the following code to your custom_functions.php file:

function custom_feature_box(){
 if (is_page('home')) { ?>
 <a href="blah blah blah"><img src="<?php bloginfo('template_url'); ?>/custom/images/home.jpg" alt="something" /></a>
 <?php
 }
}

add_action('thesis_hook_feature_box', 'custom_feature_box');

As you probably guessed, this lets you add an image link on your home page. If you wanted to add a second section, you’d have another if statement, like the following:

function custom_feature_box(){
 if (is_page('home')) { ?>
 <a href="services"><img src="<?php bloginfo('template_url'); ?>/custom/images/services-billboard.jpg" alt="Services" /></a>
 <?php

 }

 if (is_page('services')) { ?>
 <a href="services"><img src="<?php bloginfo('template_url'); ?>/custom/images/services-main.jpg" alt="Services" /></a>
 <?php
 }

}

add_action('thesis_hook_feature_box', 'custom_feature_box')

{ 0 comments }

Add the following to your custom_functions.php file and add a favicon.ico file into your custom folder.

function custom_favicon(){
 ?>

<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/custom/favicon.ico"></link>
 <?php
}
add_action('wp_head', 'custom_favicon');

{ 4 comments }