Torn Elements

One thing I’ve come across many times in my 12 years of web development is the Weary Client.

The Weary Client is a skittish creature. Having been stung before, they are quick to hang up the phone in your ear or slam the door in your face the minute they hear you’re a Web Guy.

They have good reason too! They’ve previously paid out many hundreds of dollars (sometimes thousands) to someone who promised a fully functional web site but left them abandoned with a project that is either faulty or incomplete. Quite often the client is left without critical access information about his web site. (Logins, passwords, etc.)

The Weary Client is usually unwilling to pay out a deposit of any amount until results are seen. You really can’t blame them either.

So… What does a web developer do when faced with such obstacles in these tough economic times? The Weary Client is already feeling the crunch. Does he take another chance with his already strained budget? Not likely. If he is willing to part with his money (upon completion), it’s not going to be much.

At this point someone has to fold. I’m feeling the crunch too, so guess who? If I was going to accept these jobs for a lower than normal price, a time saving solution was required.

My solution was this. CMS installations with purchased Premium Themes.

Yes, I said, “purchased!” Might as well offer the client the quality that comes with a Premium Theme. Most are reasonably priced, I find. In the end, it works out when you remove the time to conceptualize the art and code the theme yourself. Not to mention all that effort for a payday that might never come. After all, we’ve taken a Leap of Faith here by agreeing to no down payments. An absolute no-no in this industry.

Worst case scenario: If payday doesn’t come, I shut down the site and still have a Premium Theme to use on a future project. I’m really only out a bit of time if things go wrong. When it comes down to getting the job or not, I think I can invest a bit of time. 

What can I say? My new lower rate is now landing me work for the first time in over a year. My (no longer weary) clients are happily running their Premium Themed sites, Premium Theme  Authors make a sale, and I get to see my paydays.

Sounds like a win for a few people.

Please note: I work exclusively with businesses local to me. I will not accept work over the Internet without a down payment.

Themes CMS, Themes

It appears I’ve created some confusion in regard to my DIY series of posts on the custom theme I’ve been working on for this site. I’ve been contacted several times now regarding the “Thesis” theme by DIYThemes.Com.

“I am in no way affiliated with DIYThemes.Com. Support and questions regarding the Thesis theme should be directed to them.”

So far I’ve been contacted for Support, Coupon Codes, and even an offer to do an interview about the Thesis theme. In all cases I’ve responded and directed people to the proper web site.

Had I been aware of the potential confusion, I would have named my theme series differently.

I would also like to take this opportunity to apologize to the fine people at DIYThemes.Com. It was not my intention to misdirect anyone in their searches for your product.

If it makes you guys feel any better, my bounce rate has increased by 25% due to this.

Signed,
Larry “I-didn’t-mean-to-do-it!” Monte

Themes Asides, Themes

I figured I would’ve had more to say about the sidebar, but after adding one image and adjusting some typographic styles I was able to come close to what I was looking for.

Click screen shot to view.

Certainly nothing overly fancy going on here but that was my intention. I simply wanted a bit of separation from the content. Besides, this is just ‘roughed’ in for the moment.

By right-aligning a y-repeated graphic in the #container style I was able to shade my sidebar:

#container {
    width: 970px; 
    margin: 0 auto;
    padding: 0px;
    background:#fff url(http://static.tornelements.com/torn_images/sidebarBg.jpg) repeat-y right; /* Sidebar Background Image */
    color:#333;
    border: 1px solid #555;
    }

Now all I had to do was adjust some typography to set the styles for headings and lists.

My main concern to this point has been the layout. I may fine tune (or overhaul completely) the graphics in use before installing the theme on the main site. But once the layout is sound, graphics are no big deal to work on later.

I’ll likely only be making one or two more posts in this series. I fear that I may be boring the crap out of people with my simplistic approach to coding the theme.

What can I say? It’s really all I’ve had time to focus on to this point.

Themes Coding, Themes, WordPress

Today I finally found the time to work on the theme.

One thing I like to see on a site is a Search Box that you don’t actually have to search for. Right up top works for me every time. I find they tuck nicely into the menu bar which is demonstrated if you click on the screen shot.

I also made a couple of cosmetic changes today.

But first, let’s get that Search Box in place:

From header.php

<div id="topBar">   
    <div id="menu">
        <ul>
            <li class="<?php if (is_home()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php bloginfo(‘url’); ?>" title="Home">Home</a></li>
            <?php wp_list_pages(‘title_li=&depth=1′); ?>
        </ul>
    </div> <!–end menu –>
    <div id="searchbox">
    <form action="<?php bloginfo(‘home’); ?>" method="get">
        <input type="text" class="textfield" name="s" size="24" value="" />
        <div class="icon"></div>
    </form>
    </div> <!– end search –>
