Introducing a New WordPress ‘Diary’ Theme For This Blog

For this blog, I decided to give my visitors yet another theme to choose from: the Dairy theme. This theme is coded with the latest HTML5 and CSS3 standards, and thus it is best viewed with the latest browser versions.

Same as the other 3 themes available for this blog, the Dairy theme has been extensively customized, modified, enhanced with new features and functionality, and fixed to fit this blog. As for the Dairy theme, I spent 33+ hours over a period of 8 days, for all the customization needed. As always the theme is continuously open for improvements, fixes and new features. Now this blog´s visitors have the option to switch between 4 themes.

As I discussed in my previous tutorial, cookies must be enabled in your browser for the theme switching to work. All these 4 themes, are becoming my WordPress testing ground, my WordPress design ground, my WordPress learning ground, my WordPress code playground if you wish.

What is a WordPress Theme?

A WordPress theme is a way to “skin” your Blog. One of the great things about WordPress is the ability to customize your Website by using themes. WordPress themes provide much more control over the look and presentation of the content on your Website. A theme modifies the way the Website is displayed, without modifying the underlying software. A WordPress theme has many benefits, including:

  • Create a unique look for your WordPress Website.
  • It separates the presentation styles from the Core wordPress system files.
  • It allows for quick changes of the visual design and layout of a WordPress Website.

The New “Diary Theme” For This Blog

The image below shows a Screenshot of the Diary theme that visitors of this blog can choose from:

Boutros AbiChedid Blog shown using the Diary theme.

The Diary theme is coded with the latest HTML5 and CSS3 standards. HTML5 and CSS3 bring new features and functionality to the Web. With HTML5 and CSS3 you have the chance to create features for a Website that were previously only available with flash or Javascript.

Customization, Additions and Fixes For The Diary Theme

