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.

Today I was reflecting upon a common occurrence among people that I talk to with regard to their website(s).

The people I talk to either want a new website or they have one and want to update/add/delete a design or function of the site. These conversations either happen through email or in person and become a dialogue of  back-and-forth brain picking. They ask how they can do “X, Y, and Z” and I then ask questions relating to strategy, objectives, and outcomes. These are great conversations, and I love having them to figure out what it is people are doing, and how I can help them out.

How Much?

One thing all of these conversations have in common is the inevitability of talking about “how much?”

My favorite conversation starter is, “How much will it cost me for a new website?” That is like walking up and asking a housing contractor how much will it cost you for a new house? Without sufficient background, Q&A, and discovery process to understand what your goals are, you can’t get an estimate for a house that  meets your wants and needs. The same is true for websites.

Why can’t you give me an hourly rate?

No matter how menial the task I always approach projects from an estimate perspective. Each project and set of circumstances is different in the world of web design and development:

• different servers
• different programming languages
• different databases
• different strategies + objectives
• different desired outcomes

Different variables can and will produce different results and require varying expertise. So the question of “What is your hourly rate?” is a pointless exercise. How will giving someone who is not educated in the nuance of how I, or any seasoned web professional, approaches a particular solution give them the wisdom to say, “I know that the CSS work for this project will take ‘X’ hours and he charges $100.00 an hour so it should cost me $XXX.XX.”

The estimate is too much

At some point clients would like an estimate based on a set of tasks to be performed, to achieve a certain objective, and have it all done by a specific date. For good, honest, respectable work the world of web design and development it is not inexpensive.

There is an old saying I love to repeat whenever someone comes back to me on an estimate.

You can have it cheap, fast, or good—now pick 2.

Don’t get me wrong everyone wants a bargin. I want a bargain. But, if you are looking for expert work and consulting it is not inexpensive. However it is worth every penny!

But really? Is the estimate too much?

Some of the people that receive an estimate from me will decide to go another route and not work with me. That is their right, and I wish them all the best luck and good fortune in the world. I have not one drop of animosity towards anyone who choses another path.

However, I have had a few people come back to me a few months later for some of the following reasons:

• Your estimate was considered too costly so I went with the cheapest one, what a mistake. A complete unprofessional.
• I found out that my cousins kid, who is in high school, isn’t as good at computers as he claimed to be.
• I wanted to figure out how to do this all myself, what the hell was I thinking?

All of these are real experiences I have had with clients who have come back to me after my initial estimate and proposal to them. The one I find most interesting is the last one. Let me explain.

Many entrepreneurs are self-starters and do-it-yourselfers. They like to learn and do things themselves. Sometimes when they receive an estimate from me based on their needs and requirements, either there is a bit of sticker shock or their budget can’t bear the weight so they decide to take things on themselves. For the sake of argument I will use the following example to illustrate what I am talking about.

I produce an estimate based on the scope and objectives the client and I agree on. That estimate is $5,000.00. That price includes complete deliverables; all files, graphics, and coding. When I am done with the project it will work as intended and be set to meet the objectives we have outlined.

The prospective client, for whatever reason, decides not to work with me (as I said which is fine). This experience is not unique to me and happens to all web design/developers. The potential client decides that in order to save money they are going to do this themselves.

A project that may take me 50 hours to complete will take a prospect who knows nothing of designing or developing a website a factor of 5 times as long to achieve the same results (this is extremely optimistic because most people will take longer). So in this case we are talking 250 hours of their time.

That is 250 hours they can spend working on their business, the things they do well, and on making money.

For the continuation of illustration lets say that prospective client charges $50 an hour for their professional time.

250 hours x $50 = $12,500.00

Granted not all of those 250 may not be true billable hours so lets say that 60% of those hours are. The other 40% went to business development. That still provides you with $7,500.00 of income.

You have:

• made enough to pay for your website
• gained new clients that could provide additional business
• have moved your business along to meeting its objectives
• got your website done 200 hours sooner
• and made money!!

My final point

My final point is that when it comes to designing and developing your website, no matter what,  you are paying the price one way or another. In terms of being efficient and using your talent, time and money effectively you need to take a moment and think about your approach to your website.

Hope this helps.

I was having a discussion yesterday about the specifics of what I do for a living. I typically give very generic answers as I think most people don’t really care they are just trying to create polite conversation. However this time the person I was speaking with was genuinely curious and was digging deeper with more questions.

Explaining the intricate details of web design and web development to the laymen can be an interesting exercise. Anytime I try to explain something I know intimately, I have the best success using metaphors.

