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.

What is an SPF Record and Why Does My Domain Need One?

A few weeks ago, I described how I used a separate DNS host, DynDNS, to separate that responsibility from my web host, MediaTemple, to give me additional flexibility and control of my domain. Near the end, I mentioned one of the benefits of doing so was to be able to publish an SPF record for my domain as a means to contribute to the war against SPAM.

What is an SPF Record?

An SPF record is TXT DNS entry that is used by mail & spam filters to help validate incoming mail. Similar to the function a DNS MX record which provides information on what host receives mail for a particular domain, an SPF record tells what host(s) are authorized to send mail for that domain.

While this description is simple, implementation is another matter, and sometimes complex. First, domain owners, such as myself, have to publish an accurate SPF record for our domains, and keep it up-to-date if it changes. Second, receiving mail systems need to be updated or modified to check the validity of SPF records for incoming mail. There are customizations available for most major mail systems. Common SPAM appliances, such as a Barracuda or M+ Guardian by Messaging Architcts (built on the open source Hula engine), integrate SPF checking as part of their systems. By giving the servers something to validate the sending mail against we can help these systems do a better job.

What does an SPF Record Look Like?

Here’s the one for my domain:

v=spf1 a a:moon.home.cdchase.com ?ptr:gridserver.com include:bledsoe.net
                  include:outbound.mailhop.org -all

(Note, it should all be on one line, but it won’t fit here!)

It basically says mail is authorized for my domain from:

  • The host cdchase.com (a)
  • a host named moon.home.cdchase.com (a:moon.home.cdchase.com)
  • any server in the gridserver.com domain, classify neutral (?ptr:gridserver.com)
  • apply the SPF rules defined by bledsoe.net & outbound.mailhop.org (include:bledsoe.net include:outbound.mailhop.org)
  • FAIL all others (-all)

This basically let’s me send mail from my web server, from a linux box at home, my MailHop service or my ISP’s servers.

Why Does My Domain Need an SPF Record?

By being proactive in providing this information I help prevent fraudulent use of my domain name. You should too! If you don’t manage your own DNS, contact whomever does and be sure they are aware of it (it is fairly new), and ask them to properly implement it for your domain. Many major ISPs have done so already, in which case you may be able to use a simple include as I did above to point at my ISP’s SPF record entry.

To check if you have an SPF record for your domain, and validate it, as well as learn more about the SPF standard, visit OpenSPF.org.

I highly recommend using their SPF Setup Wizard to check if you currently have an SPF Record, and get a description of how it is currently configured. Enter your domain at the top, and click ‘begin’. Wait for the form to refresh, then scroll to the bottom for a description of any existing entry. The form takes little time to get used to for configuring the actual record, but the lookup & description works nice.

Note, I am fairly confident that all mail from my domain comes from the hosts specified, so I flag any results as an SPF FAIL if it is not one of them. That is pretty aggressive… my employer does a SOFT FAIL to prevent any problems. Review the documentation at OpenSPF.org for more details.

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.

Set Your Writing Free with FreeMind

After I closed up shop last night and settled into bed after a long day’s drive, my brain was still running… and it made the connection from HitTail in my last post, to an Open Source project, FreeMind. FreeMind is a mind-mapping application. I was first introduced to these type sof application while persuing my graduate degree in education. At the time we first played with a very old Mac application called HyperCard. The concept was a deck of 3×5 cards with a short subject heading or content description on it. You could freely create independant cards, and then go back and reorganize them into related materials. The goal was to develop a structure for writing a document such as an essay or longer book sized work where you needed to just get a Stream of Consciousness type of thinking going and then be able to go back and organize your writing.

I don’t know about you, but much of my past experience writing was painful. It was oriented around having to write at someone else’s request, on a subject I was probably uninterested in! Anyone remeber their high school or college English courses? While I enjoyed English in general, sometimes the required writing was like pulling teeth–I would put it off until the last minute, and then not have time to do a good re-write. Which I believe all good writing needs, if only to polish up some phrasing here or there.

