Building with WordPress: From sketch to prototype to company website in 5 hours

Aside from being a good blogging tool, WordPress is also a lightweight content management system that can be used to run such diverse sites as news or magazine publications, personal and organizational websites.

I recently started accepting paid web development work and website management. Several weeks back, I bought a domain, Tugkaran.com (from the Bisaya word for staging ground), and created a static HTML page as placeholder because I did not have time to configure WordPress to run the site.

Building with WordPress FROM SKETCH TO WORDPRESS DESIGN. The steps I took from planning a site to deploying a custom WordPress theme for it using Yahoo UI Grids Builder, Aptana, and Bluefish.

But when one of my projects was about to go live, I needed to quickly build Tugkaran because I already placed a link to it in the footer. I spent whatever time I could spare from newsroom and web development work building Tugkaran, 30 minutes or so here, an hour there, a few minutes here.

It took me five hours to go from sketching the site on paper, protoyping the design in HTML, and setting up WordPress with the custom theme. The site was designed “live.” Developing it locally and then replicating the work in the server would take more time—which I didn’t have.

The Tugkaran website still needs a lot of work but it will do for now. I’ll polish it when I have more time. If you want to study the files I worked on, you can download it at the end of this post.

Continue reading →

Announcing WP-Subdued WordPress theme

I have just released WP-Subdued, a WordPress theme based on the open source Subdued web template released by Free CSS Templates. I regularly check Free CSS Templates and when I saw the Subdued template, I immediately knew it was perfect for a site I’m helping to launch.

wp-subdued WP-SUBDUED. My WordPress port of the Subdued template released by Free CSS Templates. Click on photo to view larger image.

To preview the original template, click on this link. To view how it looks in WordPress, check this working version in my sandbox.

The template was released as an open source design under a Creative Commons Attribution license and the designer said he’d appreciate if you somehow link to his site.

Save for changing the header to not use images, styling the sidebar list, and adding comment and search forms, I kept most of the design elements.

Continue reading →

New Aptana IDE version makes Linux installation easy

I use Aptana whenever I have to edit a web template or convert one to a WordPress theme. Before I found Aptana, I used Dreamweaver. I wrote a post earlier on how to use Dreamweaver to edit edit WordPress themes.

Aptana in Linux EDITING WITH APTANA. Porting an open source web template into a WordPress theme using Aptana. Here, Aptana is showing a preview of the design. Click on photo to view larger image.

When I found Aptana, however, I dumped Dreamweaver. I found Aptana, an open source integrated development environment or IDE, to be a better tool to edit CSS and HTML files. I sometimes use it to edit WordPress .php theme files although my editor of choice right now is gedit.

While Dreamweaver is easier to use for non-geeks like me who are not as adept in coding, using Aptana allows me to improve my HTML and CSS skills. You can’t drag things around to re-arrange web page elements as you do in Dreamweaver. You have to do the changes by code.

When I migrated to Ubuntu Linux in my laptop, I knew I had to install Aptana or else I’d have to go to my Windows desktop to work on web templates. Installing Aptana in Windows is painless. You just need to download the installer package and run it.

In Linux, installation used to be complicated, at least for non-geeks like me. To install previous Aptana versions, you need to execute a couple of apt-get commands, CHMOD the installation file, and then set environment variables. When I first read the instruction, the first thought that formed in my non-geek brain was “God, please let there be a .deb file somewhere.”

Continue reading →

How to convert any web template into a WordPress theme

Among blogging applications, WordPress probably has the largest number of great-looking themes to use. Still, there are hundreds of free and even open source web templates not yet converted to work with WordPress. Knowing how to make this themes work with WordPress broadens your choice of design to use for your blog.

Converting a web template is fairly easy if you take the time to learn how to do it. I wrote this guide for someone like me a few months back — eager to use a great looking web design and yet not knowing how to start converting it to work with WordPress. If you want to view a video tutorial on how I turned this open source web design into this WordPress theme, click here for the blog post.