In my conversation I mentioned that I use Thesis to help develop websites. I had to think of a way to explain how Thesis works. For the uninitiated, Thesis is a WordPress template framework. WordPress is a free and open source blog publishing application. What I was trying to explain is how Thesis works with WordPress and what you the visitor experiences on screen.

My metaphor for this is the peanut M&M.

The core of a peanut M&M is solid, stable mass. WordPress is a solid, stable mass.

On the outside–what the world sees–is the candy shell. You, the visitor, see and experience the candy shell. If you never crack the shell you never see what is inside and for 99.9% of website visitors they never see inside the shell.

Designer’s can change the appearance and color of the candy shell to suit anyone’s needs. But to bind the beautiful candy shell to the peanut you need something in between, the chocolate. Just as with any design applied to WordPress you need something in between, a template framework, and for me its Thesis.

The chocolate is the sweet, creamy goodness that binds the peanut to the candy shell. The chocolate is consistent time and time again. Thesis is the chocolate. (and to carry the Metaphor one more level does this make @pearsonified Willy Wonka or an Oompa Loompa?)

OR

So when I used this metaphor to explain how I use Thesis to design and develop with WordPress the light bulb went off. They “got it” immediately.

So if you design and develop with Thesis and WordPress and in the course of conversation someone asks you “what do you do?” you can share with them this timeless metaphor of how Thesis is like a peanut M&M.

Hope this helps.

One of my frustrations when developing WordPress websites (separate from Thesis) is trying to have a “coming soon/under construction/under development” page so that the public gets the message that things are coming while I and the client can work away in the background. Why would you need this? Well in most cases you have a domain name purchased and parked somewhere. Many times you get a lovely, unsightly, generic ‘coming soon’ page that looks very unprofessional.

This tutorial is for people who use Thesis, however you can use this technique for any WordPress website under development where having a custom design is needed right out of the gate.

What are the benefits?

• Design and develop website with a single install of WordPress
• No need for an index.html page to hide your WordPress site under construction (this creates preview hell with clients)
• No need to move any files when you are ready to “turn on” the website
• Allows authorized people to add/edit/delete content in the WordPress admin interface while the design is underway
• Allows authorized people to see the progress of the website overall without the public seeing anything

I can hear some of the purists already set to put me on the stake and burn me for suggesting the use of an “under development/construction” page citing that “one should not publish a website until it is ready for public consumption.” However, when dealing with WordPress, or any database driven website, moving databases, encoded URL’s and all the supporting files around to different directories can be laborious and create the opportunity for errors when you are ready to launch—at that stage of the process who needs more work! Not me.

What if you want to allow others (clients, etc.) access to the WordPress install so that they can start entering content while you are busy getting customizations (GUI, plugins, etc.) dialed in for prime-time? What can you do?

I have an answer that I came across today while working on a friends website and I am sharing the process in this tutorial.

What we needed on this website project was:

1. A “coming soon/under construction/under development” page for public consumption
2. Access to the wp-admin area for me and my friend (client[s])
3. Ability to preview the custom design online that looks entirely different from the “coming soon” page with both viewable
4. Ability to navigate the entire “in-development” website without having to go to another web-server
5. Ability to install everything (WordPress, Thesis, Database) initially and leave it there when the website goes live
6. Ability to make the website go live in less than 3 minutes when we are ready to “turn it on”

We’ve done all of the above and it is relatively simple to do.

What you will need to complete this tutorial?

1. WordPress already installed
2. Thesis already installed (optional)
3. WordPress admin access
4. FTP access
5. A WordPress plugin called Theme Test Drive
6. A “coming soon/under construction/under development” page for public consumption that you can upload via FTP

First Step—Creating your “coming soon” page

You should first open your “coming soon/under construction/under development“ page in an editing program. You want to add the following to the top of this file before any html:

<?php
/*
Template Name: Placeholder Page
*/
?>

• The rest of the file should contain whatever message/graphics you want for public consumption.
• Be sure that all css/styling is within your file
• Be sure to save the file [name].php, for me its placeholder.php, or temphome.php
• Upload this file via FTP to: ~/wp-content/themes/default
  • This is the default theme folder that comes with WordPress when you install, if you don’t have it, get it.

Second Step—Install theme plug-in

Download and install the Theme Test Drive plugin from Vladimir Prelovac to your WordPress plugins directory. If you need help with downloading, installing and activating plugins go to the source at WordPress.

Third Step—Creating the placeholder page in WordPress

