Note: An important aside about this script is that by default WordPress caches the feed for 1 hour. This means your Tweet on your website will be updated at that frequency. This is great because it saves your server a lot of overhead, especially on busy website. However, if you’re an avid Twitterer and want your very latest Tweet shown for every page refresh for every visitor, I recommend using this method.

function wp_echoTwitter($username){
     include_once(ABSPATH.WPINC.'/rss.php');
     $tweet = fetch_rss("http://search.twitter.com/search.atom?q=from:" . $username . "&rpp=1");
     echo $tweet->items[0]['atom_content'];
}

Past the above in your functions.php file. Now just paste the following in your theme file where you want your Twitter post to appear:

<?php wp_echoTwitter('johnkolbert'); ?>

Obviously replace my username with yours. Now you’re done! Style it however you like with HTML and CSS.

What’s Smart Ads, you ask? Smart Ads is an intelligent advertising plugin for WordPress. It lets you insert ads based on category, wordcount, member status, post age, and more.

Well I’m happy to say that in just over a year, Smart Ads has been downloaded over 10,000 from WordPress.org! It’s quite a milestone for Smart Ads and myself personally, as it is my most popular plugin. I told my wife today and her response was “Why didn’t you just charge $1 for it!” You can tell she has more business sense then I do!

If you’d like to give Smart Ads a try, check out it’s homepage. It’s fully compatible with WordPress 2.8 and absolutely free.

What is Absolute Privacy, you ask? It is a WordPress plugin which turns your blog into the ultimate private blog.

• Force registrants to enter first and last name
• Allow registrants to choose their own passwords
• Moderate users: new registrants cannot login until approved
• Get emailed every time an approval is waiting (with a link for quick approval)
• Lock out all non-logged in views from your website (configurable)
• Perfect for family blogs, personal sites, and private communities!

To download or read more, please visit the Absolute Privacy homepage.

What is Smart Ads?

Smart Ads automatically, yet intelligently inserts advertisements like Google’s Adsense above and below your post content. These advertisements are only visible when viewing a single post (single.php). Since it doesn’t make sense to fill small posts with ads, users can set a “Wordcount” minimum for their advertisements. Smart Ads will only insert advertisements into posts that meet or exceed the desired Wordcount. Do you start your posts with an image? You can chose to disable the top ad if your post has an image tag in the first number of characters (you set the limit)!

Also, to ensure that new content remains fresh, users can chose to only place ads on posts that are over a certain amount of days old. Advertisements can be manually disabled on a post-by-post basis while writing a post, for entire categories, or for registered blog members.

You can also insert custom ads anywhere in your post text using the built in shortcode. Custom ads are not affected by the Wordcount or date minimum requirements and can toggled to be shown on the index page or only shown when in single post view.

This tutorial teaches you how to add WordPress 2.8’s built-in syntax highlighting and line numbering capabilities to your plugins administrative pages. It requires 2.8 beta and up.

Background

WordPress 2.8 is set to be released in the near future and promises to add quite a few new features. Among them, and one that fellow nerds like me will appreciate, is the addition of syntax highlighting and line numbering to WordPress’ built-in theme and plugin editors. Although I rarely use the built-in editors, it’s a nice addition for those times I need to make a quick change and don’t want to log into my FTP.

What made me figure all this out? While developing a plugin recently I found that the user experience would be improved by including syntax highlighting and line numbering. After trying to integrate a few scripts on my own I thought why not try to use WordPress’ built in feature now?

Well, after a few hours of being elbow deep into WordPress’ admin files, here’s how you can add syntax highlighting and line numbering to your plugin natively. WordPress 2.8 uses an open source project called CodePress to handle the syntax highlighting and we’re able to tap into that script for our own purposes.

Download the Tutorial File

The PHP file is available for you to download, test, and modify: WP Syntax Demo (28)

Step 1: Creating Your Plugin’s Admin Page

First let’s create the administrative page for your plugin. For this example I’ll create a top-level menu page, though you can create your admin page anywhere you like.

function sd_add_pages(){
     add_menu_page('Syntax Demo', 'Syntax Demo', 8, __FILE__, 'sd_content'); //add top level menu page
}

add_action('admin_menu', 'sd_add_pages'); //add options pages

First we create the the menu page by using the add_menu_page function and referencing it through the admin_menu action. See the link below for more info on the add_menu_page function.

