Well, THAT didn’t work [12]

Here’s another fine mess I’ve gotten me into.

Editing someone else’s theme didn’t work. Or, rather, it was harder than throwing everything out and starting from scratch — there was just too much in there I didn’t understand and too much that broke when I pulled elements out.

However, starting from scratch was easier than expected. At a minimum, a WordPress theme consists of index.php and style.css. — and style.css can be blank to start with (but it has to be named ‘style.css’, go figure). WordPress will use defaults for everything else if custom files aren’t supplied. All a basic index.php has to do is grab some posts from the database and display them, and that little chunk of code was easily stolen (thanks again, Andreas!).

So, starting from some text in the middle, it was actually pretty easy to add blog elements, one by one. I’ve now built header.php, sidebar.php, footer.php, index.php and the basics of style.css. The WordPress program files define many functions — for example, sidebar.css is a pre-defined object that controls both left and right sidebars. I was half-tempted to fiddle with these files, but that’s a bad idea; I’d have to redo my customizations every time I upgraded WordPress. Also, I haven’t the faintest idea what I’m doing.

Luckily, the built in WordPress functions are a dawdle. For example, this is all you have to do to display the post calendar:

<?php get_calendar(1); ?>

Not a dawdle: getting the main elements to line up. Even giving hardcoded values for the total width, the width of the left and right sidebars and the center column, I get totally different page widths with Opera, IE and Firefox. The math just isn’t working. The math never works for me. Math hates me.

Also not a dawdle: building all the fiddly graphics. Sure an’ it’s the most fun part, but the most time-consuming.

I do think my mad scheme of making the graphic elements in low-contrast shades of gray is working. The sidebars are extremely busy without visually drowning the main article. I think. Modestly. They’re also low-burden: the masthead, for example, is the biggest graphic on the page: at 540 by 116 pixels, it’s only 12K. Most of the graphic elements are around 6K. So the total graphic overhead is lower than my mental rule of thumb for the size of a single image in an article (~40K).

You know what else didn’t work? Building it locally on my machine. Well, it kind of worked, but it got messed up looking for graphics. You define graphic locations with code that says “look in a directory called \graphics on my blog path.” Looking back, if I had defined my blogpath as localhost (and then changed it when I moved it online) it would’ve worked. But I got all wadded up when the graphics wouldn’t appear and I’ve been building it live online. I’ll leave the XAMPP on my machine, though — I’ve got some php ideas I want to play with.

You know what ELSE didn’t work? Migrating content from the old site. Well, it actually worked very well, except that it didn’t capture and upload the images. See, the images were there — which is why I was mystified when my new graphic elements wouldn’t show up — but when I looked at the source code, it turns out they were being grabbed from their original location on WordPress.com.

I had pretty much decided not to move my old content to the new location, anyhow. Start fresh. I’ll lose whatever Google cred I’ve built up so far, but c’est la blog.

Next: going visible. So far, I’ve been editing index.php online, but leaving the Under Construction graphic at the default location in index.html. To build the last functions — like comments.php — I need everything in place.

Time to expose myself!

Let’s go shopping! [11]

One of the great things about WordPress is the theme concept. A theme is like a skin; it changes both the look of the site and the functionality. And you can change themes with one mouse click, which is very cool. There are dozens of pre-made themes available — which is good, because it’s a little hard to customize code in the free version WordPress.

Because we’re going to be running it on our own host, however, we can download a theme and deconstruct it completely. Therefore, we only need to get kinda, sorta close. In fact, all I’m really looking for to start is three columns with a banner across the top. This one will do:

 

 

This is WP Andreas 00 by Andreas Viklund. Dude, I’m giving you a shout-out here and now, because by the time I’m done mangling your code, your own mama wouldn’t recognize it. Word.

When I was designing my original WordPress.com site, I wanted it to look like a newspaper. A very cheap newspaper. I mean, lower than a tabloid — the kind of free paper you pick up in the lobby of the supermarket. I had in mind something like the Arlen Bystander — the paper for which Peggy Hill writes her “Musings” column.

