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 →

Using WordPress as CMS of news, magazine sites redux

My redesign of Cebu Living, an online magazine on Cebu, is now live. Check it out. It’s using a WordPress theme for news and magazine websites. The new theme still needs a lot of work but if you want to try it out, you can do an anonymous svn checkout: svn checkout http://svn2.assembla.com/svn/cebulivingmagazine. Just go through the template files and see what needs to be changed for your site. I promise a commented version of the template files soon.

Unlike the previous Cebu Living theme, which I ported from an open source CSS/XHTML design, I built this new one from scratch. And it shows. I’m not a designer, in fact, I’m bad at designs. But the new theme incorporates elements I, as publisher, wanted from a site run as an e-zine and using WordPress as content management system (CMS).

I will be releasing the theme as soon as I finalize it. If you have comments on the new design, please leave it in this post or send it as an e-mail so that I can consider incorporating it in the theme.

Continue reading →

Edit your website, blog design live and without breaking it

CSSVista is a tool any blogger or website owner will find useful. The Windows-only application allows you to load any website in Firefox and Explorer and then edit its CSS code live, with the changes showing immediately in the two browser windows.

cssvista CSSVISTA. The application makes editing website designs easy. CSSVista loads the page in Explorer and Firefox and allows you to edit the designs live, with changes showing up immediately. Click on photo to view larger image.

I’m working on a new website on online journalism and independent publishing and CSSVista saved me a lot of time in finalizing my site design. I use Drupal for the site, building on the Zen theme, a very good theme to base your design on. I will launch the new website early next week with an explanation on my choice of content management system.

What I did before I found CSSVista was 1.) I’d edit the template (Zen uses PHPTemplate) and CSS files in Bluefish, 2.) Upload the files into the server, 3.) Cross my fingers; and 4.) Hit reload like crazy to see the changes.

This process is tedious and I was about to look for ways for Bluefish to be able to edit the files directly in my web server or research on how to make Firebug work in my Ubuntu Linux installation when I found a link to CSSVista in the popular page of del.icio.us.

Continue reading →

Enhancing blog comments with avatars

I’ve just re-enabled Gravatar support for this blog. Gravatar, for globally-recognized avatar, is a service that publishes avatars or graphic representations of people who comment in your blog. Check out my previous posts to see gravatar in action.

I used the service some time last year but stopped it after a few months when I encountered problems.

To get your own Gravatar, just sign up for an account at the Gravatar website. Prepare a square image and then upload it to the site. Associate the image with your e-mail address and you’re done.

gravatars1
SIGN-UP for a gravatar account to have images show up next to your comments.

With the service, the image you picked will show up whenever you leave comments in blogs and websites that support Gravatar. Make sure you use the e-mail address associated with your account when you post comments.

If you are a website or blog owner, check these guidelines at the Gravatar website on how to implement the service. The service has its own WordPress plugin but I’m using the plugin written by Skippy and now maintained by ZenPax. The plugin allows local caching to deal with problems on server congestion in the main gravatar site.

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 →

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 2: WordPress theme screencast

I’ve fixed my initial attempt at doing a video tutorial on turning a web template into a WordPress theme. It now loads. As I wrote earlier, I am still finalizing the screencast but I just posted it to get initial feedback as I’m thinking of redoing the entire thing.

I wasn’t able to capture the part when I activated the theme, tweaked and fixed it because I ran out of virtual memory. I am also writing a blog post based on it. I’ll publish the post as soon as I finalize a screencast. In the meantime, please view the screencast and feel free to leave some comments.

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 →