Useful Link (opens in new window): Adding Menu Pages – WP Codex

Step 2: Creating Your Textbox

In the add_menu_page function above we referenced a sd_content function. This function will house our textbox that will have the syntax highlighting. First I’ll give you the code then explain a few important details about it.

function sd_content(){
?>
   <div class="wrap">
     <h2>CodeBox: Test Your Code Here</h2>

     <form method="post" action="" id="template" name="template">
        <table class="form-table">
        <tr>
          <td valign="top" style="width: 560px">
            <textarea name="newcontent" id="newcontent" tabindex="1" class="codepress php" rows="15" cols="75"><?php echo $_POST['newcontent'];?></textarea>
             <input style="margin-top: 10px;" class="button-primary" type="submit" value="submit" />
          </td>
        </tr>
        </table>
     </form>
<?php
}

This function merely adds a form with the ID of template, and a textarea HTML element with the ID of newcontent. You must use these IDs when naming your textarea and form. To use different IDs see the Advanced Usage section, below. Also, we gave our textarea a special class of class=”codepress php”. This tell the CodePress script to change this textbox and that the language we want for syntax highlighting is PHP.

Step 3: Enqueue the CodePress Script

In this step we’ll tell WordPress to add the CodePress script to the list of enqueued scrips that WordPress adds. We’ll do this by creating a function that calls wp_enqueue_script.

function sd_header(){
     if($_GET['page'] == "syntaxdemo.php"){
          wp_enqueue_script( 'codepress' );
     }
}

add_action('init', 'sd_header'); //add header info

To make sure that the CodePress script is only added to the page we need, we’ll add a simple check to make sure we’re on our plugin’s settings page. You’ll need to adapt the $_GET['page'] == “syntaxdemo.php” to reflect the actual filename of your plugin. If you plugin is in a folder it would be $_GET['page'] == “folder/syntaxdemo.php”. Also, you’re $_GET['page'] variable may be different depending on how you added your plugin settings page (in our case, as a top-level menu).

Useful Link (opens in new window): Using wp_enqueue_script – WP Codex

Step 4: Finishing the Textbox Input

If we stopped now the textbox we created would have proper syntax highlighting and line numbers. However, you wouldn’t be able to access any of the information that the user enters into the textbox. This is because CodePress actually places an iFrame HTML element over the textbox. Thus all editing is being done in the iFrame and not actually in the textbox we created. We just need to get the value of the textbox from the iFrame and add it to our textbox when the form is submitted.

There are two ways to do this. We can use WordPress’ built in function:

if($_GET['page'] == "syntaxdemo.php"){
      add_action( 'admin_print_footer_scripts', 'codepress_footer_js' );
}

However, this requires the following

• form ID and name of template
• textarea ID and name of newcontent

If you follow the above guidlines, then this script will work fine. Note: I followed these guidlines in this example.

Advanced Usage

If you’d rather use your own IDs and names for your form and textarea we can manually add the correct javascript code to the footer. This code is the same as got included in the admin_print_footer_scripts function used above, but we’ll manually change the IDs to reflect our own.

function sd_footer(){
     if($_GET['page'] == "syntaxdemo.php"){
?>  <script type="text/javascript">
          /* <![CDATA[ */
          var codepress_path = '<?php echo includes_url('js/codepress/'); ?>';
          jQuery('#formid').submit(function(){
          if (jQuery('#textareaid_cp').length)
          jQuery('#textareaid_cp').val(textareaid.getCode()).removeAttr('disabled');
          });
          /* ]]> */
      </script>
<?php
     }
}

add_action('admin_footer', 'sd_footer');

There are a few noteworthy things in the above code. Here again we checked to make sure we were on our plugin’s page by using the $_GET['page'] check as we did before. Also, we must change #formid on line 6, above, to the ID we’ve given our form. If the ID is myform, then it would begin jQuery(’#myform’).

Finally, we must change #textareaid to reflect the actual ID of the textarea we create, making sure to keep the _cp addition were necessary. If we create a textarea with the ID of mytextarea, lines 7-8 in the above code would get changed to the following:

if (jQuery('#mytextarea_cp').length)
jQuery('#mytextarea_cp').val(mytextarea.getCode()).removeAttr('disabled');

That’s It