That’s a pretty specific scheme, but any designer will tell you it’s actually easier to work inside a set of limitations. The more specific, the better. I thought about abandoning this design idea for the hosted site, but I have so much fun playing with the little sidebar features. And it’s got another virtue — black and white graphics are much, much smaller. Graphics with solid areas of one shade that can be efficiently saved as indexed .gif files are smaller still. This means you can load a site up with images and not create bandwidth issues.

Design-wise, there are three differences I want to make in this version:

It needs to be tighter. Because I was working within the limitations of the free WordPress editing capability — basically editing text widgets and moving them around the sidebars — I never got everything lined up right. Things not lining up right are severely crazy-making to designers.

It needs to be smaller. I did a lot of the older design on my IBM ThinkPad, which has a screen resolution of 1400 x 1050. Viewed on a larger monitor at lower resolution, the result is an in-your-face HELLO!! I’M A DESIGN ELEMENT!!! sort of visual experience. The layout is 170 + 500 + 170, which should have been an easy screen fit. But that’s larger than the default opening size for an Explorer window, causing some annoying side scrolling issues.

It needs to be less busy. All those fiddly graphics in the sidebars can be mighty distracting. I’m thinking, maybe it will help if I limit the graphical range. Like nothing in the sidebar being quite as dark as black or quite as light as white. I don’t know if that’ll work, but it’s the plan.

Functionally — well, that’s easier to describe. I’m going to take Andreas’ code, pull out everything I don’t understand, and see if the resulting pale shell of a theme still works. Whee!

Mirror, mirror [10]

Right! There was a reason for the previous post — beyond showing off my m@d bnny-drwng skillz.

HTML and CSS files are plain text. You can create them in Notepad, save them to your hard drive and open them in your browser. So you can mock up a complete working HTML web site on any machine that’ll write text and run a browser. Which, these days, is pretty much any appliance up to and including an electric nosehair clipper.

A WordPress blog, though, is assembled on the fly by php scripts. To build a working WordPress site, at a minimum you have to run the Apache server, a MySQL database and the PHP interpreter — plus a text editor and browser, of course. So while we’re in draft mode, we have three choices:

1. Build the site in place on the host, right where it’s going to live, in front of God and everybody. I wouldn’t mind doing it this way — I’m clearly not capable of shame — but I’d be afraid to experiment too rigorously with the php for fear of blowing something up.

2. Build the site in place on the host, but in a scratch directory separate from the final location. This has the advantage that it’s not up front at your URL and you can experiment before making it go live, but someone could still stumble over it. Including Google. Yes, there are ways to tell Google to ignore directories, but it doesn’t always work. And once something gets into Google, it seems to be there for life. That means a lifetime of “not found” errors in your error log. Also, with 1) and 2) you have to be online to edit.

3. Build the site on your own machine — but to do that, you’ve got to run the server and database and stuff on your machine. You don’t have to run under Linux. There are Windows (and Mac) versions of Apache/MySQL/PHP, though setting them up is no fun.

Here’s where XAMPP comes in. XAMPP is an auto-installer dealie (like Fantastico, but geekier). It stands for: X-Apache-MySQL-PHP-Perl. The X signifies multiple operating sytems (as opposed to LAMP and WAMP).

Perl isn’t essential for our purposes, so we can use the Lite version of XAMPP (which is described as the “Take-Run-Delete-Forget-it” package. Does that sound good to you? You bet it does, Homer!)

You’ll find a nice, simple overview tutorial here. I followed these instructions, accepted all the defaults, fired it up, and did it run? No, of course not! The Apache server refused to launch. Per the instructions, I made sure IIS wasn’t loaded (that’s the server software that comes bundled with Windows XP Pro. It’s not loaded by default). Hm.

Ports 80 and 443 were reserved by some other program. Hm. 80 is the HTTP port and 443 is the HTTPS port. Who was hogging it? Skype was! Moreover, it doesn’t actually need those ports, it just reserves them as backup. Go to Skype >> Options >> Connections and unclick “Use port 80 and 443 as alternatives for incoming connections” and — yes! All is well.

Incidentally, does anybody know who’s putting out these photos of smartass, wormy-looking young people shot from above against a white background? Seems like half the sites on the web are using them. They sho’ am creepy.

Okay! That’s XAMPP done, now let’s get WordPress going. Download the latest WordPress version and unzip it into its own folder on \xampp\htdocs (wherever you let xampp install itself — it defaults to \Program Files). Total size of all this junk on disk is around 120 megs.

