How to Create a WordPress Theme – Part 4

I made good progress on the To Do list last night:

  • Install copy of WordPress on development box
  • Import backup of live site content to provide some content for the development site
  • Create a bare-bones set of template files
  • Review the default CSS before beginning development of custom CSS for new template
  • Setup CSS for basic layout
    • 2-Column wide left, narrow right, approximately 75% – 25% split
    • Site width: 1024px (current width ~800px)
    • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
    • Header will be short, ~ 5% +/- of screen height
    • Footer will be one or two text lines
  • Select color scheme
  • Select photo / graphic / logo for header and develop site-wide navigation in header

Pretty good work!

I want to show you a screen capture of the default starting point for the template, which is the supplied Kubrick template:

[image no longer available.]

Look familiar? That’s what you get after an initial install of WordPress if you don’t make any changes.

To show you just how much work is being done by that default template, here is what it looks like if you remove all the CSS that is being applied:

[image no longer available.]

Not very pretty, would you say? Well, after considering the two, I decided to start with the default template, and then tweak the settings from there.

Here’s a sneak-peak at what I’ve come up with so far:

[image no longer available.]

What do you think? You can see the result of a lot of the design decisions I’m making:

  • Width 1024px
  • Header graphic gives mountain scene
  • Leads to a blue, green, brown earthy palette for colors
  • Drop down tabs from header for page-level navigation (still more work to be done here)

I’m still working on getting the column widths where I would like, so you see the sidebar out of place still. Fonts have not been adjusted at all yet, for color, family or size.

Pretty good start for a few hours work. I think I will make my target launch of May 1 with no problem!

Creating a WordPress Theme – Part 3

I’ve made the decision this morning to target a launch date for the new theme for May 1, 2007. With that in mind, I’ve got 10 days to get it done. To that end, I’ve created a To Do list of items to be completed:

To Do

  • Install copy of WordPress on development box
  • Import backup of live site content to provide some content for the development site
  • Create a bare-bones set of template files
  • Review the default CSS before beginning development of custom CSS for new template
  • Setup CSS for basic layout
    • 2-Column wide left, narrow right, approximately 75% – 25% split
    • Site width: 1024px (current width ~800px)
    • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
    • Header will be short, ~ 5% +/- of screen height
    • Footer will be one or two text lines
  • Select color scheme
  • Select photo / graphic / logo for header and develop site-wide navigation in header
  • Select items to be included in sidebar:
    • About – Should I include picture of me?
    • Search
    • Feeds
    • Email subscription option?
    • Archives – Perhaps better in header site-wide navigation?
    • Categories and/or tag cloud?
    • Blogroll – Move to separate page?
    • Space for affiliate ads
    • Space for site support links (Blogflux currently)
  • Setup footer with statistic tracking codes, etc.
  • Plan post layout and post-related plug-in use.

I’m sure I’ll come up with other details, but that will be the basic flow.

How to Create a WordPress Theme – Part 2

OK, if you look back at Part 1, you will find I listed choosing a Column Layout first on the To Do list. However, do you always do your To Do’s in order? Not me. Well, actually, it’s not my idea. In researching the whole column/page layout concept for today, it was pointed out there were some other important items to consider first. In a recent guest post at ProBlogger, Matt Coddington from NetBusinessBlog shares the Important Elements of Blog Design & Layout.

Matt emphasizes the importance of focusing on Content, User Experience and Compatibility.

Content refers to your actual planned content for your blog. Do you write long posts or short? Do you include a lot of graphics? What size do you use? Then of course you can through in what other gadgets do you want to include in your posts or sidebars? All of this stuff takes up space. Ask yourself for each item included, is it important or can I do without it?

User Experience focuses on user issues. I don’t know about you, but while I like hi-resolution screens to be able to pack more content into a smaller space, I’m getting older… I’ve worn glasses most of my life, and find now that even with a current prescription, I prefer my fonts a little larger. So, do you have young readers, or old? We have to think about accessibility for users using screen reader devices, or screen magnifying devices for limited vision. As well as navigation accessibility considering both the limited vision user and the mobility impaired who may have difficulty using a mouse to navigate.

