Francis Shanahan[.com] » wordpress http://francisshanahan.com Thoughts on technology from a citizen scientist Fri, 27 Jan 2012 14:18:12 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Converting the WordPress Arthemia Theme to HTML5 http://francisshanahan.com/index.php/2010/wordpress-arthemia-theme-html5/ http://francisshanahan.com/index.php/2010/wordpress-arthemia-theme-html5/#comments Sat, 03 Jul 2010 02:49:10 +0000 Francis http://francisshanahan.com/?p=2618 The other day I converted the current WordPress theme of this site from XHTML Transitional 1.0 to HTML5. It was fairly easy so here’s what I did.

An XHTML 1.0 transitional website was a great place to start. I used the trusty w3c validator located at http://validator.w3.com.

First thing was to get the Doctype fixed up: I changed

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

to

<!DOCTYPE html>

and bingo, we’re recognized as HTML5 instead of XHTML. Not compliant yet though. I removed the profile attribute from my head tag as so:

<head profile=”http://gmpg.org/xfn/11″> which wasn’t serving any purpose anyway so it became

<head>

Removed a stray </link> tag from the header, added an alt tag where there was one missing, removed px from all width and height attributes and removed a frameborder tag (obsolete).

That completed the HTML5 cleanup. At this point the site validated but was not actually using any tags.

Next up adding some HTML5 semantic tags: I added the <header> and <nav> tags in the appropriate places, defined a <section role=”main”> tag for the main area of the page. Slapped in some <article> and <header> tags. The only one worth mentioned was the <time> tag which took a different format from the datetime I was using so it’s:

<time datetime=”<?php the_time(‘Y-m-d’) ?>”></time>

And lastly added a <footer> tag. In terms of the theme I touched header.php, footer.php, index.php and single.php. Easy stuff and now I’m fully geeked out on HTML5.

]]> http://francisshanahan.com/index.php/2010/wordpress-arthemia-theme-html5/feed/ 3 How to Add JCarousel Lite to WordPress http://francisshanahan.com/index.php/2009/how-to-add-jcarousel-lite-to-wordpress/ http://francisshanahan.com/index.php/2009/how-to-add-jcarousel-lite-to-wordpress/#comments Mon, 11 May 2009 06:20:54 +0000 Francis http://francisshanahan.com/www/?p=2234 A number of folks have asked for detailed step-by-step instructions so here’s how I added a nice Carousel to the Arthemia theme running under WordPress. I use the free version of the Arthemia theme which doesn’t have a carousel out of the box. It’s easy to add one though and of course these instructions apply regardless of the theme you’re using so here goes.

I’ll assume you have WordPress installed, doesn’t matter which version.

Depending on the theme you use, the pages you’ll need to edit are located in a folder under wp-content/themes/

It’s confusing but there are actually two JCarousel libraries, each different, one being JCarousel and the other being JCarousel Lite. JCarousel is a fully featured robust carousel library for the ultimate in carousel satisfaction. It’s very complicated and I didn’t need its features. I went with JCarousel Lite and I suggest you do too.

Step 1)
Put this code into your theme’s footer.php file:


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.pack.js" type="text/javascript"></script>

The first is a link to JQuery, the 2nd is a link to JCarousel Lite. You need both and in that order.  You can specify these in the header too but the page will appear to load a little quicker in the browser if JS files are moved to the footer.

2) While you have Footer.php open, add this after the above two lines:


<script type="text/javascript"><!--
$(function() {

$("#MyCarousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
vertical: true,
visible: 3,
auto:2000,
speed:1000
});
});
// --></script>

The above is just a simple declaration to initialize a carousel. It names 3 divs, MyCarousel, Next and Prev which we’ll create next…

Step 3) Generate the carousel elements. You can make your elements static but where’s the fun in that? I used PHP for this and in my case I scroll between 5 or so “Featured” items. Here’s the PHP for that and this should go in your theme’s index.php file, wherever you want the carousel to show up.


<div id="MyCarousel">
<ul>

<?php query_posts("showposts=5&category_name=Featured"); $i = 1; ?>

<?php while (have_posts()) : the_post(); ?>

<li> <a class="title" rel="bookmark" href="<?php the_permalink() ?>"><?php the_title() ?></a></li>

<?php endwhile; ?>

</ul>
</div>

<div class="prev">&nbsp;</div>
<div class="next">&nbsp;</div>

Basically you’re just creating a div named MyCarousel, inside there is an unordered list (<ul>) and then there’s some PHP to loop through the 5 most recent Featured items and create <li> tags for each one.

You should tailor this to your needs. This code uses a WordPress function to find the latest blog entries but your code can pull data from wherever.

Notice this also creates the necessary div tags, MyCarousel, Next and Prev.