Okay, one last step. In your \wordpress directory, you’ll find a file called wp-config-sample.php. We need to edit that. Any text editor will do. This is what the default setup for localhost should look like:

 

define('DB_NAME', 'wordpress');
define('DB_USER', 'root');
define('DB_PASSWORD', ''); 
define('DB_HOST', 'localhost'); 

 

Save the file as wp-config.php (drop the word ‘sample’). Now when you point your browser to http://localhost/wordpress/, you should see:

 

---

 

My blog! Well, okay — your blog.

The whole point of XAMPP is to set up a local sandbox. But is this as now a real, web-accessible server? Yes, apparently it is, if you’re connected directly to the ‘net. That’s why MySQL gives you scary warnings about changing the password from blank. Weaselnet connects through a router, which seems to be enough of a cut-out. So, ye’r on yer own with that one!

How it all works together [9]

Okay, let me back up and try to diagram how this stuff works together, near as I can figure it. Corrections gratefully accepted. (Psych! No they’re not —
I hate being corrected). Drawing pictures of things always helps me understand. Especially bunnies. I like bunnies. Don’t you?

All these components interact to make the site work. You don’t have to master them all, but a basic understanding, at least, will help you grasp how the hell you blew away your entire site with one keystroke.

 

 

From the bottom up, then, it’s:

Hardware. You don’t actually interact with hardware, but sooner or later it’s going to go down, and then you’ll find yourself standing stranded in the middle of the room thinking, “why are my legs so weak? And why am I so pale?” Be prepared. I keep a tot of whisky on hand.

Operating System. The control panel means never having to touch your operating system, but a lot of housekeeping chores are more easily done from the command line. Everyone should know a little Unix. It’s like driving a stick-shift or handling a firearm — you may never need it, but you’ll need it badly when you do.

Server. The server software stands between your little piece of hardware and the internet and mediates how the two interact. It’s another piece you don’t have to touch, but if you want to hide things from public view or set a custom “not found” page, this is the dingus you’ll have to fiddle. With an Apache server, most of your customization is done in a file called .htaccess (which you may or may not have permission to fiddle — check with your host!).

Database. A database is a program for storing and organizing chunks of information. All of the content of a WordPress blog is stored in a mySQL database: posts and comments, but also your metadata, categories links…all the stuff that makes your junk your thing. You should know how to back this up, at least.

Scripting language. A scripting language is (generally) a simple programming language written and stored in (more or less) plain text and executed (usually) on the fly. WordPress sites consist of a series of files written in php — a scripting language specifically for creating HTML. When the computer sees the .php extension, it knows that it should execute the instructions and spit out HTML. When someone calls index.php, it pulls the requested content elements out of the database, assembles all the pieces of your blog (header.php, footer.php, sidebar.php and so on…each of which contain their own instructions) and hands it to the browser as one unified HTML document.

HTML. HyperTextMarkupLanguage. A markup language is a way of combining text with annotations. Annotations about appearance (make this word <b>bold!</b>), annotations about structure (<title>My blog!</title>). Browser software knows how to take these annotations and show them to you as a document. Time was, HTML was all you needed to know to build a website. It was a simple time. A simple, simple time. A simple, butt-ugly time. HTML is short, easy to learn, and a booger to get good results with.

CSS. Okay, so your browser knows that stuff surrounded by a b in angle brackets, <b>thusly</b>, should be bold. But what does bold mean? Your browser probably wants it to mean “thick”. But what if you want it to mean red? Or a different font? A stylesheet is a separate file that tells the browser how to display your document. A style sheet gives much more precise control over type and related design elements.

It’s called a “Cascading” Style Sheet because control of the document can be overridden successively: your browser has a default way of displaying a tag, the stylesheet supercedes that, style commands in the header of an HTML document supercedes that, and style commands embedded in the body of the HTML document supercedes THAT. In fact, when you pay to edit the style sheet on a free WordPress blog, you aren’t editing the style sheet at all — you’re writing a separate style sheet that’s applied after the one in your chosen theme. (A WordPress theme consists of a set of .php element files and widgets that comprise all the components of the blog, plus a style sheet).

