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.

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.

CMS choice
When I was still planning the site, there was no question that I had to use WordPress.

The open source blogging platform fits my need for a lean but feature-packed CMS I can use to run Tugkaran without the hassles of manual publishing—writing copy, laying out web pages, editing links, uploading these to the site and repeating the cycle for every iteration.

I chose WordPress for Tugkaran even if I use Drupal for many of my sites for 5 reasons:

1. I am the only person updating the site. I write all the copy and post all the articles myself. If somebody else from the team writes something, I still need to go over it before the article gets published. Using Drupal for the site would be like using a pneumatic power drill when all I needed was to tighten a screw on a picture frame.

2. I find it easier to take control over the behavior of a WordPress-driven site than one run by Drupal.

3. I work faster with WordPress than with Drupal.

4. I find it easier to design a WordPress theme than a Drupal template.

The blocks module of Drupal makes it easy to add snippets of content into your site and customize not only their display but specify on which nodes or node types they will appear in.

With WordPress, I can do that while lightening the load on the server by directly editing the .php template files to do away with database queries for displaying blocks of content. I’m sure there’s a way to do this in Drupal that I haven’t learned just yet.

5. It’s easier to update WordPress to the latest release. I don’t want to spend a lot of time in the upgrade process for a site that I will be rarely updating.

Tools
All work on Tugkaran was done in my Ubuntu Linux laptop. The only time I used Windows was to check whether the site displayed properly in Internet Explorer (as of this writing, I still have a mistake to correct to make transparency of layers in certain pages work in Explorer.)

The tools I used for the project were:

1. Graph paper
For someone with several online notes repositories and TiddlyWikis, I’m still a paper-and-pen-or- pencil type of guy. For certain tasks, nothing beats doing it on paper and ink. The initial stage of planning a site is among these tasks. I use Konigi’s graph paper to let clients communicate what they want for the website. For Tugkaran, I only needed a quick sketch of what I wanted because the basic design was already percolating in my mind for weeks.

2. Yahoo UI Grids and CSS
I neither have the patience nor the skills to create web layouts that work across major browsers. With CSS frameworks like Yahoo UI Grids and CSS, creating multi-column layouts is just a matter of clicking buttons to build your page.

3. Aptana Studio
In working with web designs, nothing beats Aptana Studio as tool. I used to work with Dreamweaver, which you can use to edit WordPress themes, but when I found Aptana, I never looked back. Not only is Aptana free, it’s also a great tool to work on your site’s HTML and CSS codes and get instant previews of the design. It does much more than that, but that’s basically how I use it.

4. Bluefish
Another great text editor. While I alternate between Gedit and Bluefish, I used Bluefish exclusively for this project because of the code snippets that come with it. Aptana Studio now has code snippets in its code editor but I prefer Bluefish’s implementation.

5. Filezilla
When tweaking the theme, I needed to upload and download files to fix errors (I was, after all, designing it live.)

Design process

Sketch

I sketched my website plan in Konigi’s Wireframe with notes graph paper. I wanted Jon’s Smooth Gallery as centerpiece of the home page. The gallery will cycle through articles I wanted to highlight.

Initial CSS/HTML layout

I then created a basic layout of the site using Yahoo UI Grids Builder. The tool makes it easy to design a basic web page layout pages and specify such things as its width and whether it is fixed or fluid; and the number of columns and rows.

I configured just one page because my plan for the Tugkaran site is that individual pages will have the same layout as the home page–single column in the main content area with four columns under it. I see no need for a sidebar to the main content but if I decide later that I wanted a sidebar, that would be easy to add using the Grids Builder.

If you plan to lay out certain pages of your site differently from your home page, just configure other layouts and name these after the section you want to use it on: archives.html, single.html (for the layout of the individual post—when porting the design to WordPress, you’ll name this single.php), page.html etc. Just study the layout codes and look for sections you can reuse, for starters the beginning and end parts typically can be reused and would comprise your header.php and footer.php templates.)

The advantage of using Yahoo UI Grids for your layout is that it offers a lot of page layout combinations with A-grade browser support. You don’t have to worry about the layout being broken in browsers like Internet Explorer—although I make it a habit to check my final HTML design in Explorer.

If you use Yahoo UI Grids, you can choose to have the CSS file hosted in Yahoo. Don’t worry about upgrades breaking your layout, the CSS file path given to you for embedding in the header is version-specific.

HTML prototype

After getting the website layout code from Yahoo UI Grids Builder, I then edited this on Aptana.

I created three files:

1.) home.html
This file is used for the home page. The layout contains the Smooth Gallery script that pulls content from my Features category (more on this later). After finalizing the HTML layout, I stripped it of reusable elements (header, footer) and then saved it as home.php.

In displaying your home page, WordPress looks for a home.php template file and if it can’t fine one, it uses the index.php file.

2.) single.html
I created a single.html to plot the layout of individual article pages as well as the site’s fixed pages such as the About page. The single.html page is just the home page without the Smooth Gallery code.

3.) style.css
The stylesheet. Since the CSS styles for the layout are hosted with Yahoo, this file contains only the customizations for the design. I also included theme information, which is a must, according to the WordPress Codex:

/*
Theme Name: Tugkaran
Theme URI: http://www.tugkaran.com
Description: WordPress theme for Tugkaran website.
Author: Max Limpag
Author URI: http://max.limpag.com
Version: 1.0
*/

I then looked into which parts of the pages can be reused. The obvious choices are the upper part for the header and the bottom section for the footer. I then marked the the sections in the HTML code to make it easier for cutting up in Bluefish, where I will be working on the individual WordPress template files.

I decided to use the four columns in the bottom row as part of the footer because I wanted these displayed in all pages.

I then looked around for a CSS menu that I can add to the page and found Matt Black Tabs in Dynamic Drive and incorporated it into the design.

Turning design into WordPress theme
After finalizing my HTML design, I then used Bluefish to cut it up into the different .php files that make up a WordPress theme.

I cut the codes in the header section, added <?php wp_head(); ?> and saved the file as header.php. The <?php wp_head(); ?> needs to be inside the element. It is used by some plugins. I then cut the codes in my footer section, added <?php wp_footer(); ?> and then saved the file as footer.php.
All that was left in my home.html file was the code for the Smooth Gallery. I added <?php get_header(); ?> at the start of the file to call the contents of header.php and added <?php get_footer(); ?> at the end of it to grab the contents of footer.php.

Making Smooth Gallery work with WordPress
I then worked on making Smooth Gallery pull content from my Featured category to highlight key articles of the site. The code that runs it is a custom WordPress query:

<div id="myGallery">
<?php $posts = get_posts( "category=3&numberposts=5" ); ?>
<?php if( $posts ) : ?>
<?php foreach( $posts as $post ) : setup_postdata( $post ); ?>
<div class="imageElement">
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
<p><?php $values = get_post_custom_values("summary"); echo $values[0]; ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" >Read more.</a></p>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="open"></a>
<img src="<?php $values = get_post_custom_values("bannerimage"); echo $values[0]; ?>" class="full" />
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>

The code above:

1.Gets articles in category 3, my Features category, and displays the last 5 articles in that category.
2.Gets the one paragraph summary I entered in WordPress’ custom fields and prints it as the introductory paragraph. The custom field I designated for this is “summary.”
3.Grabs the image I designated in the custom fields as “banner image” and then displays it as part of the slideshow. I just uploaded a 600px by 300px image in WordPress’ post editor, grabbed the full URL path for the image location and entered the URL as “bannerimage” custom field.

Other WordPress template files
I then used the single.html file I designed to create single.php (the file WordPress uses to display posts), page.php (the file WordPress uses for pages), and index.php. All these files are identical, they grab the header, runs the WordPress loop (which processes and displays content), and then grabs the footer:

<?php get_header(); ?>
<div id="bd">
<div class="yui-g">
<div class="pagecontent">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

</div>
<?php get_footer(); ?>

I no longer bothered creating a comments.php file because I turned off commenting since I just wanted the site to showcase Tugkaran’s services. I also didn’t create an archives page.

My custom theme only has 8 files: style.css, home.php, index.php, single.php, page.php, header.php, footer.php, and 404.php. But this could even be fewer. I can, for example, do away with single.php and page.php nad just let index.php do their jobs.

After I finished creating the template files, I then uploaded these to the server and fixed errors that I encountered.

Next steps

I will be redesigning the site. I still don’t have time to do it, however, and will have to put off the redesign at least until the week after next. I might go over the design again this weekend to fix an error on the rendering of transparency in individual pages in Explorer.

If you spot errors or have suggestions on improving the design, feel free to leave a comment in this post.

Download files used in this tutorial

If you want to go over the files I created in building Tugkaran, you can download the initial HTML files here and the final WordPress theme here. A warning, these files were hastily done and I didn’t have the time to clean these up so you might find an image that is no longer in use or code snippets that were abandoned.

