Ask any Thesis ninja what their favorite tools are, and you’re bound get several answers. Here are some of the most popular developer tools and applications to help you customize your Thesis website.

HTML Editors

• Coda (Mac)
• Adobe Dreamweaver (Mac or PC)
• Notepad++ (Free–PC)
• Bluefish (Linux)

Graphic Editor/Image Manipulation

• Adobe Photoshop (Mac or PC)
• GIMP (Free–Mac, PC, Linux)

Firefox Extensions

• FireBug
• Web Developer Toolbar
• Colorzilla
• MeasureIt

Chrome Extensions

• Chrome Inspector (built into Chrome)
• Web Developer Toolbar
• FireBug Lite
• EyeDropper
• MeasureIt

FTP Program

• FileZilla (Free–Mac, PC, Linux)

There are two ways to style the Thesis navigation, first and foremost using the Thesis Design Options, other is more ninja-like by using custom.css. Whichever way you choose you’ll be on your way to a navigation menu all your own!

Thesis Design Options

Navigate to Thesis –> Design Options –> Nav Menu in the WordPress Dashboard

These are pretty self explanatory and give you basic control over the navigation. Controls include the ability to select:

• font-family
• font-size
• link colors
• hover colors
• border colors
• border width
• sub-menu colors
• sub-menu width

Using Custom CSS

To gain complete control over the navigation menu you’ll need to dig into CSS.

Many ninjas use the Thesis Design Options to set the colors and remove borders, but use CSS to control how the navigation actually looks.

One of the most requested tweaks is to change the navigation menu to the full-width of the website. This can be accomplished by adding the following code in custom.css:

.custom .menu {
    width: 100%;
}

Another heavily searched tweak is changing the navigation menu text-variation from “small-caps” to “all-caps”. This is easily done with the following:

custom .menu a {
    text-transform: uppercase;
    letter-spacing: 1px;
}

Need more help with using CSS? Check our CSS Basics post.

Thesis had probably the best system for organizing navigation in WordPress. However, that has all changed with WordPress 3.0. The default navigation system built into the latest versions of WordPress features an easy drag-and-drop system that surpasses any previous attempts at navigation management. Here’s how to get started using it:

Configure Thesis to Use WordPress Navigation

In the WordPress Dashboard navigate to Thesis Site Options –> Navigation Menu and choose “WordPress nav menu”

Configure the WordPress Navigation

Now comes the fun part. We can build our navigation using the easy interface.

In the WordPress Dashboard navigate to Appearance –> Menus

Step 1) Create a new menu, call it “Primary” and click “Save Menu”

Step 2) Once saved, “Primary” will show up in the “Theme Locations” drop-down box. Select Primary and click “Save”

Step 3) Now you can add pages, posts, categories, or custom links to your menu. Just remember to click “Save” when your finished.

Advanced Tip

Want to open a link in a new window? Maybe add CSS class selectors for further customization? It’s easy!

While on the Menus page, click on “Screen Options” near the top-right corner of the page. A drop-down will give you several more “hidden” options. Simply check the options you’d like to add.

Thesis allows you to customize your website exactly to your needs using a future-proof CSS file named, custom.css

What is CSS?

The Cascading Style Sheet has been around since 1997 and allows us to change and customize elements on an HTML web page by use of presentation semantics. In other words, it’s the paint on the car.

Did you know that FireBug is the single most popular CSS inspection tool for both Firefox and Chrome? Download it today and get a jump on mastering CSS!

Basic Syntax

CSS, to me, is easier to understand than PHP functions or filters. Regardless of the programming launguae (PHP, ASP, HTML5 etc…) the CSS syntax has remained largely unchanged since it’s inception.

selector {
    property: value;
}

Selector = The element you want to style. This could be a box, some text, or even an image. Often they begin with a # or a . HTML Elements such as: body a p h1 and h2 do not require a # or .

Property = Defines the part of the selector you want to edit. There are a set number of properties available in CSS. They look like this: font-family or background or text-decoration. (see a list of CSS properties)

Value = Sets the property. This could be as simple as make bolding font or changing it’s size–to adding a border or some padding.

Color Values = These 3 or 6 digit numeric codes define colors. #000000 = black and #FFFFFF = white (Read more)

Here are the different types of selectors

– HTML Element

– #ID Selector

– .Class Selector

– :Pseudo Selector

Here is how HTML Elements look in HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<a href="http://google.com">This is a link to Google</a>

Here is how an #ID selector and .Class selector, and HTML Element w/ CSS look in HTML

<div id="box">This is a box</div>

<div class="text">Some Text</div>

<p class="text">This is a paragraph with a class attached to it</p>

Basic Examples – HTML Element

