BogoJoker Initial – Blog Redesign

About a week ago I decided I wanted to do something new and exciting. After some thought I figured I would take a go at upgrading my blog’s design. All in all I invest three days into the theme, and the remainder of the week to add final touches. The result is this, my first WordPress theme, tentatively named BogoJoker Initial.

As is normally the case with my projects, this one pushed me to the edge! I sweat the details on every pixel, every color, the layout, the font, and more for the design. On the backend I wanted to make sure it was compatible with widgets, plugins, extensions, templates, yada yada yada. In the end it was looking pretty good on my test server, better then I had hoped!

Unfortunately when I moved it to the real world data that was on my blog my previous articles and markup were fighting me. It took another few hours to clean up old content, or at least get it into a workable state. There are likely to be some problems, but rest assured I’ll be working out the kinks and focusing on the future content.

Front Page:

The focus here is on the content. I wanted a minimal header and sidebar, a standout footer, and the majority of real estate devoted to the actual articles themselves. I’m also experimenting with a larger font-size to make it easier on the eyes of visitors.

Individual Articles & Comments

Nothing too special about an individual article, but here the responses, or the comments, are center stage. I spent a lot of time making the design on these minimal as well, but they certainly stand out just as much as the article does. Avatars, links, dates, and permalinks are all there as you would expect!

404 Page:

But, don’t leave yet, I’m glad you’re here! If you just arrived try checking out the home page for something that interests you. Who knows, maybe this was a good thing!

If it was one of my links brought you here I’d appreciate a heads up on my broken link. Please drop me an email so that I can resolve the problem. Thanks for the notice.

Zero Search Results:

It looks like your search on asdf came back with no results. But, clearly you have an interest in the subject, so I’ll make you a deal!

Drop me an email asking me to write about the topic and I’ll see what I can do! Be sure to let me known what you are interested in learning, or at least what you want to hear about it. I’m always looking for things to write about, and having someone already interested in a topic gives me more incentive. Thanks!

Archives & Portfolio

Just a little uniqueness. There are a few built in page templates. This is one for Archives, and there is another that I have to complete for a Portfolio. These look similar to regular articles, except there is a custom icon/image instead of the date.

Theme Screenshot

Finally I made sure to add a little jazz when someone is selecting the theme. Here is the screenshot image I decided on:

Thoughts?

I’d like to know what you guys think. Both the good, and the bad. The more criticism the better, otherwise I’m not going to learn and improve. Cheers.

A “blog.domain.com” That Works

I seem to have had some really bad luck doing what I thought would be very simple. I finally arrived at a solution that I really don’t feel is optimal, but it works and I’ll monitor it for a while and hope that it continues working. (You’ll know if something ended up changing).

Problem

I own “alpha.com” and I want to create a “blog.alpha.com” that actually pulls pages from “alpha.com/blog/” on the web server but the user should still see “blog.alpha.com” in their browser’s address bar.

How I did it with this WordPress 2.5.1 Blog

Hopefully if you look up at your address bar right now you see blog.bogojoker.com. If not, then this failed and completely ignore me! I ended up having to do three things:

1. I Setup redirection for a subdomain. I used my hosting company’s Control Panel to create “blog.bogojoker.com” and point it to “http://bogojoker.com/blog/”. Please note this change does not start working immediately. It took a few hours for the redirection to be broadcast over DNS Name Servers. Once it did work I went to the next steps. I wouldn’t recommend going to the next steps until this starts working because I believe they depend on this!

2. I logged into the WordPress Admin Dashboard. I went to “Settings” and put “http://blog.bogojoker.com” into both the “WordPress address” and “Blog address” fields. This put my browser into an infinite loop which I fixed in the final step.

3. I FTP’d into my server, went to the “public_html/blog/” directory and commented out these lines from the hidden “.htaccess” file: (Note that adding a “#” to the start of the line comments that line out)

   #RewriteCond %{HTTP_HOST} ^blog.bogojoker.com$ [OR]
   #RewriteCond %{HTTP_HOST} ^www.blog.bogojoker.com$
   #RewriteRule ^(.*)$ http://bogojoker.com/blog/ [R=301,L]

Voila. That is how I did it. I ended up spending far too much time on what I considered “better” solutions that didn’t seem to work. In doing so I found out some things, but I can’t really be sure what I learned anything valuable from it.

Troubleshooting Tricks

If you end up having the same trouble, if you want to experiment on your own, or if you tried something that totally failed hopefully this can help.

At one point during the week everything crashed on me. Not only did the website not redirect properly but the direct paths weren’t working. I chalked it up to me turning the redirection (step 1 above) off. I stumbled upon a temporary solution to fix WordPress in the few hours it would take for that redirection to be reborn through DNS. It involves a little familiarity with mysql or phpMyAdmin and knowing your database schemas.

For those with phpMyAdmin access:

1. Log into your phpMyAdmin

2. Select the WordPress’s database. Most servers have username_wp### or the like, this you should recognize pretty easily or can find from your Control Panel

3. Browse the “wp_options” table

4. Modify the “siteurl” value to be the “real” path to the blog subdirectory, NOT what you want it to be but where it really is. For example “http://bogojoker.com/blog/” for me.

5. Now log into your WordPress by manually going to your domains wp-admin page like so: “http://yourDomainHere.com/blog/wp-admin/”

6. Go to the “settings” tab and change both urls to the url mentioned in step 4.

That should bring your website back up, albeit with the uglier URL structure. For those without phpMyAdmin access the you should have some form of access to your database, be it command line using the “mysql” command or via another graphical interface. Just try to follow the steps above as closely as possible.

I hope this helps you out a little if you want to accomplish the same thing. Even better though, come up with a better solution and let me know. I dreamed of solving this in a couple minutes and ended up spending a little over 3 hours taking a number of approaches. So I figured, what better to do but write about it!