I followed my 17 point checklist to successfully switch WordPress theme tutorial that I wrote previously. Over a 8-day period and 33+ hours later, below is an incomplete summary of the changes, code fixes and additions that I made for the Diary Theme:

  1. Modified the Theme´s layout by increasing the width of the background images from 922px to 1020px.
  2. Optimized all background images for faster load time.
  3. Extensive CSS (style.css) modifications and additions.
  4. Added Google Analytics code to the footer (footer.php).
  5. Modified the footer (footer.php).
  6. Added Advertisements code to posts (single.php).
  7. functions.php: Added many custom coding that are already available for the other 3 themes. For example, added functions to activate maintenance mode, to remove WordPress version, to make comment links as doFollow, to add the author bio for every post, and to add breadcrumbs trail and others.
  8. Added styling for all the above functions as needed in style.css file.
  9. Added the blog´s Logo as an image to the header.php file.
  10. Fixed the “Monthly Archive” Widget.
  11. Added the “blockquote tag” styling.
  12. Added the Comment pagination code (previous and next) to the comments.php file. This code was not existent in the original theme, which is wrong because the theme will not show any additional comments than the number specified in the dashboard.
  13. Added “Related posts” code to single.php file. Styled it in style.css file.
  14. Added “Post tags” code and “Post Last Updated” code to single.php file. Styled them in style.css file.
  15. Added the paged menu to the header.php file and styled it in style.css file. The Diary theme did not natively support menus, now it does.
  16. Added “Most Viewed Posts” custom code to the Sidebar (sidebar.php file)
  17. Styled the post Author´s Comments differently from the rest of commenters. Added the code in style.css file.
  18. Fixed styling for the Resources custom page.
  19. Added the Site Map custom page. Styled it in style.css file.
  20. Added Stumble! custom page. Styled it in style.css file.
  21. Added all custom CSS styling that are post specific.
  22. Added all custom CSS styling that are page specifics.
  23. Changed the code for the <title> tag in the header.php file for better SEO purposes. The new title format takes care of the main index page, other pages, posts, categories, dates, searches etc.
  24. Fixed styling for the CALENDAR sidebar widget. The CALENDAR widget now looks much nicer than the original.
  25. Added the “Tag Cloud” code in functions.php file. Styled it in style.css file.
  26. Designed (in Photoshop) and added Buttons (StumbleUpon, Email and Donate) to the Sidebar (sidebar.php file).
  27. Added “favicon” to the header.php file.
  28. Added “Flush the buffer” code to the header.php file. This is a good first-step alternative to a caching plugin.
  29. Tested all posts and pages one by one, for proper layout and style and for user-friendly features (spacing, clarity etc.) and fixed accordingly.
  30. Validated code (CSS, HTML and Accessibility) and fixed as much as I can. Some errors are beyond my control like code for external services, obsolete HTML5/CSS3 tags from older posts, and browser specific CSS properties.
    The Diary theme is an HTML5/CSS3 theme while the other 3 themes are XHTML 1.0 Transitional/CSS2.1 which is causing the majority of the validation errors and warnings.
  31. Added Meta tags to the header.php file.
  32. Added an Error message for Internet Explorer version 6 and older. Added code to the Sidebar (sidebar.php), since it is less intrusive there.

    Error message displayed for Internet Explorer version 6 and older. Diary Theme - Boutros AbiChedid Blog.

  33. Added a Warning message for Internet Explorer version 7. Added code to the Sidebar (sidebar.php), since it is less intrusive there.

    Warning message displayed for Internet Explorer version 7. Diary Theme - Boutros AbiChedid Blog.

  34. Added a Fatal Error message for Internet Explorer version 8 and older when JavaScript is disabled. Added code to the Header (header.php file).

    Fatal Error message displayed for Internet Explorer version 8 and older with JavaScript disabled. Diary Theme - Boutros AbiChedid Blog.

  35. Added a Warning message for Internet Explorer version 9 and other browsers (New versions of Mozilla Firefox, Safari, Opera and Google Chrome) when JavaScript is disabled. Added code to the Sidebar (sidebar.php), since it is less intrusive there.

    Warning message displayed for Internet Explorer version 9 and other Browsers (New versions of Mozilla Firefox, Safari, Opera, Google Chrome) When JavaScript is disabled. Diary Theme - Boutros AbiChedid Blog.

  36. Tested all aspects of the Diary theme (social buttons, contact, comments, posts, pages, widgets, etc.)
  37. Tested the Diary theme on older versions of Internet Explorer (IE6, IE7 and IE8) and fixed/updated CSS accordingly and added CSS hacks in header.php file.
  38. For faster page load speed: Removed all 5 external and NOT needed JavaScript files and 1 CSS file. Updated the header.php file accordingly. These files are not needed for this blog and thus it is better to remove them for faster page load time, and better grades in Yahoo! YSlow and Google Page Speed tools.
  39. Added IE6 PNG hack for the Logo image only. IE6 is pretty much helpless for the Diary Theme even with the Google JavaScript code that recognizes and style HTML5 elements.
  40. Added a “Page Not Found” custom page (404.php) as opposed to the default.
  41. Added code to track and display Single Posts number of Views.
  42. Tested Theme rendering and functionality in the major browsers and multiple versions of Internet Explorer (IE6/IE7/IE8/IE9) with and without JavaScript on Windows Operating System.
  43. Tested for Website speed. Tables are listed below. Keep in mind that I am not using any caching plugins, since the Theme Switching will not work.
  44. I did NOT test the Theme on Mobile devices or on a Mac computer.

As I said before, the Dairy theme is a HTML5/CSS3 theme, meaning that for older version of Internet Explorer (IE8 and older) that do not Support HTML5 tags (especially the <section> tag), the blog´s layout will totally break when JavaScript is disabled. The Diary theme count on Google´s HTML5 IE enabling JavaScript code to recognize and style HTML5 elements.

Comparison Tables between The 4 themes for This Blog

For the sake of testing, I was curious to know the difference of page Load speed and performance between the 4 themes for this blog. Faster is better, because faster Websites make for a better user experience.

Yahoo! YSlow analyzes Web page performance by examining all the components on the page, including components dynamically created by using JavaScript. It measures the page performance and offers suggestions for improvement.

Google Page Speed Online analyzes the content of a Web page, then generates suggestions to make that page faster. Reducing page load times can reduce bounce rates and increase conversion rates.

WebWait is a Website timer. WebWait is used to benchmark your Website or test the speed of your Web connection. WebWait timing is accurate because it pulls down the entire Website into your browser, it takes into account Javascript processing and image loading.

Summary – Themes Comparison
(Main landing Page)
  Yahoo! YSlow Google Page Speed Online WebWait – Website timer