</div> <!– end topbar –>

(I also added a search icon)

From style.css

input.textfield,
textarea {
    background:#FFF;
    border:1px solid #A6A6A6;
    padding:2px 1px;
}

#topBar {
    background:url(http://static.tornelements.com/torn_images/topBg.jpg) repeat-x;
    width: 100%;
}

#searchbox {
    margin-top: -30px;
    float:right;
    padding:4px 10px;
}

#searchbox .textfield {
    line-height:16px;
    width:180px;
    float:right;
}

#searchbox .icon {
    background:url(http://static.tornelements.com/torn_images/search.gif) no-repeat;
    float:right;
    width:29px;
    height:29px;
}

The 1px x 30px graphic in the #topBar background provides the gradient for the top menu.

I inverted the gradient graphic and used that for the rollover by adding this:

#menu ul li a:hover {
    background:url(http://static.tornelements.com/torn_images/topBgRO.jpg) repeat-x;
    color:#fff;
}

I also changed the body background. I’ll work on that more later. I just want to visualize it with a darker background for a while.

Up next… The Sidebar.

Themes Coding, Themes, WordPress

When it comes to graphics, nothing can slow down your page load like high resolution photos. My goal here is to make the theme as light weight as possible. By keeping the theme itself light, we can allow more load time for content and sidebars.

After several days of wrestling with graphics I finally settled on a text effect header. (Click the pic) It’s nothing flashy, but it’s simple and reflects what I’m doing here. It’ll settle in better once I start working on the rest of the page. The stylized ‘E’ I’ve used is potentially going to be carried throughout the theme. (Just a vision at this point)

Because I’ve used graphics in the header instead of the default text and image background, we’ll handle things a bit differently from what was originally coded. Since this theme is not being developed for distribution there’s no need for flexible code.

For instance. The Blank Theme contained 58 lines of code to produce the header. Most of this was for providing flexibility for the masses. Since I’m the only one to use this theme we can ditch the overhead.

By direct use of images (not CSS backgrounds) for the header I’ve trimmed this down to 17 lines of code:

From ‘style.css’

#header {
    width: 100%; 
    }

#headerLogo { 
    height: 85px;
    width: 850px;
    padding: 0;
}
#headerRight { 
    float:right;
    margin: 0;
    padding-right: 18px;
}

From ‘header.php’

<div id="header">
    <div id="headerRight"><a href="<?php bloginfo(‘rss2_url’); ?>"><img src="http://static.tornelements.com/torn_images/rssIcon.jpg" alt="Torn Elements RSS Feed" /></a></div>
    <div id="headerLogo"><a href="<?php bloginfo(‘siteurl’); ?>"><img src="http://static.tornelements.com/torn_images/tornHeader.jpg" alt="Torn Elements – Larry Monte regaining lost passion for design" /></a></div>
</div>

By using images and not CSS backgrounds I get to assign ‘alt’ tag information which is good for SEO. Since we aren’t using text for the header it’s good to give Search Engines a bit of information about the site via images.

Take note of the sub-domain source for the image files. As I mentioned previously I’m using another domain to store my theme images:

The second sub-domain will house the theme images. Most browsers can only load 2-4 images simultaneously from any single domain. By keeping theme images on a sub-domain and content images on the main domain, I can increase the load speed of the site dramatically by allowing an additional 2-4 images to be loaded at the same time. (A preliminary step in page optimization)

I like to use images in my posts. Since many will appear within the length of my homepage it’s good to have some kind of optimization going on.

Themes Coding, Themes, WordPress

Before anyone bitches, that’s indeed yesterday’s screen shot to the right. Most of the changes made were done ‘under the hood’ so not much changed to the look. (Plus I was too lazy to take a new screenshot )

The main thing I want to cover today is the topic of Source Ordering. By making a small change in page rendering we can ensure that our content gets displayed before all the sidebar crap.

For instance, our blank template did things in this order:
(From archive.php, index.php, page.php, single.php)

<?php get_header(); ?> /*Get header and top menu*/
<?php get_sidebar(); ?>/*Display all the distracting sidebar crap*/
Content items here
<?php get_footer(); ?>/*Display Footer*/

If you CLICK HERE and view the source from yesterday’s theme, you’ll see that all the sidebar items are listed BEFORE our content. If you run a heavy sidebar then your content is miles down that page.

So let’s change things around a bit:

<?php get_header(); ?>/*Get header and top menu*/
Content is now much higher up in the source code
<?php get_sidebar(); ?>/*NOW lets do the sidebar crap*/
<?php get_footer(); ?>/*Display footer*/