Create a new page within WordPress. Give it a title–I called mine “Placeholder” and in the content area I entered, “This is a placeholder page. If you want to go to the actual homepage click here.”

I make the text “click here” a hyperlink but only give it the “#” sign for now (to link nowhere) until we deal with the homepage redirect which we will do in the next step.

Before you save the page go to the right side of the page, the right sidebar, to the Attributes to change the Template from the “Default Template” to “Placeholder Template” and then click Publish. This will ensure that the correct page is showing.

Fourth Step—Making the placeholder page the ‘homepage’

In this step you will make the page you created in the previous step the homepage. This is so it will be viewed to the public as the “coming soon/under construction/under development“ page.  Go to the Settings/Reading in admin. Under the Reading settings you want to select the radio button next to “A static page (select below).” Then from the pull-down menu next to “Front Page” select Placeholder page.

Fifth Step—Setting up the development theme prefs

Check the theme setting and set Theme Test Drive preferences. Navigate to the Appearance sidebar options, and select Themes. Now select WordPress Default as your theme option. You are doing this so that the public at large sees the placeholder page.

Next navigate to Appearance/Theme Test Drive in the sidebar.

You want to select the theme you are developing or customizing. In my case this is Thesis. If you are not using Thesis then select the theme you are working with, or customizing.

Sixth Step—Setup the ‘real’ homepage

Create a new page in WordPress. This new page should be the real homepage that you are going to use in your design and development process. This page will be the homepage once the website is “live.” Be sure to take note of the permalink you give the page so that you can go back to you placeholder page and insert the link to this page from your placeholder page. This will allow you to easily get to the real homepage when you are developing the new website.

Why can’t the public get to your real homepage?

People may only be able to access the placeholder page with the homepage link if you are signed into WordPress in the admin role (which you can setup when you setup the Theme Test Drive setup). You may set whatever level of access that you desire. The key is being logged into WordPress admin area. If you are not logged in, cookies are not set, and you get the “coming soon/under construction/under development” page. If you are logged in you get the placeholder page with the link set to the real homepage (remember that permalink I mentioned previously).

Seventh Step—Edit your placeholder page

Return to edit your placeholder page you created in the Third step. When the content of this page is editable you want to change the target link of the “click here” text to the permalink you have from the previous step. Highlight the link and click the link icon from the toolbar to then paste in your permalink. Be sure to click the “Update Page” blue button on the right.

Eighth Step—Taking a peek to see what you got

You should now be able to look at the homepage of your website and ‘see’ if you are looking at your “coming soon/under construction/under development“ page. And you should be able to see the placeholder page as well. You need to know the following distinction:

• If you are signed into the admin area of WordPress and use that browser to look at the site you will see placeholder page.
• If you use a browser that is free and clear of the WordPress admin area then you will see the “coming soon/under construction/under development“ page

The trick is this.

1. In a separate web browser tab, while logged into WordPress, go to the URL of the website in development.
2. You will see the ‘placeholder’ page.
3. Then return to the WordPress admin area and click ‘logout’ in the upper right corner.
4. Now return to the tab containing the development website and click refresh.
5. Voila! you now see the “under development/construction/coming soon” page.

Ninth Step—(When the time comes) Switching to the live website

At some point your website is going to be ready for primetime and you will want to make it “live.” To achieve that do the following

• Go to the Settings/Reading in admin
• Then from the pull-down menu next to “Front Page” change it from placeholder page to your home page
• Go to Plugins and deactivate Theme Test Drive
• Go to Appearance/Themes and make sure the proper theme is selected
• You should now visit http://www.yourwebsite.com and see your finished work

Wrap Up

This should do the trick.  As always I hope this tutorial is of benefit and let me know if you have any questions or comments. Always know that others may not understand what I believe to have explained clearly. Also, if you have an alternative take on a step or process I welcome your input.

Hope this helps.

UPDATE: July 7, 2009

Laurie recently posted a comment below about a plugin called Maintenance Mode. For those of you developing inside the Thesis world using this plugin is the way to go. In particular the ability to select “custom template” from the page template menu is key. With my tutorial outlined above it is a workable solution in Thesis but requires some additional hoop-jumping if you are using custom page templates and custom sidebars (as I typically do). See Laurie’s comment below to get Maintenance Mode going. Hope this helps.

One of the things I learned from creating multiple custom page templates within the Thesis framework was how to create and modify sidebars. WordPress and Thesis provide you with a simple an effective way for implementing sidebars on your website with the use of simple syntax, options, and widgets. However beyond the basics you may have the need or desire to have different sidebar options for different types of pages.