The whole thing is released on copyleft, with all wrongs reserved . You can do with it whatever you want. If you want to link to me, I’ll be more than happy. If you don’t want to add a link to my site, it’s also perfectly fine with me. But if you spot errors or have suggestions on how to improve the theme, leave a comment below.

Related posts:

1. How to edit Wordpress themes using Dreamweaver
2. How to create a WordPress theme: A guide for the design-challenged non-geek
3. How to use WordPress to run a magazine, news website

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.

I would have wanted to give svn write access to anyone who wants to work on it but not right now. The theme will not work out of the box because you need to replace category IDs in template files. Work on the theme is geared toward a specific site and having multiple people with svn write access simply will not do, unless we share the same test WordPress install as reference.

I built the theme using Yahoo UI grids and pieces of code I discussed in a previous article on how to use WordPress as CMS for magazine and news websites. I will be writing a new article on the subject.

The major difference between this version and my earlier template is that I did the homepage customizations in home.php, which I should have done in the first place.

The index.php file is used as default template whenever other template files, say for rendering a single post, archive, or search results, are missing. If you have an index.php file that contains custom queries, it will not be able to render parts of your site whenever a template file for a certain task is missing.

WordPress recently got criticized for being a “blogware, not a content management system (CMS).”

I disagree. I think WordPress is a lean CMS that can be used for more than just a blog. I think it’s a great online publishing solution, especially for independent publishers.

Related posts:

1. How to use WordPress to run a magazine, news website
2. Announcing nautica-magazine WordPress theme for webzines
3. Nautica05-WordPress theme released

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.

CSSVista requires either Windows Vista or XP and Microsoft’s .Net framework.

To start editing your website design in CSSVista, just enter the address and when the page finishes loading, click on Edit CSS. The application will then load three panes (see photo above): one pane contains the various CSS files referenced by the page, another pane loads Internet Explorer’s view of it (the version will depend on the one already installed in your PC), and another pane shows Firefox’s rendering of the page.

You can then edit the styles, with your changes immediately displayed in the two browser panes. When you’re satisfied with the changes, you can just copy the new styles and overwrite your older CSS file.

I’m not particularly good at coding or designing and CSSVista saved me what would have been hours of work. It also helped me spot design quirks I introduced into the template that rendered the sign ugly in Internet Explorer.

I just wish there’s a Linux equivalent for this application or even a comparable online app, CSSFly doesn’t fly in Swiftfox and I couldn’t edit my styles. Oh well, here’s hoping I can make Firebug work again in my laptop.

Related posts:

1. How to edit Wordpress themes using Dreamweaver
2. Building with WordPress: From sketch to prototype to company website in 5 hours
3. Better photo presentation in your website in 2 easy steps

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.

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.

Related posts:

1. Create your own favicon
2. Segregating trackbacks from comments in WordPress
3. Track your blog visitors’ sessions with Clicky

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.

Free CSS Templates offers many great-looking open source designs. I spotted a couple of designs I’m interested in porting to WordPress for use in some personal projects.

If you want to learn how to turn any web design or template into a WordPress theme, you can read my previous post on it or view the video tutorial.

Download

You can download the theme here. The files are hosted in my Box.net account. Unzip the files and upload the subdued folder into your wp-content/themes directory. If you spot anything wrong with the theme, leave me a note so I can fix it.

Related posts:

1. Nautica05-WordPress theme released
2. Announcing nautica-magazine WordPress theme for webzines
3. Announcing Brighthouse-WP theme for WordPress

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.

The Tools

In converting web templates into WordPress themes, I use Aptana and Cream (my preferred text editor). I use Aptana to visually edit the template and incorporate the changes I want done. I used to do this with Dreamweaver (I wrote a tutorial on how to use Dreamweaver to edit WordPress themes) but ever since I tried Aptana, an open source software, I’ve never gone back to the iconic WYSIWYG tool.

Where to download templates

I prefer web templates released under an open source license so I usually get my templates at Open Source Web Design () and Open Web Design.

The advantage of using open source templates is that you are allowed to change and redistribute it. But if you only plan to create a custom WordPress theme for your site and not redistribute it, you can browse through the hundreds of websites offering free web templates.

Tips on choosing a template

Choose designs done in CSS and XHTML. Most of the free and open source web templates offered for download are now done in CSS and XHTML and authors usually highlight this fact either on the web template itself or in the readme file that comes with it.

Validate the design using website validation service. You can use validator.W3.org. Again, most templates contain a link within the page that would take you to the result of W3’s validation of the page.

Choose designs not using HTML tables to render the page’s columns. Tables are great for presenting tabular data such as statistics but not for page layout. Most competent web designers will tell you never to use tables for laying out your web page.

