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.
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.