HTML Elements are inherit to every HTML page. Based on the doctype , a modern web browser will apply a default set of styles–even if you don’t define them in CSS!

This will change our website’s background to black:

body {
    background: #000000;
}

Now let’s add some padding:

body {
    background: #000000;
    padding: 10px;
}

Pretty easy huh? Let’s style some headlines:

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

How about the font inside a paragraph?

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

Links?

a {
    color: #00F;
    text-decoration: underline;
}

Let’s throw in a pseudo-class called :hover

a:hover {
    text-decoration: none;
}

Basic Examples – #ID Selectors

Now that you’ve got the basic syntax down, let’s work on #ID selectors. The #ID selector is used to specify a style for a single, unique element. The #ID selector uses the id attribute of the HTML element, and is defined with a “#”.

#footer {
    font-size: 12px;
}

You can add HTML Elements to an #ID selector:

#footer a {
    color: #333333;
}

What you’ve just done is tell a web browser, “Hey! Inside the #footer selector, make all text size 12 pixels and turn the links gray!”

Basic Examples – .Class Selectors

The .Class selector is used to specify a style for a group of elements. Unlike the #ID selector, the .Class selector can be used on more than one element on a single page. This allows you to set a particular style for any HTML.

Let’s say, you’ve created several HTML links and I wanted them all to be the color red:

<a href="http://google.com" class="red_link">Google</a>
<a href="http://yahoo.com" class="red_link">Yahoo</a>
<a href="http://bing.com" class="red_link">Bing</a>

.red_link {
    color: #FF0000;
}

What this does is, anytime I create a link with the class="red_link" will turn the link red!

How do I customize Thesis using CSS?

Once you’ve installed Thesis, chances are you’ll want your website to stand out amongst the crowd. To make this happen, you have to style it differently than anyone else!

To get started, we’ll be making changes to the file located in /wp-content/themes/thesis_18/custom/

There are two ways to make changes to this file, either by using the Custom File Editor in Thesis or via FTP.

Thesis puts a .custom class in the HTML Element <body class="custom"> when you style things using custom.css the syntax would be:

.custom a {
    color: #FF0000;
}

.custom #content {
    padding: 10px;
}

Basically, you’re telling the browser “whatever starts with .custom is most important”

Like Functions, Filters are a way to modify and inject code into your website. By nature, they are still a Function, but are more advanced. They are, however, another bulletproof way to code your theme.

Unlike Functions, Filters operate on existing content only. This means a filter accepts a variable and returns it into a function. In other words, you can change pre-coded (stock) content or parameters–that came with Thesis.

Let’s change the default RSS feed URL in our header to a Feedburner URL:

// Modify RSS Feed URL
function custom_rss_feed($feed_url) {
    return $feed_url = 'http://feeds.feedburner.com/my-feed';
}
add_filter('thesis_feed_url','custom_rss_feed');

The code above goes into custom_functions.php after the <?php

Here is an example on how to add images the to comment intros:

// Comment Logos
function remove_comments_intro($output) {
    $output = ''; 
  return $output;
}
add_filter('thesis_comments_intro', 'remove_comments_intro');

function replace_comments_intro($output) {
    $output = '<img src="images/comment-intro.png">';
    $output .= '<p><a href="#respond" rel="nofollow">Add a Comment</a></p>';
    $output .= '</div>' . "\n"; 
  return $output;
}
add_filter('thesis_comments_intro', 'replace_comments_intro');

function my_comment_form_title($output) {
    $output = '<img src="images/respond.png">';
    $output .= '<p><a href="#respond" rel="nofollow">Add a Comment</a></p>';
    $output .= '</div>' . "\n";
  return $output;
}
add_filter('thesis_comment_form_title', 'my_comment_form_title');

See the Thesis Filter Reference for the complete list. For more in-depth Filter documentation view the WordPress Codex.

Learning how to utilize hooks is the recommended way to customize Thesis. It involves create a Function, adding your custom code and then injecting the code into your website using an Action.

PHP Functions are basically plug-ins. They allow you to create customizations by using standard HTML or PHP code. Using custom_functions.php allows you to create future-proof code that will transform the way your website looks using Thesis.

function = custom code created by you

action = placing said code into a hook

hook = a position

The basic syntax for a function is as follows:

function function_name() {
    echo 'custom html or php code';
}

Once you’ve written a function, you can then place (or “hook”)  it into any available WordPress or Thesis hook by using an Action:

add_action('thesis_hook_footer','function_name');

The finished syntax look like this:

function function_name() {
    echo 'custom html or php code';
}
add_action('thesis_hook_footer','function_name');

Once you’ve created a Function and Action, place it into custom_functions.php anywhere after the <?php

There are really no limits to what you can create using a Function and Hook!