Compatibility is related to what devices do you want you content available on. In the past, it was difficult to have content appear in a similar arrangement, if viewable at all, by the major browsers without significant tweaking and tricks. Today it is easier thanks to Web Standards, but the problem has not been eliminated. There are also new platforms, such as cell phones and other mobile devices that are being used.

My Analysis

Applying the thoughts above to my plans for this blog, I come up with these considerations.

Content: I feel I need a wider column for my core posts. Many have included code examples, and I’ve had to make notations about wrapping lines and the like that would be clearer when displayed as one. I wold like to use more screen shot examples in a larger format, as long as file size is reasonable–which is based on actual content of the graphic. I tend to write fairly long posts, and having full posts on the home page is something I may need to reconsider. I had long ago come across “Mullet”-style blog layout by Jonathan Boutelle, and was re-introduced to it while researching this entry. (That’s where you have teasers to a few recent entries, with links to full posts, then a long list of the previous posts, say 50+ on the home page.) Then there’s the liquid vs. static layout argument that tends to lean toward liquid for longer posters and static for short. Michael Gray has a nice analysis in a three-part series on Maximizing Profits With Website Design and Layout.

User Experience: I tend to blend this all encompassing term mostly into usability. The personal issues I mentioned above, combined with accessibility & usability techniques must be a consideration in layout and choice of design details, like fonts and their default size. Allowing for the wider column I’ve already mentioned, gives me the flexibility to increase the default font size for ease in reading. I’m liking these choses already! This was a great exercise!

Compatibility: As mentioned, web standards is the only way to fly today. By designing a site that is functional when all the fancy stuff is turned off (CSS,JavaSciript, etc.) you end up with a site that is accessible from a multiple number of platforms. Taking it another level and providing custom CSS for those mobile devices that can use them, just improves the user’s experience.

With those thoughts on our brains, we will move on tomorrow. Perhaps really to thinking about the layout…

How to Create a WordPress Theme

I had heard that the template that I am currently using, MistyLook by Sadish Bala, is very popular. however, I had never run into it elsewhere… well, there’s always a first time! I ran into it while researching de.lic.ious WordPress plug-ins on The Partition. Thanks for the inspiration to create my own! I knew I had to do it eventually, but I guess now is the time!

While I like the look of MistyLook very much, I am a firm believer in personal, business & web site branding. In order to create a name for my self, I also have to create an image. When you come here, I don’t want you to be confused where you are! I was the first moment I saw MistyLook on the Partition. It felt kind of eerie…

Step One: The Plan

Before I actually create the theme, which I’m going to walk you through with me step-by-step, I have to plan what I need and want to include. After trying several themes myself, browsing many more, and experiencing those of others I should have a sense of what pieces I might like to include in my theme. I’m talking conceptually here, not literally using someone else’s theme. The best themes out there are done by professional designers. Don’t steal them! That’s how they make their living! Especially custom graphics & images.

If you have not experimented with different templates, or browsed the online theme gallery at WordPress.org, go do so now. While you are there at the Codex, let me point out the bible for creating new themes, the Blog Design & Layout page. Start working your way through the material there. It will help you with the understanding for making everything from minor tweaks in a standard template design, to reworking how the whole page is laid out.

While I could make modifications to the original files, what I plan to do is to develop a true separate theme that could easily be contributed to the community or just shared with a friend. But, it will begin life as my personal unique design.

Let’s start with a To Do List:

  • Select a page layout (1-, 2-, or 3-column?)
  • Color scheme (there should be an overall consistent use of color in the design)
  • Header & footer (content & design)
  • Multiple column contents (if more than one, what’s in them?)
  • Post structure & design (how is the post heading, content, metadata, tags etc. organized & displayed)
  • Archive page layout
  • Category page layout
  • Tag page layout

That should get us started thinking. As I go along, I may add specific areas that are needed, or expand on the one’s listed. We’ll take it one step at a time.

Backup for WordPress MySQL Database on MediaTemple