Writing a blog, the writing often does not get a full rewrite, but I always go back and re-read my work before hitting the ‘Publish’ button. I hardly ever don’t find a little something I want to fix. On a larger scale, I feel a blog needs a focus. I went back and forth with myself trying to define the subject matter I wanted to include here. You may have figured out that my focus is web site management and all the pieces that go into it. Using a tool like FreeMind helps me develop related subject areas to cover. If you are having a problem coming up with and/or organizing your writing, I highly recommend it for getting you going. Of course a blank sheet of paper & a pencil can do the same thing, but the big benefit of FreeMind is that it lets you reorganize when you find something fits better or you need more space. Virtual paper is very big!

Here’s a sample that comes with the program:

[images no longer available.]

Click image for larger view.

Give it a try… it’s free and it might help organize your writing!

HitTail to Save Us from Writer’s Block

I’m writing from the road… on vacation in eastern North Carolina! Been driving most of the day… 🙂

I wanted to point out a very interesting new tool, HitTail, that I came across somewhere–somebody’s blog, but I can’t remember which! I’m going to have to start taking notes… If you haven’t head of the Long Tail by now, you might as well skip reading this article. Just kidding! Keep reading. But, if you have, go read Chris Anderson’s seminal work, The Long Tail: Why the Future of Business Is Selling Less of More.

HitTail takes the concept of the Long Tail and applies it to the keywords used in search engines to find your site. By focusing on the less used terms, and more of them, you can build more traffic because you have less competition. Thus your site shows up closer to the top in the search results. See Vlad’s post, Example of HitTail Effectiveness. Be sure to follow the link back to the original post he has about HitTail.

The reason I’m so excited about it’s possibility, is that it helps me write! It gives me a clue as to what I should be writing about. I can write on most anything, as long as somebody points me in the right (write?) direction! Of course, preferably in my area of expertise. 😉 Vlad said he has been running it about three months and has several hundred suggestions. I’m barely getting any yet… but, I’m just getting started. As the flow chart on the HitTail site shows, I need to get more posts out to ‘seed’ the work. So, here I am writing when I should be sleeping. I’ll probably be up early tomorrow pounding out some words for my readers just to feed HitTail… and you! It’s motivating!

Be sure to checkout the HitTail blog too! Mike Levin really gets around keeping up on the comments in the blog world about HitTail. I expect he’ll even show up here. I’m looking for to the possibilities HitTail will bring.

What’s in a Ping?

While adding the sitemap code to Chasing a Dream, and my old website, I had to consider how the other sites were being notified that it was updated. This is called ‘Pinging’. Using ping-enabled blog software such as WordPress, when you complete a post and publish it, the software notifies other services that you have added a new post. Very simple and straight forward. This allows those sites to give updated sites priority in being updated by search engines for the latest material. Instead of scouring the net for pages, they simply check those sites that advise they have been updated! Very sensible!

You might also see a possibility for misusing this too, by sending pings when your site has not been updated hoping to get preferential treatment by a searching engine. This is called ‘ping spam’ or ‘sping’. Don’t do it! Your site can get dropped or blacklisted by a search engine for sping.

Now, carry this on step further. Sometimes you might link to another blog with a link to one of their posts. WordPress also does what is called ‘pingback’. This is where the other blog site is notified that you have linked to them. This is a special two-way transaction where your site notifies the other, then it verifies that you really have linked to them, then it will post a link back to you, usually including an excerpt of your posting text. I’m sure you have seen these while browsing other blogs. Pingbacks have generally replaced ‘trackbacks’ which were not secure as they did not do this two-way handshake. Pingbacks in WordPress are also automatic–you don’t have to add them to the separate area below the post. In-line entries will do the job.

OK, that’s how it works. What about the question of Who do we Ping? By default, WordPress includes a Ping to Ping-O-Matic. However, it appears that it does not ping Google Blogsearch, so I went on a hunt to see if there were other sites that should also be included when pinging. What I came up with is a Ping List for WordPress compiled by Brandon Hall of the SEO Feed. There are other sources as well, but his posting has a much more current date on it, so I felt it was more reliable. If you are going to compile your own list, be careful about the combinations you choose. You don’t want to include a site that aggregates pings, and pings other sites that you also have on your list–you might get caught for sping!