Other resources

The WordPress Codex is an extensive documentation on various aspects of the blogging script. In converting a web template into a WordPress theme, you should check the template tags section of the WordPress Codex to see what tags you’d need to generate blog items such as the post headline, date, comments link etc. Be sure to read about the WordPress Loop, the code that generates blog post content.

You can simplify the template conversion by keeping as reference a copy of a working WordPress theme. You can just then copy snippets of code from the theme for use in your own template. You might also want to check these pieces of great WordPress theme code that I’ve collected.

Organize theme files

After downloading the template you want to convert, check how the files are organized. If the stylesheet is not named style.css, rename the file. Add style information to the CSS file, including your name for the WordPress theme, just copy what other WordPress theme authors did by opening their style.css file. Don’t forget to edit the CSS filename in the HTML file so that you can still preview the design later when you open it in Aptana.

If the images are saved in the root directory, create an image directory and save all the images there. This isn’t really required but it makes for an organized way of doing things. When you do transfer images, make sure that you edit the file locations of all img calls in the HTML and CSS file.

Finalize design

Open the HTML file in Aptana and finalize changes you want done on the design. You might want to play around with the type of font used or its sizes or the dimensions of the web templates’ columns. If you want to completely change the template’s layout, you can spend time editing various components of the template, including the images that come with it.

It is important, however, that you finalize the design at this stage since it will be cumbersome if you do design changes when the files have been cut up into different WordPress theme .php files.

Most free web templates typically contain several sample posts to show how articles, headlines and author links are formatted. Leave only one article in the template. You will be inserting the WordPress Loop in this part of the template later. Mark this part with <!-- WordPress loop here -->.

Mark up the template

In Aptana, go to Code View and mark up the parts of the page that you will be cutting up later into header.php, sidebar.php and footer.php. Just mark it up using <!-- Section starts here --> and <!-- Section ends here --> tags.

Create a new folder and name it after the WordPress theme name you chose and copy the style.css and image folder into it.

Cut design into different WordPress theme files

Open Cream and then go back to Aptana. Cut and paste the header, sidebar and footer parts of the theme, paste these into Cream and then save it as header.php, sidebar.php and footer.php. Save the remaining code in Aptana as index.php and insert php calls for the header, sidebar and footer: <?php get_header(); ?>, <?php get_sidebar(); ?> and <?php get_footer(); ?>.

Open header.php in Cream and insert elements such as the template tags for the page title, stylesheet, RSS feed, favorites icon. You can simplify this process by copying the codes in the header.php of a working WordPress theme. K2 is a good theme to copy from. You can also read about header.php in the WordPress.codex.

Here’s the code I usually add to the header.php of a template I’m converting:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php wp_head(); ?>
</head>

Open sidebar.php and then insert sidebar elements you want in your blog. Open footer.php and include information you want to display there.

Open index.php and include the WordPress Loop, the code that publishes your posts. You can read more about the WordPress Loop here. Again, you can simplify this part by copying pieces of code from a working WordPress theme.

The loop starts with:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