In preparation for developing my own custom theme, and for good best practice, I have automated a backup of the MySQL database hosting this blog from a Linux host sitting behind a firewall at home. I am using the Open Source SourceForge project, AutoMySQLBackUp. I have been using this Unix shell script at my employer for a long time, and it has occasionally come in handy. As backups tend to do… when you least expect it. With my local copy of the PHP code (or even a fresh copy of WordPress) and my customizations–stored in Subversion–I can recreate this entire site with minimal work.

I have more often used these backups as I intend to now–to recreate the site on a separate host, using the original site as content for testing a new template design.

Using AutoMySQLBackUp is quite easy if you have a Linux host you can run it on. In my case, I copied the script to my personal ‘bin’ directory under my user account–no need for this script to run by anyone other than a normal user–and set the configuration variables inside the script. The variables you needs to set are fully described in the file below the lines where you enter them. So, if you have a question, be sure to scroll down. The items you need to configure are:


USERNAME=username
PASSWORD=password
DBHOST=hostname
DBNAMES="all"
BACKUPDIR="/path/to/backups"
MAILADDR="you@yourdomain.com"

The ‘username’ is a MySQL user with SELECT access to the databases you wish to be backed up. The ‘password’ is the related password for that MySQL account. Note, this account is not the same as a host user account–it is exclusive to the MySQL database to which you are connecting. The ‘hostname’ is the fully qualified hostname of the MySQL host. If you are accessing a database at MediaTemple, this would be the address they assign that is prefixed ‘external-‘. Since you are accessing the site from outside your web server, this is classed as external.

You can explicitly specify the database names for DBNAMES, instead of using ‘all’, but by specifying ‘all’ you will automatically get any new databases that are added in the future. None get missed that way.

The BACKUPDIR is the base directory where you would like your backups store–make sure it is writable by the user running this script. I use a folder in my home directory. The MAILADDR is where you would like result emails sent. There are several options regarding these emails, which are described in the file, however, my preferred means of running this script is from a user crontab file which schedules it to be run nightly as the user. This line:

32 4 * * * /home/localuser/bin/automysqlbackup

will run the script daily at 4:32 am. Saving this line in a file named ‘crontab’, I can load a copy of it to the crontab daemon of the system simply with:

crontab crontab

Crontab will automatically capture the output and mail to the user. You may need to configure an alias if you would like it sent to an off-host address.

There are a few more options in AutoMySQLBackup, but most can be left at the defaults. Review as needed for your purposes.

One note on accessing a MediaTemple MySQL host remotely, you must authorize the IP of the host you will be connecting from to connect to the server in your Account Center Control Panel under Manage Databases, on the Global Settings tab. There is a convenient button for using your current IP. All my hosts at home are behind a firewall, and it is the external IP of that firewall that is really seen, and this button worked nicely for getting the current value. Note, if your IP is not static, or at least reasonably stable, you will be needing to reset this whenever it changes. Watch for an error email from the nightly run, and go update it when you receive one. Be sure to remove the old IP for security purposes.

If you are having trouble getting this functioning, be sure you have the MySQL client libraries installed, and try a manual connection to the database like this:

 mysql -h hostname -u username -p

You will be prompted for the password, and should get a prompt as follows:

Welcome to the MySQL monitor.  Commands end with ; or g.
Your MySQL connection id is 2827215 to server version: 4.1.11-Debian_4sarge7
Type 'help;' or 'h' for help. Type 'c' to clear the buffer.
mysql> 

Enter ‘quit’ to disconnect. Any error messages should give you a clue as to what the problem might be. If you can’t connect:

ERROR 2003 (HY000): Can't connect to MySQL server on 'hostname' (111)

Be sure you have access to the server port 3306 (the standard mysql service port) on the host. If you are on MediaTemple, this error can be caused by not having the IP authorized for access as noted above.

Using Subversion for a Web Site – Part 2

I need to clarify one thing from my earlier post. I demonstrated how to create a subversion repository on your local computer. Note, this was for demonstration purposes only. To get maximum advantage from using a subversion repository, it needs to be located on a networked server that all site developers can access. OK, you are thinking, “I’m only one person, why do I need to do it this way?” Easy answer: Backup! Not to mention the advantages of using the entire concept of source code management to develop your site.

