CINXE.COM

<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>bavotasan.com</title> <atom:link href="http://bavotasan.com/feed/" rel="self" type="application/rss+xml" /> <link>http://bavotasan.com</link> <description>by c.bavota</description> <lastBuildDate>Fri, 20 Aug 2010 19:01:51 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.0.1</generator> <item> <title>Create bit.ly Short URLs for your Posts in WordPress</title> <link>http://bavotasan.com/tutorials/create-bit-ly-short-urls-for-your-posts-in-wordpress/</link> <comments>http://bavotasan.com/tutorials/create-bit-ly-short-urls-for-your-posts-in-wordpress/#comments</comments> <pubDate>Fri, 20 Aug 2010 18:48:00 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[bit.ly]]></category> <category><![CDATA[functions.php]]></category> <category><![CDATA[hacks]]></category> <category><![CDATA[mods]]></category> <category><![CDATA[short urls]]></category> <category><![CDATA[shortlinks]]></category> <category><![CDATA[tweets]]></category> <category><![CDATA[Twitter]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2668</guid> <description><![CDATA[I have been working with the http://bit.ly API and decided to change the short URLs on my site to include the short URLs provided by http://bit.ly. The API is pretty straightforward and I created a few WordPress functions to to get it all working. Before we even start, you would need to registered with http://bit.ly [...]]]></description> <content:encoded><![CDATA[I have been working with the <a href="http://bit.ly/">http://bit.ly</a> API and decided to change the short URLs on my site to include the short URLs provided by <a href="http://bit.ly/">http://bit.ly</a>. The API is pretty straightforward and I created a few WordPress functions to to get it all working. Before we even start, you would need to registered with <a href="http://bit.ly/">http://bit.ly</a> and then check out this page <a href="http://bit.ly/a/your_api_key">http://bit.ly/a/your_api_key</a> to get your API key and your login. Now, let’s add a function to automatically create a <a href="http://bit.ly/">http://bit.ly</a> short URL when you publish a post. We will hook into the <code>publish_post</code> action and then use the <a href="http://bit.ly/">http://bit.ly</a> API to fetch a shortened URL. Place the following into your theme’s <code>function.php</code> file. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">add_action('publish_post', 'create_bitly');   function create_bitly($postID) { global $wpdb; $login = 'YOUR LOGIN'; // change this to your login $apikey = 'YOUR API KEY'; // change this to your API key   $longURL = get_permalink($postID); // here we get the permalink to your post   // This is the API call to fetch the shortened URL $apiurl = 'http://api.bit.ly/v3/shorten?longUrl='.urlencode($longURL).'&login='.$login.'&apiKey='.$apikey;   // We are using cURL $curl = curl_init(); curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 5); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_URL, $apiurl); $results = json_decode(curl_exec($curl)); curl_close($curl);   $shortURL = $results->data->url; // the short URL   update_post_meta($postID, 'bitlyURL', $shortURL); // adding the short URL to a custom field called bitlyURL }</pre></div></td></tr></table></div> You can read more about the <a href="http://bit.ly/">http://bit.ly</a> API here: <a href="http://code.google.com/p/bitly-api/wiki/ApiDocumentation">http://code.google.com/p/bitly-api/wiki/ApiDocumentation</a> In order to add your new short URL to your header, you first need to remove the default shortlink tag and then create a function that will place the proper code between your <code><head></code> tags. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 ); // removing the default shortlink add_action( 'wp_head', 'bilty_shortlink_head'); // adding the new bit.ly shortlink   function bilty_shortlink_head() { global $post; $shortURL = get_post_meta($post->ID, 'bitlyURL', true); if(!empty($shortURL)) { echo '<link rel="shortlink" href="'.$shortURL.'" />'."\n"; } else { echo '<link rel="shortlink" href="'.get_bloginfo('url').'?p='.$post->ID;.'" />'."\n"; } }</pre></div></td></tr></table></div> If you want to display your new short URLs, you can do so by using the `wp_get_shortlink()` function. But first you need to make sure that WordPress knows to replace the default short URL with the new <a href="http://bit.ly/">http://bit.ly</a> short URL. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">add_filter('pre_get_shortlink', 'get_bitly_shortlink'); // filtering the WP function   function get_bitly_shortlink() { global $post; $shortURL = get_post_meta($post->ID, 'bitlyURL', true); if(!empty($shortURL)) { return $shortURL; } else { return get_bloginfo('url').'?p='.$post->ID; } }</pre></div></td></tr></table></div> You can place the following code anywhere within the loop of your <code>single.php</code> theme file to display your short URL. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">Short URL: <a href="<?php echo wp_get_shortlink($post->ID); ?>" title="<?php the_title(); ?>"><?php echo wp_get_shortlink($post->ID); ?></a></pre></div></td></tr></table></div> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/create-bit-ly-short-urls-for-your-posts-in-wordpress/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Optimizing your MySQL Database</title> <link>http://bavotasan.com/tutorials/optimizing-your-mysql-database/</link> <comments>http://bavotasan.com/tutorials/optimizing-your-mysql-database/#comments</comments> <pubDate>Tue, 17 Aug 2010 15:20:12 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[database]]></category> <category><![CDATA[mysql]]></category> <category><![CDATA[mysqlcheck]]></category> <category><![CDATA[mysqltuner]]></category> <category><![CDATA[optimize mysql]]></category> <category><![CDATA[root]]></category> <category><![CDATA[shell]]></category> <category><![CDATA[ssh]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2658</guid> <description><![CDATA[I run my Web sites on a dedicated virtual server and every once in a while, I need to go in and optimize things to make sure everything runs smoothly. I am not an expert when it comes to shell commands, but do I know a few that really help keep things working the way [...]]]></description> <content:encoded><![CDATA[I run my Web sites on a dedicated virtual server and every once in a while, I need to go in and optimize things to make sure everything runs smoothly. I am not an expert when it comes to shell commands, but do I know a few that really help keep things working the way they should. One of the most important things I have come to realize is that you must keep an eye on your MySQL tables, because a problematic database can slow down your server dramatically. Databases that see a lot of queries often become fragmented and these are the databases that can start to cause you some problems. Luckily, there is a shell command that can go in and do all your de-fragmenting and optimizing for you. I always make sure to back things up before I run this, just in case. This command must be run from the shell and you need to be logged in as a root user: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="sql" style="font-family:monospace;">mysqlcheck -u root -p --auto-repair --check --optimize --all-databases</pre></div></td></tr></table></div> Once the command has been entered, you will need to input your password. Then you will see it list through your database tables one by one as it works it magic. You can read up on the <a href="http://dev.mysql.com/doc/refman/5.0/en/mysqlcheck.html">mysqlcheck</a> command to understand exactly what it does. Another worthwhile tool is <a href="http://blog.mysqltuner.com/">MySQLTuner</a>. It can help you with recommendations on how to configure your MySQL to increase performance and stability. I use it every month too see if anything has been acting up and that is a good routine to get into to keep your sites running their best. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/optimizing-your-mysql-database/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item> <title>How to Draw a Smiley Face with CSS3</title> <link>http://bavotasan.com/tutorials/draw-smiley-face-css3/</link> <comments>http://bavotasan.com/tutorials/draw-smiley-face-css3/#comments</comments> <pubDate>Tue, 10 Aug 2010 22:52:43 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[behold]]></category> <category><![CDATA[Chrome]]></category> <category><![CDATA[Circles]]></category> <category><![CDATA[course]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[deg]]></category> <category><![CDATA[div]]></category> <category><![CDATA[failed attempts]]></category> <category><![CDATA[ffe]]></category> <category><![CDATA[gradients]]></category> <category><![CDATA[height]]></category> <category><![CDATA[html]]></category> <category><![CDATA[inset]]></category> <category><![CDATA[inspiration]]></category> <category><![CDATA[lefteye]]></category> <category><![CDATA[linear gradient]]></category> <category><![CDATA[ovals]]></category> <category><![CDATA[position]]></category> <category><![CDATA[power]]></category> <category><![CDATA[radius]]></category> <category><![CDATA[random shapes]]></category> <category><![CDATA[rgba]]></category> <category><![CDATA[safari]]></category> <category><![CDATA[smile]]></category> <category><![CDATA[smiley face]]></category> <category><![CDATA[smileyface]]></category> <category><![CDATA[something]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2643</guid> <description><![CDATA[I was messing around with CSS3 gradients, rounded corners and shadows, and I thought to myself, “I wonder if I can draw something that actually looks like something?” Lo and behold, I could. I decided to go with a smiley face, since it would need circles, ovals and some random shapes. It would also require [...]]]></description> <content:encoded><![CDATA[I was messing around with CSS3 gradients, rounded corners and shadows, and I thought to myself, “I wonder if I can draw something that actually looks like something?” Lo and behold, I could. I decided to go with a smiley face, since it would need circles, ovals and some random shapes. It would also require gradients and shadows. After a few failed attempts, I somehow managed to figure it out and the outcome is pretty cool. <div class="smileyface"> <div class="smile"> <div class="corner"></div> <div class="corner right"></div> </div> </div> It really amazes me that CSS3 has the power to create something like this. I tested it out in Firefox, Safari and Chrome. They all look good. Of course, in IE it looks like this… <a href="http://bavotasan.com/wp-content/uploads/2010/08/smileyie.jpg"><img src="http://bavotasan.com/wp-content/uploads/2010/08/smileyie.jpg" alt="" title="smileyie" width="300" height="300" class="nobox aligncenter size-full wp-image-2654" /></a> It’s like IE is living in 1986. Here is the HTML: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><div class="smileyface"> <p class="eyes lefteye"></p> <p class="eyes righteye"></p> <div class="smile"> <div class="corner"></div> <div class="corner right"></div> </div> </div></pre></div></td></tr></table></div> Here is the CSS: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">div.smileyface { width: 300px; height: 300px; position: relative; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; display: block; background: #ffe632; background: -webkit-gradient(linear, left top, left bottom, from(#fffe8d), to(#f6d23e)); background: -moz-linear-gradient(top, #fffe8d, #f6d23e); box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); -webkit-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); -moz-box-shadow: inset 0px -14px 14px rgba(0, 0, 0, .3), 0px 2px 20px rgba(0, 0, 0, .6); }   p.eyes { width: 50px; height: 80px; background: #222; border-radius: 100px/160px; -webkit-border-radius: 100px 160px; -moz-border-radius: 100px/160px; position: absolute; top: 40px; box-shadow: 0 2px 0 rgba(255,255,255, 0.8); -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8); -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8); }   p.eyes.lefteye { left: 75px; }   p.eyes.righteye { right: 75px; }   div.smile { width: 200px; height: 70px; border: 10px solid #222; border-top: 0; background: rgba(0,0,0,0); -moz-border-radius: 0 0 120px 120px / 0 0 90px 90px; -webkit-border-radius: 0 0 120px 120px 0 0 90px 90px; border-radius: 0 0 120px 120px / 0 0 90px 90px; position: absolute; bottom: 50px; left: 38px; box-shadow: 0 2px 0 rgba(255,255,255, 0.8); -webkit-box-shadow: 0 2px 0 rgba(255,255,255, 0.8); -moz-box-shadow: 0 2px 0 rgba(255,255,255, 0.8); }   div.corner { width: 10px; height: 30px; background: #222; border-radius: 100px/160px; -webkit-border-radius: 100px 160px; -moz-border-radius: 100px/160px; position: absolute; top: -12px; -webkit-transform: rotate(65deg); -moz-transform: rotate(65deg); left: -12px; }   div.corner.right { left: 202px; -webkit-transform: rotate(-65deg); -moz-transform: rotate(-65deg); }</pre></div></td></tr></table></div> Inspiration: <ul> <li><a href="http://desandro.com/articles/opera-logo-css/">http://desandro.com/articles/opera-logo-css/</a></li> <li><a href="http://cordobo.com/wp-content/uploads/ie-pure-css-logo/">http://cordobo.com/wp-content/uploads/ie-pure-css-logo/</a></li> </ul> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/draw-smiley-face-css3/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item> <title>Use jQuery to Replace a Word with a Link</title> <link>http://bavotasan.com/tutorials/jquery-replace-word-with-link/</link> <comments>http://bavotasan.com/tutorials/jquery-replace-word-with-link/#comments</comments> <pubDate>Mon, 09 Aug 2010 20:54:46 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[body]]></category> <category><![CDATA[core function]]></category> <category><![CDATA[footer]]></category> <category><![CDATA[Function]]></category> <category><![CDATA[google]]></category> <category><![CDATA[head]]></category> <category><![CDATA[ig]]></category> <category><![CDATA[instance]]></category> <category><![CDATA[javascript replace function]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[Lt]]></category> <category><![CDATA[multiple times]]></category> <category><![CDATA[page]]></category> <category><![CDATA[piece]]></category> <category><![CDATA[posttop]]></category> <category><![CDATA[search]]></category> <category><![CDATA[site]]></category> <category><![CDATA[slash]]></category> <category><![CDATA[text]]></category> <category><![CDATA[thePage]]></category> <category><![CDATA[var]]></category> <category><![CDATA[way]]></category> <category><![CDATA[Word]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2615</guid> <description><![CDATA[If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all [...]]]></description> <content:encoded><![CDATA[If you use a word multiple times on your site and you don’t feel like going through all your posts to replace every instance of it, you can use jQuery to search your page and do the replacing for you. I wanted to replace a word throughout an entire site with a link and all it took was a small piece of code. If you don’t already have jQuery loaded into your page, include this before your closing <code><head></code>. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script></pre></div></td></tr></table></div> That will load up jQuery from Google. Now you just need to include this in your site’s footer, before the closing <code><body></code>. (Why in the footer? Because including your JavaScript after all of your code is the efficient way to do it.) <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;"><script type="text/javascript"> (function($) { var thePage = $("body"); thePage.html(thePage.html().replace(/jQuery/ig, '<a href="http://jquery.com">jQuery</a>')); })(jQuery) </script></pre></div></td></tr></table></div> Since jQuery doesn’t have a core function for replacing text, we will use the JavaScript <code><a href="http://www.w3schools.com/jsref/jsref_replace.asp">replace()</a></code> function. The <code>i</code> after the slash makes the search and replace case-insensitive, and the <code>g</code> makes it global. I have the script working on this page to replace every instance of the word jQuery with a link to the jQuery Web site. <script type="text/javascript"> (function($) { $(".posttop p").each(function() { $(this).html($(this).html().replace(/jQuery/ig, '<a href="http://jquery.com">jQuery</a>')); }); })(jQuery) </script> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/jquery-replace-word-with-link/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>A Simple CSS Trick to Vertically Align Text</title> <link>http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/</link> <comments>http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/#comments</comments> <pubDate>Thu, 05 Aug 2010 17:33:08 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[absolute positioning]]></category> <category><![CDATA[Align]]></category> <category><![CDATA[Center]]></category> <category><![CDATA[Containers]]></category> <category><![CDATA[css]]></category> <category><![CDATA[css trick]]></category> <category><![CDATA[DIGGING]]></category> <category><![CDATA[div]]></category> <category><![CDATA[fff]]></category> <category><![CDATA[Hmm]]></category> <category><![CDATA[line]]></category> <category><![CDATA[magic]]></category> <category><![CDATA[overkill]]></category> <category><![CDATA[positioning]]></category> <category><![CDATA[solution]]></category> <category><![CDATA[technique]]></category> <category><![CDATA[text]]></category> <category><![CDATA[trick]]></category> <category><![CDATA[way]]></category> <category><![CDATA[Width]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2604</guid> <description><![CDATA[I was trying to vertically align text within a div container and it just wasn’t working for me. You would think that using vertical-align in your CSS would accomplish just that, but you would be wrong. I found a way to do it using three div containers and absolute positioning but I felt that was [...]]]></description> <content:encoded><![CDATA[I was trying to vertically align text within a div container and it just wasn’t working for me. You would think that using <code>vertical-align</code> in your CSS would accomplish just that, but you would be wrong. I found a way to do it using three div containers and absolute positioning but I felt that was a little overkill for my purposes. This was the box I was designing: <div style="width: 100px; height: 100px; background: #666; color: #fff; text-align: center; text-shadow: none;">Some Text</div> After doing a lot of digging around, I discovered that you could set the line-height of your text to be the same as the height of your div container and this is what you would get: <div style="width: 100px; height: 100px; background: #666; color: #fff; text-align: center; text-shadow: none; line-height: 100px;">Some Text</div> That did it. Here is the CSS I used: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="css" style="font-family:monospace;">div.container { width: 100px; height: 100px; background: #666; color: #fff; text-align: center; line-height: 100px; /* where the magic happens */ }</pre></div></td></tr></table></div> The only way this technique wouldn’t work for you was if you had text on two lines, then the second line would be 100 pixels below the first. Hmm… maybe I could figure out a solution to that one as well. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item> <title>Moderno v1.0 Premium WordPress Theme</title> <link>http://bavotasan.com/articles/moderno-v1-0-premium-wordpress-theme/</link> <comments>http://bavotasan.com/articles/moderno-v1-0-premium-wordpress-theme/#comments</comments> <pubDate>Mon, 02 Aug 2010 20:00:57 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Column Layout]]></category> <category><![CDATA[com]]></category> <category><![CDATA[crowd]]></category> <category><![CDATA[exquisite design]]></category> <category><![CDATA[face kits]]></category> <category><![CDATA[font]]></category> <category><![CDATA[infinite]]></category> <category><![CDATA[infinite number]]></category> <category><![CDATA[info]]></category> <category><![CDATA[look]]></category> <category><![CDATA[Moderno]]></category> <category><![CDATA[number]]></category> <category><![CDATA[original look]]></category> <category><![CDATA[Placing]]></category> <category><![CDATA[possibilities]]></category> <category><![CDATA[premium]]></category> <category><![CDATA[Select]]></category> <category><![CDATA[site]]></category> <category><![CDATA[subtle nuances]]></category> <category><![CDATA[theme]]></category> <category><![CDATA[Themes]]></category> <category><![CDATA[web]]></category> <category><![CDATA[web font]]></category> <category><![CDATA[Widgets]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=1807</guid> <description><![CDATA[Just updated for WordPress 3.0. Moderno has a beautifully simple, yet exquisite design with many subtle nuances that make it stand out from the crowd. An optional two or three column layout with an infinite number of color and font possibilities make it easy to create a truly original look for your Web site. Go [...]]]></description> <content:encoded><![CDATA[Just updated for WordPress 3.0. <a href="http://themes.bavotasan.com/our-themes/premium-themes/moderno">Moderno</a> has a beautifully simple, yet exquisite design with many subtle nuances that make it stand out from the crowd. An optional two or three column layout with an infinite number of color and font possibilities make it easy to create a truly original look for your Web site. Go crazy placing your favorite widgets in up to three widgetized locations. Select a standardized Web font or get a little more creative with one of ten pre-installed @font-face kits. <a class="highslide" href="http://bavotasan.com/wp-content/uploads/2010/03/moderno_final.jpg"><img src="http://bavotasan.com/wp-content/uploads/2010/03/moderno_final-373x600.jpg" alt="" title="moderno_final" width="373" height="600" class="aligncenter size-medium wp-image-1808" /></a> Go to <a href="http://themes.bavotasan.com/our-themes/premium-themes/moderno">Themes by bavotasan.com</a> for more info. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/moderno-v1-0-premium-wordpress-theme/feed/</wfw:commentRss> <slash:comments>12</slash:comments> </item> <item> <title>Using Ajax with WordPress</title> <link>http://bavotasan.com/tutorials/using-ajax-with-wordpress/</link> <comments>http://bavotasan.com/tutorials/using-ajax-with-wordpress/#comments</comments> <pubDate>Mon, 02 Aug 2010 18:53:53 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[admin]]></category> <category><![CDATA[ajax]]></category> <category><![CDATA[approval]]></category> <category><![CDATA[custom scripts]]></category> <category><![CDATA[Email]]></category> <category><![CDATA[feedback]]></category> <category><![CDATA[file]]></category> <category><![CDATA[form]]></category> <category><![CDATA[Function]]></category> <category><![CDATA[List]]></category> <category><![CDATA[look]]></category> <category><![CDATA[magazine]]></category> <category><![CDATA[mailing]]></category> <category><![CDATA[person]]></category> <category><![CDATA[way]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2586</guid> <description><![CDATA[A little while back, I updated Magazine Basic and added the Ajax save function. When I uploaded it to WordPress to await approval, I received some feedback on how I could incorporate Ajax using the admin-ajax.php file instead of the sloppy way I had it coded. All of the core Ajax functions in WordPress rely [...]]]></description> <content:encoded><![CDATA[A little while back, I updated Magazine Basic and added the Ajax save function. When I uploaded it to WordPress to await approval, I received some feedback on how I could incorporate Ajax using the <code>admin-ajax.php</code> file instead of the sloppy way I had it coded. All of the core Ajax functions in WordPress rely on <code>admin-ajax.php</code> and using it for custom scripts is extremely easy to implement. Let’s take a look at all the pieces you need to get it working. In this example I will build a small mailing list function that will send out an email to the admin when a person clicks submit. Here’s our form: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><form method="post" id="mailinglist" action=""> <div id="message"></div> <input type="text" name="mailinglistemail" id="mailinglistemail" /> <input type="submit" name="submit" id="mailinglistsubmit" value="Join" /><img src="<?php admin_url(); ?>/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" /> </form></pre></div></td></tr></table></div> Here’s the jQuery: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery(document).ready(function(){ jQuery("#mailinglist").submit(function() { if(jQuery("#mailinglistemail").val()=="") { jQuery("#mailinglist #message").text("Please enter your email address."); return false; } else { var email = jQuery('#mailinglistemail').val(); if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { jQuery("#mailinglist #message").text("Please enter a valid email address."); return false; } else { var data = { action: 'join_mailinglist', email: email }; jQuery("#mailinglistsubmit").hide(); jQuery(".ajaxsave").show(); jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data, function(response){ jQuery(".ajaxsave").hide(); jQuery("#mailinglistsubmit").show(); jQuery("#mailinglist #message").html(response); }); return false; } }   }); });</pre></div></td></tr></table></div> Let me explain each part. When a user clicks submit, we need to check that the email field is not empty. If it is empty, we let the user know by sending the “Please enter your email address.” message and we stop the form from being submitted by including the <code>return false;</code> line. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">if(jQuery("#mailinglistemail").val()=="") { jQuery("#mailinglist #message").text("Please enter your email address."); return false; }</pre></div></td></tr></table></div> Next, we’ll do a simple validation to make sure the email address actually contains the @ symbol and a period. If not, send an error message and return false. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">var email = jQuery('#mailinglistemail').val(); if(email.indexOf("@") == -1 || email.indexOf(".") == -1) { jQuery("#mailinglist #message").text("Please enter a valid email address."); return false; }</pre></div></td></tr></table></div> Once all that is done and everything is good, we can submit our form. This is where <code>admin-ajax.php</code> comes into play. When using <code>admin-ajax.php</code>, you need to include an action callback to make it work. Our callback is <code>join_mailinglist</code>. This is going to interact with our PHP to make everything work on the backend. Let’s create a data variable to store our action and our email value. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">var data = { action: 'join_mailinglist', email: email };</pre></div></td></tr></table></div> Now we will hide our submit button and have a loader graphic appear to let people know something is going on. Then will will use the jQuery <a href="http://api.jquery.com/jQuery.post/">.post</a> function to send everything out to the <code>admin-ajax.php</code> file. Once the function is complete and a response is given, the loader will disappear, the submit button will return and a success message, or error message will indicate what happened. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery("#mailinglistsubmit").hide(); jQuery(".ajaxsave").show(); jQuery.post("<?php echo admin_url('admin-ajax.php'); ?>", data, function(response){ jQuery(".ajaxsave").hide(); jQuery("#mailinglistsubmit").show(); jQuery("#mailinglist #message").html(response); }); return false;</pre></div></td></tr></table></div> With the form and the jQuery in place, all we need now is some PHP. The <code>admin-ajax.php</code> file requires two action filters. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">add_action('wp_ajax_my_action', 'my_action_callback'); add_action('wp_ajax_nopriv_my_action', 'my_action_callback');</pre></div></td></tr></table></div> The first action will only work if users are logged in. The second is if users don’t have to be logged in. For our requirements, it should look like this: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">add_action('wp_ajax_join_mailinglist', 'join_mailinglist_callback'); add_action('wp_ajax_nopriv_join_mailinglist', 'join_mailinglist_callback');</pre></div></td></tr></table></div> Here is our join_mailinglist_callback function, which needs to be added to <code>functions.php</code>: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">function join_mailinglist_callback() { $email = $_POST['email']; if(!empty($email)) { $yourEmail = 'c@bavotasan.com'; $subject = 'Add me to your mailing list'; $success = mail($yourEmail, $subject, $email); if(!empty($success)) { echo 'Your email is subscribed to our mailing list.'; } else { echo 'There was a problem. Please try again.'; } } die(); }</pre></div></td></tr></table></div> With everything in place, you will get a form that works like the one below. <form method="post" id="mailinglist" action=""> <div id="message"></div> <input type="text" name="mailinglistemail" id="mailinglistemail" /> <input type="submit" name="submit" id="mailinglistsubmit" value="Join" /><img src="http://bavotasan.com/wp-admin/images/wpspin_light.gif" alt="" class="ajaxsave" style="display: none;" /> </form> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/using-ajax-with-wordpress/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item> <title>Great Font Resources for Web Development</title> <link>http://bavotasan.com/articles/great-font-resources/</link> <comments>http://bavotasan.com/articles/great-font-resources/#comments</comments> <pubDate>Tue, 27 Jul 2010 14:20:25 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[api]]></category> <category><![CDATA[APIs]]></category> <category><![CDATA[custom fonts]]></category> <category><![CDATA[david chester]]></category> <category><![CDATA[Desktop]]></category> <category><![CDATA[desktop publishing]]></category> <category><![CDATA[development]]></category> <category><![CDATA[download]]></category> <category><![CDATA[equivalents]]></category> <category><![CDATA[face kits]]></category> <category><![CDATA[flash]]></category> <category><![CDATA[font resources]]></category> <category><![CDATA[Fonts]]></category> <category><![CDATA[google]]></category> <category><![CDATA[Loader]]></category> <category><![CDATA[new fonts]]></category> <category><![CDATA[others resources]]></category> <category><![CDATA[range]]></category> <category><![CDATA[Replacement]]></category> <category><![CDATA[Squirrel]]></category> <category><![CDATA[subscription costs]]></category> <category><![CDATA[text elements]]></category> <category><![CDATA[Tool]]></category> <category><![CDATA[type]]></category> <category><![CDATA[type foundries]]></category> <category><![CDATA[typeface]]></category> <category><![CDATA[TypeKit]]></category> <category><![CDATA[using flash]]></category> <category><![CDATA[way]]></category> <category><![CDATA[WebFont]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2517</guid> <description><![CDATA[Ever since I wrote Embedding Fonts in your Web Site with CSS and @font-face many people have been emailing me with questions about adding new fonts to their sites. One of the easiest ways is with The New Google Font API but there are also a few others resources available. Here is a list of [...]]]></description> <content:encoded><![CDATA[Ever since I wrote <a href="http://bavotasan.com/tutorials/embedding-fonts-web-site-css-font-face/">Embedding Fonts in your Web Site with CSS and @font-face</a> many people have been emailing me with questions about adding new fonts to their sites. One of the easiest ways is with <a href="http://bavotasan.com/articles/google-font-api/">The New Google Font API</a> but there are also a few others resources available. Here is a list of places to find fonts and tools you can use to include them in your Web site. <h3>Font Squirrel</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/fontsquirrel.jpg" alt="Font Squirrel" title="fontsquirrel" width="550" height="160" class="alignleft size-full wp-image-2572" /> Font Squirrel has an amazing library of free commercial-use fonts. All of the @font-face kits that are available in my <a href="http://themes.bavotasan.com/category/premium-themes/">Premium themes</a> come from Font Squirrel. You can download fonts to use in desktop publishing or you can grab some @font-face kits to use on your Web site. There is even a handy, simple to use tool for converting standard fonts into @font-face kits for embedding on your Web site. <a href="http://www.fontsquirrel.com/">http://www.fontsquirrel.com/</a> <h3>Google Font API</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/googlefont.jpg" alt="Google Font API" title="googlefont" width="550" height="160" class="alignleft size-full wp-image-2564" /> I wrote about this one already so just check out <a href="http://bavotasan.com/articles/google-font-api/">that article</a>. <h3>TypeKit</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/typekit.jpg" alt="TypeKit" title="typekit" width="550" height="160" class="alignleft size-full wp-image-2567" /> TypeKit is a subscription-based service that allows you to link to fonts from many different type foundries. Subscription costs range from free to $99.99 per year. A free account allows for 25,000 pageviews a month and a limit of 2 fonts throughout you site. It is a great way to test out the service to see if it is right for you. <a href="https://typekit.com/">https://typekit.com/</a> <h3>WebFont Loader</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/webfont.jpg" alt="WebFont Loader" title="webfont" width="550" height="160" class="alignleft size-full wp-image-2565" /> This one is very similar to the Google Font API but it offers a wider range of resources of available fonts. You can use Google Fonts, TypeKit, Ascender or custom fonts. <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">http://code.google.com/apis/webfonts/docs/webfont_loader.html</a> <h3>sIFR</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/sifr.jpg" alt="sIFR" title="sifr" width="550" height="160" class="alignleft size-full wp-image-2575" /> sIFR (Scalable Inman Flash Replacement) is an open source piece of JavaScript that allows you to replace text elements on your Web site with Flash embedded equivalents. It is a bit more complicated to implement but there are many sites that use it and the results are quite nice. <a href="http://wiki.novemberborn.net/sifr3/">http://wiki.novemberborn.net/sifr3/</a> <h3>typeface.js</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/typeface.jpg" alt="typeface.js" title="typeface" width="550" height="160" class="alignleft size-full wp-image-2576" /> typeface.js was developed by David Chester as an alternative to using Flash to embed fonts on your site. Using typeface.js is pretty straightforward, since all it takes is the core JavaScript file and then a font. You can even convert your own fonts. <a href="http://typeface.neocracy.org/">http://typeface.neocracy.org/</a> <h3>FLIR</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/flir.jpg" alt="FLIR" title="flir" width="550" height="160" class="alignleft size-full wp-image-2577" /> FLIR (FaceLift Image Replacement) is another alternative to sIFR. It was created by Cory Mawhorter and uses JavaScript and PHP to dynamically create images of the text elements that you wish to use specific fonts on. Implementing it requires only a few lines of code and you are up and running. <a href="http://facelift.mawhorter.net/">http://facelift.mawhorter.net/</a> <h3>Cuf贸n</h3> <img src="http://bavotasan.com/wp-content/uploads/2010/07/cufon.jpg" alt="Cuf贸n" title="cufon" width="550" height="160" class="alignleft size-full wp-image-2578" /> Cuf贸n works with a rendering engine built in JavaScript and a font generator that uses <a href="http://fontforge.sourceforge.net/">FontForge</a> to convert fonts to a proprietary format. <a href="http://wiki.github.com/sorccu/cufon/">http://wiki.github.com/sorccu/cufon/</a> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/articles/great-font-resources/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item> <title>Blind Toggle for jQuery</title> <link>http://bavotasan.com/tutorials/blindtoggle-for-jquery/</link> <comments>http://bavotasan.com/tutorials/blindtoggle-for-jquery/#comments</comments> <pubDate>Thu, 22 Jul 2010 03:17:06 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[bottom check]]></category> <category><![CDATA[core code]]></category> <category><![CDATA[Drop Down Menu]]></category> <category><![CDATA[element]]></category> <category><![CDATA[fn]]></category> <category><![CDATA[jquery]]></category> <category><![CDATA[slide effect]]></category> <category><![CDATA[Slides]]></category> <category><![CDATA[toggle]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2551</guid> <description><![CDATA[jQuery has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and slides down to the bottom. Check out the drop down menu on Moderno to see what I mean. I wanted to create an element that [...]]]></description> <content:encoded><![CDATA[<a href="http://jquery.com">jQuery</a> has a great slide effect which comes built in to the core code. The only problem is that when an element slides down, it starts from the top and slides down to the bottom. Check out the drop down menu on <a href="http://demos.bavotasan.com/?wptheme=Moderno">Moderno</a> to see what I mean. I wanted to create an element that slides out from the bottom up and came across this piece of <a href="http://jquery.com">jQuery</a> code which creates a “blind” toggle. <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">jQuery.fn.blindToggle = function(speed, easing, callback) { var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom')); return this.animate({marginTop: parseInt(this.css('marginTop')) <0 ? 0 : -h}, speed, easing, callback); };</pre></div></td></tr></table></div> I have included it in my upcoming Premium theme Elemental Portfolio and I wanted to give props to Karl Swedberg on <a href="http://www.learningjquery.com/2008/02/simple-effects-plugins">Learning jQuery</a> for pointing me in the right direction. ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/blindtoggle-for-jquery/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item> <title>Shorten Your Post Titles in WordPress</title> <link>http://bavotasan.com/tutorials/shorten-your-post-titles-in-wordpress/</link> <comments>http://bavotasan.com/tutorials/shorten-your-post-titles-in-wordpress/#comments</comments> <pubDate>Fri, 16 Jul 2010 15:24:22 +0000</pubDate> <dc:creator>c.bavota</dc:creator> <category><![CDATA[Tutorials]]></category> <category><![CDATA[Array]]></category> <category><![CDATA[boxes]]></category> <category><![CDATA[count]]></category> <category><![CDATA[file]]></category> <category><![CDATA[Function]]></category> <category><![CDATA[idea]]></category> <category><![CDATA[length]]></category> <category><![CDATA[line]]></category> <category><![CDATA[loop]]></category> <category><![CDATA[magazine]]></category> <category><![CDATA[Php]]></category> <category><![CDATA[php tags]]></category> <category><![CDATA[pop]]></category> <category><![CDATA[post]]></category> <category><![CDATA[reason]]></category> <category><![CDATA[Slideshow]]></category> <category><![CDATA[strlen]]></category> <category><![CDATA[title]]></category> <category><![CDATA[WordPress]]></category> <guid isPermaLink="false">http://bavotasan.com/?p=2542</guid> <description><![CDATA[This is not a function that you would need to use often, but I came across a reason to use it recently and I thought it might be a good idea to share it. All it does is limit the number of words in your title, just in case you don’t want it to wrap [...]]]></description> <content:encoded><![CDATA[This is not a function that you would need to use often, but I came across a reason to use it recently and I thought it might be a good idea to share it. All it does is limit the number of words in your title, just in case you don’t want it to wrap onto a second line. I used it in the featured slideshow on <a href="http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium/">Magazine Premium</a> since the size of the boxes is fixed. Include this in your <code>functions.php</code> file between the PHP tags: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">function short_title($after = '', $length) { $mytitle = explode(' ', get_the_title(), $length); if (count($mytitle)>=$length) { array_pop($mytitle); $mytitle = implode(" ",$mytitle). $after; } else { $mytitle = implode(" ",$mytitle); } return $mytitle; }</pre></div></td></tr></table></div> Then you can use it within the WordPress loop like this: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><?php echo short_title('...', 8); ?></pre></div></td></tr></table></div> If you would rather count by characters instead of just words, you can add this function to your <code>functions.php</code> file instead of the one above: <div class="wp_syntax"><table border='0' cellpadding='0' cellspacing='0'><tr><td><div class="code"><pre class="php" style="font-family:monospace;">function short_title($after = null, $length) { $mytitle = get_the_title(); $size = strlen($mytitle); if($size>$length) { $mytitle = substr($mytitle, 0, $length); $mytitle = explode(' ',$mytitle); array_pop($mytitle); $mytitle = implode(" ",$mytitle).$after; } return $mytitle; }</pre></div></td></tr></table></div> ]]></content:encoded> <wfw:commentRss>http://bavotasan.com/tutorials/shorten-your-post-titles-in-wordpress/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> </channel> </rss>