I was just beginning to wonder how on earth I was going to pull of a widgitized footer with my limited PHP skills, and then I found a three-column widgitized footer framework already complete at Fergusweb Nework. Sweet! Thank you, Fergusweb Network! Here’s their code for the custom_functions.php file:

/*
 *	custom_functions.php
 *	To provide a custom three-column widget-ready footer to your Thesis theme.
 */
// Remove the existing Thesis links from the footer
remove_action('thesis_hook_footer', 'thesis_attribution');

remove_action('thesis_hook_footer', 'thesis_admin_link');
// Add three columns for our Footer widgets
add_action('thesis_hook_footer', 'customFooter');
function customFooter() {
	?>
<div class="col Footer1">
	<ul class="sidebar_list">
<?php	if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer1') ){	?>
		<li class="widget">
			<div class="widget_box">
				<h3><?php _e('Footer Widget 1', 'thesis'); ?></h3>
				<p>You can edit the content that appears here by visiting your Widgets panel and
modifying the <em>current widgets</em> there.</p>
			</div>
		</li>
<?php	}	?>
	</ul>
</div>
<div class="col Footer2">
	<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer2') ) { ?>
		<li class="widget">
			<div class="widget_box">
				<h3><?php _e('Footer Widget 2', 'thesis'); ?></h3>
				<p>You can edit the content that appears here by visiting your Widgets panel and
modifying the <em>current widgets</em> there.</p>
			</div>
		</li>
<?php	}	?>
	</ul>
</div>
<div class="col Footer3">
	<ul class="sidebar_list">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer3') ) { ?>
		<li class="widget">
			<div class="widget_box">
				<h3><?php _e('Footer Widget 3', 'thesis'); ?></h3>
				<p>You can edit the content that appears here by visiting your Widgets panel and
modifying the <em>current widgets</em> there.</p>
			</div>
		</li>
<?php	}	?>
	</ul>
</div>
<div class="cb"></div>
	<?php
}
// Register our three new columns as "Sidebars" so they can take widgets
register_sidebar(array('name'=>'Footer1', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

register_sidebar(array('name'=>'Footer2', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

register_sidebar(array('name'=>'Footer3', 'before_title'=>'<h3>', 'after_title'=>'</h3>'));

With this code installed, you can dig into WordPress’ Widgets dashboard to drag things into your footer. You can get new widgets by installing additional plugins, or create your own widgets using the WP Custom Widget plugin. This makes it dead simple to put anything you want down there without having to edit your site code.

Fergusweb has also written a brief tutorial on how to create other widgitized areas. That’s the very stuff of excellence.

Now all that’s needed is some styling to make it all look nice. Without styling, the above code gives us three rows of widget areas, but I want to make that into three columns. Adding this to your custom.css file will give the footer some layout:

.custom #footer_area .col {
	width: 32.1%;
	padding: 0 0.6%;
	float: left;
	}

.custom #footer_area .cb {
	clear: both;
	}

Layout set, I can begin styling the appearance. If, for example, I wanted my footer to match my nav, I could add this:

.custom #footer_area {
	background-color: #000;
	border-top: 1px solid #f00;
	}

.custom #footer_area .page {
	background-color: transparent;
	}

From there, the usual styling of text, headers and hyperlinks should be in order.

To add a copyright notice, go back to the footer code we’ve just inserted into the custom_functions.php file. Towards the bottom of the code, locate this bit:

<div class="cb"></div>
	<?php
}

Replace it with this:

<div class="cb"></div>
	<?php
echo '
<div id="copyright">
<p>Copyright &copy; 2009–' . date('Y') . ' NAME. All rights reserved.</p>
</div>';
}

In Thesis 1.6 Header Customization, Part 1, I rewrote the code for the header in an effort to improve SEO for the site, and to make the header more stylable going forward. In this article, I will cover how to style your header in various ways using images. Our core code is already set in place, so for this article we will be dealing only with the custom.css file. These techniques assume you have been following along with previous articles and are using the Full-width HTML Framework.

We have a number of options in applying images to our new header. I will cover them all in this post, though I will not necessarily use all in my end design. We can insert images for various effects to the following elements:

• body.custom – the entire page background
• #header_area – the header element spanning the entire width of the page
• #header_area .page – the header element spanning only the limited width of our content
• h1 – the logo only