Continue reading →

Turning a web template into a WordPress theme: a video tutorial

Knowing how to turn any web template into a WordPress theme broadens your choice of designs to use for your blog. I created this video tutorial for someone like me a few months back: eager to attempt turning a great looking open source web template into a WordPress theme but not knowing how to start. If you want to read a tutorial based on the screencast, click here.

For the screencast, I turned this open source web template into this WordPress theme. The video tutorial ends with the creation of the different WordPress theme files. The part when I activated the theme, tweaked it, and fixed errors wasn’t captured as I ran out of virtual memory. I just included notes on the tweaking after the screencast below.

Continue reading →

Take 1: WordPress theme screencast for design-challenged non-geeks

(UPDATED) I created a screencast on how to turn any web template into a WordPress theme. I created the screencast for someone like me a few months back: interested to use an open source template for my blog and yet not knowing how to turn it into a theme.

This is the first take because, as you may see, it needs a lot of improvements. The screencast covered how I turned this open source web design into this WordPress theme. I’d appreciate comments on this as I would either be rendering the screencast again from the raw frames capture I saved elsewhere or throwing away the thousands of captured frames and doing the screencast all over again.

Continue reading →

Announcing nautica-magazine WordPress theme for webzines

To those who were waiting for this theme, I apologize for the delay in the release. I had to wade through various folders to get the latest version of the code because I was working on two sites using this theme at the same time.

I have since been using Subversion via a free project management account with Unfuddle (check my previous post) to make sure that the files are organized. If anyone is interested in helping improve this theme, leave me note so that I’ll host the files in Google Code and we can work on it together.

Nautica-magazine is a WordPress theme based on the nautica05 open source template. It doesn’t work out-of-the-box because you need to edit the index page to make it work with your site’s sections or categories. Read the included readme.txt before activating the theme.

Continue reading →

Database down; spirits up

I woke up to a WordPress database error yesterday. The error wasn’t caused by any changes I did to the site but something to do with the server.

I spent hours the night before working on this, a demo of using WordPress to manage a news portal.

With time to kill while waiting for the site to be fixed, I implemented something that had been listed in my “someday” list – customize the WordPress database error message and have the system send you an e-mail when your blog can’t connect to your database. I hate to admit it but I actually enjoyed the downtime as it taught me a lot as well as afforded me the time to play around with something I had long wanted to do.

The hack is surprisingly easy and I enjoyed crafting a database error page that I just might intentionally place wrong config data soon to test my planned addition to the error page.

Continue reading →

Nautica05-WordPress theme released

I’ve released the nautica05-wordpress theme, a template based on the open source Nautica05 design posted at the Open Source Templates site by Studio7Designs. I used the Nautica05 template in turning this Cebu blog into a webzine, which I discussed in my previous blog post.

Nautica05-wordpress is a template for blog sites. I will be releasing later a hacked version of the template for use in webzines managed by WordPress. Nautica05-wordpress uses a two column layout by default but you can easily change this to three-columns by following the instructions in the nautica05-wordpress page.

Continue reading →

How to use WordPress to run a magazine, news website

WordPress is a great tool for online writers. It’s simple and yet is such a pleasure to use. Yes, there are things that need to be improved but WordPress being an open source software, you can expect continuous improvements on it by the community.

The ease by which sites can be created and run through blogging software like WordPress allow writers previously without publishers to print their works online. The problem with using a blogging software to manage your website, however, is that the tool defines the character of your site.

Once in a while, I see blogs that seem better off presented as online magazines or news websites rather than as blogs.

WordPress, however, is an extensible website content management system that can be used to run magazine-type websites. Here are steps I took to turn this online magazine on Cebu from a blog into its current presentation. I’m still working on it, though, so you might encounter issues. (Update Jan. 9, 2008: I have redesigned the site. It’s now using an even better theme that I’m still working on. I will be releasing this theme soon.)

Continue reading →