Ever since I started to focus on Berchman.com I realized that my former “company” website, HamiltonBerchman Design Group, Inc., was no longer maintained, correct, or relevant. However, at the time I was fortunately too busy to even think about doing anything to the site.

Then one day I was doing research on a project and stumbled across a free portfolio template that stood out to me in more than one way. The template is called medifolio, by Dirk Leys who generously posted it online. I was particularly drawn to the “sliding” action when you click on a portfolio thumbnail image, and the return to the main page. There was a simple elegance to the whole thing. I looked at it and thought, “how can I do this type of page in WordPress and Thesis?” The original medifolio is a single, flat html page. How could I generate all the content, in the right order, with the right tags and syntax? I thought about it a while. A long while.

In the time since I first saw medifolio I was working on a client project requiring the listing of individual portfolio pieces, complete with images and text. It required a complete custom solution. By creatively using categories as parents I created blog posts that then occupied specific categories. I could then create custom loops to not only create a listing of the portfolio pieces at the top of the page, but I could have them link to the actual full description and image display further down the page (by using custom generated anchor links). You can see the work in action here on the website ckwrites.com. There are four custom lists generated across the top of the page after introductory text. All done within WordPress and Thesis with categories and custom page templates, and custom loops.

Since I had completed design and development of ckwrites.com I looked back at medifolio and the previous experience lent itself directly to making medifolio a reality. After some long nights tinkering with custom php and css solutions I got the basic page to work as the original static medifolio page. All the content was being dynamically generated from individual posts for each and every portfolio piece. All the tags, divs, etc. were being dynamically generated as well.

Once I had a basic working model the next thing to do was to implement. I’ve done this right now in two places where it lives, live on the Internet. The first implementation was at HamiltonBerchman Design Group, Inc.

I set out to rework, or basically remove, all the non-relevant content from the website and was left with a stripped down, single web page that tells what the current state of affairs is, and shows a sample of work that I completed in my time operating HamiltonBerchman Design Group, Inc.

Once I had this complete, I wanted to take it to another place and that was on the Dennison+Wolfe Internet Group website where I am a partner. This implementation allowed me to refine and rethink some things to how the portfolio is implemented.

I think both of these came out looking quite nice.

It will be a part of the new, upcoming Berchman.com redesign.

My next step, I think, is to clean this up, write a tutorial on how to implement this, and release it on an “as-is” basis. What does that mean? It means if you want it, download it, and figure it out.

That is what I had to do.

Let me know what you think.

I have been busy on many projects recently. What is great is I am ready to share them and the new things I’ve learned with Thesis and WordPress. My two most recent projects made me push my personal envelope of what I thought was possible within the WordPress/Thesis environment. Not that I’ve ever had any doubts, rather just plain figuring out “how the h*ll are you going to do this?“—and then doing it. So much fun.

Over the next few weeks I am going to share the projects, their scope, the questions presented, and their solutions. Not every project will go into minute detail, but I will give you enough info to maybe help you figure out how to do your own solutions to your own WordPress/Thesis challenges. I’ve noticed in the time that I’ve been using Thesis there are more and more people trying it out, and trying to do-it-yourself, which is great. I have found that its not a perfect fit for everyone but if you’re like me the fit is great and learning never ends. So stay tuned to see the projects.

Also, I’ll let the cat out of the bag and now state that I have a new website design for berchman.com coming soon (design is done and now in CSS) along with a custom portfolio solution rolled right into WordPress/Thesis. There is a fair amount of setup and labor in this process (basing things off an open-source solution), but I think the end result is clean and attractive. Thinking about doing a detailed tutorial and maybe releasing everything into the open. We’ll see what my time looks like. I’ve had very little time to write tutorials, or anything for that matter. But believe me there is lots to share and I’m hoping time will cooperate with me.

That’s it for now. Summer is here and I hope yours is going well.

I came across something while working with WordPress and Thesis that I know will help at least one person and possibly save them hours of frustration. So here is the tutorial.

I was working on a revision to a visual layout of a website I previously helped develop on the Thesis theme framework. I spent more time than I should trying to find out where the extra space between webpage elements was coming from. Was it the CSS? It had to be.

I checked the CSS using my editing tools. No extra margin, no extra padding, yet I still could not get page elements aligned the way I wanted. There was a mysterious “gap” between page elements. No matter what I tried with my CSS (other than negative margins—no bueno in this case) the gap would not go away.

I finally got smart and looked as source code—the html. Typically I get to the source code earlier in the process, but this time I thought all my issues were in CSS but they were not. The key to the solution lie inside the HTML.

I recorded the video tutorial below in hopes that it might help you. If it does, let me know in the comments.

Be sure to click on the small, 4-arrow button in the bottom right corner of the video (as shown in the graphic below) to see the video at full size. Hope this helps.

Click here to view the embedded video.

