background preloader


Facebook Twitter

10 Impressive Techniques to Spice up your WordPress Theme. WordPress awesomeness lies in its fact that it can be customized to power any type of site you like!

10 Impressive Techniques to Spice up your WordPress Theme

But what happens when you combine the power of javascript with WordPress, the possibilities are infinite. This article will share 10 great practices, examples & Plugins for using the most popular Javascript frameworks out there to spice up your WordPress theme. 1. Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+ Learn how to implement a Nice & CleanSliding Panel in WordPress 2.7+ using jQuery. 2. jBreadCrumb jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way.

Learn how to create this navigation technique, and display it on our posts, pages and categories archives in your WordPress theme. 3. The basic idea of the sliding box animations is very simple. Frontpage Slideshow. Run away, run far far away This module is tied to a commercial product, is unsupported, is poorly implemented, lacks modern features, and is poorly documented.

Frontpage Slideshow

First, it requires a third party, commercial Javascript library ($28). Second, it's not maintained at all. As of today it hasn't been updated in nearly a year and a half and has 39 open bug and support issues that have never been addressed. Third, it's implementation in Drupal is not as strong as it could be. Fourth, it has no support for Imagecache. Finally, I can find no online documentation and only a partially written README.txt file which keeps referring to FCKeditor. There are many better alternatives out there. Review by MatteusX [info] on August 11, 2010 - 14:53 Needs a lot of work to get usable. Tried this module to no avail. Review by mxa055 [info] on December 15, 2009 - 11:21 Not ready at least when you have a multilingual site. But at the moment I can only advise to avoid this module as it has the described bug. jQuery.ScrollTo.

Dynamic Drive- Dynamic Content. jQuery for Designers - Tutorials and screen. How to Solve the Problem Recreating this effect is simple to do if you know what plugins to use.

jQuery for Designers - Tutorials and screen

There are plugins out in the wild already, but we want our jQuery to satisfy the following requirements: Degrades perfectly without JavaScript enabledSliding panels effect without hogging browser CPUNext and previous buttons added using JavaScript because they hold no use without JavaScriptHitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigationAny link on the page that refers back to a panel should trigger the effect and highlight the right navigation – this should happen without any extra work The hash is the emphasised part (including the # symbol) in: In fact, our version of this slider will be better than Panic’s and the current jQuery plugins if we can meet all of the requirements.

For example, in the Panic example linking directly to the preview pane doesn’t correctly highlight the navigation. Plugins Required Markup. Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images a. Click here for the new version of this plugin Version 1.5 of my Easy Slider plugin for jQuery is here.

Easy Slider 1.5 - The Easiest jQuery Plugin For Sliding Images a

This is one of the my rare scripts that make it to their second version. All of the features here are result of your comments, so if you have more ideas, keep ‘em coming! Note: in case you haven’t already, you might want to check out article about first version of this plugin. Creating a Slick Auto-Playing Featured Content Slider.

I love the Coda Slider plugin for jQuery.

Creating a Slick Auto-Playing Featured Content Slider

I've used it recently to build a couple of tabbed "widgets". One here on CSS-Tricks in the sidebar to show Script & Style links, Featured Posts, and Popular Posts. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose. Both of these examples use the Coda Slider pretty much "out of the box". View Demo Download Files Functionality Checklist Like I said, the Coda Slider was 90% there already. Here is what we need in addition: Different types of custom content in the panels. Let's go through the HTML, CSS, and JavaScript. The HTML Here is the framework HTML for just the slider itself: <div class="slider-wrap"><div id="main-photo-slider" class="csw"><div class="panelContainer"><div class="panel" title="Panel 1"><div class="wrapper"><!

The CSS The full CSS for this example has a basic reset, some utility styles and basic structure. The JavaScript We aren't done yet though. Share On.