Torn Elements

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

I’ve been surfing around to other blogs quite a bit recently and I’m shocked at how much sidebar pollution is out there. Specifically – advertising.

I’m all for making a few bucks and I’m hoping the few spots I’ve allocated to ads will at least cover my hosting at the end of the year. The last thing I want to do is distract people from the content. Or worse yet, send them screaming for the hills just because it takes forever for the site to load.

If you’ve taken the pains to optimize your theme, then why are you going to turn around and slow things down by overpopulating your sidebar? In some cases I’ve been able to finish reading a post before the page had even finished loading. (Thankfully, content was rendered first.)

The first thing I learned in web design was the fact you have approximately 15-20 seconds to grab a user’s attention. After that you can consider them gone. In these days of high speed access, most designers and site owners have pretty much forgotten about this. We still have a certain portion of the Internet population that still uses Dial-up.

Slow loading sidebar? Here’s a few things to look for:

• Flash Video Ads. These things take a fair amount of resources and bandwidth. I have the luxury (?!) of running an older computer. These ads, especially when more than one appears on a page, bog down my system to the point where I have to wait for the ad to finish playing before I can do anything else. The quickest solution to this is to simply close the window or tab. Not something a blogger wants. Not all flash video ads demand such resources but a good portion do. (Especially those Telus ads which dominated Adsense prior to Christmas)
• Plugins and Widgets. Some people are just wild about adding all the latest greatest sidebar widgets and plugins. Truth be told, many of these make a huge amount of http and database requests. Some plugins are just coded poorly which doesn’t help matters either. If you think your sidebar is slowing things down, deactivate all plugins and corresponding widgets then start them up again one at a time. Eventually you’ll find the culprit.
• Community Avatar Widgets. Yay! It’s great to see who’s been visiting, but each one of those tiny little avatars require an http request to load. If you run several of these community widgets (each displaying last 100 visitors) then you slow down the load time considerably. Next to flash ads, I found these to be once of the highest load times on many sidebars.
• External Content. If a plugin or widget needs to pull it’s information from a 3rd party site, this can slow things down if the target site is either busy or experiencing technical difficulties. Ensure that the site provides it’s content on a timely basis, otherwise lose it.

I’m yet to finalize exactly what will appear in my sidebar, but rest assured. I’ll be watching the above points very closely.

Plugins Optimization, Plugins, WordPress

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

I’d decided I wanted a ‘Random Thoughts’ area in my sidebar for little tidbits worth mentioning but not worthy of posting about.

So, off I went on a plugin hunt. After a half hour of hunting and asking around in IRC I was finally given a link. By that time I’d come up with a better idea.

Text Widget. By creating one line of HTML within a Text Widget I managed to get my sick little thought out into the open.

Keep in mind that Text Widgets obey the laws of HTML very nicely. If you can do it on a HTML web page, you can likely do it in a Text Widget as well.

<ul><li>Ever notice how Puritan Stew comes in the same size cans as dog food?</li></ul>

That’s all the code I needed to scare readers off Puritan Stew forever.

I could likely fancy it up a bit using CSS but it seems to fit well into the sidebar as is.

As far as maintaining something like this… It can’t be any more work than maintaining a plugin. A quick line of code, save, and we’re done.

<li> <i>Give a man a program, you frustrate him for a day. Teach a man to program, you frustrate him for a lifetime.</i> — unknown</li>

Plus, as an added bonus, you’ll never have to worry about those pesky upgrades that plugins seem to go through so frequently these days. It’s all you!

So, next time you’re thinking about something simple for your sidebar, think Text Widget first, plugin second.

Plugins Plugins, WordPress

Before I get started here I thought I would just give a quick ‘hat tip’ to mg12 for creating such a great free theme. I’ve only worked on 4 blogs to this point but I’ve been through many themes. This one is an absolute pleasure to work with! Thanks!

However, there were just a few more things I wanted to do.

My installation of Disqus broke the comment links on the single post page. (single.php)

Neither of these links went anywhere as they were making calls to the internal WordPress comment system. Since we’re using Disqus we’ll have to code things a tad differently.

In single.php

<span class="date"><?php the_modified_time(__(‘F jS, Y’, ‘inove’)); ?></span>
            <div class="act">
                <?php if ($comments || comments_open()) : ?>
                    <span class="comments"><a href="#comments"><?php _e(‘Goto comments’, ‘inove’); ?></a></span>
                    <span class="addcomment"><a href="#respond"><?php _e(‘Leave a comment’, ‘inove’); ?></a></span>

Since Disqus does the job for both of these links we can simply remove the line making the #comment reference.

<span class="date"><?php the_time(__(‘F jS, Y’, ‘inove’)); echo ‘. Posted By <a title="author" href="’; the_author_url(); echo ‘">’; the_author(); echo ‘</a>’; ?></span>
            <div class="act">
                <?php if ($comments || comments_open()) : ?>
                    <span class="addcomment"><a href="#disqus_thread"><?php _e(‘Leave a comment’, ‘inove’); ?></a></span>

While here, I added author info to the single post display just like we did previously for the front page. Also we changed #respond to #disqus_thread in our link reference.

While working in single.php I thought I would add code to display an Adsense block just after the post but before the comments. I’ve been told this is a prime ad spot so I thought I would take advantage of it.

Unlike the sidebar ads which were inserted using Text Widgets this had to be hard coded into the theme page. (single.php)

<p class="under">
                <?php if ($options['categories']) : ?><span class="categories"><?php the_category(‘, ‘); ?></span><?php endif; ?>
                <?php if ($options['tags']) : ?><span class="tags"><?php the_tags(”, ‘, ‘, ”); ?></span><?php endif; ?>
            </p>
            <p align="center"><script type="text/javascript"><!–
google_ad_client = "pub-xxxxxxxxxxxxxxxxx";
/* 468×60, created 12/26/08 */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>

Finding the code which displays categories and tags, I inserted my adsense code between that and the call to the comments function. Tucked in nicely.

Now that I’m making millions (ha!) I turned to my final task.

I’ve always found that having a comment link at the end of the post is preferable to me than at the top. This theme only features a comment link at the top of the post. We don’t want to move it, we just want to add another at the end of the post.

In index.php

<?php if ($options['tags']) : ?><span class="tags"><?php the_tags(”, ‘, ‘, ”); ?></span><?php endif; ?>
                    <span class="comments"><?php comments_popup_link(__(‘No comments’, ‘inove’), __(’1 comment’, ‘inove’), __(‘% comments’, ‘inove’)); ?></span>

We simply duplicate the code used at the top of the post and insert it after the category and tag code at the bottom.

Now that the user has read the post, there’s a handy link right there to make a comment.

I was honestly expecting this Theme Hacking series to go on a bit more. But, thanks to such great work by the theme author, I think I just might be done hacking.

I bet some of you are wondering about why I’m posting about such simple tasks. Two words: relevant content baby! While I’ve been screwing around getting things setup I’ve been seeing hits for search terms such as: ShareThis, ‘startup wordpress blog’ and most recently, ‘disqus startup’ All of these are due to the content I’ve added up to this point.

A head start, so to speak.

Themes Blog Startup, Themes, WordPress