How well does it work? Well as I stated in my earlier post today, I was able to find one of my own posts from earlier in the day in Google Blogsearch indicating it hand been updated recently as ‘1 hour ago’! That’s what makes a blog aggregator such as Blogsearch powerful. Extremely up-to-date and relevant information.

Additional resources:

Using Sitemaps for Improved SEO

While working on adding more statistic tracking tools to the site yesterday, I was also asking myself the question: How can I get better search engine results? Faster! I know it takes time for new sites to be discovered and included in Google and other search engines, but my domain, cdchase.com, is not new as it has been in use for several years, and has that benefit. However, using Google’s Webmaster Tools, I discovered the site had not been crawled since November! That’s almost five months! I’ve been promoting my 30th class reunion over there, so I need those pages checked more often.

I had played around with sitemaps a little in the past, and knew it had to be the answer. With a blog, we have the benefit of ‘pinging’ other sites when we make a post to advise them that there has been a new entry made. Sitemaps work similarly with the search engines in general, you can add one to your standard website, as well as your blog. Google as well as other sites allow you to submit your sitemap file so you know they have the URLs that you want listed. They get the data they need in a standard format, and we get an easy way to maintain it! Every one wins! The Google Sitemap protocol was eventually adopted by Yahoo! & MSN and Sitemaps.org was created. I expect other search engines will follow.

Adding a sitemap to a WordPress blog is very easy… just use the Sitemaps plugin by Arne Brachhold! This plugin will generate an updated sitemap.xml file in the root folder of your site for the search engines to find–and then tell them it’s been updated! It pings Google, Yahoo! & MSN automatically. You do have to do a little configuration the first time around, making sure the sitemap.xml file in the root folder of your site is writable by WordPress, and acquiring a developer ID from Yahoo! to use their submission API.

If you are using Christine’s Ultimate Tag Warrior, aka UTW, (If you aren’t you should be!) then you will need an add-on to supplement the Sitemap plugin in order to get tags added to your sitemap file. Thankfully, the folks at the Dicontas blog have produced the WordPress Google Sitemap Generator – Ultimate Tag Warrior – Tags Addon Plugin to do just that! While the only trick to this add-on is they say to modify it for your configuration, but then aren’t very clear about exactly what that means. Just to make sure that the ‘add trailing slashes’ option is on for UTW. Here’s what they mean: in their UTWGoogleSitemaps.php file, on line 18 you will see:

$utw_tag = get_bloginfo('url') . '/index.php?tag=' . $utwtag->tag;

If you are using rewrites so your URLs appear like, ‘/tag/some-tag-name/’ for your posts, rather than the default, ‘/index.php?p=some-tag-name’, then you need to update the line above to:

$utw_tag = get_bloginfo('url') . '/tag/' . $utwtag->tag . '/';

Then save and upload as usual for plugins. Run a manual update of your sitemap and it will now include your tags at the end of the file. See an example of my sitemap.xml. Note, to get the ‘pretty’ version of the file you should see from this link, you are really looking at the sitemap.xml file with an XSL stylesheet applied.

If you have a standard web site that could also use the benefit of a sitemap.xml file, there are several different sitemap generators available, as listed at Google Code – Sitemaps page. I chose to use phpSitemapNG. After installing in a protected directory of my web site, and making sure it could write to the root folder, I went through it’s configuration which is mostly defaults, but be sure your host name is specified as you would like it to appear in Google–I’ve gone back & forth between using cdchase.com & www.cdchase.com. When I went to submit the sitemap to Google the first time, I realized I had used www, but had generated the sitemap with just cdchase.com, so it failed. Had to update the config and run it again. You will have th opportunity to update page titles, update frequency & priorities before actually generating the files. For details on these, see the Sitemaps.org Protocol page.

With this tool, and probably most any of them, the sitemap must be manually generated whenever a new page is created. Whereas with the WordPress plugin, it is updated automatically. Want to know how well it works? I made a post earlier today, and was playing with Google Blogsearch, and found my post! It even had a timestamp indicating it’s recency as ‘1 hour ago’! That’s impressive and shows the benefit of sitemaps and pinging on change.

Stay tuned for more on ‘pinging’!

Adding More Statistic Tracking

