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

Pinterest

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.

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(); ?>

<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>

</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.

Pinterest
Loading Facebook Comments ...

19 Comments

  1. Thanks for sharing your designing proces. I’m gonna give your workflow a try and see if it could work for me as well. My weakest skill is css so using the Yahoo UI Grids Builder could work out very nicely…

  2. WOW! Very good thoughts here. Never heard of YUI before, but dag if I’m not going to try that tool out. Looks very clever.
    I’m working on a handful of WP designs as we speak – so this tool may be very helpful.
    Thanks!

  3. You made a rather significant contribution with this piece to the widening circle of people who want or need to understand WordPress. There are tutorials galore, books, but nothing like what you offered here.

    Rather than merely lecture, you present yourself as an experienced coach bringing a new co-worker up to speed.

    This is five-star quality!! Thank you, thank you very much.

  4. The fact that you used all open source software from start to finish just goes to show how mature these tools have become. Great proof-of-concept, nice site! I’m sure this article will be a very helpful resource for others. Thanks for sharing this!

  5. hi, sir max! great work on the site!!! (you just tempted me to move to wordpress, you know.)

    i really, really like the new layout with the moleskine and coffee and post-it. it’s so cool.

  6. Hi,

    I really love your blog since i stumble here with the drupal tips.. i always find your site in my inbox to check you new entry. I found your blog very resourceful and very powerful.

    hutdan mn ta english ani..

    this is my 2nd idol blogsite from cebu in terms of design but in terms of info. your my number 1.

    thanks sa tutorial and tips..

  7. wow…nice article. Actually, I’m still newbie in making wordpress template. I’ve never used YUI, I think from now on, I must consider to use it.

  8. It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
    p.s. You have a very good template for your blog. Where did you find it?

Leave a Reply

Your email address will not be published. Required fields are marked *

No Trackbacks.