So, if your repository is on a different server, how do you work with it on a daily basis? That’s what I’m going to describe today. Keep the two locations in mind as the remote server Repository, and the local Working Copy.

Last time when we parted, we had just checked out a local copy from the repository. (Just imagine that repository was remote rather than local to your computer.) Let’s pretend you quit at that point for the day. This is the point you want to be at whenever you quit working–synchronized with the repository. You should never quit working without doing an UPDATE & COMMIT of all of your work. We’ll cover those details momentarily. By doing this, you will always have a backup of your work, as well as have it stored remotely in case you edit from multiple computers and/or locations. For example, I might do some work at my office, and then come home and feel like doing a little more… or end up wanting to work from home the next day. Having the files in the repository allows me access to the current files from wherever I choose. Just connect from the alternate location, and UPDATE.

Update

OK, what exactly is UPDATE? With the UPDATE function subversion compares the files you currently have locally, with the remote copy on the server and downloads files from the server, if they are newer. Note, this is one-way updating. If you have edited any of your files and want to upload them, you do a COMMIT–we’ll cover that in a minute. During an UPDATE there are a few possibilities:

  • No changes–your local files are already up-to-date with the server
  • Newer files on server–none of your copies of the files have been edited locally
  • Newer files on server–some of the same changed files have been edited locally also, but in unrelated ways
  • Newer files on server–changes in files are in the same area as changes made locally

No Changes

While this may seem an obvious answer, it is important to recognize you are at this state. Especially if you are in a multi-developer environment. In this case, no changes will be made either on the server or locally, and the current Revision Number will be displayed.

Newer Files in Repository, No Working Copy Files Changed

In this case, the newer files on the server will be copied to your local working copy. You will see a list of the files that have been updated, as well as what the status of each file is–note each of these possibilities we are covering occur on an individual file basis, so what happens per file might be different. The current Revision number will be updated.

Newer Files in Repository, Unrelated Working Copy Changes

The important thing to ask in this case is, what is an ‘unrelated change’? The key here is that you may have edited a file in one area, say lines #5-10. But, the changes in the repository file–compared to a common base–are in an entirely unrelated area of the file, say lines #50-55. You can probably see that as long as each individual change is in entirely separate areas of the file, with no overlapping, that it is possible to merge the changes without much thought. Note, even if lines are inserted in one location or the other, the context of the surrounding lines identifies where they are in relationship to the base file.

It is important to note that this merging of changes can only be done with text-based files. And while binary files, such as images, can be maintained in subversion, they cannot be merged.

In the no conflict case such as this, subversion will automatically merge the files for you, updating your local copy. In the list of files with changes you receive at the end of the update, you will see a code G next to them indicating a successful automated merge.

Newer Files in Repository, Conflicting Working Copy Changes

As you may have guessed, in this case subversion can’t automate the change. But, it helps! You will be advised of the Conflict, and several copies of the file in question will be put in your local working copy. Your original file will be renamed: filename.mine, there will be two other files with a Revision number appended: filename.r<old rev #> and filename.r<new rev #>. The old rev number is the one you had before you started making changes, the new on is from the server copy. The original file will contain special marks in the file showing both revisions to enable you to compare and figure out which changes should be used, or if you can manually merge the two changes. There are several convenient tools available to ease the process of this editing.

Once you have edited the original filename to contain the changes you really want, you should do an UPDATE (to make sure no more changes showed up while you were working on it!) and then a RESOLVE in order to let the repository know the conflict has been resolved and which changes to keep. Then COMMIT your changes as usual–see below.

Commit

Commit is simply the process of uploading your changes to the repository. Remember, as mentioned above, if you have been working for any significant period of time since your last commit and your are in a multi-user environment, do an Update as described above first before doing a Commit. It will also be easier to merge changes if you do an Update on a regular basis to get new changes from the repository even if you are not ready to commit your changes.