Each of these techniques may be mixed and matched, ultimately allowing you a great deal of control over your page design using only a small amount of CSS. I will discuss each of these separately, one piece at a time, leaving it to you to put those pieces together in your design.

For this demonstration, I’ve chosen a hideous background image from Squidfingers only because it’s free and easy to see in screen captures.

Hitting body.custom first, we can apply a background image to our entire site using the following CSS:

body.custom {
background-image: url(background_image.jpg);
background-repeat: repeat;
}

You will, of course, need to specify the correct URL to your background image. This will give you something like this:

Next, applying a background image to the #header_area element will give us a full-width background only for our header. Add this CSS to your custom.css file:

.custom #header_area {
background-image: url(background_image.jpg);
background-repeat: repeat;
}
.custom #header_area .page {
background-color: transparent;
}

Here, we must tell the #header_area .page to have a transparent background, otherwise it will cover the background graphic we’ve applied to the #header_area element. With this code, we add a background image such as the green background shown here:

Rather than making the #header_area .page element transparent, as above, we can instead add a background image by writing our code this way:

.custom #header_area .page {
background-image: url(background_image.jpg);
background-repeat: repeat;
}

This causes the background image to be limited to the width of our page content, as shown by the blue header background in this image:

For the final example, we will replace the default textual logo with a graphical logo. Rather than throwing yet another image onto the heap of patterned ugliness I’ve been building throughout the article, I’m going to remove the other backgrounds and take the page back to a blank white. Of course, you can use a graphical logo on top of any of the previously discussed background techniques; no worries there. I think it will just be easier to see the screen capture if I do away with all that.

Our textual logo is clickable and can be used to return to the front page of the blog; this behavior we will preserve with our graphical logo. Here’s the code:

.custom #header {
	margin: 0;
	padding: 0;
	}

.custom #header h1, .custom #header h1 a {
	margin: 0;
	padding: 0;
	height: 150px;	/* should be equal to the height of your logo image */
	background-image: url(logo.png);
	background-repeat: no-repeat;
	background-position: left top;
	}

.custom #header h1 a {
	display: block;
	}

.custom #header h1 a span, .custom #header h2 {
	display: none;
	}

This yields a left-aligned, hyperlinked logo image within the limited-width span of the page content. Here’s an image:

As an alternative, let’s try a full-width, center-aligned header:

.custom #header_area .page {
	width: 100%;
	}

.custom #header {
	margin: 0;
	padding: 0;
	}

.custom #header h1, .custom #header h1 a {
	margin: 0;
	padding: 0;
	height: 250px;	/* should be equal to the height of your logo image */
	background-image: url(logo.png);
	background-repeat: no-repeat;
	background-position: center center;
	}

.custom #header h1 a {
	display: block;
	}

.custom #header h1 a span, .custom #header h2 {
	display: none;
	}

In this example, we must increase the width of the #header_area .page element, allowing the h1 element to expand into that space as well. When increasing the width of the #header_area .page element, you might want to delve into Thesis’ Design Options > Fonts, Colors, and More! > Body (and Content Area) options to disable “Show interior layout borders”. The result might look something like this:

And there you have it, a plethora of ways to add images to your site and header backgrounds and logo, based on the very simple code we built into our header in the previous two articles.

Previously, I separated the site nav from the header. That leaves the header to be dealt with. First, let’s look at what Thesis does with the header by default:

<div id="header_area" class="full_width">
<div class="page">
	<div id="header">
		<p id="logo"><a href="http://blog.matthewcampagna.com">Matthew Campagna</a></p>
		<h1 id="tagline">Just another WordPress weblog</h1>
	</div>
</div>
</div>

Thesis claims to be coded with SEO at the fore of concerns, but I find myself unable to reconcile that claim with the above code. Don’t get me wrong; so far, I think Thesis is pretty brilliant. But according to my understanding of SEO, header tags weigh heavily into the hierarchy of importance on a page, and no header tag weighs more heavily than H1. In the above code, the blog title is contained within a P tag — fairly unimportant to SEO — while the tagline, “Just another WordPress weblog”, receives the star treatment.

