Happy birthday, Mike!

Mike is one of the most influential people in my professional life, and also a dear friend.

I wanted to express my gratitude and wish him a very happy birthday!

Thank you Mike for inspiring, enlightening, educating us all, and for being an amazing friend!

Quote from Mike’s post (just one of the many thoughtful, eloquent articles from his blog):

If everything worth doing were easy, everyone would be doing it, and it would lose its special-ness, and wouldnâ??t be worth doing anymore (this may be debated, but Iâ??m talking in a broad competitive sense). Therefore, the initial difficulty you encounter on mastering a new skill, musical instrument, or merely being more successful in life, is just part of the grand scheme of things. Patience, persistence, and keen observational skills can help you get over the initial difficulties built into any task worth doing, and truly separate you from the crowd.

Step 4: setting up your new theme in WordPress

Once you have all your page templates coded, you are ready to set it up in WordPress.

At the bare minimum, you should have the following templates created:

  • header.php – includes html declaration, styles, include files, opening body tags
  • footer.php – closing body tags, analytics codes
  • page.php – the main template that will call header, sidebar and footer files
  • index.php – template for displaying your posts
  • sidebar.php – self explanatory, sidebar content
  • comments.php – template for rendering comments
  • 404.php – good to have

I’m missing one more important one, for search, but I’ll add it later.

So your folder will look somewhat like this:

Then upload your theme folder to your server, into /wp-content/themes directory

Login to WordPress, and go to Appearance tab.

You should then see your theme show up as an option:

Click on “activate” and your theme should be up! (or do live preview first if you’re not sure)

Check your site and see if there are things to be tweaked, fix them and – voila! You’re up and running with your brand new theme! Congrats :)

Site redesign, step 3: creating your WordPress theme

Remember, that your site will have a few distinct templates, such as:

  • Home page (in my case it’s the main blog page, with X latest posts)
  • Category page
  • Archive page (could use the same layout as category)
  • Search results page
  • Individual post page
  • About page and potentially other static pages
    And potentially many others, depending on how complex the site is.

In the template for the home page. You’ll need to make sure you also have templates for the rest of your page types.

Here’s a great article explaining the anatomy of a WordPress theme

And a comprehensive resource from WordPress on building a theme

So in this step, I won’t be explaining a lot, as it mostly requires coding. Now let’s open up our text editor and get to it…

Site redesign, step 2: coding HTML/CSS

This step is very straightforward, you take your PSD mockup and code it into HTML.

A few things to note:

  • for me it’s easier to add some creative elements like styling of links, borders, size adjustments directly in HTML (instead of designing it pixel-perfect in PSD)
  • drop shadows are now easy! yes!
     .shadow {
     -moz-box-shadow: 2px 2px 5px 2px #ccc;
     -webkit-box-shadow: 2px 2px 5px 2px #ccc;
     box-shadow: 2px 2px 5px 2px #ccc;
     }
    
  • to make your container elements stretch the full height of the page, use this (I always need to re-google it):
     min-height:100%; overflow:hidden
    
  • I initially code all styles inside the HTML page and then once they are done, move them into CSS file(s)
  • there’s a neat “lorem ipsum” text generator for Mac, called Little Ipsum
  • I hand code everything in Coda

Now it’s starting to look good!

Here’s a link to the simple coded HTML, zipped (not 100% perfect).

Next step: moving your code into WordPress templates and creating your theme

Site redesign, step 1: Structure, look and feel

WordPress is amazing – you can customize it to run pretty much ANY site, from simple blogs to full-featured websites with e-commerce (I’ve done quite a few sites of different complexity, including large e-commerce ones). So congrats if you chose WordPress as your platform – it really is a great, mature, flexible piece of software.

As with any project, step number one is to figure out what the goal of your site is, what kind of content you will have, and what is the order of importance. The fancy word for it is “information architecture” and/or “user experience design”.

In my case, the goal of the site is mostly to support professional growth, and be a place for improving my writing.

Once you know your goals, it’s fairly easy to lay out your site navigation and structure.

So, the architecture is pretty simple:

  • show my blog, including standard topics/categories and archives sidebar
  • include an “about” page – usually a good idea, so visitors can get to know who you are
  • showcase certain work I’ve done
  • link out to GitHub, Twitter and LinkedIn profiles
  • give visitors a way to contact me easily

Then, I usually sketch a quick wireframe of the site, just to get a quick visual picture before designing it.

In my case, it’s a simple two-column layout, with a header (and possibly a footer).

After this comes the fun part: being creative! I usually take some time to browse around and find inspiration on Pinterest, some awesome web folk whose work you admire, or even actual places and things.

I wrote down a few things that I wanted to include:

Once you are inspired enough, open up Photoshop and mockup your design, paying attention to how each component will look like. You might come up with something like this:

It’s very simple but is exactly what I need.

When you are happy with your design, continue to step 2: coding your HTML/CSS template

Simplifying the site

I really wanted to update my site for quite a while now, and make it much cleaner and simpler.

The current version of the site runs a theme called “Me Gusta” that I put up about 6 months ago for the sake of saving time. It was good enough, I didn’t need to design and code it, and looked presentable.

However, it had some issues:

  • it’s overloaded with features and feels too heavy for me
  • meta information is all out of whack (for example, when someone posts a link to my site, the description is some garbage about using the keyboard shortcuts that come with the theme)
  • each post requires an image for a nicer preview
  • default styles for elements Pokies Pokies like list items are reset to something really strange – all lists items are displayed inline

Now, it’s very possible to fix all the above issues, but that means going into someone else’s code and trying to figure out how to make it work. And that requires investment of time and patience. I figured that the preferred way for me is to design a clean look and code it with just bare minimum of what I need.

And since I’m doing it, I wanted to document the process – hope some folks find it helpful!

Step 1: Structure and design
Step 2: Coding HTML/CSS
Step 3: Creating a WordPress theme
Step 4: Setting it up in WordPress

Google Nexus 7 makes a great gift

It was my little cousin’s birthday yesterday – happy birthday Max! And by little I mean he just turned 24! And while some might say he’s a grown man now (yes, yes), he’s still “little” to me, because I’ll always remember him being the youngest kid of the four of us (me, my sister, his sister and Max were really close growing up).

Max is long overdue to get a smartphone, and we’ve had numerous discussions about iOS vs Android, just like the rest of the world.

To make the best of both worlds, I wanted to let him decide what platform will rule them all! Thanks to Mike’s advice, me and family got him a Google Nexus 7, and some $ for the upcoming new iPhone 5. Now it’s up to you, little cousin, to answer that trick question :)

PS: Ordering it was a breeze – ordered it through Google Play (with Google Wallet account) on Wednesday, and Friday morning it was all mine to gift! Nicely done, Google!