Now, if you CLICK HERE and view the source from today’s theme, you’ll see the content is MUCH higher on the page. Your content is now more accessible to Search Engines. They don’t have to crawl their way through all the ads and other things which usually populate sidebars.

Speaking of putting important things first, let’s have a quick look at how titles are handled.

(From header.php)

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

As you can see by the screen shot the site name is first and our important article title is second. (Third actually, after the useless ‘Blog Archive’ label)

We can fix that by replacing the above line with:

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

Much better! Now our article title is first and mention of the site is second. I also removed the code which displayed ‘Blog Archive’ in the title for single pages. Not really necessary, I find. If I were to leave it in I would have put it after the title and not before as it had been originally coded.

Other than adding my name to the footer (for ego purposes) the theme appears exactly as it did yesterday. The only difference now is the information displayed has better accessibility.

Themes Coding, Themes, WordPress

I ditched my original idea of stripping down the default WordPress theme in favour of a pre-made blank theme. What can I say? Several hours of code ripping just didn’t appeal to me at all. I’m more interested in building than reverse engineering at this point.

I’d rather spend my time with graphics and layout than basic typography. With a blank theme you’re given all the required basics. A perfect starting point.

So I hit Google and came across Refueled.Net offering a few styles of blank themes. I’m a big fan of the right sidebar so I grabbed the appropriate layout.

Since I want to optimize for a 1024px layout I had to make a few changes. The theme and header image were optimized for 800px layout so I simply removed the image for now. We’ll put it back later.

Changes to style.css:

• Made some changes to optimize for 1024px width.
• Adjusted the width of the top menu as well as the sidebar to reflect the above change.
• Decreased the height of the header from 160px to 100px. Too big for what I have in mind.

Below are the code snippets of the changes:

#container {
    width: 970px; /*[Changed from 760px]*/
    margin: 0 auto;
    padding: 6px;
    background:#fff;
    color:#333;
    border: 1px solid #0B1224;
    }

#header {
    background: #DDD;
    width: 100%; /*[Changed from 760px]*/
    color: #fff;
    height: 100px; /*[Changed from 160px]*/
    }

#header h1{
    font-family: palatino linotype, georgia, arial, times;
    font-size: 16pt;
    font-weight: 300;
    letter-spacing: 1px;
    margin: 0;   
    padding: 40px 0 0 16px;   /*[Changed from 120]*/
    }

#menu {
    background: #0B1224;
    font-family: verdana, arial, times, serif;
    font-size: 8pt;
    width:100%; /*[Changed from 760]*/
    height:25px;
    border-top: 1px solid #fff;
}

#content {
    float: left;
    width: 680px; /*[Changed from 72%]*/
    overflow: hidden;
    }   

#sidebar {
    font-family: verdana, arial, tahoma;
    font-size:8pt;
    width: 280px; /*[Changed from 200px]*/
    float:right;
    margin: 12px 0 24px 0;
    padding: 0;
    border-left: 1px dotted #A2A2A2;
    }

You can click the images to see both in action.

Now that I have my desired width and a general layout I can start envisioning some graphics. I’m not the best graphic artist in the world so it might be a few days before I post on this topic again. Remember, I also work for a living.

Themes Coding, Themes, WordPress

With three short lines of code in your theme’s header.php file, you can instantly have lightbox capabilities on your WordPress 2.7 Blog.

In case you haven’t poked around the backend since your upgrade to WordPress 2.7, this version includes the ThickBox Script for previewing and selecting themes. (Or was this in 2.6 also? Can’t remember.) If the code to do this is already there, then why not use it on the front end too?

Here is all you need to do:

Go to your theme directory and load ‘header.php’ into your editor. Add the following three lines within the <head> </head> tags:

<script type="text/javascript" src="wp-includes/js/jquery/jquery.js"></script>

<script type="text/javascript" src="wp-includes/js/thickbox/thickbox.js">
</script>

<style type="text/css" media="all">
@import "wp-includes/js/thickbox/thickbox.css";</style>

Save/Upload the changes. That’s it! You’re now ready to use ThickBox on the front end.

You only need to add a couple extra parameters to your links to get it to work.

<a href="license.txt?height=600&width=800" title="WordPress – License.txt" class="thickbox">CLICK HERE FOR EXAMPLE</a>

In this example, I’m displaying a text document (the WordPress License) within a scrollable window. Appending ‘?height=600&width=800’ to the link defines the size of the lightbox. The class="thickbox” completes the job.

CLICK HERE FOR EXAMPLE (Note: May not work within all news readers – visit the site)

