I’ve been working with jQuery quite a lot over the past week to get the commentluv settings page up and running and get the new commentluv plugin working as promised. It always amazes me at how incredibly easy it is to get it to do cool things with a web page.

Not just Ajax things, simple effects that allow you to take a page from a digital piece of paper to a digital pop-up book! Click here for an example..

Look at me!

Send me back up

Example explained

(you should have the jQuery library loaded in the head of your document, my wordpress already does this but if yours doesn’t you’ll have to put a line like this in the head of your page)

step 1: create a hidden div with an id of “first” and put something in it.

<div id="first" style="border: 1px solid #000">
<img><p style="color:white">Look at me!</p>

You can set the style inline with the div or your could add something like this to your style sheet

#first { display: none; } 

Something to note, an ID= is used if it is the ONLY one, a class= is when you have more than one. If you’d used class=”first” on the div above and had an entry in your stylesheet like this

.first { display: none; } 

then every div or img or span you gave a class of “first” to would be initially invisible.

step 2: Now you need to trigger an event to slide the div down. That’s as simple as putting a html link with an onclick attr and use a built in jQuery effect.
onclick is an attribute you can put on html objects like ‘a href’ links or images or other parts of your page. You put the javascript or function you want running in the quotes and whenever that object is clicked, the javascript gets run.

<a href="#">Click here for an example..</a>

