[UPDATE: Almost none of this is accurate anymore. It’s an old post. This blog has changed. A lot. And so has WordPress. So do not look to this as a how-to. At least not much of one, anyway.]
A couple of friends have asked for details about how I created this blog. Honestly, it has been a little harder than I thought, and I felt that sharing the process might be helpful for anyone else embarking on a similar endeavor.
This post is a little technical, and may be of little general interest. Happy, engaging Rob will be back in a later post, I promise, but I figured I’d get this post up before I forgot how I put some of this together.
Before starting my blog, I had to determine what exactly I wanted it to be. I was looking to create something more than a blog site, but also a “personal identity home”, a place that could include a portfolio section with photos, designs, and videos I’ve created, in addition to social media connections such as Twitter and Facebook.
The challenge became finding the right platform and solution that would meet these needs. Free places, like Blogger.com, offer basic blogging functionality, but I wanted to build an entire site, and ideally host it myself (at robwebster.net instead of robwebster.blogspot.com or something like that).
After lots of research, I determined that WordPress was the way to go. WordPress is a free blogging platform/program/development tool that’s more robust than other solutions. It can be used “out of the box” without much trouble, but is also infinitely customizable. More than just a simple blogging tool, WordPress can be used to build a vast website, and even be used as a CMS (Content Management System), allowing multiple contributors. I also like that anyone can leave a comment to a post. Some other platforms make you create an account and log in to leave comments.
So I purchased robwebster.net (years ago, actually. I’d just never used it for anything), and I found a host for my website to live (mochahost.com). (UPDATE: I hated Mochahost, and swithced to Dreamhost years after writing this post. Dreamhost is so much better.) Mochahost has a control panel, and has a package of software that they’ll automatically install on your website. WordPress is, conveniently, one of the software packages they support and would automatically install. All I needed to do was select “Install WordPress”, and tell the installer that I wanted it in my root folder (robwebster.net, instead of robwebster.net/blog), because I wanted people to get straight to my blog when they went to my website, since my blog is my website.
Once WordPress is installed, the blog is up and running with some dummy sample text inserted. By going to robwebster.net/wp-admin, and entering a password which I won’t divulge here, I can get to a page of control panels and options for my blog. Peachy. I could even go in a tweak all of the code manually if I needed to.
I found that under a tab called “Appearance”, I could choose from a number of themes. Themes completely change the look of the site, and the layout. And though WordPress comes with a couple of free themes, there are thousands of themes downloadable online. Many are free, but the best ones you have to pay for.
I spent a couple of days looking at themes. Some are for video bloggers. Some are for magazine websites. Some are for online storefronts. Some are ugly. Some are amazing. I was able to download and preview a bunch of free themes (WordPress lets you see what your blog looks like before committing to the change. And even after you’ve changed it, you can always load your old theme to put everything back).
I finally settled on a free theme from a company that usually sells their themes. The company is called WooThemes, and their stuff is top-notch. (Another great site to look into is ThemeForest.net.)The theme I picked is called Irresistable. WooThemes has a great product, and some of their innovations are making it into the next big overhaul of WordPress. When you install a WooThemes theme, you get a whole new control panel of options that let you tweak and adjust things much more robustly than the native WordPress control panel. And for me, the big bonus was being able to set up the navigation bar at the very top of this website, letting me set it up like a full fledged website and not just a blogging site.
The problem with a great free theme is that lots of people might want to use the exact same theme. I wanted my site to look unique. I found the folder in the Irresistable theme package that had all of the .PNG image files, as well as a layered Photoshop .PSD file, showing where all those .PNG files came from. So I changed the look of the whole site, giving it a warm brown wooden theme, a custom logo, and changing some of the text. I just saved my own files overtop of the old ones, and when I previewed my site, I could see my new graphics.
I wanted to do a number of multimedia things with my site.
- I wanted people to be able to click on a photo in a blog post, and get an elegant bigger version of that image.
- I wanted to be able to easily embed videos in my posts.
- I wanted to set up a video gallery that would have thumbnails of my videos that people could click on to see it full sized.
- I also wanted to set up similar galleries for my photography portfolios.
And so this is where the wonder that is WordPress kicks in to high gear even more. There are a gazillion plug-ins and add-ons that you can download and install on a web page. Some worked great, and some wouldn’t do what I really wanted them to do. Some came in conflict with each other. So after lots of trial and error, these are the plug-ins I’m using, which helps me accomplish everything I set out to.
- NextGEN Gallery: This is what runs the photo galleries, and is better than the built-in gallery functions of WordPress. You can bulk upload pictures, mix and match galleries and albums and how they display, etc. One thing that’s a pain: I had to work hard at getting the titles to show up. An adjustment to the gallery.php file in the plugin’s folder fixed it.
- Contact Form 7: This sets up contact forms (see the Contact button at the top of this page to see how it works) that are safer than an email link. Why? Spammers and nasty people can scan random websites looking for email addresses to send junk mail to. A contact form makes your email address invisible but still allows an easy way for people to get in touch.
- TubePress: This is what I use for my video galleries. I created a Vimeo account, and can put any video into an album (or multiple albums). TubePress lets me then display a specific album, and in the way I really wanted for my site.
- Simple Twitter Widget: This lets me list my latest Twitter posts on the right side of my page.
- Auto Thickbox: Thickbox is the built-in code that, if someone clicks on a photo, shows the photo in an elegant floating frame. Auto Thickbox makes this happen automatically, with any picture on the site. Most importantly, it cooperated best with the NextGEN Gallery. One problem I ran into: Page elements would show up over top of the image. So in the style.css file that’s a part of the Irresistable theme, I found a z-index value for the header, and changed that to 50. It worked. The z-index is what determines how page elements are stacked. Thickbox floats images with a z-index of 90. Anything less than 90 will be under the image, which is where we want it.
- Share and Follow: This is the plugin that adds the Twitter, Facebook, and Email share buttons to the bottom of each post.
The easiest was to install a plugin is from within the WordPress control panel. One of the menu options on the left is for plugins. This brings you to a page listing all your plugins. At the top of the page is a button to add new plugins. You can search for a plugin by name or search categories. They’re easy to install and then disable if it doesn’t work like you’d hoped.
So that’s it, in all its painful details.
Send me a comment if this has been helpful, and a link to your site or blog. I’d love to see what you’re putting together, too.
Update: I’ve made some more modifications. I’m recording these more for my sake than yours, so I’ll remember them later. I added a Related Posts plugin, which required adding a code snippet to the single.php file, which is the file that determines what a blog post looks like. Page.php governs single pages, like my portfolio pages, and index.php governs the front page, I’ve realized. I’ve also added some other plugins, like Feedburner analytics and automated backups, that do not affect the end user’s experience. I also slightly darkened the border around the posts to better distinguish the separate areas of the page, and in the style.css file, changed how italicized words look (they’re no longer brown!) and changed how hyperlinks look (they’re now a different color).
Hey Rob. Great stuff you’ve got here. I like the wootheme a lot.
I went with Thesis, a premium theme, and love it. Takes a little bit of code-skill and such to really get it working, and I am learning. My custom Twitter bar, for example, was all coded by hand, and includes two scripts, one for Jacqueline, and one for me.
But I’m excited to see your stuff here, and will be checking back as regularly as you tweet about it.
Great post Rob! Thanks for sharing this info! I think I’m going to move forward with a ProPhoto theme I’ve been looking at and see if I can make a blogsite out of it. I have a flash site but I hate the thought of keeping two sites updated. We’ll see how it goes! :)