With this in mind, my goals become two-fold. First, I need to rearrange the code such that my blog title is contained within the H1 tag and therefore receives higher consideration than my tagline by search engines; I will probably contain my tagline within H2 tags instead. Secondly, I wish to setup my header such that it will be easy to replace the text with an image at a later time, should I choose to do so.

To achieve the first goal, changes need be made to the custom_functions.php file. As documented, we know that thesis_hook_header is the hook that determines the content of div#header, and that’s all we’re going to replace. Add this to the custom_functions.php file, straightening quote as necessary:

//custom header
remove_action('thesis_hook_header', 'thesis_default_header');
function custom_header() { ?>
		<h1 id="logo"><a href="<?php echo get_option('home'); ?>/"><span><?php bloginfo('name'); ?></span></a></h1>
		<h2 id="tagline"><span><?php bloginfo('description'); ?></span></h2>
<?php }
add_action('thesis_hook_header', 'custom_header');

This custom code is so unobtrusive that you likely won’t see any change at all when you reload the page. By applying the same id selectors that Thesis already uses, styling remains within Thesis’ parameters. The hierarchy of importance for our title and tagline has been redefined, however, weighing SEO more heavily on our blog title, and the code is setup such that we can easily disappear the text, visually replacing it with images via CSS while keeping the text visible to search engines in the underlying code, again in the better interests of SEO.

Whether you intend to perform an image replacement or not, I reckon this is a better architecture for your header. In Part 2, I will go into image replacement.

Next on my to-do list is the site navigation. As I’m still coming to grips with the inner workings of Thesis, I’m beginning with code and instruction from Kristarella’s Thesis Full-width Headers 101 post. Unfortunately, this article seems to have been written with older versions of Thesis in mind and doesn’t treat the drop-down menus very nicely, and so I find myself needing to run in new directions with the ideas.

First problem, the header and the nav are contained within the same #header_area element, which makes it difficult to style them separately. This code will rip the nav out of the header and recreate it in a new element of its own, #menu_area:

//separate nav from header
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
function full_width_header() { ?>
<div id="menu_area" class="full_width">
<div class="page">
<?php thesis_nav_menu(); ?>
</div>
</div>
<?php }
add_action('thesis_hook_before_html', 'full_width_header');

Visually, the design remains the same. But if you investigate the elements by viewing the source code or a plugin such as Firebug, you will find they now exist separately in their new elements.

A brief detour into Thesis Options, accessing the Navigation Menu > Feed Link in Nav Menu and I am disabling “Show feed link in nav menu” as I intend later to place my feed elsewhere.

Also hit Framework Options > Outer Page Padding, and I’m setting this to 0.0.

And now a dash of style. I’m going to be writing some of my own CSS in the custom.css file, and leaving the rest to the Thesis interface in the interest of keeping my own additions as light as possible or, in some cases, as light as practical. Tackling the nav first, and leaving the header alone. This code overrides Thesis’ border controls in the interest of necessity, but leaves text and background colors configurable from within Thesis’ Design Options.

Add this to your custom.css file.

.custom a {
outline: none;
}

.custom #menu_area {
border-width: 0 0 1px;
border-style: solid;
}

.custom #menu_area .page {
background-color: transparent;
}

.custom .menu {
border: 0;
}

.custom .menu a {
padding: 1em 2em;
border-width: 0 0 1px 0;
}

.custom .menu .submenu a {
padding: 0.636em 0.818em;
border-width: 1px;
}

.custom #menu_area, .custom .menu {
background-color: #000;
}

.custom #menu_area, .custom .menu a, .custom .menu .submenu a {
border-color: #f00;
}

The CSS above separates padding for the main nav bar and sub-nav drop-downs so that the bars can be set to different sizes; adjust the two padding attributes above to taste. Background and border colors for the menu can be set using the two color attributes at the tail end of the code. Other colors should be set from within Thesis’ Design Options for “Nav Menu”. That keeps things simple, and I think makes for a very attractive menu with a minimal amount of code. And what we end up with is this:

Optional in Thesis is the Feature Box, which allows you to create a box in your layout for featured content. In reality, however, it just gives you an empty box to be filled as you please. I have decided to fill this box using the Dynamic Content Gallery plugin for Wordpress, which I will use to display featured content of my choosing. My reason for choosing the Dynamic Content Gallery over the pretty Feature Content Gallery is all to do with the underlying Javascript libraries. The Featured Content Gallery utilizes SmoothGallery and Mootools, while the Dynamic Content Gallery gives you the choice of utilizing either SmoothGallery (with Mootools) or GalleryView (with JQuery). Investigating the source code of my Thesis-powered blog revealed Thesis already to be using JQuery, and so JQuery is the obvious way to go here, as mixing libraries — in this case, Mootools and JQuery — is usually a recipe for bad news.

Our first stop is Thesis’ Design Options, where we will drop the Feature Box controls. For now, I am choosing for Placement “Full-width above content and sidebars”. I am also choosing to show feature box on homepage only. Save your changes.

At this point, viewing your page shows that not much as changed. Your design should have been bumped a pixel, maybe a few. This is because the Feature Box is empty. We’ll soon do something about that. If you haven’t already done so, download, install and activate the Dynamic Content Gallery.

Accessing the Wordpress Settings menu, you will now find a new item for Dynamic Content Gallery. Access this area, then scroll way down through the many options to locate option box “5. Select Javascript framework (OPTIONAL)”. Tick the radio button for JQuery and Save Options (actually, the Mootools version seems to work just fine as well, though no telling whether it will cause future conflicts with other JQuery plugins and scripts).

The Feature Box is now on, as is the Dynamic Content Gallery (hereafter, “the gallery”). We now must place the gallery into the feature box. To do this, we must utilize Thesis’ hooks.

Access the Custom File Editor in the Thesis Options, or just load up the custom_functions.php file in your favorite editor via FTP.

Paste the following code into your custom_functions.php file, straightening quotes as necessary:

//featured content with dynamic content gallery plugin
function featured_content() {
if( function_exists( 'dynamic_content_gallery' ) ) :
dynamic_content_gallery();
endif;
}
add_action('thesis_hook_feature_box', 'featured_content');

Or, you can simply add this instead, as Ade explains in the comments below:

add_action('thesis_hook_feature_box', 'dynamic_content_gallery');

Regardless of your choice above, paste this code into your custom.css file:

.custom #feature_box {
padding-right: 0;
padding-left: 0;
}

Now all that remains is to populate your new Feature Box with content according to the instructions included with Dynamic Content Gallery. When adding a post to the feature box, you will need to create two custom fields: dfcg-image, used to specify the image to display in the gallery, and dfcg-desc, used to specify the description text to be used in the gallery. You can also specify pages to roll in the gallery, which I think is particularly cool.

By default, Thesis is showing my latest few entries in their entirety on my front page. A matter of personal preference, but I would prefer this were not the case. And so I’m off to setup my front page to display only teasers of these posts.

Go Thesis Options > Thesis Options > Display Options > Posts and tick the radio button for “Display post excerpts”.

While I’m here, I’m also going to access the Change Save Button Text option, and change this simply to “Save Changes”.

Hit the save button and bear witness to your changes.

I’ve made a fresh installation of Wordpress 2.9 with the theme Thesis 1.6. I have also imported ThinkDesign’s Lorem Ipsum Test Post Pack. This seems like as good a place as any to begin. I have been using Wordpress for several months, but have not delved deep into it yet. I’m totally new to Thesis; 1.6 is the first I’ve used, and I’m finding many of the resources scattered around the web pretty out-of-date, mostly relevant to older versions of the theme.

This blog is, at this moment, nothing more than a testing ground as I attempt to wrap my head around Thesis and customize it for my needs. As I go, I will try to record my explorations here for the benefit of others. This may or may not end up being useful in the end.

Because I’ve read good things about doing so, my first act is to delve into Thesis Options > Design Options > Framework Options > HTML Framework and to set this to use the Full-width Framework.

I then abandon Thesis for a time, get into Wordpress instead. Settings > General is my first stop so that I can double-check my URLs and setup my time-zone.

Using my FTP client, I then access the root of my site to create a .htaccess file. To do this, I setup my FTP client to show invisible files, then create a new file named “.htaccess”. I use the Get Info command to set file permissions to 666, not because I’m a Satanist, but so that Wordpress will be able to access the file to make changes as necessary.

Back in Wordpress, I access Settings > Permalinks, where I set Common Settings to “Month and name” because it’s my personal preference for permanent URL structure for my posts. When I save these settings, Wordpress will update the .htaccess file I have already created.