Depending on how you’ve setup and defined your website, you may want specific items to appear in sidebars for different pages. You may want a sidebar that doesn’t contain anything the default sidebars display. The way Thesis and WordPress work “out of the box” limits your options because you only have 2 sidebars.

With this tutorial your sidebar options are limitless and the boundaries are defined by your needs.

Before I go much further if you are really new to using Thesis and customizing it you should read my little primer from my first Thesis tutorial before going further.

The Table of Contents If You Please

I will explain how to do the following:

1. Define and implement your basic, baseline sidebar(s)
2. Define and implement a custom sidebar for a specifc page or pages to show instead of the default sidebar(s)
3. Define and implement a custom sidebar to show with any default sidebar

Between these three options you WILL be able to mix-and-match and create sidebar options that will work for your needs. If you plan ahead, think it through, code, test, code, test and test again you will get it to work.

Here we go.

Basic Sidebars

Once you have Thesis installed you will want to proceed to the Design Options it offers you. It is here that you will define the basic, or core, page layout that all pages and posts will inherit. Anything NOT customized inside of custom_functions.php or custom.css will take on the layout you define in this area.

Once you have logged into your admin area you will want to go to the left-hand sidebar to Appearance/Design Options. Once the page has loaded you should see Site Layout options in the second column as seen here:

• You need to first select the type of layout that you would like to use—be it 1, 2, or 3 columns.
• Once you have selected a 2 or 3 column option in the pull down menu, you immediately will be presented with options.
• You will need to enter a width for your content column and specify a column order for your baseline design in the panel pictured here…

• Once you have made your selections you next need to populate your sidebars with the specific widgets you want to use. If you are unfamiliar with widgets check out the information straight from the WordPress source.

That’s all that is needed to activate and “install” your basic, default sidebars. This gives you a baseline to work from.

Next we will talk about custom sidebars.

Testing for Specific Pages and Inserting Sidebars

What if you want a custom sidebar, or you have a custom page template and want the standard sidebars? You may want specific content in a sidebar on a specific page, sets of pages, or specific categories in addition, or instead of the default sidebars.

If this is the case then here is the deal.

You will need to open up the file custom_functions.php file that resides here:

~/wp-content/themes/thesis/custom/

You are going to write a function that tests for the page or category, pulls in your content, and renders your sidebar how you like it.

You need to:

1. name your function
2. test to see if the page or category matches the criteria
3. if so, then render the page/category content
4. THEN render your custom sidebar(s)

You can see an example here where I test for a page with the name “press” which also has a page ID of “512″

/* CUSTOM SIDEBAR TEMPLATE */

function custom_sidebar_01() {
if (is_page('press') || is_page('512')) { ?>

<div id="content">
<div class="post_box">
<div class="headline_area">
	<h2>Your Headline</h2>
</div>
...This is where your content goes...
</div>
</div>
<div id="sidebars">
<?php thesis_build_sidebars(); ?>
</div>		

<?php } }

remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
add_action('thesis_hook_custom_template', 'custom_sidebar_01');

There is a call in the code above:

<?php thesis_build_sidebars(); ?>

This php line above is what builds the default sidebars you setup in the first part of this tutorial.

Any Combination of Sidebars

What if you want…

• one of the default sidebars to show with a custom sidebar?
• a custom sidebar with no default sidebars?
• define any number of custom sidebars for any number of custom pages or categories?

There are two key things you will need to accomplish any of the above:

1. Define a custom sidebar in custom_functions.php
2. A plugin that allows you to use widgets in more than one sidebar

Defining a custom sidebar in custom_functions.php

I will admit that I did not create the following masterful stroke of coding. The kudos for that goes to Kristarella. I was in the DIYThemes forums working on helping with some custom page templates and the question came up about adding additional sidebars. Kristarella jumped in and provided some help.

To create a third, fourth, fifth sidebar (you can create as many as you like using this coding) you need to first register the sidebar. Be sure you are working inside of custom_functions.php

/* CUSTOM SIDEBARS */