When a commit is done, all changed files are updated in one batch. So, best practice is to keep related changes together. If you have to modify a form to be displayed and update it’s related processing code in a separate file, make the changes and commit them together. Every commit will require a Log message, so it makes it easy to describe the related changes and see them together when looking at historical changes.

Summary

To wrap things up at this point, I want to point out a couple of resources you can use for the details I have not include here, but will in future installments. The easiest, and free, resource is the online version of the Subversion Book. Several versions are available, including a download PDF. If you are like me, you may like to have a paper reference of it, and the authors would appreciate the purchase of it as well, it is published by O’Reilly Media and is available from Amazon: Version Control with Subversion.

Another good book is the one I use personally, and is part of the Pragmatic Starter Kit Series: Pragmatic Version Control: Using Subversion (The Pragmatic Starter Kit Series)(2nd Edition). This book is a little over 200 pages, and I was able to read it cover-to-cover in a little over a week in my spare moments. Many great ‘pragmatic concepts’ to be learned and applied in the future.

Well, that about wraps it up today. Next time, I will get into explicit demonstrations of these steps. I’ll give you the command line techniques and demonstrations, as well as snapshots of doing the same in TortoiseSVN. Stay tuned!

Managing Web Site Content with Subversion

As I have previously mentioned, I am a big fan of managing code changes with Subversion. Here I’m going to describe the process of creating your own local repository for managing changes. Think of Subversion as you own personal time machine for your content.

My basic setup will be to have the repository (where subversion stores all of your changes) on a secondary partition on my laptop’s hard drive. While I had considered having it remotely on my server, I want to have it local so I can manage my content when I am off-line traveling. I will also use backup routines to have copies on external drives. While I prefer to work in Linux, I also work in windows, so I will describe the setup from a windows point-of-view. However, the files for the repository are on a shared partition of my hard drive so I can access the repository not matter which OS I’m using at the moment.

The basics steps are these:

  1. Install Subversion & optionally, TortoiseSVN for windows
  2. Create directory to store repository
  3. Create repository with svnadmin
  4. Import web project
  5. Checkout working copy of web project

Install Subversion & optionally, TortoiseSVN for windows

Subversion & TortoiseSVN are available from the Open Source projects at Tigris.org:

Follow the link to the individual download pages and download the current version for your OS. Install in the usual manner! Note, TorotoiseSVN requires a reboot since it integrates with windows explorer.

Create directory to store repository

Hopefully, if you know dos, this will be familiar. Or maybe it won’t if you have never used the command line under WinXP. Since subversion itself is a command line program, creating the repository will be at the command line. so let’s start by using the command line to create the needed new directory. Click Start -> Run… (or Windows-R from keyboard) and type cmdand press Enter. A new window with white text on a black background will open with a prompt showing your current directory. Decide where on your drive, or drives, you would like to locate the repository. Then create the directory with md:

C:> md e:svn-repo

Substitute your own drive letter instead of e: and path of your choice instead of svn-repo.

Create repository with svnadmin

Now that you have a directory to use, we use svnadmin to turn it into a repository for use by subversion.

C:>svnadmin create e:svn-repo

Let’s see what it created for you:

Directory of e:svn-repo

04/01/2007  05:53 PM    <DIR>          .
04/01/2007  05:53 PM    <DIR>          ..
04/01/2007  06:20 PM    <DIR>          dav
04/01/2007  06:20 PM    <DIR>          locks
04/01/2007  06:20 PM    <DIR>          hooks
04/01/2007  06:20 PM    <DIR>          conf
04/01/2007  06:20 PM               234 README.txt
04/01/2007  06:20 PM    <DIR>          db
04/01/2007  06:20 PM                 2 format

Don’t worry anything about the details now, but I just wanted to show you that subversion is doing a lot of work for you behind the scenes.

Import web project

Next step is to import that web site you have been working so hard on! Since we have been working at the command line, I will continue here with that technique. Then I will show you the easy way with TortoiseSVN–a graphical tool to access the power of subversion from windows explorer.