Clear Line Theme Grade A
Overall performance score = 99/100
Page Speed Score = 69/100 Average Load Time after 5 runs = 1.34 sec
Diary Theme Grade A
Overall performance score = 94/100
Page Speed Score = 72/100 Average Load Time after 5 runs = 1.50 sec
Emplode Theme Grade A
Overall performance score = 99/100
Page Speed Score = 70/100 Average Load Time after 5 runs = 1.09 sec
Paper Wall Theme Grade A
Overall performance score 97/100
Page Speed Score = 68/100 Average Load Time after 5 runs = 1.16 sec
Summary – Themes Comparison
Random Post: (37 Must-Have Cheat Sheets and Quick References…)
  Yahoo! YSlow Google Page Speed Online WebWait – Website timer
Clear Line Theme Grade A
Overall performance score = 94/100
Page Speed Score = 80/100 Average Load Time after 5 runs = 1.57 sec
Diary Theme Grade B
Overall performance score = 89/100
Page Speed Score = 79/100 Average Load Time after 5 runs = 2.39 sec
Emplode Theme Grade A
Overall performance score = 94/100
Page Speed Score = 81/100 Average Load Time after 5 runs = 2.22 sec
Paper Wall Theme Grade A
Overall performance score = 92/100
Page Speed Score = 78/100 Average Load Time after 5 runs = 2.34 sec
Summary – Themes Comparison
Random Page: (Guest Post)
  Yahoo! YSlow Google Page Speed Online WebWait – Website timer
Clear Line Theme Grade A
Overall performance score = 96/100
Page Speed Score = 72/100 Average Load Time after 5 runs = 2.18 sec
Diary Theme Grade A
Overall performance score = 92/100
Page Speed Score = 73/100 Average Load Time after 5 runs = 2.59 sec
Emplode Theme Grade A
Overall performance score = 97/100
Page Speed Score = 74/100 Average Load Time after 5 runs = 2.17 sec
Paper Wall Theme Grade A
Overall performance score = 96/100
Page Speed Score = 73/100 Average Load Time after 5 runs = 2.15 sec

From the 3 tables above, it is clear that the Diary theme is consistently slower to load compared to the other 3 themes. As a matter of fact, more improvement can be made to reducing page load times to all themes.

Also for this blog, I am not using a caching plugin, since a caching plugin interferes with theme switching. However; I did implement 12 of the 14 Tips for Maximum WordPress Performance & Speed.

References:

  1. WebWait – Website timer
  2. Yahoo! Best Practices for Speeding Up Your Website
  3. Page Speed Online
  4. Yahoo! YSlow

Your Turn to Talk

What do you think about the New Diary theme? Do you have any feedback or suggestions for improvements? Is there anything that needs fixing? Do you like the idea that I gave you the choice to switch between themes for this blog?

If you have something to add or anything else to say, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.

If you found this post useful, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

6 Responses to “Introducing a New WordPress ‘Diary’ Theme For This Blog”

  1. [...] I am using for this blog is the modified version of the Diary theme. Therefore, I will be using the Diary theme as an [...]

  2. Bill Murray says:

    Hello,

    Thank you for this great blog. I just installed this Diary theme and after taking a closely look it was definitely missing a lot things that your post addresses. Great work on adding the menu bar, increasing the size of the background!

    Any chance you would be willing to provide me with your stylesheet for my own personal website? I just can’t figure out how to get the menu bar. Its a big ask from all the work you have done but I thought I ask anyways.

    Thanks,
    Bill

  3. Ptc trusted says:

    Boutros I want you to ask something about wordpress themes.
    Do you really believe that some themes are better SEO optimized than others in order to play a role at seo?
    The most possible answer is “the difference about SEO themes is so minimum that seo doesn’t worth to be the first option when choosing a theme.The first option must be design and navigation.” Right?
    It all depends about SEO that you are going to do at your blog. Right?

    • Hi,
      First Check this SEO basics doc from Google.
      For a WordPress theme to be SEO friendly: it needs to take into consideration the following: easy navigation, inclusion of meta tags in the header (descriptions, titles), existence of HTML Site Map, 404 page…

      ….SEO doesn’t worth to be the first option when choosing a theme. The first option must be design and navigation.” Right?

      Right. and I will also add page loading speed. What good does a design and navigation do for you, if the page takes long time to load. As a rule of thumb the fastest the page load time the better, but the target should be less than 2-3 sec.

      For me when I choose a theme: I’ll look for a well designed, well coded and user-friendly theme. SEO for me comes next, since you make the content and not the theme (you make the keywords and good quality contents, you put the alt attributes to images, you add meaningful image names and descriptions, you add the anchor tags and you choose headers appropriately, ETC.. The theme does not do that for you.)

      Every Blog has to be optimized for Search Engines.

      Hope this helps.
      Boutros.