register_sidebars(1,
    array(
        'name' => 'Sidebar 3',
        'before_widget' => '<li class="widget %2$s" id="%1$s">',
        'after_widget' => '</li>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    )
);

You can repeat the above code replacing “Sidebar 3″ with “Sidebar 4″ etc.

Once you have defined the sidebar(s), the next step is to implement it in a page, category, or post. To create a custom function that tests for a specific page, category, or post I recommend checking out my previous tutorial Multiple Custom Page Templates.

You should plan out exactly what you are after before fussing with code.  For the sake of this tutorial I have coded my custom_functions.php file to display a custom sidebar 3 which contains a specific comment, a yellow background, and calendar. The new custom sidebar 4 which contains aspecific comment and twitter comments.

You can tell if I have done this correctly by looking at the sidebar on this test page. The sidebars will be different from every other page on this website. Coolness.

The full function to test and implement custom sidebars

I first defined the third sidebar as the code above suggests. Next I created a function that tests for this specific page inside of custom_functions.php.

In the function I created I call for the page content, and call for the custom sidebars I defined previously, sidebar 3, and a new custom sidebar 4. Then I make the call for the custom template to be implemented.

/* TEST FOR SPECIFIC PAGE FOR SIDEBAR TUTORIAL */

function custom_sidebar_01() {
if (is_page('sidebar-3')) { ?>
<div id="content">
<div class="post_box">
<div class="headline_area">
	<?php the_title('<h1>', '</h1>'); ?>
</div>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
			<div class="format_text">
				<?php the_content( ); ?>
			</div>
<?php endwhile; ?>
<?php else : ?>
	<h2>Not Found</h2>
	<p>Sorry, but you are looking for something that isn't here.</p>
	<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>
</div>
</div>
<div id="sidebars">
<div id="show-only-3-and-4">
<?php sidebar_3(); ?>
<?php sidebar_4(); ?>
</div>
</div>
<?php } }
remove_action('thesis_hook_custom_template', 'thesis_custom_template_sample');
add_action('thesis_hook_custom_template', 'custom_sidebar_01');

Once the sidebars are working you will need to setup styling to make the sidebars have the proper width and floats to get the sidebars to behave in your layouts. In my case this is the CSS I used to get the results on this page.

div#sidebar_3.sidebar, div#sidebar_4.sidebar {
	width: 217px;
}

div#sidebar_3.sidebar {
	float: left;
	background-color: yellow;
}

div#sidebar_4.sidebar {
	float: left;
	background-color: silver;
}

A custom sidebar with a standard sidebar

In order to have one of the default sidebars show up with one of your custom sidebars you only need to change what sidebars you are calling. For example in the following snippet of code you can see how to do it by calling for the custom sidebar 3 and the default sidebar 1. To call the second sidebar you would change the number 1 to number 2.

<div id="sidebars">
<?php sidebar_3(); ?>
<?php thesis_sidebar_1(); ?>
</div>

What about that plugin?

There is a plugin I used in combination of creating the custom sidebars because in the current model of WordPress default behavior is that you can only use a widget once in all sidebars. So, I use a plugin called “Widgets Reloaded” that allows me to reuse a core set of widgets across all sidebars. Take a look and give it a go.

Wrap Up

From the outlined code above you may see how it is now possible to create as many custom templates as you like and get the look and function you are after. Hopefully this tutorial will get you started on the right track.

Hope this helps you.

I have been working within WordPress for a few years and with Thesis since the start of 2009.

Recently I upgraded my version of Thesis to the latest ‘stable’ release, verison 1.5. I had been running version 1.4.2 just fine and had been playing around with some of the beta versions too. However, somewhere along the way things got a bit “mucked up.” My teasers were not showing on my website.

I had been writing a new tutorial for unlimited custom sidebars and ran into this issue that got me sidetracked. I thought the experience would be good to chronicle and publish as a tutorial. So if you ever need to “clean out” your Thesis install but want to keep all your settings in place, this is the tutorial for you.

What Was The Deal?

I wanted to use the ‘teaser’ function in Thesis and when I tried I would get the following error showing up on my home page wherever a ‘teaser’ should show:

Warning: call_user_func(thesis_teaser_1) [function.call-user-func]: First argument is expected to be a valid callback in /home/4395/domains/berchman.com/html/wp-content/themes/thesis/lib/functions/teasers.php on line 65

Needless to say this was a bit frustrating. Whenever things don’t just work it’s a pain.

First thing I did was to re-download Thesis and do a clean install. This did not help. Still had the errors.

I changed my theme to the default and back to Thesis, still no luck.

I went to the superb Thesis forums and was able to get the help of kingdomgeek, the Thesis OpenHook creator, who got me off on the path that provided my solution.

So What Did You Need To Do?

It was an easy solution once I figured it out. I needed to delete the entries in my WordPress database that pertained to Thesis.

You need to have access to your database. I use an application called PHPMyAdmin that allows me GUI access to the database.