Today was a big day of sorts. I completed design and development work on new website. It is a custom designed website in form and function. It’s a significantly modified version of Thesis [ #thesiswp ] running on the latest install of WordPress (presently 2.9.1).

The site is http://www.ckwrites.com

I learned a great deal more about Thesis and what’s possible. New tools and techniques that I plan to share with the #thesiswp community in the coming months. I already have at least 4 new tutorials coming; from the simple to the complex.

I’m very happy with the results of my work with Christopher Korody, a.k.a. ‘ck’ of http://www.ckwrites.com. I’m sure he would agree that it was a tough slog but well worth the results. In fact you could just ask him.

Sometimes one has the need to create a custom, or “funky” header navigation and today is the day for me. So I thought I would document the process of what I do to help you with a custom navigation challenge.

We want to create a vertical navigation as is seen below in the previous version of the website (click the image to see full size).

There is a bit of vertical navigation that is distinct from the main horizontal navigation that is governed by the Thesis navigation controls. To do this we need to do some custom programming.

So how do we add this navigation?

This has to be “hard-coded” navigation. This means we will be using custom_functions.php and custom.css to get both the function and form of what we are after.

First thing is to get the navigation we want to add in the form of an unordered list like this:

<ul>
   <li><a title="Link to the foleypod homepage" href="http://www.foleypod.com/" target="_blank">home</a></li>
   <li><a title="A link to our portfolio" href="http://foleypod.com/portfolio" target="_blank">our work</a></li>
   <li><a title="Easy way to pay foleypod" href="http://foleypod.com/payment" target="_blank">pay bill online</a></li>
   <li><a title="See who we've made very happy" href="http://foleypod.com/testimonials" target="_blank">what clients say</a></li>
</ul>

Now that we have the list defined we need to create the function to get this list to show in the right place of the header.

Thesis function time

Before we add anything here is what the space looks like where we are going to put this navigation. The header already has a background image applied and our navigation is going just to the right of the white line.

Now we are going to create a function that will tell WordPress/Thesis to insert the navigation that we have defined above. Here is the function without the ‘guts’ of the navigation:

function custom_banner_nav() { ?>
<div id="custom_head_nav">
..........
</div>

<? }
add_action('thesis_hook_before_title', 'custom_banner_nav');

You can see that we have defined the function with the name ‘custom_banner_nav.” We have also defined a div space “custom_head_nav” so we can dial in on the guts of this function, the unordered list from before.

Now the entire function looks like this:

function custom_banner_nav() { ?>
<div id="custom_head_nav">

<ul>
	<li><a href="http://www.foleypod.com/" title="Link to the foleypod homepage" target="_blank">home</a></li>
	<li><a href="http://foleypod.com/portfolio" title="A link to our portfolio" target="_blank">our work</a></li>
	<li><a href="http://foleypod.com/payment" title="Easy way to pay foleypod" target="_blank">pay bill online</a></li>
	<li><a href="http://foleypod.com/testimonials" title="See who we've made very happy" target="_blank">what clients say</a></li>
</ul>

</div>

<? }
add_action('thesis_hook_before_title', 'custom_banner_nav');

We have the functionality now working. We upload our custom_functions.php file via FTP and we see this now:

Notice the list, ugly but functional. Now to get it in position and style it as we want it.

It’s custom.css time

First thing for me is to get rid of the bullets:

.custom div#custom_head_nav ul {
list-style-type: none;
}


Now that the bullets are gone lets get the upper left corner of this where we want it. For that we need to add margin to the left, and padding to the top (dont add margin to the top or you get an unwanted space with the graphics:

margin-left: 535px;
padding-top: 15px;


Then I add the text size. The resulting css tag looks like this:

.custom div#custom_head_nav ul {
list-style-type: none;
margin-left: 535px;
padding-top: 15px;
font-size: 12px;
}


Now I need vertical space between each line to get this dialed in. To do this I use this code:

.custom div#custom_head_nav ul li {
margin-bottom: 6px;
}


This adds margin to the bottom of each item in the list. The navigation now looks like this:

The last option

The last option I added was to put an underline to show when you hover your mouse. To do that I added the following CSS tags:

.custom div#custom_head_nav ul li a:hover {
text-decoration: underline;
}


That’s it. Simply FTP up your files and you are d.o.n.e.

Hope this helps. Let me know if you have any questions.

DIYThemes has unleashed the final version of Thesis 1.6. While the beta has been out for weeks I never downloaded it from a combination of busyness and being prudent. How many times have you been burned for being an early adopter? For me too many, so in the words of Yoda, “Patient you must be.”

Patience

I was patient and it paid off. I downloaded and installed Thesis 1.6 following Chris Pearson’s instructions to a “T” without any installation issues at all. Very straight forward and simple. However, I was surprised at a change in navigation structure. In the past Thesis has managed it primary navigation using an unordered list < ul > as it should be along with the ID of #tabs.

That has changed in Thesis 1.6. Primary navigation is managed the same way in an unordered list, but now has a class named .menu

On the surface this may not seem like a big deal, and its really not for the individual WordPress/Thesis blog owner. However, for someone like me who manages more than a few Thesis based websites this upgrade will cost time and treasure. In particular any navigation system that has been highly customized will need some care and attention.

The one small feature adjustment I really like is putting the Thesis options into their own sub-menu on the left hand side. A very nice touch.

On the whole I am very happy with the upgrade and improvements in this version of Thesis and am already rolling it out to sites I work with. In fact I need to upgrade this website but I think I will wait for the redesign before I do that. Perhaps there may be a tutorial in the future with whatever new, goodness I may find.

Over the past week I have been humbled and honored by two different websites.

The first is Alltop

Alltop is an “online magazine rack” of popular topics. They organize RSS feeds of the best websites by category. As they say “aggregate without the aggravate.” You create your own account and include the content that interests you. Here is MyAlltop.

Alltop is like Google Reader but better. You find content by topic—and the fact that the content has been vetted makes it much more valuable. Yesterday yours truly was included in the WordPress Alltop category. If you are into WordPress you must check it out—great content!

If you have never used Alltop here is a quick video explaining how the site works and how to use the service.

Click here to view the embedded video.

The second is DoubleMule

DoubleMule is a website run by The Mules and they cover all topics relating to Thesis. The Mules have a Thesis Designer Series where they review and highlight different Thesis designers. I was fortunate to get the DoubleMule Certification as at Thesis Designer.

What Else?

I have a new tutorial in the works that will come out in the next week or two and I have the next installment in A Website Realignment brewing as well.

As always I welcome your questions and feedback.