From time to time, I get questions about how I start designing websites, and how I build custom WordPress themes for my clients. I’ve spent the better part of the last year trying to streamline the process of designing and launching a blog theme. The problem that I have is I tend to get a little carried away with trying to be perfect. Like most designers I start out with the basic tools…pencil and paper. I draw out the layout and figure out the basic positioning of all of the necessary elements before I even think about putting anything down in Photoshop. That drawing stays with me until the very end of the project, and sometimes even after just for reference.

How Does GrandmasterB Layout a Site for WordPress?

Recently, Forest from The Random Forest and Frugal Zeitgeist hit me up on Google Chat to ask me how I build a Wordpress theme and how I go from Photoshop layout to coding everything for Wordpress. Well, I know that I’m not the only designer/developer that works this way, but I build a simple HTML/CSS file that will serve as a template for the coding of the WordPress theme. In my opinion, there’s no reason to mess with all of the WordPress options and variables unless you have already solidified the design in it’s simplest form. I break down the design into the most simplest elements first:

1. Header
2. Content Area
   1. Left Column
   2. Right Column
   3. Any other Columns
3. Footer

In my experience, 99.95% of the websites you visit will be comprised of those elements. I have built a basic HTML layout and copied it over to a Clip in Coda that I can use for every new site and add or subtract items as needed. If you don’t use Coda, you can still make a template file to copy and paste whenever you need. Below is the basic structure of the file that I use…minus the standard HTML code.

Basic HTML Layout

<div id="wrapper"> <!-- wraps everything into one div tag -->
<div id="header"></div>

<div id="content-area"> <!-- houses the columns -->
<div id="left-column"></div>
<div id="right-column"></div>
</div>
<div id="footer"></div>
</div>

I know it looks simple, but that’s the idea…and it is simple! If you were to populate your divs with some content they will all just be stacked on top of each other. All of the detail like column heights, widths and position are determined by CSS. I had contemplated writing my own HTML/CSS layout tutorial, but that has been done a hundred times and there’s no sense in reinventing the wheel. One of the better tutorials that I have found was written by Steve Dennis on Subcide.com. It’s a very good tutorial, easy to follow and has great graphic examples to follow along with.

If you have any questions that you would like GrandmasterB to field hit me up via email or on Twitter.

~ GrandmasterB

It’s been quite awhile since I’ve posted anything new under the Question and Answers with GrandmasterB category, but today I received a great question in my inbox that I had to share with you all. The email was from my good pal Mike Cusden (you all know him as Cuzzy) from Cuzoogle. He had run his site through the Markup Validation script at http://validator.w3.org/ and it came back with quite a few errors and warnings, his question follows:

Hey GrandmasterB, I ran my site through the Markup Validator and it came back with a ton of errors. Are any of these errors fixable? And is it something that’s relatively easy to fix?

My first reaction was one of surprise, because every theme that I design and develop is run through to make sure that the code is 100% XHTML compliant before turning it over to the client. After taking a look at the output from the validator I could see exactly what the issue was and what needed to be fixed. For reference, I have pasted a copy of the report link here for you to follow along.

The problem that Cuzzy is having is that his theme code isn’t the problem, it’s the advertising code that he’s placed on the site. If you look at the errors that appear on the Markup Validation page, you’ll notice that the first error states the following:

Line 15, Column 107: cannot generate system identifier for general entity “MarketPlace”.
…om/widgets/q?ServiceVersion=20070822&MarketPlace=US&ID=V20070822/US/cuzoogle- 

There are a couple of things to look at here to determine the error. First you’ll notice next to the warning icon the words “Line 15, Column 107″. This is where the line of code is found if you view the source code in a text editor like DreamWeaver or BBEdit. Since this error is found on Line 15, it is going to be found in the header.php file of the WordPress theme. You see the capital ‘M‘ is highlighted in red? That’s where the error is, if you read the description of the error it tells you that the ampersand before the letter ‘M‘ is uncoded. What that means is it doesn’t have the proper code tag. Instead of using just the symbol you would use this code: &

By fixing that one mistake with the ampersand, Cuzzy will be able to get rid of approximately 27 warnings/errors on his Markup Validation! Pretty cool and extremely easy to do. 

How Do I Validate Markup?

I like to pull up my source code in Firefox and then copy and paste it into Coda (or your favorite text editor). I do that so I can see the line count and determine where the error is. I then open the file that contains that piece of code, in this case the header.php file. I don’t edit it though…what I do is “save as” and call it header.php.old and close it. I don’t like to edit working code, in case I have to revert back to the original. Open the header.php file again, make the change and then upload the file to your server. NOTE: If you’re using Coda, you can do all of this to your files that are on the server remotely and don’t have to worry about uploading files via FTP. After you make the change, go back to the HTML Markup Validator and click “revalidate”. The code will then be revalidated and you should see all of the errors for Line 15 disappear.