Most webhosting companies have a tool that will allow you to access and edit your database.

Disclaimer!

One caveat. This procedure is not for the faint of heart. If you are not comfortable mucking around in a database then I suggest getting in touch with someone who is. You may be able to send these instructions to your webhost and have them do this for you. Again, if you have any doubts, don’t say I did not warn you!

What’s Next?

There were a total of four entries I deleted from the “‘wp-options’ table in my database.

1. thesis_options
2. thesis_design_options
3. thesis_widgets
4. thesis_widget_subscriptions

In your case I believe you will not see the ‘widget’ entries:

First step was to login to admin, go to design options for Thesis and open that in a new browser tab. I then opened Thesis options in another browser tab. This way I could see all of my current settings. (Do NOT close these tabs!! You will need them open to retain memory of your settings).

Once that is done I then go to themes and activated the WordPress default theme. I then confirmed that I had that running by visiting my live website.

Not showing Thesis? Good, proceed.

Then I log into PHPMyAdmin to manage my database . I went to the WordPress database . Then to the table wp_options.
Then browse the table by sorting the option_name(s) so that all the thesis_[name] options show up together. I checked the boxes then clicked the red “X” button and deleted those DB entries.

After that I went back into “themes” and activated Thesis. Visited the blog to confirm that Thesis is indeed running. Yes!

Then I went back to Thesis options and compared the new options page to the previous settings I have opened in the tab from the beginning. I went through step-by-step and re-activated all the settings as I had them previously. I then repeated the process for the “design options” tab as well making sure that all the checkboxes and pulldown menus matched what I had previously.

Everything checked out as it should and I am now running properly. I now have my teasers and features showing as they should.

Hope this helps.

One of the tools that I use is Chris Pearson’s fantastic Thesis WordPress theme framework.

In an effort to contribute back to both the Thesis and WordPress communities I have documented how to embed the Next-Gen Gallery plugin to your header, or banner image and place your logo above it. This functionality allows you the ability to have your banner image change how you like it beneath your logo at the top of your website.

Why Would You Want To Do This?

If you would like a variety of images in your header beneath the logo/type and manage them in a central location. Once the initial programming and configuration are setup it’s all image management after that.

You may have clients that would like the option of changing their header image on their own and this gives them that option.

Things you will need to perform this tutorial:

• WordPress
• Thesis (optional. You can do this without Thesis but we are using it here)
• Next-Gen Gallery plugin for WordPress
• Photoshop (or other image editing software)

First Things First

You will need to have WordPress, Thesis, and Next-Gen Gallery (NGG) installed before proceeding.

Dimensions

Once everything is installed we are ready to go. First you will want to determine the size of your image, or header. What is that dimension in pixels? You will need this for both creating the image and for settings inside of Next-Gen.

Once you have the width and height of your header determined it is time to create/optimize your images that you intend on using. For our purposes of this tutorial the size of our image/header is 857 pixels wide, and 150 pixels high.

Preparing The Images

We used Photoshop to create a layered file containing all of our images so that we can position and scale them within the size constraints and save out the multiple versions of the file. You may want to import your logo, or typeset your text now, to position it on top of all the images so that you can determine the static position that the logo/type will present itself.

Once we have all the layers in the proper positioned its time to save out all your files. In our example we created 5 different images to use. We used smart naming conventions to make sure we can tell these images from others just by their names. We titled our images:

• header-01.jpg
• header-02.jpg
• header-03.jpg
• header-04.jpg
• header-05.jpg

Now that the images are prepared its time to prepare the logo/type.

Preparing The Logo/Type For “floating” On Top

We should have our logo/typesetting in place from our previous step of getting our images sized and positioned. We need to do the following steps:

1. Make sure logo/type is in correct position
2. Ensure that we have a drop shadow created
3. Turn off all image layers
4. Check transparency
5. Trim the logo/type down to size
6. Save out proper format of file

Make sure logo/type is in correct position

You want to make sure with each and every image layer you have saved out that your logo/type is in the position you want it to appear on all images.

Ensure that we have a drop shadow created

Select your logo/type layer then select the layer/layer style/drop shadow inside the menu options of Photoshop.

Adjust the settings to your liking and you should see a drop shadow from your logo/type on top of the image.

Once you are happy with the shadow its time to save out the logo/type image.

Turn off all image layers

You should turn off all image layers so that you only see your logo/type and shadow.

Check Transparency

Once all images are turned off and the only layer turned on is your logo/type you should see transparency behind the image. In Photoshop—you should see the checkerboard pattern—it should look like this:

Trim the logo/type down to size

With only the logo/type layer displayed you will want to trim out all the uneccessary image data. In Photoshop you want to select Image/Trim

You should now have a much tighter logo/type that still has the shadow present.

Save out proper format of file

You want to select File/Save For Web and Devices

Once presented with the save dialog window you will want to set the following parameters for your file.

• Image type: PNG
• Colors: perceptual
• Number of colors: (depends on what looks good and how large the image file is. Play with this setting)
• Dither: diffusion
• Dither %: 88%
• Transparency: check box ‘yes’
• Matte: None
• Transparency Dither: Diffusion Transparency Dither
• Amount: 88% (Play with setting to get desired result)
• All other settings default

Here is what my settings looked like:

Once your settings are how you like them, save the file with a distinguishing name.

Save it to the custom image folder inside of Thesis: ~/wp-content/themes/thesis/custom/images/

You can now FTP that image to your webserver.

Now that the background images are created and uploaded into NGG, and your logo/type image is uploaded via FTP its time to get busy with the custom.css, custom-fuctions.php, and NGG settings.

Getting Next-Gen Gallery Settings Dialed In

The method presented below is our “hack” to making this combination of plugins and technology work. If you have an easier/simpler way to do this, please share! We are always open to more efficient approaches—who isnt? That being said, here is what we did.

Create A Header Gallery and Upload Images

You want to be logged into the admin area of your website, http://www.[yourwebsite].com/wp-admin/

Once logged in you want to proceed to the gallery management tools near the bottom of the left hand side of the page:

You want to select Add Gallery / Images from the menu choices. On the next screen you want to give your new gallery a name, in my case it was appropriately “header.”

The next step is to upload the images you previously saved. These are the background images, not the logo/type you saved. If you look at the set of tabs at the top of the screen you will see an Upload Images option. That is what you want to select. You need to click on Choose File and proceed to navigate to all your images and upload each one. Once you have all of the images listed, you should then select the proper gallery from the pulldown menu where it says Choose Gallery in the pulldown menu.

Once all your images are listed, your gallery is selected it is time to click Upload Images. This may take a few seconds depending on how large your images are so be patient.

Once the upload is complete you will see a confirmation at the top of the screen.

Manage The Gallery

Now click on Manage Gallery under the Gallery admin menu on the left side of the page. You should see your gallery listed under the Gallery Overview page. Click on the title to proceed to edit the gallery content. At this point you want to make sure that all the images you uploaded are present. If not, go ahead and add what you need.

Tweak the Settings

Now you want to confirm that the slideshow and the technology needed to run it are in place. You do this under the Gallery/Options menu item.

Of primary concern is the tab titled Slideshow. You need to look at the first option under this tab: Path to the Imagerotator. If the path is not already filled in, click the “search now” button just to the right. This should take care of things. If not, you may need to get JW Image Rotator from Jeroen Wijering. Follow the instructions and return here and click the “search now” button again.

Testing The Show

Now that you have uploaded the images and checked the slideshow technology is in place you should test out your slideshow to see if everything is working. This tests the slideshow, and if its working well, gives us some key code that we will need for custom_functions.php

The way we tested the slideshow was to create a test page, insert the slideshow, then preview the page.

I created a page by clicking on Pages/AddNew

I then give the page the title of Gallery Test in the title bar, then I click and icon in the top row, right. You can see it here in the screen capture.

Once I click that button I get a dialog box that lets me select from the pull-down menu the slideshow I want to insert, and lets me determine how I want to display the images—in this case a slideshow.

Once you have clicked insert you should see something like this showing up in your content area:

[nggallery id=5 ]

This is the code the NGG plugin uses to insert the slideshow. Now the code is in place I click publish, then I click preview to see the page and if the slideshow is working as I want it to. If its not you need to go back and double check your settings and that you have to get JW Image Rotator from Jeroen Wijering.

Assuming the slideshow test is working as you intended in your web browser, the next step is to look under the hood at the code being generated to display the slideshow. You will need to find this code, copy it, and then paste it into custom_functions.php to help build your new header. Fortunately I will show you my code here and you can copy/paste to make things work.

When you are looking at the webpage with the slideshow working as it should, you should “view the source code” to see the syntax that is making everything tick. One thing you may have noticed is that your slideshow is a different size than the header you want. Don’t worry, we will change the size in the code.

What Is The Code?

