All posts tagged “freebie”

Free graphical buttons for all popular payment services

Buttons for popular payment sysmtes

For a commercial site, and with the proliferation of online payment services, you may need to have buttons showing the logos of these services. Here is a set of icons payment card that you can place on your website or online business on your forms of payment. These icons are available in PNG format in two sizes (99×66 and 64×43). You will also find generic icons payment methods. This excellent freebie is brought to you by Pepsized.com

Identified services in this pack:

  • 2Checkout (two versions)
  • Adyen
  • American Express (two versions)
  • Asia Pay
  • Authorize.net
  • B-Pay
  • BrainTree
  • Cirrus
  • ClickAndBuy
  • CreditCall
  • Delta
  • Diners Club International (two versions)
  • Direct Debit
  • Discover
  • Dwolla
  • eDankort
  • Edy
  • ePay (two versions)
  • Eurocard Mastercard
  • eWay
  • FastSpring
  • GoCardless
  • Google Wallet
  • HSBC
  • Intuit
  • IP Payments
  • JCB
  • Maestro
  • Mastercard
  • Mercado Pago
  • Mobilpenge
  • ModusLink
  • Mondex
  • Neteller
  • Ogone
  • PayMate
  • PayOneer
  • PayPal
  • PayPoint
  • PaySafe Card
  • Pay-U India
  • PayXPert
  • PopMoney
  • Recurly
  • SaaSy
  • SafeKey
  • SagePay
  • Samurai
  • Serve
  • Skrill
  • Solo
  • Square
  • Switch
  • Visa
  • Visa Electron
  • V-Me
  • V-Pay
  • WebMoney
  • WePay
  • Western Union (four versions)
  • WireCard
  • WorldPay
Download

Freebie: The Web Factory – an astonishing WordPress based PSD template

The Web Factory - Homepage

After a bit of absence around the blog, I may announce the slowly but steady come-back of our blog via an excellent freebie: The Web Factory. This is a free PSD template with a focus to WP theme integration. It can be used as a company website or why not, with a bit of creativity, it can be transformed to anything you want.

I hope you will enjoy it and if you do don’t forget to share it with you connections. WDC would really appreciate it!

Download
Incoming search terms:

Freebie: Usermenu design

Usermenu PSD

Hello WDC readers. Today we gonna offer you a PSD freebie of an excellent usermenu. This design was inspired by the main navigation menu from the official page of “Apple” and we really hope that it will help you out in your next project. Let us have your feedback in the comment section and please don’t forget to spread the word if you enjoy this.

The archive contains 3 PSD files of the menu (800×40 px) in 3 color palletes (grey, blue and brown). You are free to use it for any purpose (free or commercial). Either way, we would appreciate a link back to our site. Enjoy and stay tuned for more excellent resource!

Download
Incoming search terms:

How to set a YouTube video as your website background

Youtube video as website background

Browsing GitHub a while ago, we came across an excellent script which can really spice up any website. How would you like to add a YouTube video as your website background? Or maybe you just want an awesome header for you website? Sure, why not … Embed a YouTube video directly as background.

Why is this script so excellent? It’s just great, you can free your creative side, you can accomplish great things with it and of course it’s cross-browser compatible (from FireFox to Chrome,  Safari and Opera, and all Internet Explorer versions – yes, even IE6; not that we care that much about it, right?).  Now let’s into it.

About

The official name of this script is “jquery.mb.YTPlayer“ is a jQuery component that let you play a Youtube® movie in a chromeless player and use a movie as background of your HTML page.

Browser support:

  • Mozilla Firefox 2+
  • Google Chrome
  • Opera
  • Safari
  • IE 6+

Dependencies

  • jquery.metadata.js

The JS call

$(function(){
    $(".movie").mb_YTPlayer();
});

HTML constructor

<a id="bgndVideo" href="http://www.youtube.com/watch?v=uG2tV-X5NiQ"></a>

Meta data settings

*metadata are parameters setted in the class attribute of the TAG.

  • opacity: (int) 0 → 1;
  • isBgndMovie: {width:‘1990’,mute:false} // or false or true (in this case the movie will be width: ‘100%’ and mute:true by default);
  • ratio: ‘4/3’ // or “16/9” to set the aspect ratio of the movie;
  • quality: ‘default’ // or “small”, “medium”, “large”, “hd720”; (not implemented yet);
  • muteSound: true // or false (not implemented yet);
  • hasControls: true // or false (not implemented yet);
  • bufferImg: (string) Path to an image you whant to show while buffering;
  • ID: (string) the ID of the DOM element where you want the video background; if not specified it takes the “body”.

Using jquery.mb.YTPlayer

