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

MooTools 1.3 Cookbook – book review

September 12th, 2011 in Mootools | Comments Off

MooTools 1.3 Cookbook Once again Packt publishing asked for a book review and I must say I’m happy to see that more books on Mootools begin to appear on the market. MooTools 1.3 Cookbook is written by Jay Larry G. Johnston (from the author description he is a moohoolic, exactly my kind of person) and right on the cover makes a promise: Over 110 highly effective recipes to turbo-charge the user interface in any web-enabled Internet application and web page. A bold statement that I really hope this book will deliver. …view full post

Featured Articles Lite – how to create custom themes

June 1st, 2011 in How to | 42 comments

How to develop themes for Featured Articles LiteAs you may or may not know, Featured Articles Lite is a WordPress plugin that displays slideshows in any page of a WordPress blog. It’s lightweight, fast and has many capabilities, probably the most important being the ability to create new themes for it to truly make it part of the blog displaying it. It already comes with 4 default themes that can be displayed and below I will try to detail as much as possible how to create your own theme.

Please note that some CSS and HTML knowledge is needed in order to complete the task. …view full post

ZoomIt – JavaScript image zoom for MooTools and jQuery

May 30th, 2011 in jQuery, Mootools | 1 comment

ZoomIt - JavaScript image Zoom for MooTools and jQuery ZoomIt is a JavaScript image zoom developed for MooTools 1.3 (1.2 compatible) and jQuery that allows display of detailed, large images based on smaller images that can be placed into the context of web pages. A new approach, different from the previous one (that can be seen here) allows easier placement and implementation along with possibilities of styling using CSS classes placed in stylesheets. The two script versions (for jQuery and MooTools) offer the very same functionality so whatever your preference, you get the same thing no matter what JavaScript framework you use.

The script allows mouse events customizations meaning that the zooming process can be started on either click or mouse movement over the thumbnail image. Also, moving the zoomed area can be set to work with drag or mouse movement over the image. The big image that displays the details has a loader CSS class on it that is available as a parameter (allowing to customize the loader in any way you want) and it also has “memory” capability, meaning that at a later time the user zooms the image, the previous position will be displayed by default. The script works well in all major browsers (Firefox, Safari, Chrome, Opera) with the latest versions. Older browser versions haven’t been tested but it shouldn’t be a problem with them (in case there is, please leave a comment below). …view full post

WordPress featured content plugin

September 21st, 2010 in Mootools, Wordpress | 638 comments

Featured content WordPress plugin Featured Articles Lite for WordPress is a powerful plugin that enables a very easy and intuitive setup for a JavaScript slider that will display and rotate posts or pages.
Having plenty of options that can be set directly from WordPress admin, it allows an imaginative use to suit the style of the blog displaying it.

Except the admin parameters and default themes that come with it by default, it can be customized even more by creating new themes to suit the general look requiring only some medium knowledge of HTML and CSS.

Starting with version 2.3 (compatible with WordPress 3.1+), all JavaScript for the slider is written in jQuery; this prevents any conflicts between various JavaScript frameworks you might be running on your WordPress blog. Other improvements are multiple sliders creation and management, widget support to easily display any slider into your widget areas, clear manual implementation code that you can put into the theme files to display any slider anywhere you want it to.

Bottom line, from start to finish, it will take only minutes to display articles into the slider and to choose where to have it shown in your blog. …view full post

SlideItMoo WordPress Plugin

June 3rd, 2010 in Mootools, PHP, Wordpress | 17 comments

Wordpress SlideItMoo plugin SlideItMoo plugin for WordPress implements the MooTools plugin having the same name into an easy to use plugin that allows you to set image galleries into your posts and pages with only a few clicks. The JavaScript source can be found here with various examples and implementation instructions.

If you know SlideItMoo, you know that it can be used in various ways ( as banner rotator, image slider, featured content presentation etc. ) but this WordPress plugin only implements the image slider functionality for the horizontal slider. As for features, it allows displaying as many image sliders as needed into a post or page, each having its own properties and images. Also, you can call the plugin from your template files by passing it only 2 arrays, one containing the slider settings and one containing the images ids. Everything is kept as simple as possible to allow you to easily define sliders into your posts. …view full post

MooTools 1.2 Beginner’s Guide – book review

March 12th, 2010 in Mootools, Tools of the trade | Comments Off

As I enjoy using MooTools and since almost all my work here is centered around it, I was pleasantly surprised when Packt Publishing asked me to review “MooTools 1.2 Beginner’s Guide” by Jacob Gube and Garrick Cheung. Now, that I read the book, I must tell you that things would have been a lot easier for me when I started to learn MooTools if I had this book.

One of the main problems with MooTools in my opinion is that entry level is set a bit high and you need some programming knowledge to be able to start learning it. Docs on mootools.net are simply great but in some cases aren’t very helpful, especially if you’re trying to learn the framework. That happens because they assume you already know things that you probably don’t. This usually ends with searching for additional information on different blogs, talking to people, waiting for answers and mainly wasting a lot of time. …view full post

MooTools Fancy Animated Tabs

February 17th, 2010 in Mootools, PHP | no comments

MooTools Fancy Animated Tabs There are times when we need to display a bit too much content in a small space. One way to do it is by using tabs. Fancy tabs is a tabs navigation display that tries to cover most situations, from AJAX loaded tabs to auto navigation and multi purpose usage. To make things easier when designing the interface, all CSS is all external giving the possibility to change skins very easily without interacting with the JavaScript code.

Main features for this tab navigation system are:

- tabs can be rotated automatically but setting the number of milliseconds between them;
- ajax content in tabs;
- auto resizing according to tab content;
- tab highlight with smooth effect between classes in CSS;
- highly customizable from CSS;
- multiple entrance tab content effect ( fade, slide-fade ); …view full post

Styling select box – SelectoMoo

January 19th, 2010 in Mootools | 14 comments

Styling select box - SelectoMoo Developed using MooTools 1.2, SelectoMoo is a plugin that replaces the default select box element from a form with a stylish, CSS/JavaScript based select box. It offers the possibility to completely change the appearance by only using CSS style sheets so changing design turns into a pretty simple task.

The behavior tries to mimic the one of a classic select element, meaning it supports keyboard navigation between form fields ( by pressing tab key ), it opens on label click, when opened navigation can be done by keyboard ( up, down, enter for selecting an option ) or mouse ( mouse wheel for navigation, click to select option ).

Once a selection is made, if the list is reopened by the user, the selected option gets highlighted to ease navigation and let the user know that a selection was made and what it was. Also for navigational purposes, there are different CSS classes for hovered entry and currently selected entry. …view full post

WordPress YouTube playlist plugin

October 8th, 2009 in Mootools, PHP, Wordpress | 50 comments

Wordpress YouTube playlist plugin WP MyTube is the WordPress plugin implementation for YouTube MooTools player embed with attached playlist. Simply put, this plugin will allow you to easily insert YouTube videos into your WordPress blog posts based on username or video id only. The attached playlist will display the user videos giving you the possibility to add several videos and only one player in your blog posts. This is very useful, for example, if you are a publisher that wants to display his youtube videos into a blog post.

Videos are added to your posts when you either add them or on edit. No special other settings for it except the stylesheet if you want to change the looks. To add videos to you blog posts, when you add/edit a post you’ll notice a new “add media” icon in shape of a tv. Simply click it, fill in the necessary information and the plugin will add the custom code to your pages. Hit save and that’s it.

If you want to add more than one player into a single post, well, you can do that. The plugin allows any number of players to be displayed in a single post without problems.

Further more, you can style the player to have a default look and if you want a second player to have a different look, you can add custom CSS class to it by passing the class name when you insert a new player. …view full post

YouTube player embed with attached playlist

September 29th, 2009 in Mootools | 138 comments

YouTube player with MooTools MyTube is a MooTools 1.2 plugin developed using the available player API and data API from YouTube. Basically, if you’re an YouTube publisher or simply someone who wants to display some videos pulled from YouTube on his website, this is for you.

For example, if you want to display some related (or not) videos into a post in your blog, instead of displaying 3-4 players for each video, you can have only one player and attached to it into a playlist, all 4 videos so your users can choose what to play.

The script is completely unobtrusive giving the possibility to display multiple playlists with attached video players retrieved from YouTube based on either an user name to pull videos from or simply by using the video ID you can get from any YouTube video link. All embedding and displaying is done by the script, no special knowledge needed except some CSS. …view full post