Wordpress plugins, examples on PHP, MySQL, JavaScript, MooTools and CSS

Featured articles gives the wordpress blog admin the possibility to display posts in a slick n cool way on the home page, just above the first post from the loop. It’s developed for Wordpress 2.7.1 with the help of MooTools 1.2, probably the best JavaScript framework around ( please don’t try to argue on this on the comments ).

From the available plugin options I’ll mention the possibility to display any number of posts you feel comfortable with, the order in which they will appear ( newest, oldest or random ) and thumbnail display. Since I remembered the thumbnail, some explaining on it. The thumbnail represents the first image encountered in each separate post. If none available, none displayed.

For further settings on display options, there’s the JavaScript class. The script itself resides inside the script folder of the plugin directory. For this you can set timings between slides, whether to show numbered paging or not, how the slides will slide ( left or top ) and other. …view full post

I have a MediaTemple dv 3.5 hosting account that I like a lot (MT support was great whenever I had an issue). Today I needed to install PEAR on one of my domains. To do that, I followed the tutorial from their KnowledgeBase ( please read it if you want to do the same thing; it’s available here ) and all went well for the domain I used ( I had to make a few tries to get it going – I’m a noob in this ).

My goal was to make this work on the main domain, although I needed this on a subdomain. Pear was installed successfully, but I needed Spreadsheets and OLE in order to make things work as planned. Unfortunately, they were not available.

To add them, I created in the httpdocs folder ( using a FTP client ) a folder called PEAR_modules and uploaded Spreadsheets and OLE source files. After that, I connected to my server ( SSH using putty ) and edited vhost.conf for that domain ( in the same way as the MediaTample tutorial explained ) by adding the include path to my PEAR_modules folder. …view full post

MooTooltips gives you the possibility to create bubble tooltips on HTML elements in an easy manner and with the possibility to set each tooltip’s behavior individually. It’s also possible to display as tooltip content the content of an HTML element from the page, some text you want to input or the result of AJAX calls.

Tooltips can be set directly on the rel parameter of any HTML element and simultaneously when you create a new class instance.

For example, if tooltips are set directly on the element (let’s say an anchor), the rel parameter will have a value like: <a … rel=”{content:’some_element_id’}” and that’s it. The tooltip displayed will have as content the ’some_element_id’ content. Or if you there’s only the need to display some text, it will look like this: <a … rel=”{text:’Some text I want to display in my tooltip’}”. AJAX calls are also simple. To display the tooltip with some remote AJAX retrieved content, simply use as rel the following: <a … rel=”{ajax:’some_page.html’}”.

To start the inline declared tooltips, a CSS selector is needed so basically all tooltips declared on page must have the same CSS class in order to get the script started. Optionally, there’s the possibility the pass a container for the tooltips; if none is provided, the script will scan the entire document. …view full post

SlideItMoo v1.1 comes with some new stuff implemented in it. Those of you familiar with version 1.0, skip to download read on. Updates have been made for more extensive usage of SlideItMoo. For the rest, some explaining. Also, the 1.0 version is available here and I’ll try to provide support for it if any needed.

SlideItMoo is a banner rotator, article spinner and image slider ( carousel ) developed with MooTools 1.2. Differences from the first version are the fact that the image slider now supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter. …view full post

ChainedSelect is a MooTools 1.2 JavaScript plugin that enables the user to navigate through parent – children tree structure with indefinite number of nodes and make a selection when the desired option is encountered.

This approach offers a more powerful solution versus the classical drop down boxes chained together for a number of reasons: it takes significantly less space in the page; it can contain any number of nested levels, navigation would not be harmed; it can be styled according to the overall page design from CSS and most of all, it looks better.

The purpose of the plugin is to replace the classic chained dropdown lists that have 2 or more selects and get populated with options once you select an option from a previous one.

The whole idea behind this plugin evolves around the tree structure generated by a PHP file and sent to JavaScript as a JSON string. Giving the fact that the whole structure of the tree is loaded, the request to the PHP script is made only once and then the response is reused when navigating the nodes. Once a node is selected, the plugin allows the user to return on the path he used to get to the current node.