Here, the javascript we want to run is jQuery(‘#first’).slideDown(1000);

It’s this little bit that does the magic.

Sometimes people use $ instead of the word jQuery which will work in most cases but here on WordPress there is the prototype library too and that uses the $ symbol for it’s calls so to be safe and get it to work without clashing with other libraries we use jQuery.

We call jQuery and tell it what we are targeting in the brackets. Because we are using an ID, we use ‘#first’. Had we used a class then we would put ‘.first’ and then we attach the slideDown event with a speed of 1000 ms by putting .slideDown (notice the captial ‘D’) on the end of the target and a speed 1000 in the brackets.

step 3: slide it back up
You should be able to guess how this was done, instead of using slideDown, we used slideUp

<a href="#">Send me back up</a></h2>

That’s it, easy peasy!

You can find out all the commands available to jQuery here

Win your own plugin!

I’ve had some phenomenal traffic and trackbacks to the CommentLuv plugin page since I made it and with all that action it has upped the plugin page to a PR of 6.

Now, I know PR isn’t so widely worshipped as much as it used to be but, PR is like money… it’s not until you have it that you realize that it’s not that important. Unless, you don’t have it and then it seems like everything will get better if only you did have it!

So here’s an idea that could get someone the fame and fortune that comes with writing a new plugin, I’ve written a few custom plugins for this site and I thought it might be nice to run a contest for the chance for someone to be the offical site for the plugin. (beware, I have had literally thousands of comments on the commentluv page! so be prepared to get a ton of your own comments if you win)

The link for the plugin page on the plugins’ dashboard page would point to the winners site.

The winners site will be the ‘official’ place for the plugin so it will be shown in the readme, on the wordpress codex download page and anywhere else someone writes a review of the plugin. If I update the plugin then I notify you and you can update the plugin release page.

The choice of plugins:

• Contest Notify
  This plugin checks a category and if there’s a post in it, it slides a div down containing the excerpt of the post and a link to the page. It also looks for a custom field called “prizepic” and retrieves the url of the image to be used.

  It’s pretty basic at the moment because I just use it myself but I see some areas of improvement such as putting all the settings in it’s own dashboard page so a user can change the title and style of the box so it can be used for all sorts of featured posts instead of just contests…

• Close comments per post
  This is a simple plugin that looks for a custom field called “closecontest” in a post and checks the date given and if the post is after that date and time, it closes the comment form. It’s really useful for time specific posts like contests or when you ask for opinions on plans you have that are about to start.
• LivingPostImage(requires Curl and Flickr API)
  This is a fairly adaptable plugin for putting an image into a post. yey! well, there’s a little more to it than that. It does require the user to apply for a Flickr API but that’s quite a simple process and free.

  I call it Living because it always gets the latest public picture for the search terms given so the picture changes over time which helps to keep the posts looking like new. It can search for terms you give it or use the title of the post or the first 3 tags of the post. It outputs the html to display the picture directly or can pass back an array of url, page url and title.

• Custom Scripts Per Post
  Simple plugin that allows you to include javascript in the head of the page for a particular post only. It’s pretty useful if you write tutorials or you want a particularly snazzy bit of script included for just one post. Just give the path to the script in a custom field called “myscripts” and it’ll be included for that post.

So, what do you think? any suggestions or ideas? I think it could turn out to be a pretty good traffic generator for someone….

I’ve had another few days of intensive coding and completed a few plugins that can help with the new theme.

I can’t believe that only last week I was feeling burnt out with coding! All I needed was a little “I wonder if I could …” php demon in my ear and I was off. Everything else has suffered though, I have barely talked to anyone in the past 3 days. I haven’t even answered any text messages! lol. I must be a hermit

Here’s what I’ve been up to:

1. new plugin: Custom scripts per post
   It’s not good to have unnecessary javascript includes loading on every page if only 1 page or post uses it so I wrote this to allow me to have tutorial or example posts that use custom javascript included in the head of the page. Now if I want to include some javascript on a particular post (like the CommentLuv check) then I just add the urls to the custom field of the post entry page. Sweet.
2. new plugin: Close comments on a particular post after a given date
   This was inspired from the regular contests I run. Especially ones that are time specific. Now I just add a custom field with the date and time I want comments to be closed. The plugin does all the checking and displays a message below the form to say when comments will be closed
3. new plugin: Notify box for current contests
   I especially like this one, it displays a sliding div notifying the surfer if there is a contest open. I just select the category “current_contest” on the new post I want to be displayed. This allows me to have a contest open and still be able to add new posts without the contest post going out of focus, plus I think it looks pretty cool!
4. updated plugin: Retreive a picture from Flickr
   I’ve updated this so I can spit out a picture from flicker by searching for terms given, title of the post, tags of the post or even just a random one. I added the ability to output directly including a given class with one echo command.
5. updated theme: front page code
   I added a check to see if a post has a specific image url in it’s custom fields, if it has then it uses that instead of the flickr search
6. updated plugin: Lotto results display
   I changed the parsing routine so it doesn’t get tripped up by strange things in the source of the source
7. updated theme: Fat boy!
   I widened the main content area so code can be displayed nicely. Plus it looked a little thin!

Not bad, I even finished before the weekend. Now I have no more excuses to get on with ‘real work’ lol!

I tried to respond to a comment on my CommentLuv plugin page this morning, and I was greeted with this error,
500 Error — Internal Server Error. There has been an internal server error
oh noes!! The site was working fine for the main index page but single posts kept on throwing up a 500 error

I had a quick search of the WordPress forums and found a variety of posts from people experiencing the same problem, each one with a different solution. I went through each solution until I revived the site back to it’s normal functionality.. here’s what I did..

1. .htaccess
   Some people had the problem because their htaccess file was not writable or their server had mod_rewrite disabled. I tried deleting the htaccess file and then going back to ‘options/permalinks’ and updating the permalink structure. The update went through with no problems (sometimes it will say “could not update htaccess” which means it is not writable by the server). The problem still persisted though..
2. wp-cache
   I thought it might be a cache problem seeing as the CommentLuv page gets so many visitors (it has a pr5 too!), I disabled the cache plugin.
   still no joy…
3. php.ini – only 8m of memory?
   I thought it might be too much memory used (I was close) so I edited php.ini in the root of my hosting folder and put this line in.
   memory_limit=16M
   Not successful
4. Too much content?
   I tried browsing to the CommentLuv page on my mobile phone once and it crashed with “out of memory” error and considering it has (atm) 199 responses, I thought that might be something to do with it. I know my stats sometimes give me a 500 internal server error when it takes a long time to load so that looked to be the problem.
   I downloaded a plugin called ‘paged-comments‘ and installed it, I particularly like the way you can stop it from paging every post and only choose which posts need paged comments by adding a custom field to the post editing screen.

   Sorted that out and tried to view the page, it loaded partly! almost there!

5. Plugin memory hog.
   On the nearly loaded page there was an out of memory error relating to sh-autolink (a plugin which automatically makes certain words in to html links) so I disabled that and SUCCESS!
   It all works fine now.

A combination of too many comments and a plugin that scans the whole text for keywords led to my 500 internal server error for WordPress, it’s now fixed with a neat plugin and a quick removal of another. phew!

The CommentLuv plugin page is now up and working fine again, I never realized that it would get so much attention when I first drafted it. Thanks everyone for using CommentLuv!