Step 4) Celebrate, you’re done. If everything worked you should get a vertical scrolling carousel on your blog’s home page. With that working you can add in other blog elements like the blog entry excerpt or number of comments etc.

Hope that’s clear enough.

]]> http://francisshanahan.com/index.php/2009/how-to-add-jcarousel-lite-to-wordpress/feed/ 32 Improving Performance #1: Hyper Cache vs Super Cache 2 http://francisshanahan.com/index.php/2009/hyper-cache-vs-super-cache-2/ http://francisshanahan.com/index.php/2009/hyper-cache-vs-super-cache-2/#comments Thu, 05 Mar 2009 04:56:37 +0000 Francis http://francisshanahan.com/www/?p=1803 WordPress is nice but it’s a bit of a hog CPU-wise. Jeff Atwood has a nice piece on this entitled “Behold WordPress, Destroyer of CPUs“.

We have a big set of releases coming up at work and I’ve become a bit obsessed with performance. We’re not using WordPress but I figured performance improvement, just like anything, starts at home. So ever since installing WordPress with this Arthemia theme I’ve been tweaking to try to get the most out of it.

I’m measuring performance using Fiddler 2, starting with clear browser, no cache and summing up the entire browser session, the HTML, CSS, JS and media. Not very scientific but better than nothing.

The first place to look was the plugin space and there are a few third-party HTML fragment caching plugins available. Naturally I tried WP-CACHE, that didn’t do much and is pretty much acknowledged as being out of date. It’s successor is an add on called “Super Cache” so I tried that. Not as smooth as I expected.

As soon as it was installed I noticed was my site throwing PHP errors all over the place. A few minutes debugging showed the config had incorrectly chosen some non-existent directory settings. With that fixed Super Cache started caching. I noticed de-activating and then re-activating this plugin screwed up the config and I had to manually edit some files each time. Less than ideal to say the least.

With caching on, response time improved as PHP no longer had to generate pages on the fly but I wasn’t blown away by any means.

After a few weeks I noticed the site would hang periodically and time out. Just doing nothing. I couldn’t diagnose this issue but once I de-activated Super Cache things seemed to come back to life.

My thinking is that Super Cache had used a Mutex to lock a file and somehow reached a race condition. In any case I started looking for a new caching product. That’s when I met Hyper Cache.

Hyper Cache is a lighter-weight caching plugin than the aforementioned SC. No directories to mess with, no editing extraneous files. I just installed it and off it went.

Measuring page rendering time through Fiddler there was not much improvement but the cache seems to rebuild faster with HyperCache and I haven’t had any mutex/file locking issues so far.

So with PHP on IIS I’ve found Hyper Cache worked better for me than Super Cache.

]]> http://francisshanahan.com/index.php/2009/hyper-cache-vs-super-cache-2/feed/ 4 How I Tweaked WordPress http://francisshanahan.com/index.php/2009/how-i-tweaked-wordpress/ http://francisshanahan.com/index.php/2009/how-i-tweaked-wordpress/#comments Tue, 17 Feb 2009 14:27:05 +0000 Francis http://francisshanahan.com/www/?p=1732 WordPress is pretty nice out of the box but there’s a few things you’ll want to do on top of the base install. I’ve been tweaking WordPress 2.7 since the day I installed it. It’s humming just as I like now and I figured I’d share the few things I changed.

  1. I started with wordpess 2.5 which was my host’s default installation. I immediately upgraded to 2.7. This was as simple as ftp’ing some files across and running a database script.
  2. I migrated my old data, which was in SQL Server into mySQL using some simple SQL scripts. This took about an hour as I’d never seen the wordpress scheme before. I lost my tags in the process but no big deal.
  3. Then I grabbed the Arthemia Lite theme (http://colorlabsproject.com/arthemia/) which I’d first seen on my buddy Chris Webb’s site (ckwebb.com). The lite version is free but with reduced functionality.
  4. I grabbed JCarousel (http://sorgalla.com/jcarousel/) and modified the index.php template to make the featured items scroll in the top right.
  5. I threw in some Google Adsense ads into the main template.
  6. I migrated from Feedburner to Google Feedburner and added in Ads into the RSS in the process.
  7. I did some UI tweaks around the theme but nothing too crazy. E.g. Added an image to the Single Post page, updated the favicon etc.
  8. As far as plugins go I’m using Akismet for spam prevention, Contact Form ][, All in One SEO and WP Super Cache.
  9. Modified the Thumbnail script (timthumb) so I don’t have to upload the images to my server and can link to them directly. This makes new posts much much faster.

That’s about it. Last night I upgraded from 2.7 to 2.7.1 which was very easy and took about 10 mins. Pretty happy so far.

]]> http://francisshanahan.com/index.php/2009/how-i-tweaked-wordpress/feed/ 8