By following the above instructions we can now include syntax highlighting and line numbering natively in our WordPress plugins. Where could you use this? Some examples might be as custom field boxes on the write post/page screen, or on settings pages for plugins where the user needs to paste or enter some HTML or PHP code. I’m working on integrating it into a few of my plugins. What about you? Do you think it’s worth it?

I’ve always been a fan of Macintosh’s Dock. Something about that sleek mouseover effect gets me every time. Recently, I was working on a project that needed a minimally invasive similar effect on a website. During the course of getting it ready, I came across a number of scripts that attempted this very thing. Some of them were good, some weren’t. Fisheye Menu by Marc Grabanski is so easy to install that I thought I’d share it here.

The script is open source. All credit and blame go solely to Marc Grabanski. The only thing I’ve added is a single line of code that changes the mouse cursor to the “hand” mode on mouseover (to look like a link). The script’s mouseover effects aren’t the most spectacular, but they’re not bad. They are slightly choppy, but I believe they are good enough for a live website. Here I’ll give you examples of the script, tell you how to get it running on your website, and then let you decide if it’s any good. I’ve geared this guide towards beginners.

Fisheye Menu

Presented by John Kolbert

Coded by Marc Grabanski

URL: http://marcgrabanski.com/code/fisheye-menu/

The Fisheye menu is a very easy script to implement. All you need is the javascript file, a CSS template, and your images. Begin by downloading the zip file. The only difference between the version presented here and the version that Marc created is that I added one simple line of javascript that changes the cursor to the “hand” mode on mouseover. You can see a live preview, minus this one change, by viewing the offical code page.

The Basics

Installation

Begin by uploading the javascript file, the CSS file, and your images to your web server. It is important that all of the images in the image folder remain in the same folder. Then, add the following code somewhere in between your <head></head>tags.

<script src="http://YourDomainHere/fisheye.js" type="text/javascript"></script>

Of course, you would need to change "http://YourDomainHere/..." with the location of each specific file. These lines of code link your page to the actual javascript code and the accompanied CSS file.

Now you can add the actual menu to your page. The code for your menu should follow the format below. I suggest you copy and paste the code and then adjust it to your needs.

<div>

<ul id="fisheye_menu">

<li><a href="#1"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 1</span></a></li>

<li><a href="#2"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 2</span></a></li>

<li><a href="#3"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 3</span></a></li>

<li><a href="#4"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 4</span></a></li>

<li><a href="#5"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 5</span></a></li>

<li><a href="#6"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 6</span></a></li>

</ul>

</div>

Each <li></li> represents one icon in your menu dock. To change the link for each icon, replace the contents of the quotation marks in <a href=”#…”> with your desired URL. Also, make sure that your change <img src=”http://YourWebsite/icon…” alt=”" /> to reflect the actual location of your icon. Make sure you link to the large image, not the one labeled “_small”. I will explain the meaning of this below. To change the label that accompanies the icon on mouseover, simply alter the text in between the <span></span> code of each line.

If you are using the icons that come with the sample file, that’s really all you need to know to get going. However, if you are going to change the size of your icons or the file extensions of your icon images, I suggest you keep reading.

Tweaking Your Menu

If you wish to change the size of the menu icons or the file extensions (to allow for transparency, for example) you are going to need to tweak the javascript code itself. To do this, open fisheye.js in your HTML or text editor. The very first few lines of code look like the following:

var fisheyemenu = {
	startSize : 55,
	endSize : 88,
	imgType : ".gif",

Each icon on your Fisheye menu is actually two images, a large one and a small one. startSize : 55 means that the resting menu icon, the smaller of your images, is 55×55 pixels. Thus, your icons must be square. To alter the resting size of your icons, simply adjust this number to your liking. For the best quality, scale your images and the startSize number so they are the same. Similarly, endSize refers to the larger of you icon images, or the icon when your mouse is over it and it is enlarged. Adjust this number so it is the same as your larger image files. Using PhotoShop or Paint.net will allow you to scale your images to your desired size.

To use a different icon format, simply change imgType : “.gif” to your desired file format. If you wish to use PNG icon files, simply change it to say imgType : “.png”.

It is also important to properly name your icon files. After downloading or creating your two sizes of icon files (large and small), name the large icon file anything you like. If you named it “contactme.png” your MUST name the corresponding smaller icon file “contactme_small.png”. The smaller image must have “_small” appended to the end of its name, but before the extension.

Wrap It Up

I believe that should do it. Don’t forget that you can change the font and background color of the popup text by playing around with the “fisheye-menu.css” file. If you have any questions about installing the script or getting your icons to work, feel free to post a comment here. However, if you have technical problems with the script itself, head over to the code’s official site.

How to Hide Custom Fields

Custom fields can be hidden from the Custom Fields meta box quite easily. Typically custom fields are added by using the following code:

add_post_meta($id, 'name', 'value');

To hide your custom field from user view, simply start the name of your custom field with and underscore (”_”). So create your custom field like this:

add_post_meta($id, '_name', 'value');

Your custom field is now hidden!

WPHire is a free, open-source WordPress solution that provides complete estimate, invoicing, and billing solutions for WordPress developers. Meant to be used as a front-end web app for you AND your clients, it’s built to save you time, headaches, and money! source: http://www.wphire.com/

My goal for the WPHire project is to create an estimate/invoicing web application (think along the lines of Zoho or or Freshbooks) that runs completely on WordPress, is open-source, and is fantastically simple to use. How simple? I’m thinking along the lines of not having to use the Admin interface for nearly anything. That’s right. Almost everything will be done from a front-end perspective.

I’m calling the WPHire project a WordPress “solution” for lack of a better title. See, it’s going to be more then just a theme or a plugin. It’s actually going to consist of both and will not be like anything you’ve seen! At its core is a custom built theme currently dubbed “InvoicePro”. InvoicePro is meant to be used with a separate WordPress installation. My thoughts are it would work great on a subdomain (for example, http://invoices.yoursite.com/). InvoicePro is still in its very early design stages (see the above image for an initial mockup of the theme) but here’s some of its planned functionality:

What It’ll do for You

• Track client contact info
• Create estimates
• Receive notification of client approval of estimates
• Send invoices
• Allow client viewing of invoices/estimates through encrypted link or force registration
• Send and receive comments to/from clients directly on the estimate page
• Collect payments via PayPal
• View historical data (and save to PDF)
• Minimal exposure to the admin interface (All of the above will be done directly from the theme, NOT the WP admin interface!!)
• Lots more…

What It’ll Do For Your Clients

• View estimates and invoices quickly by using an encrypted link
• Returning clients can view work history (if registered)
• Save invoices directly as PDFs
• Approve estimates
• Pay invoices directly via PayPal
• Leave comments on projects

InvoicePro will also release with a plugin that you install on your current website to view invoice updates on your dashboard.

How Much Will It Cost?

The WPHire project is a free, open-source invoicing solution. All project files will be released free of charge. So, why am I doing this? Mainly for the challenge of working on a large project. This is going to be what I spend my summer doing. However, I do have plans for some monetization by offering premium installation, support, and customization services. I will also offer premium invoice hosting. What’s that? It’s for people who need an online invoicing solution but don’t want to worry about the maintenance, hosting, and set-up. Prices are TBD, but should be about $5-$10/month. Users will be able to chose a subdomain at one of three domains: yourname.wphire.com, yourname.hiredby.me, yourname.proinvoicing.com.

When Will It Be Released?

WPHire is still in early design and planning stages. My expectation is to have some sort of beta version available sometime this fall, but being a one man project means that deadline is “flexible”.

How Can You Contribute?

Working on this project takes a significant amount of time. It also requries hosting, domain, and bandwidth fees. A donation of any size would be greatly appreciated!

You can also donate your time and talent if you’re interested. For more info on how you can help, feel free to drop me a line.

How to Stay Updated?

I’m currently working on getting the website for the WPHire project up and running. In the meantime visit the landing page and sign-up for the WPHire Newsletter were you’ll get notified of important blog updates and developments. I’ve also created a Twitter account for WPHire (@wphire) which is currently being set up.

See, last night I had the support team over at AnHosting change some settings on my server. Little did I know that the changes would remove the custom Mx record I set for the domain which allows me to use Google Apps to host my emails. So anyone who has tried to email me today most likely got it sent right back. My apologies!

So what is the moral of this story? Follow me on Twitter! Then you can message me to get hold of me or find out what’s going on. I’ve since fixed the error and should be back to receiving emails now. Thanks for your patience!