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

I’m likely the last person on the Net to discover this but I thought I would throw a post together on the topic anyway. If you aren’t a programmer, you might not see the humour in this. I for one, found it quite amusing.

I was upgrading a Mambo installation yesterday and found myself searching code snippets for a problem I was having. One of the search results led to a web site for an esoteric programming language called LOLCODE.

Did it have anything to do with what I was searching for? No. Did I click it? Yes!

There I sat chuckling while my client’s site remained broken. It was worth it as it relieved the mounting stress I was feeling during a failed upgrade. It cleared my head enough to finish the job at hand. (Hours later)

I think LOLCODE can pretty much explain itself…

HAI
CAN HAS STDIO?
PLZ OPEN FILE "LOLCATS.TXT"?
    AWSUM THX
        VISIBLE FILE
    O NOES
        INVISIBLE "ERROR!"
KTHXBYE

The above code initializes (HAI), opens a file for display (PLZ OPEN FILE) with error checking, then closes (KTHXBYE).

HAI
CAN HAS STDIO?
I HAS A VAR
IM IN YR LOOP
   UP VAR!!1
   IZ VAR BIGGER THAN 10? KTHX
   VISIBLE VAR
IM OUTTA YR LOOP
KTHXBYE

Don’t tell me you didn’t chuckle just a little bit while reading those!

[Pic from LOLCATS]

[Code snippets from Wikipedia]

Special thanks to Adam Lindsay – creator of LOLCODE. It made my day!

Odds N Ends Asides, Coding

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

Christmas is not only about catching up with the ‘long lost’, but also about sitting around reminiscing about days gone by with friends and family. My post today reflects this as I take a short stroll into the past.

The words ‘Open Source’ are pretty much on everyone’s lips these days and most projects are subjected to some kind of licensing agreement or such. There was a day when licensing didn’t mean squat as hobbyist programmers freely shared code amongst themselves and with the public via FidoNet EchoMail.

I myself was part of this movement. I developed modules for the Maximus CBCS Bulletin Board System. An overview of my work with this can be found here: Maximus!

I remember days where I would come home from work on Friday at 5pm. I would go straight to bed and get up about Midnight. I would then work straight through until Sunday night trying to get projects finished up. I performed many of these 48 hour stretches.

int check_tag(int: count, ref int: que)     // See if file is tagged
{
  int: times, flags;
  string: filescheck;

  for(times:=que+1;times>-1;times:=times-1)
  {
    tag_get_name(que,flags,filescheck);
    if(strfind(filescheck,finfo[count].fname)>0)
      return 1;
    que := que -1;
  }
  return 0;
}

Code segments like this would dance in my head. I’d lose sleep over bugs and meals over unrealistic deadlines I’d set for myself. So much passion back then.

Coding modules for something like Maximus is NO DIFFERENT than coding themes and plugins for CMS’s today. You’re given an engine and it’s up to you how you present it. Hell, even the coding style is similar! (The above snippet is MEX coding for Maximus)

… The More They Remain the Same (To complete the title of this post)

So if these two eras of Open Source are so damned similar then why has my passion eluded me? What am I missing this time around? I need to get all fired up about this again!

Well, that in itself is why this blog now exists. We’ll see how things turn out.

Anyway, not too many people are following this blog yet, but I’ll just insert a quick “Merry Christmas” here to those who are. Hope you got everything you asked for!

Odds N Ends Asides, Coding, Open Source