So you can change the look of every file in your whole site by editing that one .css file. But you can also make exceptions by fiddling some commands in-line. Neat-o.

The Internet. The less said about this, the better, really. It is what it is and you can’t do anything about that.

Browser. Yeah, there’s variation, even now. There’s no sense trying to get your graphic elements lined up just so, because what looks right in Firefox may not cut it in Explorer. And what looks good in Explorer 6 may not in Explorer 7. Me, I use Opera, because I’m a Gates-hater from way back. And there are dozens more, if you count Linux and Mac (which, you know, somebody might). Windows makes it very difficult to keep multiple versions of Explorer on one machine (thanks, Bill!), but you’d better at least look at your site with one version of IE and, say, Firefox. It may break your heart.

Eyeballs. Ahhhhhhh! Eyeballs! Eyeballs!! Quick, bunny me!

Page precedence [8]

At this point, something interesting happened. The BlueHost placeholder page, default.html, was replaced with the generic WordPress front page, which is called index.php. In other words, WordPress didn’t overwrite the front page; they were both still there, but the browser chose to display index.php. Well, duh. I’d never thought about it before, but since there are multiple names the default front page can go by, there must be an order of preference for them.

Sure enough, I found a very helpful help page at this ISP.

The specific order of preference can vary from server to server. It depends on your needs. In most cases, the order will be:

index.html
index.htm
index.php
index.shtml
index.shtm
default.html
default.htm

or

index.php
index.html
index.htm
index.shtml
index.shtm
default.html
default.htm

You can also set your own page order for each domain. Go to the html folder of your account and put in a file called .htaccess with the following entry:

DirectoryIndex index.html index.htm etc etc

List each filename and/or extension in your preferred order.

(We’ll be visiting .htaccess again before we’re done, methinks).

My server gives priority to index.html. Well, that’s neat. It means I can make the site default to an “under construction” index.html page, while the WordPress front page is still there and being developed. Then rename index.html when I’m ready to go.

To celebrate, I made this nifty “under construction” graphic.

God, I tickle me. In fact, I tickled me so much, I also composed this brutal indictment of post-modern industrial exploitation of the working weasel.

I love my job. And by “job” I mean, “what I do at my desk.”

Call me Fantastico [7]

Meester Fantastico, you feelthy peeg!
— me, in an offensive generic foreigner accent

Okay, it distinctly said “automatic WordPress installation” on the blurb. I know it did. So…go on! WordPress me!

Anybody? Hello?

I have a poke around my new digs. There are some housekeeping files in my root directory. There’s a folder called /www, which I cleverly deduce is the WWW directory. Anything you put in that directory is visible to the whole world, even hidden files. If I were WordPress, that’s where I would be. And I’m not.

Time to sign up to the BlueHost Forums. Hm, okay. It turns out that nifty control panel is called cPanel, and it has an optional add-on tool called Fantastico. Fantastico. Suddenly, I feel like I’m being chatted up in a sleazy bar by a persistent foreigner, “they call me…Fantassssstico.”

Fantastico is a tool for auto-installing software packages to web sites. BlueHost has dozens of scripty things available this way, from guest books to…yes, there it is. WordPress.

Google tells me developers don’t like Fantastico. Hosts often let the packages go out of date, and users too clueless to do their own installs aren’t going to be savvy about doing upgrades, either. As a result, helpdesks have to field calls on old, buggy software that was fixed ages ago.

Yep, according to a thread in the forums, the version of WordPress that our Fantastico installs is a couple of revs old. But somebody suggested using Fantastico to set it up the first time, then immediately downloading the latest WordPress and doing an upgrade. So I did that.

Upgrade was a snap, because I don’t have any content yet so I didn’t have to worry about backups or anything. I just unzipped the new version and overwrote all the old files with new. At a glance, everything seems to work okay.

I have no idea if you have to do something fancy to set up the database or anything else, because Fantastico did all that for me.

Thank you, Fantastico, but now you must go. It would never work out between us. Do not be sad. I am deleting you.

Farewell.

Here’s to old friends [6]

 
Hey, check this out. I dropped by the liquor store this afternoon for my usual crate of swill, and they had a small rack of these tiny bottles of Heidsieck Monopole “Blue Top” champagne.