Place this part above the part you marked <!-- WordPress loop here -->. Replace the article headline (usually between <h1></h1> or <h2> </h2 tags with <a href="<?php the_permalink() ?>" rel="bookmark" title='Click to read: "<?php strip_tags(the_title()); ?>"'><?php the_title(); ?></a>. What this does is generate the blog posts headline and link it to its post page. You can remove the link in the post page by using this <?php the_title(); ?> in single.php. After all, it doesn’t make sense for the title in the blog post page to be clickable and linked to the current page.

Replace the dummy text in your web template with <?php the_content("Continue reading '" . the_title('', '', false) . "'"); ?>. This generates the blog post article.

You can add other post elements such as author data and links or the date of posting. Just check the WordPress codex for their template tags.

End the loop with:
<?php endwhile; ?>

You can then add previous and next post links after this. Here’s the one I use:
<?php next_posts_link('&laquo; Older blog posts') ?> <?php previous_posts_link('&bull; Newer blog posts &raquo;') ?></p>

After that, add this:

<?php else : ?>
 <h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php include (TEMPLATEPATH . "/searchform.php"); ?>
<?php endif; ?>

After adding the Loop, save the file and then save it again as page.php (to serve as template for WordPress pages) and single.php (to serve as template for individual blog posts). You can then customize the files if you want, for example, a different presentation for individual blog articles or for the pages.

Add the comments tags in single.php <?php comments_template(); ?>.

Adding other theme elements

Add a comments.php to the your theme. What I do is copy an existing comments.php and then change its styling to reflect the stylesheet I’m using. Here’s a guide to comments.php in the WordPress Codex.

Add a 404 page template by copying an existing one from a working WordPress theme. Add a searchform.php, here’s a guide from the WordPress codex.

You can also add a category template by copying index.php and inserting customizations you might want done. Add an archives.php for your archives. Here’s a handy guide from the WordPress Codex. http://codex.wordpress.org/Creating_an_Archive_Index

After you’re done with the template files, upload the folder into your WordPress themes folder and then CHMOD the stylesheet and individual PHP files to 666 so that you can continue tweaking and editing it online.

Activate the theme, check for errors and continue editing and tweaking it.

Related posts:

1. Turning a web template into a WordPress theme: a video tutorial
2. Nautica05-WordPress theme released
3. How to create a WordPress theme: A guide for the design-challenged non-geek

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.

Some notes:

You might notice that when I copied codes for the header.php, the opening tag < wasn’t highlighted when I selected the codes for copying. I only spotted this when I activated the theme when the first line of the header code was printed on the page. I added the < and it fixed things.

You might also notice that I deleted the * in the first line of the stylesheet when I included theme information for the theme. When I activated the theme, the column dimensions went awry and it took me several minutes to fixed this. The theme was fixed when I inserted the * again in the style sheet.

When troubleshooting, view the HTML code of your page and compare it with the HTML code of the web template you started with. Check for differences to spot errors and copying and pasting and with the way you used the WordPress Loop for the presentation of articles.

Related posts:

1. How to convert any web template into a WordPress theme
2. Take 2: WordPress theme screencast
3. Take 1: WordPress theme screencast for design-challenged non-geeks

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.

Related posts:

1. Take 1: WordPress theme screencast for design-challenged non-geeks
2. Turning a web template into a WordPress theme: a video tutorial
3. Announcing nautica-magazine WordPress theme for webzines

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.

For one, I deleted literally a footage of frames from it and realized it only after rendering the whole thing. The frames are still saved in my office PC and I’ll try to see what I can salvage from it. What’s egging me on to redo the entire thing is that I ran out of virtual memory on the last part of the screencast–the part when I activated the theme, tweaked it and fixed errors. Darn, I need 1GB of RAM.

UPDATE: I’ve fixed this screencast up a bit but I still have to go over the raw frames capture I stored elsewhere. Again, I’d appreciate feedback on this as I am weighing redoing the entire thing or just tweaking it. I am writing a post to go with this screencast.

Related posts:

1. Take 2: WordPress theme screencast
2. Turning a web template into a WordPress theme: a video tutorial
3. How to create a WordPress theme: A guide for the design-challenged non-geek

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.

The index page of the theme doesn’t display articles chronologically. Instead, it displays content blocks: articles grouped into sections.

Here’s a preview of the theme in my sandbox site.

You need to edit the <?php $posts = get_posts( "category=4&numberposts=3" ); ?>, replace the category number with the category ID of your section, which you can get by going to Manage then Categories in your dashboard. If you want to increase or cut down on the number of stories published in each section of the home page, edit the numeral after numberposts in the code.

If you want to publish only the headlines in the article blocks, delete the <?php the_content("Continue reading '" . the_title('', '', false) . "'"); ?> part of the code.

Content blocks

The first block is the banner story. Technically, the banner story is also a member of one of the category blocks in the index page but to prevent the story from being published twice (as banner and as part of one of the section blocks), do not place the banner category in any of the sections displayed in the front page. Place the banner story in its correct section only after a new banner is published. You don’t have to uncheck its banner assignment (unless you increase the number of banner stories for publication) because the default value publishes only the latest story in the banner category.

The next blocks are for sub-sections. Just copy the article block code if you want to add more sections.

Photo captions

The stylesheet contains div classes for presentation of photographs with captions, the instructions are in the readme.txt file that comes with theme. To view an example of its usage, you can check this article on a beach resort in Cebu.

Download

You can download the theme here. Click on the arrow beside nautical-magazine and choose zip folder. Updates will be posted on the Nautica-magazine page.

Comments / Suggestions

Please leave your comments and suggestions here. Again, if you’re interested to help improve this theme, leave me a note. I am still working on the theme. I want to include a template on custom categories to make your category pages mimic webzine sections. I’m also working on including search, the hacked index.php seems to get in the way of displaying search results.

Related posts:

1. How to use WordPress to run a magazine, news website
2. Announcing Brighthouse-WP theme for WordPress
3. Using WordPress as CMS of news, magazine sites redux