Wordpress Theme Release Checklist

When developing a new Wordpress theme for a site there are a number of things to check before the theme is released. Naturally, all the things in the list are not mandatory for every site. For example, if a theme is created for a specific customer that has no need for comments, such a thing is not necessary to include. It is however good to have a personal list that you quickly can read through and verify that you haven’t forgotten any crucial part. Here is my personal list that I use.

  • Validate with W3C standards. Make sure all templates and parts of the site are validated.
  • Test the site on hand-held devices, like for example the iPhone and Android-based phones.
  • Make sure the header has all it should, including correct doctype above it, RSS feed, etc. Also remove the bloginfo(‘version’) part.
  • Make sure wp_head() and wp_footer() are called properly.
  • Set content width in functions.php.
  • Include a readme.txt and theme information with up-to-date information.
  • Does the theme have a screenshot.jpg?
  • Information about help and support on the dashboard.
  • Proper 404 handling.
  • Is the_excerpt() and the_content() used correctly?
  • Does previous/next posts work as the should?
  • Does attachments display as they should? Leftalign, rightalign and aligncenter for images.
  • Style for block quotes, tables, ordered and unordered lists, headings 1 to 6, etc.
  • Remove unused files, images and resources from the theme folder.
  • Check that widgets are functioning as they should in the widget areas.
  • Are RSS and Atom feeds set up correctly?
  • Edit links for posts and pages on the front-end?
  • Custom logo to the Wordpress back-end?
  • Support for Gravatars?
  • If comments are used, make sure there are support for threaded comments down to at-least five levels.
  • Does the theme support localization?
  • Does the theme work with all plugins deactivated? Should it work with all plugins deactivated?
  • Search functionality?
  • Image galleries?
  • Are dates displayed correctly?
  • Should there be any theme customization (option pages) available?

This list is in no way final or complete and I will probably extended and change it as I go on and continue building sites. It is however a good reference point for me to go back to each time I am about to release a new theme or site based on Wordpress.

Monday, 24th May 2010
No Comments

HTML5 Video Instead of Flash Splash Screen

I had a client that absolutely wanted a Flash splash screen on his site. What I normally do is try to explain all the drawbacks of such a solution and try to convince them not to use a Flash splash screen and instead put a movie in the content of the first page so that the visitor still easily can see and navigate to other parts of the site without having to get irritated on an annoying Flash movie. If you do not know what I mean when I refer to annoying splash screen movie you can just search the web for the words Flash and splash screen and you will find many articles on the subject.

As I sat down and analyzed the problem I played with the thought of creating a HTML5 based splash screen without having to use Flash. I wanted the movie to automatically play in full screen. I also wanted the user to easily continue on to the main page by clicking anywhere inside the browser presentation area. Since I am a big fan of Wordpress I also wanted to see if there was an easy way to implement this solution on a Wordpress site.

I started of searching the web for HTML5 video solutions with Flash fallbacks and found this site. I followed the example there and tested it out in different browsers on Windows. It showed that all but IE8 and Safari worked fine. Safari (v. 4.0.5) played the movie extremely slow for some reason and IE8 showed the Flash movie instead since it do not support HTML5 video tags.

I experimented a little and combined the splashscreen plugin for Wordpress, some HTML5 from the video for everybody example and some Javascript for detecting if the browser support HTML5.


<body bgcolor="#000000">

<a onclick="setsplash()" href="">

<video width="100%" height="100%" autobuffer autoplay loop style="position: absolute; top: 0px; left: 0px;">

<source src="/media/myvideo.mp4" type="video/mp4"></source>
<source src="/media/myvideo.ogg" type="video/ogg"></source>

 <script type="text/javascript">
 function supports_video() {
 return !!document.createElement('video').canPlayType;
 }
 </script>

 <script type="text/javascript">
 if (!supports_video()) { setsplash(); window.location.reload(); }
 </script>

</video>

</a>

</body>

The video tag has its width and height set to 100% to fill the browser screen. The in-line style is not what I recommend but added there just for laziness and to reduce the code in this post. It should be put in a CSS style sheet.

Note that this solution is not something that I recommend since I generally is against splash screens.

Related Links:

Tuesday, 18th May 2010
No Comments

The Power of cURL

cURLiconcURL is a powerful and easy to use tool for transfering data using URL syntax. If you are into web developing and you haven’t heard of it until now, I think that you at least should try it out to see what it can do. Here are some easy-to-follow steps to download, install and run cURL.

First of all you have to download cURL. This can be done here. I recommend Windows users to download the binary files with SSL disabled. Instructions for installing cURL in other environments can be found in the cURL documentation. To install on Windows, copy the file curl.exe to you Windows System32 folder and open the command prompt. How to do this can be found here. Now write curl in the command prompt and hit Return. You should get a response similar to this:

curl: try 'curl --help' or 'curl --manual' for more information

This means that you have installed it correctly and that the command prompt can find cURL. Now type curl followed by the URL to your favorite web page, e.g. curl http://www.iglauser.com and see what happens.

If you like me, is using a lot of PHP when developing sites, you can find useful information of how to control cURL through PHP in the PHP: cURL Manual.

If you are running a XAMPP server, cURL is by default disabled. To activate cURL for your XAMPP server follow these steps:

1. Go to the XAMPP directory of your server
2. Open bin directory in the Apache folder
3. Open the php.ini file with a text editor
4. Search for the text “;extension=php_curl.dll” and remove the semicolon (;) from the text
5. Save the changes to the php.ini file
6. Restart your apache server

Good luck cURL’ing!

Related Links:

Thursday, 7th May 2009
No Comments

CSS Reset

Different browsers have different presentation default for CSS styles. This includes different top and bottom margins for headers, indentation, indent strategies for unordered lists, default line height, and much more. To spend less time struggling with browser default presentation differences, most CSS style sheets and CSS frameworks has a CSS reset included in them.

There are plenty of CSS reset examples out there. A simple one such as the following resets the margins for a bunch of elements. Put it at the top of your CSS file and it will do just fine for most occasions.

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td {
  margin: 0; padding: 0;
}

If you want a more complete CSS reset I can recommend the YUI 2: Reset CSS.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin:0;
  padding:0;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
fieldset, img {
  border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
  font-style:normal;
  font-weight:normal;
}
ol, ul {
  list-style:none;
}
caption, th {
  text-align:left;
}
h1, h2, h3, h4, h5, h6 {
  font-size:100%;
  font-weight:normal;
}
q:before, q:after {
  content:'';
}
abbr, acronym {
  border:0;
}

If you want to put the reset in a separate file, give the file a name, e.g. reset.css and add the following to your header:

<link rel="stylesheet" type="text/css" href="http://yourdomain.com/locationofprojectscssfiles/reset.css">

The downside of having the CSS reset in a separate file is that you will get an extra HTTP request for retrieving the file. The upside on the other hand is that you can easily share the same CSS reset code between different projects. Just remember to include the line above in the header in such case.

Related Links:

Thursday, 16th October 2008
2 Comments