Works for images too! More options for using ThickBox, can be found here. Just ignore the download and install instructions as that’s already been done by WordPress.

I just stumbled onto this and thought I would share.

WordPress Coding, Themes, WordPress

As much as I adore the current theme I’m using, there’s one huge problem with it…

I didn’t create it!

The blog still feels like rented space to me and not the ‘home’ I’m ultimately seeking. So, let’s do something about that, shall we?

In my very first post here I discussed our options when selecting themes. The last option I mentioned was the Do-It-Yourself (DIY) route. We’re going to explore this more in the coming weeks as I start this series of posts on the topic.

Before I go any further I should point out that I am not an expert theme coder. I expect to make mistakes, blunders, and bone head moves (all in public, no less!) which I ultimately hope to be called to answer for via comments from my readers. I simply mean to come at this as an ‘intermediate’ because let’s face it, newbies and experts aside, a lot of us fall into this category of skill level.

Who knows. Maybe we’ll all learn something in the process.

Preparations:

I’ve setup two sub-domains to aid in the development of the new theme. The first sub-domain will house a default WordPress setup with a theme switcher plugin installed. This way, I’ll be able to post about my progress and provide a link to a working version of the theme on a post by post basis. That’s to say if someone a year down the road is reading the post, the link provided will demo where the work stood on that particular day. A visual timeline of sorts.

The second sub-domain will house the theme images. Most browsers can only load 2-4 images simultaneously from any single domain. By keeping theme images on a sub-domain and content images on the main domain, I can increase the load speed of the site dramatically by allowing an additional 2-4 images to be loaded at the same time. (A preliminary step in page optimization)

Today’s Link simply takes you to the default WordPress theme. Nothing special there.

In my next post we’ll be stripping that puppy down to basic code. From there we’ll start building our new theme based on what’s left. Ripping apart and rebuilding a default theme is a great learning technique, not only for WordPress, but other CMS’s as well.

Themes Coding, Optimization, Themes

So, you’ve been out there for hours (or even days) looking for that perfect theme. Suddenly, pay dirt! You hit one that suits your needs beautifully.

You download it, activate it, then head off to the widget screen to set up the sidebar. But Oh no! The theme doesn’t support widgets!

At this point you have two choices:

1. Continue looking for another theme which does support sidebar widgets.
2. Get brave and start hacking in your own widget support.

Since the first option is boring, we’ll talk about the second. Widgetizing a hard coded theme is drop dead simple and only takes 3 simple steps!

(Disclaimer: Don’t yell at me! Backup your theme first. Have a quick restore option handy)

Step 1

Locate "sidebar.php" in your theme directory. (Note: Code will vary!!) Load it up and you will see something like this: (search for: <div id="sidebar">)

<div id="sidebar">
<ul>    
<?php wp_list_pages('title_li=<h2>Main Menu</h2>' ); ?>
    <li><h2><?php _e('Categories'); ?></h2>
    <ul>
<?php wp_list_cats('sort_column=name'); ?>
    </ul>
    </li>
    <li><h2><?php _e('Archives'); ?></h2>
    <ul>
<?php wp_get_archives('type=monthly'); ?>
    </ul>
    </li>
        <<<<Snip!>>>> <-- To keep this brief  
</ul></div>

There’ll be more code but here I snipped it for the sake of brevity. Basically you want to remove any hard code that makes up the sidebar (wp_list_pages, wp_list_cats, etc) and replace it with support for widgets.

Step 2

In the example given here, we replace all that with this:

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul></div>

Save and upload this to your server.

Step 3

Find and load "functions.php" (If it doesn’t exist, create it) Make sure the file contains this line:

<?php if ( function_exists('register_sidebar') )register_sidebars(2);?>

Save and upload this to your server.

Now you can activate and use widgets. You may need to adjust some CSS, depending on how the theme was coded, but you should be done.

You can also run a combination of both hard coded and widgeted sidebars:

<div id="sidebar">
<ul><li><h2>Main Menu</h2>
    <ul>
    <li><a href="http://www.example.com/about/"  
    title="About example">About example</a></li>
    <li><a href=http://www.example.com/ 
    title="Back to the Home Page">Home</a></li>
    </ul>
    </li>    
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
<?php endif; ?>
    <li><h2>W3C Valid</h2>
    <ul>
    <li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
    <li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.example.com"><?php _e('Valid  <abbr title="Valid Css!">CSS</abbr>'); ?></a></li>
    </ul>
    </li>
</ul></div>

I’ve been through many theme hunts. It wasn’t long before I realized this method as essential knowledge. It broadened my theme-hunting options greatly.

Hope someone finds this useful.

Themes Themes, WordPress