Check out the full list of Thesis hooks and further documentation.

The default Bylines in Thesis are useful, but customizing them to meet your needs has to be done using custom_functions.php. You can turn all Bylines “OFF” in your Thesis Design Options, and by using the code below they will return.

Insert Gravatar Photo

Place this code into custom_functions.php anywhere after <?php

// Custom Bylines
function custom_byline() {
  if (is_single()) { ?> 
    <?php echo get_avatar(get_the_author_id(), 32); ?><p>Submitted <?php thesis_author(); ?><abbr title="<?php echo get_the_time('Y-m-d H:i'); ?>"> &middot; <?php echo get_the_time(get_option('date_format')); ?> <?php the_time('G:i a'); ?></abbr></p>
<?php }}
add_action('thesis_hook_after_headline', 'custom_byline');

Now style it with CSS by placing the following into custom.css

/* @Bylines */

.custom .headline_meta {
    height: 32px;
    width: 100%;
    padding: 5px 0 0 0;
}

.custom .headline_area span, .custom abbr, .custom .headline_area p {
    font-size: 12px;
    text-transform: none;
    font-style: italic;
    letter-spacing: normal;
}

.custom .avatar {
    float: left;
    margin-right: 7px;
}

Insert Gravatar Photo AND AddThis Widget

This requires the popular (and free) AddThis plug-in.

Place this code into custom_functions.php anywhere after <?php

// Custom Bylines
function custom_byline() {
  if (is_single()) { ?> 
  <?php do_action( 'addthis_widget' ); ?>
    <?php echo get_avatar(get_the_author_id(), 32); ?><p>Submitted <?php thesis_author(); ?><abbr title="<?php echo get_the_time('Y-m-d H:i'); ?>"> &middot; <?php echo get_the_time(get_option('date_format')); ?> <?php the_time('G:i a'); ?></abbr></p>
<?php }}
add_action('thesis_hook_after_headline', 'custom_byline');

Now style it with CSS by placing the following into custom.css

/* @Bylines */

.custom .headline_meta {
    height: 32px;
    width: 100%;
    padding: 5px 0 0 0;
}

.custom .headline_area span, .custom abbr, .custom .headline_area p {
    font-size: 12px;
    text-transform: none;
    font-style: italic;
    letter-spacing: normal;
}

.custom .avatar {
    float: left;
    margin-right: 7px;
}

.custom .addthis_toolbox {
    float: right;
    padding: 7px 0 0 0;
}

For more detailed information regarding Bylines and Post Meta, visit the WordPress Codex

Using basic CSS, here are some quick ways to style the footer links and text in Thesis. Of course, you can change the code attributes below to fit your needs.

Footer Links

Place this code anywhere into custom.css

/* @Footer Links */
.custom #footer a {
    border-bottom: 1px solid #CCC;
    color: #888;
}

.custom #footer a:hover {
    color: #111;
}

Footer Text

Place this code anywhere into custom.css

/* @Footer Text */
.custom #footer {
    color: #888;
    text-align: right;
}

.custom #footer p {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px; 
}

Customizing using hooks is the right way to add some life to a boring footer. All you have to do is copy & paste the code below into custom_functions.php.

Insert Affiliate Link

Place this code into custom_functions.php anywhere after <?php

// Affiliate Link
function footer_attribution() {
    echo '<p>Get smart with the <a href="http://thesishooks.com/go/thesis-theme">Thesis WordPress Theme</a> from DIYthemes.</p>';
}
remove_action('thesis_hook_footer', 'thesis_attribution');
add_action('thesis_hook_footer', 'footer_attribution');

Don’t have an affiliate link yet? Sign-up here and start earning money on referrals.

If you don’t have the developer option, then you can’t modify the Thesis Attribution Link on the footer!

Insert WordPress Navigation Menu

Place this code into custom_functions.php anywhere after <?php

// Footer Menu
function footer_html() { 
   wp_nav_menu( array('menu' => 'footer', 'menu_class' => 'menu-footer') );
}
add_action('thesis_hook_footer', 'footer_menu', '99');

Insert “Powered By” or “Designed By” Attribute

Place this code into custom_functions.php anywhere after <?php

// Powered By
function footer_powered_by() { 
   echo 'Designed by: <a href="http://link-to-my-site">123 Webdesign Studio</a> Powered By: <a href="http://wordpress.org">WordPress</a> ';
}
add_action('thesis_hook_footer', 'footer_powered_by', '99');

Insert Copyright Information

Place this code into custom_functions.php anywhere after <?php

// Copyright
function copyright() {
    echo '<p>Copyright &copy; 2008&ndash;' . date('Y') .'</p>';
}
add_action('thesis_hook_footer', 'copyright', '99');