Building a Site Like This With WordPress and Thesis

How fitting for a first post to be self-referential. In the last few days I’ve gone from going from knowing nothing about WordPress and Thesis to putting this site together.  Although you may surmise I still know  nothing about WordPress and Thesis, we all start somewhere.  I didn’t figure any of this out for myself from scratch – I had plenty of help.  One of the best reasons for choosing WordPress and Thesis is that there are a ton of sites out there that can walk you through every inch of the  setup and customization process.  I’ve come across good ones and bad ones.  Here I want to share a few tidbits about using Thesis because while the WordPress part of setting up the site was quite straightforward, not all the tips I found on Thesis were so helpful.

Thesis at it’s basic install settings is quite a pretty theme.  But I was looking for something more specific – very minimalist with a few visual features.  First off I decided I wanted a nice grey bar at the top of the page.  I like grey, easy color to match – nobody ever clashes with grey, I’m wearing a grey t-shirt right now.

Going Full Width - http://www.artofblog.com/the-ultimate-visual-guide-to-the-thesis-full-width-framework/

This page was fabulously helpful, explaining the specifics of what Thesis does in full-width mode – and offering detailed CSS examples.  It also shows how to move the navigation from above the header to below, which was another thing I wanted for my design.

Color Adjustments and other Touch-Ups to the styling

Pretty easy to change around the header, link colors etc.  Don’t need to explain that.

Wigitizing the Footer – http://www.kristarella.com/2008/11/thesis-footers-101/

Next, I wanted to get rid of the boring footer and add another wigitized area to the page at the bottom.  Found this site which has a gem hidden in “Comment 151″.  It worked perfectly.  A few other sites explaining how to wigitize the footer area had incorrect suggestions and caused me innumerable problems.  Here’s the basics:
In your custom_functions.php:

register_sidebars(1,
    array(
        'name' => 'Footer',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);
function custom_footer() { ?>
	<div id="footer_1" class="sidebar">
		<ul class="sidebar_list">
			<?php thesis_default_widget(3); ?>
		</ul>
	</div>
<?php }
add_action('thesis_hook_footer', 'custom_footer', '1');

Then in custom.css:

.custom #footer_1 {text-align:left; color:#333;}
	.custom #footer_1 ul.sidebar_list li.widget {width:23%; margin-right:2%; float:left;}
		.custom #footer_1 ul.sidebar_list li.widget h3 {color:#222;}
		.custom #footer_1 ul.sidebar_list li.widget a {color:#444; border-bottom:0;}
		.custom #footer_1 ul.sidebar_list li.widget a:hover {color:#111;}

That’s the code straight off the page, however, I modified the CSS slightly for my site – changing the link & hover behavior.

Google Search Integration – http://www.berchman.com/wordpressthesis-tutorial-custom-google-search-engine/
This is a great walkthrough of integrating Google Custom Search into WordPress.  It could probably use a little more work in altering the CSS to more closely match the colors I’ve chosen, but it does the trick.  not that there’s a whole lot to search on the site yet.

More to come later…