$(document).ready(function(){
$('.ajaxtrigger').click(function(){
$('#target').load('ajaxcontent.html');
});
});http://icant.co.uk/articles/things-to-know-about-ajax/very-simple-ajax.html#
http://icant.co.uk/articles/things-to-know-about-ajax/load-json.html
$(document).ready(function(){
var container = $('#target');
container.attr('tabIndex','-1');
$('.ajaxtrigger').click(function(){
var trigger = $(this);
var url = trigger.attr('href');
container.html('');
if(!trigger.hasClass('loaded')){
trigger.append('<span></span>');
trigger.addClass('loaded');
var msg = trigger.find('span::last');
} else {
var msg = trigger.find('span::last');
}
doAjax(url,msg,container);
return false;
});
function doAjax(url,msg,container){
var tag = url.split('/');
var tag = tag[tag.length-1];
$.getJSON("http://api.flickr.com/services/feeds/"+
"photos_public.gne?tags="+tag+
"&tagmode=any&format=json&jsoncallback=?",
function(data){
msg.html(' (ready.)');
$.each(data.items, function(i,item){
$("<img/>").
attr("src", item.media.m).
attr("alt",item.title).
appendTo(container);
if ( i == 3 ) return false;
});
container.focus().effect("highlight",{},1000);
});
}
});
2009 has been a very prolific year for WordPress hacks. In this article, I’ll show you the most useful hacks I came across during the whole year. Enjoy!
Let’s start this post with a nice hack dedicated to help you make more money online, initially published on my other blog Cats Who Blog.
If you don’t want to bore your loyal readers but still want to earn some bucks, what about monetizing only your old blog posts instead? This code will add some advertisements only if the post is more than 15 days old.
The following function has to be pasted in your functions.php. If you are using the Thesis theme this file is named custom_functions.php.
01.function is_old_post($post_id=null){
02. $days = 15;
03. global $wp_query;
04. if(is_single() || is_page()) {
05. if(!$post_id) {
06. $post_id = $wp_query->post->ID;
07. }
08. $current_date = time();
09. $offset = $days *60*60*24;
10. $post_id = get_post($post_id);
11. $post_date = mysql2date('U',$post_id->post_date);
12. $cunning_math = $post_date + $offset;
13. $test = $current_date - $cunning_math;
14. if($test > 0){
15. $return = true;
16. }else{
17. $return = false;
18. }
19. }else{
20. $return = false;
21. }
22. return $return;
23.}
Once you’ve successfully inserted the code in your function.php file, you are now ready to call the functions in your single.php template as shown below:
1.<?php if(is_old_post()){ ?>
2.INSERT AD CODE HERE
3.<?php } ?>
Source : http://www.catswhoblog.com/how-to-monetize-your-old-blog-posts
Many people asked me about being able to get the post word count and display it. It is definitely easier to do than you may think at first.
Simply open your functions.php file and paste this function in it:
1.function wcount(){
2. ob_start();
3. the_content();
4. $content = ob_get_clean();
5. return sizeof(explode(" ", $content));
6.}
Once finished, you can call the function within the loop to get the number of words for the current post:
1.<?php echo wcount(); ?>
Source : http://www.wprecipes.com/wordpress-function-to-display-your-posts-words-count
One of my favorite WordPress hacks of the year is definitely this one, which is incredibly useful. While conditional comments are a great way to target specific browsers, WordPress has one detection function that you can use to make your web developer life easier.
01.<?php
02.add_filter('body_class','browser_body_class');
03.function browser_body_class($classes) {
04. global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
05.
06. if($is_lynx) $classes[] = 'lynx';
07. elseif($is_gecko) $classes[] = 'gecko';
08. elseif($is_opera) $classes[] = 'opera';
09. elseif($is_NS4) $classes[] = 'ns4';
10. elseif($is_safari) $classes[] = 'safari';
11. elseif($is_chrome) $classes[] = 'chrome';
12. elseif($is_IE) $classes[] = 'ie';
13. else $classes[] = 'unknown';
14.
15. if($is_iphone) $classes[] = 'iphone';
16. return $classes;
17.}
18.?>
The final result will look something like this, if you view the source code of your page:
1.<body class="home blog logged-in safari">
Source : http://www.nathanrice.net/blog/browser-detection-and-the-body_class-function/
With the rise of Twitter and its 140 characters limit, bloggers have to use short urls to fully take advantage of this new social media phenomenon.
Lots of quality url shorteners are available, but this trick will create a shorter version of your urls automatically, making you save time and hassle.
Paste the following code on your single.php file:
1.<?php echo get_bloginfo('url')."/?p=".$post->ID; ?>
It will output a url similar to:
1.http://www.catswhocode.com/?p=54
Source : http://www.wprecipes.com/how-to-get-short-urls-for-social-bookmarking
This hack has been a favorite of WpRecipes during the year 2009. And I understand that because this hack is very useful, especially for “magazine” themes: It allows you to automatically get the first image from the current post, and display it.
The first thing to do is to paste the function below on your functions.php file.
01.function catch_that_image() {
02. global $post, $posts;
03. $first_img = '';
04. ob_start();
05. ob_end_clean();
06. $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
07. $first_img = $matches [1] [0];
08.
09. if(empty($first_img)){ //Defines a default image
10. $first_img = "/images/default.jpg";
11. }
12. return $first_img;
13.}
Once finished, you can simply call the function within the loop to display the first image from the post:
1.<?php echo catch_that_image() ?>
Source : http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it
On the internet, security is always a concern. If your hosting provider supports it (Wp WebHost and HostGator does) you should definitely enable SSL support.
SSL is a cryptographic protocol that provide security and data integrity for communications over TCP/IP networks such as the Internet. TLS and SSL encrypt the segments of network connections at the Transport Layer end-to-end.
Open the wp-config.php file and paste the following:
1.define('FORCE_SSL_ADMIN', true);
Next, save the file, and you’re done!
Source : http://www.wprecipes.com/how-to-force-using-ssl-on-wp-admin-directory
WordPress has a built-in “search” function which isn’t bad, but should have been better. For example, one of the things that could enhance it is to highlight the search results.
To do so, open your search.php file and insert this code:
1.<?php
2. $title = get_the_title();
3. $keys= explode(" ",$s);
4. $title = preg_replace('/('.implode('|', $keys) .')/iu',
5. '<strong class="search-excerpt">\0</strong>',
6. $title);
7.?>
Then, you’ll have to define a style for the search-excerpt CSS class. Just open style.css and paste:
1.strong.search-excerpt { background: yellow; }
Source : http://yoast.com/wordpress-search/
Many of you have enjoyed my “Awesome things to do with cURL” article, published in June. One of the most interesting snippets from that article is showing how to post articles on your WordPress blog, using PHP and cURL.
Here is the function. This code is not made for being used within WordPress, so don’t paste it on your functions.php file (or any other).
Please note that you must activate the XMLRPC posting option in your WordPress blog. If this option isn’t activated, the code will not be able to insert anything into your blog database. Another thing, make sure the XMLRPC functions are activated on your php.ini file.
01.function wpPostXMLRPC($title, $body, $rpcurl, $username, $password, $category, $keywords='', $encoding='UTF-8') {
02. $title = htmlentities($title,ENT_NOQUOTES,$encoding);
03. $keywords = htmlentities($keywords,ENT_NOQUOTES,$encoding);
04.
05. $content = array(
06. 'title'=>$title,
07. 'description'=>$body,
08. 'mt_allow_comments'=>0, // 1 to allow comments
09. 'mt_allow_pings'=>0, // 1 to allow trackbacks
10. 'post_type'=>'post',
11. 'mt_keywords'=>$keywords,
12. 'categories'=>array($category)
13. );
14. $params = array(0,$username,$password,$content,true);
15. $request = xmlrpc_encode_request('metaWeblog.newPost',$params);
16. $ch = curl_init();
17. curl_setopt($ch, CURLOPT_POSTFIELDS, $request);
18. curl_setopt($ch, CURLOPT_URL, $rpcurl);
19. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
20. curl_setopt($ch, CURLOPT_TIMEOUT, 1);
21. $results = curl_exec($ch);
22. curl_close($ch);
23. return $results;
24.?>
Source : http://www.wprecipes.com/post-on-your-wordpress-blog-using-php
If you often invite other bloggers to post on your blog, this tip is a must have. It simply allows you to create a custom field with the name of the guest author, and it will overwrite the the_author(); functions.
Simply paste the following code on your single.php and page.php, where you want the author name to be displayed.
1.<?php $author = get_post_meta($post->ID, "guest-author", true);
2.if ($author != "") {
3. echo $author;
4.} else {
5. the_author();
6.} ?>
Source : http://www.wprecipes.com/rewrite-author-name-with-custom-field
Mobile devices as such the Blackberry or iPhone are more and more popular everyday, and this is why you definitely should take those readers in consideration by offering them a mobile version of your blog.
This hack is definitely easy to implement, thanks to Jeff Starr and Chris Coyier, the author of the excellent “Digging into WordPress” book.
To achieve this recipe, you first have to get the code from detectmobilebrowsers.mobi and upload it to your theme directory.
Then, simply open your header.php file and place the following at the top of the file. Don’t forget to edit line 5 according to the page where you’d like to redirect mobile users.
1.include('mobile_device_detect.php');
2.$mobile = mobile_device_detect();
3.
4.if ($mobile==true) {
5. header( 'Location: http://your-website.com/?theme=Your_Mobile_Theme' ) ;
6.}
Source : http://digwp.com/2009/12/redirect-mobile-users-to-mobile-theme/
In this tutorial we are going to create an awesome image gallery which leverages the latest CSS3 and jQuery techniques. The script will be able to scan a folder of images on your web server and build a complete drag and drop lighbox gallery around it.
It will be search-engine friendly and even be compatible with browsers which date back as far as IE6 (although some of the awesomeness is lost).
We are using jQuery, jQuery UI (for the drag and drop) and the fancybox jQuery plugin for the lightbox display in addition to PHP and CSS for interactivity and styling.
Before reading on, I would suggest that you download the example files and have the demo opened in a tab for reference.
So lets start with step one.
The main idea is to have PHP as a back-end which will generate the necessary XHTML for each image. The generated code is later included in demo.php and completes the gallery XHTML front-end.
01<!-- The gallery container: -->
02<div id="gallery">
03
04<?php
05/* PHP code, covered in detail in step 3 */
06?>
07
08<!-- The droppable share box -->
09<div class="drop-box">
10</div>
11
12</div>
13
14<div class="clear"></div>
15
16<!-- This is later converted to the modal window with the url of the image: -->
17<div id="modal" title="Share this picture">
18<form>
19<fieldset>
20<label for="name">URL of the image</label>
21<input type="text" name="url" id="url" class="text ui-widget-content ui-corner-all" onfocus="this.select()" />
22</fieldset>
23</form>
24
25</div>
Nothing too fancy here. Notice the modal div – it is used to generate the modal window that is shown when the user drops a picture on the share box. But more on this later on.
The gallery
Now that we have all the markup in place, it is time to style it. First we need to include the CSS files in the head section of the page.
1<link rel="stylesheet" type="text/css" href="demo.css" />
2<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />
3<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css">
After we’ve done that, we can start writing the styles.
01body{
02/* Styling the body */
03color:white;
04font-size:13px;
05background: #222222;
06font-family:Arial, Helvetica, sans-serif;
07}
08
09#gallery{
10/* The pics container */
11width:100%;
12height:580px;
13position:relative;
14}
15
16.pic, .pic a{
17/* Each picture and the hyperlink inside it */
18width:100px;
19height:100px;
20overflow:hidden;
21}
22
23.pic{
24/* Styles specific to the pic class */
25position:absolute;
26border:5px solid #EEEEEE;
27border-bottom:18px solid #eeeeee;
28
29/* CSS3 Box Shadow */
30-moz-box-shadow:2px 2px 3px #333333;
31-webkit-box-shadow:2px 2px 3px #333333;
32box-shadow:2px 2px 3px #333333;
33}
34
35.pic a{
36/* Specific styles for the hyperlinks */
37text-indent:-999px;
38display:block;
39/* Setting display to block enables advanced styling for links */
40}
41
42.drop-box{
43/* The share box */
44width:240px;
45height:130px;
46position:absolute;
47bottom:0;
48right:0;
49z-index:-1;
50
51background:url(img/drop_box.png) no-repeat;
52}
53
54.drop-box.active{
55/* The active style is in effect when there is a pic hovering above the box */
56background-position:bottom left;
57}
58
59label, input{
60/* The modal dialog URL field */
61display:block;
62padding:3px;
63}
64
65label{
66font-size:10px;
67}
68
69fieldset{
70border:0;
71margin-top:10px;
72}
73
74#url{
75/* The URL field */
76width:240px;
77}
One of the classes above, probably needing additional clarification is the pic CSS class. This is used to style the images to look like polaroids. To achieve this, it basically puts a white border around each image.
Also used in the class is the box-shadow CSS3 property, which casts a shadow under each polaroid.
If you’ve looked around the demo of the gallery, you’ve noticed that the images are scattered on the page and rotated in a random fashion. This is done solely with CSS in the PHP side, as you will see in a moment.
The rest of the styles are pretty straightforward and won’t be covered in detail here.
The pics explained
As you remember, in step 1 we covered the XHTML part and mentioned that PHP is responsible for generating the markup that comprises the individual images. And here is how this is actually done:
01/* Configuration Start */
02$thumb_directory = 'img/thumbs';
03$orig_directory = 'img/original';
04$stage_width=600;
05$stage_height=400;
06/* Configuration end */
07
08$allowed_types=array('jpg','jpeg','gif','png');
09$file_parts=array();
10$ext='';
11$title='';
12$i=0;
13
14/* Opening the thumbnail directory and looping through all the thumbs: */
15$dir_handle = @opendir($thumb_directory) or die("There is an error with your image directory!");
16$i=1;
17
18while ($file = readdir($dir_handle))
19{
20/* Skipping the system files: */
21if($file=='.' || $file == '..') continue;
22
23$file_parts = explode('.',$file);
24$ext = strtolower(array_pop($file_parts));
25
26/* Using the file name (withouth the extension) as a image title: */
27$title = implode('.',$file_parts);
28$title = htmlspecialchars($title);
29
30/* If the file extension is allowed: */
31if(in_array($ext,$allowed_types))
32{
33/* Generating random values for the position and rotation: */
34$left=rand(0,$stage_width);
35$top=rand(0,400);
36$rot = rand(-40,40);
37
38if($top>$stage_height-130 && $left > $stage_width-230)
39{
40/* Prevent the images from hiding the drop box */
41$top-=120+130;
42$left-=230;
43}
44
45/* Outputting each image: */
46echo '
47
"pic-'.($i++).'" class="pic" style="top:'.$top.'px;left:'.$left.'px;background:url('.$thumb_directory.'/'.$file.') no-repeat 50% 50%; -moz-transform:rotate('.$rot.'deg); -webkit-transform:rotate('.$rot.'deg);">
48
49class="fancybox" rel="fncbx" href="'.$orig_directory.'/'.$file.'" target="_blank">'.$title.'
50
51
';
52}
53}
54
55/* Closing the directory */
56closedir($dir_handle);
First, we open the thumbnail directory with opendir (using the @ modifier to prevent any possible errors from getting shown to the user) and looping through all the images.
In the loop, we skip the non-image files and generate some XHTML code for each image, which is directly printed to the screen.
As mentioned in the CSS part, PHP handles the rotation and scattering of the images on the page. Each image is positioned at random X and Y coordinates, and rotated in an angle between -40 and 40 degrees (to prevent upside-down images). Those are generated with the use of the rand() PHP function and included as CSS styles in the picture’s style attribute.
There are two image folders used by the gallery – thumbs, which holds the 100×100 px thumbnails, and original, which holds the big versions of the images. It is important that the thumbnail and original image have the same name, otherwise the gallery won’t function properly.
The only thing left is to throw in some interactivity.
We now have a good looking CSS gallery on our hands. But that means nothing if we cant drag the pretty pictures around the screen and zoom them in a fancy lightbox display, does it?
This is where jQuery comes into play.
01$(document).ready(function(){
02// Executed once all the page elements are loaded
03var preventClick=false;
04$(".pic a").bind("click",function(e){
05
06/* This function stops the drag from firing a click event and showing the lightbox */
07if(preventClick)
08{
09e.stopImmediatePropagation();
10e.preventDefault();
11}
12});
13
14$(".pic").draggable({
15
16/* Converting the images into draggable objects */
17containment: 'parent',
18start: function(e,ui){
19/* This will stop clicks from occuring while dragging */
20preventClick=true;
21},
22stop: function(e, ui) {
23/* Wait for 250 milliseconds before re-enabling the clicks */
24setTimeout(function(){ preventClick=false; }, 250);
25}
26});
27
28$('.pic').mousedown(function(e){
29/* Executed on image click */
30var maxZ = 0;
31
32/* Find the max z-index property: */
33$('.pic').each(function(){
34var thisZ = parseInt($(this).css('zIndex'))
35if(thisZ>maxZ) maxZ=thisZ;
36});
37
38/* Clicks can occur in the picture container (with class pic) and in the link inside it */
39if($(e.target).hasClass("pic"))
40{
41/* Show the clicked image on top of all the others: */
42$(e.target).css({zIndex:maxZ+1});
43}
44else $(e.target).closest('.pic').css({zIndex:maxZ+1});
45});
46
47/* Converting all the links to a fancybox gallery */
48$("a.fancybox").fancybox({
49zoomSpeedIn: 300,
50zoomSpeedOut: 300,
51overlayShow:false
52});
53
54/* Converting the share box into a droppable: */
55$('.drop-box').droppable({
56hoverClass: 'active',
57drop:function(event,ui){
58
59/* Fill the URL text field with the URL of the image. */
60/* The id of the image is appended as a hash #pic-123 */
61$('#url').val(location.href.replace(location.hash,'')+'#' + ui.draggable.attr('id'));
62$('#modal').dialog('open');
63}
64});
65
66/* Converts the div with id="modal" into a modal window */
67$("#modal").dialog({
68bgiframe: true,
69modal: true,
70autoOpen:false,
71
72buttons: {
73Ok: function() {
74$(this).dialog('close');
75}
76}
77});
78
79if(location.hash.indexOf('#pic-')!=-1)
80{
81/* Checks whether a hash is present in the URL */
82/* and shows the respective image */
83$(location.hash+' a.fancybox').click();
84}
85});
First we are binding a click function to the images, which prevents the lightbox from showing once we start dragging the pic around.
After this we make all the pictures draggable, and then we set up the lightbox.
Later we turn the “Drop to share” box into a droppable, which enables it to detect when a picture is hovered and dropped. This allows us to add a special hover style to the container, and to open the modal window on drop.
The modal window itself is a user interface component that comes with jQuery UI. It hides all the page elements under a semi-transparent overlay, and thus blocking them for the user. The only thing occupying the their attention is the message window, which in our case holds the text box with the URL of the image, as defined in the div with id of modal in step one.
Last, we have a few lines of code which check whether a hash of the type #pic-123 is present in the URL, which would cause the respective image to be shown in the lightbox on page load.
With this our awesome CSS3 gallery is complete!
Today we created a fancy gallery, which uses a wide set of web technologies to bring you a new kind of dynamic experience.
In addition, it is extremely easy to add to an existing site – you just need upload it and provide a folder with images, no databases required.
You are free to modify and use this gallery in your own sites. Be sure to share all your awesome creations based on this gallery with the community via our Tutorial Mash-ups (above the comment section).
Hom Digitalis 