This is something special. It was my favorite of the many, many bottles of champagne we laid to rest over Christmas holidays this year.

I thought $10 a pop was a little pricey for one glass of the stuff, but turns out it’s not a big rip. That works out to $58 a full bottle, and a full bottle goes for $50 here. Anyhow, I couldn’t resist.

See, this was the official champagne of the maiden voyage of the Titanic. They brought up some bottles when they salvaged the wreck a few years back and drank them, and it was still excellent (here’s hoping Telly Savalas didn’t get a drop of it).

I bought it to smash across the bow of the U.S.S. Sweasel.com, if I ever get the damn thing afloat. Tasty and ironic. Perfect!

And by “smash it across the bow” I mean “chill it, gently pull the cork, pour it into a fluted glass and drink it.”

You figured that out, right?

 

Sign me up! [5]

Sign me up! [5]

Turns out, BlueHost’s $6.95/mo price is for a two-year commitment. The monthly rates are higher with a shorter contract. Still, the domain name registration is free and you can cancel any time and get a pro-rated refund (you kick in $10 for the domain if you quit). Mmmmmokay. Here, have $166.80 of my money.

They give you the option of having private registration. That is, when someone does a whois search of your domain name, all the contact info points to BlueHost — not your own personal name, address and phone number. This is important if your online presence really, really irritates people. Don’t ask me how I know this.

However, it’s wiser decline this option if you’re registering your own name, or the coolest domain name ever. I suspect the name may technically belong to them, if they’re listed for all the contacts. I had a web host go bankrupt on me once. I had registered several clients through them and they used my contact details for everything except ownership. Ow. One domain name was my client’s actual first and last names, so they had me by the ouchy bits. It was fun getting that redeemed. Okay, no it wasn’t.

I don’t think I have to worry about anyone nicking sweasel.com. The domain name seemed to propagate instantly. At least, I was able to access the placeholder page pretty much as soon as I finished filling out the forms. Cool.

On login, I was greeted by this control panel:
Click the thumbnail to see it actual size. Email me frantically if there’s anything listed that I shouldn’t reveal.

It’s much more complete than the one I’m used to. It’s all web-based, of course, so some of the applications are a little clunky, but it looks like you could do pretty much everything you need right from here. Which is handy, because they want you to send them a scan of a picture ID before they’ll give you telnet access.

Security conscious. That’s good.

They also called me twice to confirm that I was who I said I was and I was really willing to spend such a princely sum to buy two years worth of empty internet vanity. Once on my landline and once on my cellphone, and they left return contact numbers when I didn’t answer.

Yeah, yeah…I called them back this morning. Did I mention Sandy Claws brought me a great big bottle of Glenmorangie for being such a good weasel?

First step — hosting [4]

“Let’s start at the very beginning. A very good place to start…” — Mary Freaking Poppins.

Well, that was easy. WordPress.org recommended five. I took their top pick. Downside: they’re probably getting a flood of new business as a result of the link. Upside: WordPress wouldn’t risk recommending a dud.

I piddled around the CEO’s blog (I own a pair of jeans older than this guy!). He apologizes for bandwidth shortages, which are apparently now fixed. Fair enough.

They’re the largest consumer of bandwidth in the state of Utah. Huh. I would’ve thought it was the Church of the Latter Day Morlocks and that whole world geneology thing they do.

The specs on the WordPress page are out of date. Here’s what BlueHost is currently offering for $6.95 a month:

---

FEATURES INCLUDED / ALL ACCOUNTS INCLUDED

Disk Storage (NOW MORE!) 200 GB
Host 6 Domains On 1 Account (WOW!)
Free Drag and Drop Site Builder (NEW!)
Free Domain Name
Support International Domain Names

POP3/POP3 Secure Email Support 2,500
IMAP/Secure IMAP Email Support 2,500
2 Different Web Based Email Solutions
Forwarding Email Accounts Unlimited
Email Autoresponder Unlimited
Gigs of Site Transfer (NOW MORE!) 2,000 GB/mo
Add-on Domains 5
Parked Domains 20
Subdomains 20
Additional FTP Accounts 1,000
MySQL Databases 50
PostgreSQL Databases 50

CGI-BIN