If an option is selected and the script that verifies the user’s entry returns an error (for example the e-mail address is invalid), the plugin offers the possibility to display the last selected option leaving it selected and accessible in POST / GET depending what method you used on the form. …view full post

MooHover is a MooTools 1.2 JavaScript class that replaces regular links and form buttons with hover effect transition between two different images, giving a flash like aspect to links and/or button and submit form inputs. This plugin is intended to be a stylish replacement of the CSS hover declaration. If JavaScript is by some reason disabled or not working, the page will display the default instance of the elements replaced.

The effect is obtained by wrapping each element into a container div having as background image the default button instance and then playing with the element opacity that has the hover instance as background image.

All CSS styles are external and the HTML code on page is minimal, meaning that only links and buttons are present, without any additional containers for them.

The script is approximately 800 bytes in size compressed using Yahoo’s YUI Compressor. Also, it allows some parameters to be set when creating an instance, mainly for the purpose of letting the user use any CSS classes he/she might need, without changing the HTML source:

• container: the element containing the anchors or buttons replaced (default:document)
• className: the hover class (default:MooTrans)
• defaultClass: the default button class (default:default)
• duration: the hover effect duration in ms (default:400)
• transition: the hover effect transition (default:Fx.Transitions.Sine.easeOut)

…view full post

SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel.

It can be used to display any number of thumbnails in a photo gallery or as a banner rotator. To switch from one way to the other, you simply have to set the appropriate values when instantiating the class.

There are several options inside the plugin that you can set up in order to obtain the desired effect:

• visible: number of visible images ( default:5 )
• showControls: either to show the back-forward buttons ( default: 1 )
• autoSlide : automatically slide the images from your photo gallery ( in milliseconds to set the interval – default:0 )
• transition: the transition you want to use when sliding
• currentElement: the element currently selected. If you need to start the slider with a specific image, set this with the image number-1 ( default:0 )
• thumbsContainer: the id of the thumbnails/images container
• elementScrolled: the id of the container of thumbsContainer variable
• overallContainer: the id of the elementScrolled variable

…view full post

This image zoom script is developed having as inspiration the similar type of image zoom created in flash that usually displays a small thumbnail showing the region zoomed on it and a bigger image that displays the region showed on the thumbnail. I’ve seen this kind of approach used mainly on e-commerce shops that needed to present a more detailed image of a product.

This particular image zoom is developed using MooTools 1.2 and it’s just for demonstration purposes since I never needed such a script in any of my projects. Any help or suggestions on making it more robust would be very appreciated.

In order to work properly, the two images (the thumbnail and the corresponding large image) must be proportional in size. When moving the zoomed area on the thumbnail, the script calculates the position on the zoomed image that it should display so it’s very important that the dimensions are proportional. The two images are located in the pictures directory, into different folders: the thumbnail’s folder is pictures/thumb and the larger image is in pictures/big.

The JavaScript is structured as a class and all CSS styles are mainly external and can be maintained from the stylesheet. …view full post

I suck at flash. Well, maybe not quite suck ( I started learning FLEX ) but I’m not that proficient yet. Luckily this guy knows what he’s doing . I absolutely love what he’s done with SiFR. And, as I stated in previous posts on this blog, I also love MooTools. So I thought to give it a try and mix the two. Keep reading to see what I’ve achieved.

Please note that the script below works only with sIFR 2.0.7.

For those of you that may not know, SiFR is a very clever way to substitute HTML titles (h1, h2…) with pretty looking flash titles right after the page loads. Brilliant idea giving the fact that pure HTML titles look like crap no matter how much styling you put on them. What you do is basically take the SiFR.fla source file, embed in it your own font, generate the .swf file and start using it. …view full post

The other day I found myself in the positions of accepting the challenge of modifying the aspect of an input type=file”. What could I do? I work with a crazy designer (just kidding, he’s actually very skilled at what he does). I thought it wouldn’t be a big deal but the solution took me a little over two hours to develop (I was thinking when I started that it would take maybe at most half hour).

What I had to create was this:

The website was developed using MooTools 1.2, so I wanted to develop a solution based on this framework. After surfing the net to see what others have done to solve this, I got a couple of ideas about what problems I’d have to solve. …view full post