The code you are looking for in the preview page source is this:

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">
<p>The <a href="http://www.macromedia.com/go/getflashplayer" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.macromedia.com/go/getflashplayer');">Flash Player</a> and <a href="http://www.mozilla.com/firefox/" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mozilla.com/firefox/');">a browser with Javascript support</a> are needed..</p>
</div>
<script type="text/javascript" defer="defer">
var so5_1 = {
	params : {
		wmode : "opaque",
		allowfullscreen : "true"},
	flashvars : {
		file : "http://www.YOUR_DOMAIN.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
		linkfromdisplay : "true",
		shownavigation : "false",
		showicons : "false",
		rotatetime : "6",
		transition : "fade",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		width : "857",
		height : "200"},
	attr : {
		styleclass : "slideshow",
		name : "so5"},
	start : function() {
		swfobject.embedSWF("http://www.YOUR_DOMAIN.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
so5_1.start();

</script>
<div class="ngg-clear"></div>
<div id="logotype">
<img src="http://www.YOUR_DOMAIN.com/wp-content/themes/thesis/custom/images/typeface.png" alt="">
</div>

Get your width and height

There are a few numbers you will want to change based on your design and your domain name. The first line of the code above is this:

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">

You want to replace the width and height with the values of your banner graphics. You should know this from creating the graphics previously. There are 2 other places in the code above where you need to replace the width and height. One place is inside the flashvars declaration:

flashvars : {
	file : "http://www.YOUR_DOMAIN.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
	linkfromdisplay : "true",
	shownavigation : "false",
	showicons : "false",
	rotatetime : "6",
	transition : "fade",
	backcolor : "0x000000",
	frontcolor : "0xFFFFFF",
	lightcolor : "0xCC0000",
	width : "857",
	height : "200"},

The last place is in starting the function here:

swfobject.embedSWF("http://www.YOUR_DOMAIN.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );

NOTE: Be sure to change the domain to your domain name in the paths above.

So all together the code inside your custom_functions.php will look like this. We are first moving the main navigation below the header (this is optional for you) then inserting the banner:

/* MOVING NAV BELOW HEADER */

remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

/* Next-Gen Gallery into Header */

remove_action('thesis_hook_header', 'thesis_default_header');
function ngg_custom_header () { ?>

<div class="swfobject" id="so5_1" style="width:857px; height:200px;">
<p>The <a href="http://www.macromedia.com/go/getflashplayer" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.macromedia.com/go/getflashplayer');">Flash Player</a> and <a href="http://www.mozilla.com/firefox/" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mozilla.com/firefox/');">a browser with Javascript support</a> are needed..</p>
</div>
<script type="text/javascript" defer="defer">
var so5_1 = {
	params : {
		wmode : "opaque",
		allowfullscreen : "true"},
	flashvars : {
		file : "http://www.ojaigetaway.com/wp-content/plugins/nextgen-gallery/xml/imagerotator.php?gid=1",
		linkfromdisplay : "true",
		shownavigation : "false",
		showicons : "false",
		rotatetime : "6",
		transition : "fade",
		backcolor : "0x000000",
		frontcolor : "0xFFFFFF",
		lightcolor : "0xCC0000",
		width : "857",
		height : "200"},
	attr : {
		styleclass : "slideshow",
		name : "so5"},
	start : function() {
		swfobject.embedSWF("http://www.ojaigetaway.com/wp-content/uploads/imagerotator.swf", "so5_1", "857", "200", "7.0.0", false, this.flashvars, this.params , this.attr );
	}
}
so5_1.start();

</script>
<div class="ngg-clear"></div>
<div id="logotype">
<img src="http://www.ojaigetaway.com/wp-content/themes/thesis/custom/images/typeface.png" alt="">
</div>

<?php }

add_action('thesis_hook_header', 'ngg_custom_header');

CSS and Your Logo

Now that you have the rendering of your banner in place, the thing to do now is get your logo to appear on top and in the position you would like. The code we added to our custom.css file is this:

div#logotype {
	background-color: transparent;
	margin: 0;
	padding: 0;
	display: inline;
	z-index: 2;
	position: relative;
	top: -84px;
}

The key here is to position: relative; and to use negative top margin. This is what will get your logotype to appear on-top of the banner. Be sure to add the z-index in for good measure.

Be sure to save your custom_functions.php and custom.css file and upload via FTP and test, test test!

Wrap Up

This has been one looonnnnggg tutorial and if you have read to this point, you are both patient and persistent. You can see the banner that I have based this tutorial off of here at OjaiGetaway.com which is a web site in progress.

Do let me know if you have any questions about this process. I will help as best we can.