The Art Of Converting A Design To A WordPress Theme – Part 1

As we have gotten more and more into WordPress, eventually you will get to the point where you need to take a design and convert it to a WordPress theme. I am by no means an expert, and I am learning a little more about WordPress every day. I am going to go through, in a series of blog entries, the step by step process of creating a WordPress theme. This is not for the hard core, since this is for the light programmer/scripter like myself who wants to be able to quickly take a design and port it over to WordPress.

Don’t fret. The process can be boiled down to a few critical elements, many of which you will easily find examples throughout the web and in a book at your local Barnes & Noble. So, first, before we do anything, this blog entry is just about the initial steps you should take before going ahead and doing this.

One first step, if you are not a programmer, is to get familiar with PHP. If you are not fluent in the PHP programming language, this will be a challenge, not a challenge you can’t necessarily overcome, but a challenge none the less. Along with getting familiar with PHP is getting familiar with WordPress. If you have just begun the process of learning both PHP and WordPress, you may want to put this design conversion off for a bit, till you are ready.

The next step is to get your design. Now, you may already be a designer or you have hired a designer and you are getting closer to the point of wanting this design in WordPress. If you already are using this design (see I am giving you some ideas here) on another site and just want to convert it over, for instance, so your blog looks the same as your main website, you will have to free your design from that site and have it handy in your page editor.

Remember to get a program like Textpad or Homesite or Visual Studio, or whatever editing tool you use, especially one that can hold many files at the same time. That is why I use Textpad, since it is a basic program and its free.

You should also be familiar with HTML, CSS and possibly javascript. Also, we will encounter Flash and other technologies, most of which are ready for you to integrate with your design. So, sign up for this blog and come back when I have the next in this series ready.

Fixing Broken Links After Migrating To WordPress

This article is related to the first three posts about Implementing WordPress in the Enterprise Environment. One of the lonely tasks following the migration of our website from HTML and Cold Fusion based files to PHP and WordPress was to fix several thousand incoming links from Google and other search engines. Without these Redirection fixes, the migration would have basically crushed our traffic.

To solve this problem, there are several places to look, including Google and doing a site:YOURWEBSITENAME.com search and clicking on every link to using Google Analytics. The Google Analytics method is the best, since it automatically tells you what needs to be fixed. This does not mean you should ignore the google search engine and looking at what are big incoming links in advance. Remember once you find a broken link, and you are using the WordPress Redirection Plugin, I highly recommended in a previous blog entry (click here to learn more info), you need to enter the entry into Redirection and fix it. If you are just learning that this did not require an .htaccess entry in Linux or htapi entry in windows, you are learning about a whole new world of improvement…

So back to Google Analytics. First of all you need to have a 404 page, which is where all the pages end up when they find no entry in WordPress, including the redirection plugin. This typically will be a 404.php page in the theme directory you are using. If you are sending people to your site map page, that is fine as well.

There are several ways to get this info in google analytics. I recommend using page title. For instance, on our site, the page title of our 404 page is called “Page Not Found”. Go into Google Analytics and click on “Content” and then on “Content by Title”. If you have just migrated, and the first day has passed, just set the date to the current day, to remove anything that is older than today, and find the “Page Not Found” (or other) title. If you click on this title name itself, another screen will open and reveal all the URLs that arrive at that page. This is your list of incoming broken links, sorted by the most important links at the top of the list.

Now is the detailed nitty gritty work. You need to re-enter each of these links into a url to test them and make sure they are broken. Once you are have found one that is being clicked on from a website out yonger, take it, copy it into the redirection plugin. You do this by Adding a new Redirection, then copying the link into the Source URL. Remember to not use your full path, just the /filedirectoryetc/ path, and then go over to another browser and find the end URL you want to send the visitor to and then copy and paste this path into Target URL and click Add Redirection. The default is a Permanent 301 redirect.

There are a lot of other options in the redirection program like using Regular Expressions. These work fine as well, but make sure you read the instructions carefully, since some redirections are impacted by other redirections…sequentially.

Let me know if you have any comments are questions about this process, because almost all sites come to point of migration, and this blog entry is really about the aftermath of a big migration. Our last WordPress migration did go through, but it had lots of small items that we had to fix along the way. I am going to add another blog entry covering these additional problems we ran into, creating a load balanced WordPress Enterprise solution!