CGI Library
Server Side Includes
Frontpage 2000/2002/2003 Extensions
Account "Control Panel"
FTP Access
Shell Access (SSH)
Override .htaccess Support
Anonymous FTP
Webmail (Browser Based Email)
Log Files + Site Stats
Customizable Error Pages
Web File Manager
Custom Cronjobs
Hotlink Protection
Spam Assassin Protection
Fantastico Script Support

CGI / DATABASES INCLUDED
PHP Version 4 or 5 (Your Choice)
Perl 5
Python
Ruby / Ruby On Rails (NEW!!)
Support For Custom PHP.INI Files
MySQL 4.1 Database Server
PostgreSQL Database Server
Javascript/ DHTML
Flash / Shockwave

FREE WEBSITE PLUG-IN SCRIPTS INCLUDED
Message Forum (PHPBB and More)
Form-mail Scripts
PHP Nuke / Post Nuke
Guestbook (Multiple Options)
Live Chat Software
Web Blogs / WordPress / b2evolution
Mailing Lists
Image Galleries / Coppermine (More!)
Poll and Survey Software
Web Auction Software
Moodle
Tikiwiki
Mambo and Joomla
phpForm Generator
Help Center/Support Ticket
Many, Many Others...

E-COMMERCE FEATURES INCLUDED

SSL Secure Server
OS Commerce Shopping Cart
Agora Shopping Cart
Cube Cart Shopping Cart
Zen Cart Shopping Cart
Free Generated Certificate
Password Protected Directories
OpenPGP / GPG Encryption

MULTIMEDIA FEATURES INCLUDED

Supports Streaming Video
Supports Streaming Audio
Real Audio & Video Support
Flash Support
Macromedia Shockwave
MIDI File Support
Add Own MIME Types

WORLD CLASS TECHNOLOGY INCLUDED

Quad Processor Performance Servers
Denial of Service Protection (DDOS)
UPS Power Backup
Diesel Generator Backup Power
Customized Apache Web Server
24/7 Network Monitoring
Mirrored Storage Backups
OC-48 Backbone Connection

SITE PROMOTION INCLUDED

Search Engine Submission FREE
Search Keyword Analyzer FREE
Search Engine Position Report FREE

---

They had me at “MIDI File Support.”

About me [3]

Because it’s a me sandwich on toasted me with a side order of me here at the all-you-can-me café.

Not sure how to describe my level of computer expertise, if you need a benchmark for comparison. I started life as an illustrator, but computers ate my profession a couple of years after I got my first steady job. It was geek or die. And I’m all out of bubblegum.

Writing code isn’t my primary job, but I’ve written a lot of code. A lot of stupid, psychotic, messed-up, throwaway code. People hate touching my code. I don’t know why. I comment it thoroughly. And I include lots of jokes.

I hit the internet early, maybe 1986. In 1990, I read Tim Berners-Lee’s white paper proposing a thing called the World Wide Web and I thought, “pff! That’s stupid!” Then I actually experienced the WWW for the first time around 1993 and thought, “pff! That’s stupid!”

Still, I built websites for money in the early Wild West days, but lost interest before CSS was common. I can bend it to my will, but it’s like elephant training — I smack things with a stick and observe the result. I maintain a handful of the sites I built, but I’m not really happy with the server I host them on. At least they give me a shell account, so I can telnet in from work and reach forbidden websites using Lynx and play Hack.

I never really got into databases. When I hear stuff like, “Early MySQL versions included few standard relational database management system (RDBMS) features, and the current production version still lacks properties found in other SQL RDBMSs, which has led database experts to criticize MySQL as falling short of being an RDBMS…” I think, “blah, blah, blah…my butt-bone hurts…can we have pizza?”

Even after all these years, I’m still afraid I’m going to do something stupid online and totally break the Internet, and then everyone will be all, “Ohmygod! Weasel broke the internet! Hey, everybody — let’s hate Weasel!” Which would surely suck, right there.

In short, I’ve been at it a long time, but I’ve managed to preserve a vast ecosystem of precious ignorance. I’m good at figuring out some things and bad at figuring out others. My computer expertise is a mile wide and a pica deep. And if you know what a pica is, you too went to art school.

Ha! Loser.