Yesterday was a busy day working on Chasing a Dream in the background. So busy, I didn’t get to write any posts! I’ll try to make up for that a little today. What I was busy doing was adding some additional web statistic tracking applications and merging old accounts into one at Google Analytics.

After running into one of Darren Rowse’s post at ProBlogger, What Blog Metrics Packages Do You Use? on how he tracks his stats, I decided to try some of his suggestions. It also led to other options too.

I wasn’t interested in SiteMeter, primarily as it required the stats to be public. Once my numbers improve, I’d be happy to share, but I want it to be my choice. See below for more info on my plans to share. I just saw a comment from Michael on Darren’s post telling how you can make SiteMeter stats private… might have to go back and try it! Update: after reviewing the SiteMeter site, I realized this is only for the paid version. We will revisit this in the future.

I’m already using Google Analytics, however I decided to cleanup some of my data last week by putting both my blog.cdchase.com site and my old www.cdchase.com under the same account. I wish I had realized I could have done multiple sites under the same account sooner! It would have saved the need for downloading the data from the old account for archival purposes. Of course, I could go back and login, but it’s not convenient and it’s old data. But, I do want to keep it for long-term analysis. So, I downloaded the data and saved it in an Excel file for archival record and merging & comparison with the new site. For fun, I created a graph of the stats for the period I had which was only since October 2006. (I was going to give you a shot of the graph… but, Excel decided to keep crashing. Maybe later…)

I reviewed the metrics package provided by Media Temple, my host, which is Urchin. If you are not aware, Urchin is the predecessor of Google Analytics, and if you look at both side by side you can see the relationship. However, Google Analytics is much more detailed. So, I’ve decided I can pretty much ignore those stats. Besides, the numbers that I receive from my host are based on the logs which merges all my sites, and Urchin does not give a break down of them by site. On top of that, they seemed really out-of-line with the GA numbers. On the very high side, which would have been nice, but not realistic. I think they are a strictly file-based count, so one hit to a WordPress page gives you all the hits for each include page that is used to construct it. That’s not a realistic way to get numbers today. The JavaScript ‘bug’ that is used for Google and the other systems I installed below are much more reliable. Though you do depend on the user having JavaScript turned on or enabled for the Google Analytics site. (I use the NoScript plug-in for FireFox which disables JavaScript unless I explicitly allow it. I globally allow the Google Analytics servers.) So, those numbers may be on the low side. The other point is how does it track robots since they generally don’t execute javascript… I’ll save that for another post.

While I was there, I did setup my local client to download my raw logs so I can do off-line intensive analysis in the future. This is how I process web logs at the university I work for, using Analog. I have raw logs back over six years! Analog is the creation of Dr. Stephen Turner, the CTO of ClickTracks. Once I achieve a little income from this blog, I will be investing in ClickTracks, which starts at $25/month.

I’ve also added 103Bees… it looks like it will be interesting as well.

Somewhere along the way, I ran into StatCounter and decided to try that too.

I’ll give them all a month to gather some numbers, then give you a recap. I have no intention of keeping them all! I’d go crazy since they don’t always agree with each other. I’ll try to analyze and see which one’s are the most useful as far as a quick overview, and which for a detailed analysis.

As mentioned in a few of the ProBlogger comments, there are also my FeedBurner stats. I’ve been running them from Day 1 too. Subscriber numbers are of extreme importance to a blog when not all visitors actually visit your blog to read it.

As I mentioned above, once I have more significant numbers, I would be willing to share here. I can imagine there might come a time where I might stop doing so for privacy considerations–so my competitors don’t know how good (or bad!) I’m doing. However, I’m generally in favor of transparency, so I will save that evaluation for the future. But, I can say now that I understand other blogger’s choices to both be open with their stats, or not. It’s their choice. And mine. Stay tuned for more details on these packages as the numbers roll in! I will also probably evaluate a few others I was introduced to while reading Darren’s post comments.

Web Site Management Tools & Techniques

I’ve added a new page on web site management tools & techniques that will build a categorical directory of the subjects that need to be covered to properly manage a web site based on best practices. I will be adding to this directory of subject areas with links to my related posts to help keep things organized, as well as to keep an idea pool for future entries.

Please feel free to contribute ideas for related subjects you feel should be included. Thank you!