Markup Validation Tools

There are many tools available for validating your markup, but the good thing is that most of them are free! If you use Firefox, I highly recommend downloading Web Developer Add-on by Chris Pederick. Under the ‘Tools’ menu on Web Developer it has links that will run your site through the Markup Validator as well as a CSS Validator. For editing code, I use Coda (as mentioned before), but you can use whatever text editor you choose. I highly recommend an editor which has a line count display. If you do a Google Search for “Free HTML Editors” you’ll find all kinds of stuff.

Well, that’s it for this edition of Q&A with GrandmasterB. I hope that you all learned a little bit from this post. If anything it should shed a little light on markup validation and show you that it’s really something that you shouldn’t be afraid of. If you have any questions about markup validation or anything else related to web design or development, please shoot me an email. I would be happy to answer your questions…now, I’m off to make double sure my code is all up to par.

~ GrandmasterB

My boy Cuzzy (Cuzoogle.com) wrote me an email the other day asking me the following question:

I have recently started a new blog and want to set up a google site map. I downloaded the plugin and activated it but I am still having trouble getting my site map to work. It says I need to make sure the file is writeable and this was where I got lost. Can you help?

Cuzzy, this is actually a very common problem with installing plug-ins that need to be able to “write” to a given file on your server. In regards to your question the first thing you need to do is create the file for the sitemap. In order to do this you can use any text editor, I suggest using Notepad or if you have it Dreamweaver or another HTML editor. You don’t have to add any code to it, just save it as sitemap.xml and then upload it to the root directory of your site (wherever your index.php file is for WordPress).

If you don’t have an FTP client to upload your files I highly recommend installing FireFTP for Firefox. You should be able to download, install and setup the FTP client in record time; it is very user friendly. The only information that you will need to enter is your host (aka URL), username and password; once you have that hit connect and you should see the directory of your website in the right hand column. From here you will need to upload the sitemap.xml file to the home directory. Once it is uploaded right click it and choose “properties” (see image).

Once you have clicked on properties, it will bring up a window for you showing you the file permissions. Each checkbox has a numeric value, and for this case we need that number to add up to 0777. What you’ll need to do is make sure that you check Read, Write and Execute under each column and then click OKAY (see image). You’ve now changed the file permissions for sitemap.xml.

After you have changed the file properties, go back to your WordPress Admin Panel and click on settings and then access the XML-Sitemap settings. Under the top section labeled “Status” you may still see a warning that the file isn’t writeable, that is okay. It doesn’t automatically check the files if you’ve made a change. Simply click on the “rebuild sitemap manually” link and it should write the sitemap and create a new compressed file as well. One thing to note is that under the Location of the Sitemap File you should check automatically; that will save you time in the long run.

That’s pretty much it for the XML-Sitemap plugin settings though. Once you have everything setup, you should begin to see more activity from the search engines crawling your content. If you haven’t done so already I highly recommend installing the Crawl Rate Tracker plugin; with that plugin installed you can see when the top three search engines (GoogleBot, Yahoo! and MSN) are crawling your site and how often.

That is all for this week’s Q&A with GrandmasterB. Thank you again, to Cuzzy for his question and your 100 EntreCard Credits are being emailed to you now. Don’t forget if there’s something you’d like to know about hit me up with a question and you too can get a linkback and 100 EntreCard credits if I answer your question on the Q&A.

~ GrandmasterB

Question From: Jamie
In one of your tutorials it says to place a guide at 400x and 400y. How is this done??? Please help.

Answer:
In order to drag guides onto the canvas you need to make sure your rulers are visible. There are two ways to do it. You can either go under the menu bar to View > Rulers or the key command (Apple: cmd-r / Windows: ctrl-r). Once your rulers are visible move the cursor to the top ruler, click and drag down for horizonal guides and the left ruler will drag out vertical rulers. One thing to note is that the rulers can display multiple types of measurements:

• inches
• centimeters
• millimeters
• pixels
• picas
• points
• percentages

To change the measurement type right click on the ruler and it will give you a menu. For this particular tutorial (and all tutorials that I write) I use pixels. If you create the 800 pixel x 800 pixel canvas you will see a 400 mark on the ruler. Simply click and drag to get the guide to where it needs to go. For more precise placement you can use the ‘INFO’ window by going under Window > Info or pressing F8. I’ve attached an image to this email to show you exactly where to locate the X and Y coordinates of the guides and cursor. I hope my answer to your question helps you out.

If you have any questions for me that you would like featured on Q&A with GrandmasterB please send me an email via my Contact page. In your email if you’re following along with a tutorial, please let me know which one and on which step you’re having issues with. Also, If you’d like a linkback to your site include your site in the email. If I publish your question, I will send you 100 EntreCard credits for participating. Stay tuned for future Q&A posts via my RSS Feed…you won’t want to miss it.

~ GrandmasterB