I knew about this video a while back when it was in production. I had read about it somewhere in an RSS feed, or was it Twitter?, or Facebook?, or LinkedIn?… anyhow I did know that this video was being created. Day before yesterday Seth Godin brought it to back to my attention. I took some time to watch the entire video and was really struck by these people who were handed the “pink slip” and in turn made something come of it. Each person has their own story, and you have the power to write the ending.

Watch this. If anything it will get you thinking.

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.

I’ve been meaning to publish a post like this for a while. The irony of that combined with the topic is not lost on me and I find quite priceless. Have a look+listen and let me know what you think in the comments below.

Do you publish? or Do you wait?

Click here to view the embedded video.

I’ve been remiss in updating the blog. This is for various sorted reasons. Suffice it to say that I am back. Here is a video to help catch up.

Click here to view the embedded video.

I was sent this information graphic today and was struck by how effective it is. There is something that resonates with me.

It puts your brand at the center of the page and graphically shows you how everything encircles and supports said brand. The guys at the site provided this fantastic embeddable graphic below for you interactive pleasure and I just had to share.

This next phase of the overall Re-Alignment of Berchman.com as I stated in my first post for this project is to “define purpose, guiding principles, and desired outcomes” with this website.

Note: I am working on this project when it fits between client work, and posting when I can. I have not posted in a while because work has picked up a bit. However, I have no plans of abandoning this effort. Stay tuned!

By going through this ‘exercise’ I’ll also be constructing the map of my content. The map of content consists of what I write about on this site, the topics I cover, and the overall taxonomy of the web site in general.

Define Purpose

• Primarily to share things I learn and in turn learn from others.
• Secondarily it is a personal chronicle.

Guiding Principles

• I want to keep it honest, real, and fun. Pretty simple really.

Desired Outcome

• There are actually many. Instead of pontificating I will suffice it to say ‘successful‘
• Success would mean helping you, having readers, comments, and new clients to work with

How does this now impact my content map?

By knowing the definition of these three it helps me understand content requirements. What types of content are required on the website in order to meet the above needs?

• WordPress/Thesis Tutorials
• Video (Tutorials and Misc.)
• Writing on other topics

Presently there are 22 categories on this website. That is way too many for this size of a website. When reviewing the 22 I was able to narrow it down to 5 categories going forward

1. Articles/Features
2. Tutorials
3. WordPress
4. Thesis
5. Video

All my other categories were really misused ‘tags.’ Over time, in moments of hasty thinking, they accumulated and became more fractured. The remaining 17 “categories” are really “tags.” This is because they are classifying information within the content, not the content itself. Here is an excellent article articulating the distinction.

When I implement the website realignment I am going to remap those present “17 categories” and move them to tags and validate the members of each redefined category title.

Main Navigation

In addition to the dynamic content (blog posts) that evolves over time there are other content areas:

• Home
• Hire Me
• Pricing
• Contact
• Résumé
• Who is Berchman?

Tthere are also a host of other links; RSS, Twitter, LinkedIn, Facebook, etc. on other areas of the page. In order to simplify and streamline I am going to reduce the number of main navigation elements from 6 to a simple 4. I do this by adding smart subcategories.

The resulting navigation will be:

• Home
• Hire Me
  • How we work together
  • Pricing
  • Form to start the process
• About Me
  • Résumé
• Portfolio
  • Visual Examples
  • Client List

As always things change so I will remain flexible. I do think that this new structure—once visually in place—will be serve information better to you the visitor.

As always I appreciate your feedback, thoughts and input. Let me know what you think.

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.