I next access Wordpress’ Plugins area. First, I want to delete the Hello Dolly plugin that comes pre-installed with Wordpress, because — let’s face it — it’s stupid. I want Akismet enabled, so activate and configure that either now or later; it really helps to mitigate spam. And now I install what I consider to be a few core plugins: Contact Form 7, No Self Pings, Subscribe to Comments, WP-reCAPTCHA (the other half of spam prevention) and WP Custom Widget.

And that’s basically where it stands at the moment. Things to be done between now and next time: setup the contact form using the Contact Form 7 plugin, enable and setup the reCaptcha plugin, setup Akismet.

This is a left-aligned image. (With NO Padding) Lorem ipsum eu usu assum liberavisse, ut munere praesent complectitur mea. Sit an option maiorum principes. Ne per probo magna idque, est veniam exerci appareat no. Sit at amet propriae intellegebat, natum iusto forensibus duo ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.

This is a right-aligned image. (With NO Padding) Sea stet iudico cetero cu, ut mei ferri mnesarchum, at duo enim vivendum abhorreant. Usu eruditi veritus vivendo ut, ut cibo lucilius inciderint eam, ne hinc discere explicari sea. Nam iusto delicata ne, eam dolore singulis maiestatis ex. Cu eruditi dolorem accusam pri, ea vidisse aliquip forensibus eam, ut erant labore fastidii has. Cum quod saepe periculis ea, eos iuvaret maiorum moderatius eu, pro ferri scaevola mnesarchum ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.

Block Quote:

Amet blandit scripserit sit id, ea vim mollis oportere postulant. Nostro suavitate intellegam id mei, mea ex agam quodsi complectitur. Cu eos nibh justo philosophia, no pro velit suscipit philosophia. At est dicit instructior, viderer minimum conceptam no nec, te nec dicta iusto legendos. Duo ex velit vocibus, lucilius quaestio his eu. Cum falli aeterno delicatissimi et, elit justo epicuri has ut.

This H1 Header Style. Just a Sample.

This H2 Header Style. Just a Sample.

This H3 Header Style. Just a Sample.

This H4 Header Style. Just a Sample.

Here is a couple of links, and how they will looked linked in text. This how bold will look in text, and italic in text, and underlined text.

Here is an ordered list:

News
Entertainment
Sports
Music
Graphic Design
Comedy

Here is an unordered list:

News
Entertainment
Sports
Music
Graphic Design
Comedy

Lorem ipsum eu usu assum liberavisse, ut munere praesent complectitur mea. Sit an option maiorum principes. Ne per probo magna idque, est veniam exerci appareat no. Sit at amet propriae intellegebat, natum iusto forensibus duo ut. Pro hinc aperiri fabulas ut, probo tractatos euripidis an vis, ignota oblique ut nec. Ad ius munere soluta deterruisset, quot veri id vim, te vel bonorum ornatus persequeris.

Sea stet iudico cetero cu, ut mei ferri mnesarchum, at duo enim vivendum abhorreant. Usu eruditi veritus vivendo ut, ut cibo lucilius inciderint eam, ne hinc discere explicari sea. Nam iusto delicata ne, eam dolore singulis maiestatis ex. Cu eruditi dolorem accusam pri, ea vidisse aliquip forensibus eam, ut erant labore fastidii has. Cum quod saepe periculis ea, eos iuvaret maiorum moderatius eu, pro ferri scaevola mnesarchum ut.

Here is an bigger image in a post with no image alignment:

Nisl malis veritus pro no, pro an enim admodum mediocritatem. Ei his graeci option officiis, no oratio vocent efficiendi vix. Eu prima eleifend volutpat ius, mel atomorum omittantur te, quo debet possim habemus no. Et eum aliquip iuvaret dignissim, dicant epicurei vituperata vim eu. Usu dicunt verear deleniti te.

Amet blandit scripserit sit id, ea vim mollis oportere postulant. Nostro suavitate intellegam id mei, mea ex agam quodsi complectitur. Cu eos nibh justo philosophia, no pro velit suscipit philosophia. At est dicit instructior, viderer minimum conceptam no nec, te nec dicta iusto legendos. Duo ex velit vocibus, lucilius quaestio his eu. Cum falli aeterno delicatissimi et, elit justo epicuri has ut.