To initialize a YTPlayer as simple player:

  • set the meta data isBgndMovie of A tag to false;
  • set as HREF the url of the Youtube movie;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as background:

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute and the quality as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer();

To initialize a YTPlayer as element background (from v. 1.2.1):

  • set the meta data isBgndMovie of A tag to true;
  • set as HREF the url of the Youtube movie;
  • set the opacity, the width, mute, the quality and the ID of the element you want as target of the background movie as meta data;
  • initialize the element or the elements: $(“.movie”).mb_YTPlayer().

Download, Demo and Links

Finally, we have setup for 2 very simple demos of this spectacular jQuery component and a downloadable *.zip file to have the code prepared for you.

Also, here are some useful links:

We hope you will enjoy this component and once you implement it somewhere in your projects we would love to take a look at it. So let us know via de comment section your projects URL or your feedback, questions and so on. Also don’t forget to share with your friends if you like this and stay tuned for more awesomeness on WDC.

Download
Incoming search terms:

WordPress plugin: Latest Tweets Tooltip

Latest Tweet Tooltip

We are going to start our “projects” series today with an experiment related to Twitter and WordPress, a free plugin which will make your website more engaging and certainly will stand out of the crowd. WebDesignCrate proudly present a new WordPress plugin: Latest Tweets Tooltip.

About

“Latest Tweets Tooltip” or just simply LTT is a wordpress plugin which will allow you to show the latest tweets about a certain word or phrase in a draggable and resizable jQuery tooltip window. It’s really easy to install and use it and the most important thing, it will bring some user interactivity to your website or blog.

Installation

1. Download and extract the latest-tweets-tooltip.zip archive to your /wp-content/plugins/ directory (or simple use the WordPress admin panel and upload it there: Plugins -> Add New)

2. Activate the plugin from your admin panel (Plugins)

3. To use it on a word or phrase just include the word/phrase between the shortcodes [ltt] and [/ltt]

[ltt]this is a phrase[/ltt]

Version, Credits and Further information

This is the first stable version of the plugin (1.0.0). It has been tested on WordPress 3.1 along with some widely used and popular WP plugins. From our tests, this plugin should work perfectly with any other plugins. If you find any bugs or problems please don’t forget to report them using the comment section bellow. The code which powers this excellent plugin (jQuery based) was provided by CODY using the jQuery Twitter Search Plugin. The WP port it’s our way to thank you our reader for following our blog. Enjoy it and don’t forget to share it with other!

Rate this plugin on the official WordPress Plugin Directory

NOTE: Some user have reported some small issues regarding the plugin. The most of them are encountered because of the main wrapper div ID. The div ID used by the plugin is the most common one used by WP themes (see ltt.php line 52)

<script type="text/javascript">// <![CDATA[
$(function() {
$('#content').find('.twitter_search').twitterpopup();
});
// ]]></script>

If you have this problem try change the #content definition to your wrapper’s ID. For any support related issues don’t hesitate to use the comment section of this article.

Download
Incoming search terms:

WordPress plugin template: Shortcodes Toolbox

Wordpress plugin template shortcodes toolbox

WordPress is one of the web’s most beloved and used CMS platform. And we cannot agree more with this,… why? It’s easy to use, great free themes, huge support community and the best of them, it’s open source. For those who are not so familiar with WP, or maybe they need just another reason to switch to WP, WDC brings you an exclusive tutorial/freebie.

In this article we will try to explain the process of creating a WordPress plugin and also give you an exclusive plugin template freebie on which you can work, extend the plugin according your needs or use it for learning purposes. In the tutorial part we will cover a simple yet very useful topic called “shortcodes”. We all love those quick tags right? They make our publisher life easier so why not to built a custom plugin, personalized for our needs.

For an easier comprehension of the process we will name this base plugin “Shortcodes Toolbox”. Enjoy and share this article!

1. Plugin presentation and file structure

Introduced in WordPress 2.5 is the Shortcode API, a simple set of functions for creating macro codes for use in post content. ”Shortcodes Toolbox” allows you to add shortcodes into WordPress pages and/or post using short tags. Add buttons, links, related posts etc. without any HTML or CSS knowledge.

Let’s dive into it: Firstly we need to create the file structure. Create  a directory called shortcodes-toolbox. In this directory create a file called shortcodes-toolbox.php.

2. Basic plugin information and format

In order to proceed creating a WordPress plugin we need to keep in mind some basic rules. The most important step is adding the plugin information. Edit the previously created shortcodes-toolbox.php file and add the following lines:

<?php /*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A license name e.g. GPL2
*/
?>
If you wish to publish the plugin on the official WordPress.org repository too you will need to follow some guidelines. For more information follow this link. For personal use, these are all the steps you need to make to have a functional plugin.

 