First, locate the directory where you current web site files exist on your drive. If you have multiple sites, I will suggest that you import them as separate ‘projects’ in subversion. cd to the top-level directory you want to import–all subdirectories will be imported also. You should clean them up before importing, removing any test or temporary files you do not want in the repository.

C:>cd htmlcdchase-blog

C:htmlcdChase-blog>

Next, you will use svn import to pull in all of the content to the repository. Last chance to clean up the directory and sub-folders before importing! Notice the use of -m “Importing blog.cdchase.com project” to supply a log comment. All changes to a subversion repository require a comment describing the change.

C:htmlcdChase-blog>svn import -m "Importing blog.cdchase.com project" .  
                              file:///e:/svn-repo/cdchase-blog/trunk

You will see all of your files scroll by as they are imported. Eventually, you will get to the last line:

Committed revision 1.

Congratulations! You now have your first project in the subversion repository!

Before we move on, let me point out two items in the import command above. First, the ‘.’ (dot or period): it is how you refer to the current directory as a shortcut. If you were not already in the directory you wanted to import, you could explicitly provide it instead of using the dot. Secondly, the format of the destination: file:///e:/svn-repo/cdchase-blog/trunk. This is the URL format for referencing a local file location. The file:/// replaces the use of http://hostname/ as in a web browser. The remainder is the path to the repository, including the desired project name, cdchase-blog, in my case; and the branch you want to import it to, trunk. More on the use of ‘trunk’ in a future post. The ” at the end of the first line is just to indicated that this line is continued on the next line–don’t type this in windows! The entire command should be one line, without the ”. (Linux users may recognize this as the standard continuation character.)

Importing with TortoiseSVN

As promised, doing the same import function with TortoiseSVN is as simple as right-clicking on the folder you wish to import, and selecting TortoiseSVN -> Import…

(image no longer available)

and supplying the destination path and log message:

(image no longer available)

Once you click ‘OK’ your files will be submitted as in the command line version.

Checkout working copy of web project

Finally, in order to actually use the files from the repository, you must ‘check out’ the files. This must be done to a new directory, so if you want to use the same directory name you imported from, rename that directory first.

C:html>rename cdchase-blog cdchase-blog-old

To do the ‘checkout’ or co:

C:html>svn co file:///e:/svn-repo/cdchase-blog/trunk cdchase-blog

When it is complete, you will see:

Checked out revision 1.

Congratulations! Your files are now under version control!

Tomorrow, we will go deeper into how you use Subversion on a daily use basis.

K2 Theme Updated to SVN

I figured out that the last released version of the K2 theme I’m using, doesn’t support WordPress 2.1.2 very well. Little things here and there weren’t quite right. I downloaded r323 from the K2 subversion repository, and it fixes the obvious problems. I’m also getting reacquainted with configuring K2’s options. However, at the moment, I can’t get the side bar category module to show the blogroll. I know it’s just a matter of selecting the ‘blogroll’ category, but I can’t find it. Hmmm, OK, that’s true. However, I just realized while typing this that I’ve been confusing that function with the ‘category list’ module. That’s obviously not the right module to customize! Blogroll is a category! I guess the module for a blogroll hasn’t been developed. I’ll do a little more hunting, then maybe I’ll make my own…

If you are not familiar with using Subversion to get the most up-to-date code, I’ll be doing a follow-up entry describing the process. Right now, I’m focusing on getting all the options in place, and developing the design for the site. Then I can get into more detail on the how-to!

Update: After the above realization, went back and look at the blogroll management in WordPress and realized while there is a relationship to categories, they actually call them ‘links’. In the K2 modules, there is one for ‘link list’… so, adding that did the job!

Locked Out of WordPress

Tried to write a post last night… but, could not get logged in for the life of me! However, after a good night’s sleep and a day of work, I came at the problem with a fresh outlook. I began with the WordPress Codex and thankfully I shortly found a solution for the password issue that wasn’t. The problem was with TeaTimer in SpyBot S&D. SpyBot has always done good by me, but I guess I’ll have to go without TeaTimer. This forum post from Christine Evron led me to try turning off TeaTimer.

Now, I can write the post I intended to last night!