3. Functions and WP path definitions

It’s time to get into some PHP coding. First we need to define the WP paths and any CSS or JS files we intend to use. To have an example let’s create a file called style.css and place it into a directory called css (located in the main directory we created in the first step). So we end up with a file structure like shortcodes-toolbox/css/style.css
Let’s continue with the shortcodes-toolbox.php file editing and more precisely let’s add the WP paths. Add the following lines:
if(!defined('WP_CONTENT_URL'))
define('WP_CONTENT_URL', get_option('siteurl') . '/wp-content');
if(!defined('WP_CONTENT_DIR'))
define('WP_CONTENT_DIR', ABSPATH . 'wp-content');
if(!defined('WP_PLUGIN_URL'))
define('WP_PLUGIN_URL', WP_CONTENT_URL. '/plugins');
if(!defined('WP_PLUGIN_DIR'))
define('WP_PLUGIN_DIR', WP_CONTENT_DIR . '/plugins');

class STbox {
function cssStyles() {
$stPath = WP_PLUGIN_URL.'/'.plugin_basename(dirname(__FILE__)).'/styles/'.'/';
echo ' 			'."\n";
}
}

4. Plugin functionality

We can call this the heart of the plugin: the functionality part. To keep it dead simple let’s add some basic functionality like links, custom download buttons (styled via CSS) and a related posts feature. Keep in mind that these are just some basic examples and you have the freedom to add anything you like, or modify it according you needs.

Now let’s add some more PHP sparkle into the shortcodes-toolbox.php file:

/* Simple URL function */
function URL($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => 'http://'
	), $atts));
	return '<a href="'.$url.'">'.$content.'</a>';
}

/* Download button function, with multiple style posibilities (via CSS) */
function DownloadButton($atts, $content = null) {
	extract(shortcode_atts(array(
		"url" => 'http://',
        "color" => ''
	), $atts));
	return '<a href="'.$url.'">'.$content.'</a>';
}

/* Related posts function */
function RelatedPosts( $atts ) {
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));

	global $wpdb, $post, $table_prefix;

	if ($post->ID) {
		$retval = '<ul>';
 		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);

		// Do the query
		$q = "SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
 			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";

		$related = $wpdb->get_results($q);
 		if ( $related ) {
			foreach($related as $r) {
				$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>';
			}
		} else {
			$retval .= '
	<li>No related posts found.</li>';
		}
		$retval .= '</ul>';
		return $retval;
	}
	return;
}

We are now with the core file of this plugin. Save everything and open-up the style.css file.

6. CSS styling

In order to have some pretty download buttons we need to add some CSS styling. Open the style.css file and add the following lines:

.green a:link, .green a:visited{
color:#ffffff;
text-decoration:none !important;
}

.black a:link, .black a:visited{
color:#ffffff;
text-decoration:none !important;
}

.green a:hover, .black:hover{
color:#ffffff;
text-decoration:none !important;
}

.green {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338));
background : -moz-linear-gradient(center top, #88c841, #73b338);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}

.green:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841));
background : -moz-linear-gradient(center top, #73b338, #88c841);
color:#ffffff !important;
text-decoration:none !important;
}

.black {
display: inline-block;
font-weight:bold;
font-size:1.2em;
background : -webkit-gradient(linear, left top, left bottom, from(#000000), to(#414141));
background : -moz-linear-gradient(center top, #414141, #000000);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px 20px;
text-align: center;
-shadow: 0px 1px 0px #6c0909;
color:#ffffff !important;
text-decoration:none !important;
}

.black:hover {
background : -webkit-gradient(linear, left top, left bottom, from(#414141), to(#000000));
background : -moz-linear-gradient(center top, #000000, #414141);
color:#ffffff !important;
text-decoration:none !important;
}

7. Installation and testing

We are good to go. Let’s try the newly created plugin. Create a zip archive of the main directory shortcodes-toolbox and upload it via your WPs administration panel (Plugins->Add new). After the installation is successful create a new post or page and add the following lines to test out the plugin:

[DownloadButton url="http://www.google.com" color="green"]Download Google Chrome[/DownloadButton]
[DownloadButton url="http://www.google.com" color="black"]Download Google Chrome[/DownloadButton]
[link href="http://www.yahoo.com"]Yahoo[/link]

Save the post and voila. We have two shiny download buttons and a simple link. Everything added via shortcodes.

We hope you enjoyed this quick tutorial and don’t forget to download the source files too. For any questions don’t hesitate to use the comment section and be sure to share this article with your perks. Have fun and stay tuned for more great articles!

Download
Incoming search terms: