Archive for WordPress

How to Make a Scrolling Back to Top Link in WordPress

So you have a site that has lots of long pages or posts. What do your users do when they get to the bottom? Scroll back to the top with the scroll bar or maybe their mouse wheel? Psh. How 2004! Here’s a bit of code that will allow you to make an autoscroll link back to the top of your page like you see implemented on this site.

There is also an article on this concept in the iThemes Builder Community with slightly different code. I added a few tweaks of my own…

The jQuery Code

<script type="text/javascript">// <![CDATA[
jQuery('.backtotop').click(function(){
	jQuery('html, body').animate({scrollTop:0}, 'slow');
});
// ]]></script>

Basically what this code does is tell anything that has the backtotop class (line 2) to become a clickable link that scrolls the page to the top with a nifty animation (line 3).

This code goes just before the </body> tag in your theme files. Or, if you’re using the awesomeness that is iThemes Builder, you can just paste it in the box on the setting page like so:

The HTML Link

Now all you have to do is add the following div that has the class backtotop as mentioned above wherever you want people to click.


<a class="backtotop" href="javascript:void(0)">Back to Top</a>

What we’re doing here is creating a link that goes nowhere and giving it the backtotop class so that it gets the jQuery effect applied to it.

The Result

Back to Top

Adding the Link to Every Page

Unless you’re using the magic of LoopBuddy (keep reading), you’ll have to add the link to your template files. Edit your page.php (or single.php for posts) and add the HTML code above to just after the php the_content area. You’ll need to tweak this depending on your theme. You can also tweak the HTML to your heart’s delight as well.

Adding the Link to Every Page with LoopBuddy

If you’re not using Builder, you’re probably not using LoopBuddy either, which is probably one of the sweetest tools to come along in a while for WordPress developers. If you don’t know about LoopBuddy, go here.

With LoopBuddy, we can create a layout that includes our Back To Top link from above and apply it to every page (and post if you want) automatically.

Step One: Create a LoopBuddy Layout for a Default Page

In the graphic below, I created a layout called “Page Default” which contains just the title and content. Those are there by default. Then I simply added the HTML code from above into the Post-Loop / HTML box. That will cause the HTML code to show up at the bottom of any page or post we apply this layout to.

Step Two: Apply the Layout to Pages by Default

Now we want to tell LoopBuddy to use that Default Page layout as (you guessed it) the default Page layout for our site. We do this in the settings area in a simple pick list:

Once you save the settings, your site should begin to display theBack to Toplink at the bottom of each page.

Repeat the LoopBuddy process to have it display on  your posts as well (you’ll have to do this separately unless you just want Title and Content for your posts).

How to Create an Automatically Updating Date Icon in WordPress

This is the first of several How To posts based on features of the World Reach web site I released in June 2012.

At the top of the sidebar of most pages of the site is a link to download the mission organization’s monthly prayer calendar. This link does a number of interesting things thanks to some nifty php code. First it shows the current date in the time zone of the organization’s headquarters. Second, it actively links to the correct month’s PDF calendar without any intervention on the part of their office staff.

Here’s how to create it.

Step One: Install the PHP Code Widget

Since PHP code will not execute in the standard WordPress text widget (which will only render HTML), you’ll need to install a widget that will allow it. I like Otto’s tried and true PHP Code Widget in the WordPress Plugin Repository.

Step Two: Insert the PHP Code in the Widget

Below is the code I’ve used to render the calendar icon and below that will be the explanation of what the various parts of the code mean.

//Render the Month
<div class="prayer-calendar-month">
<?php date_default_timezone_set('America/Chicago');   echo date('M'); ?>
</div>

//Render the Day
<div class="prayer-calendar-day">
<?php date_default_timezone_set('America/Chicago'); echo date('j'); ?>
</div>

//Render the Link
<div class="prayer-calendar" style="cursor: pointer;"
onclick="Javascript:window.open('http://world-reach.org/pdf/Prayer-Guide/
<?php date_default_timezone_set('America/Chicago');  echo date('m'); ?>-
<?php date_default_timezone_set('America/Chicago');  echo date('Y'); ?>.pdf');">

//Render the Text
<div class="prayer-calendar-text">Download the<br />
<?php date_default_timezone_set('America/Chicago');  echo date('F Y'); ?>
<br />Prayer Calendar
</div>
</div>

Render the Month

  • The div class prayer-calendar-month is important because we will use it to style and position the month text on the calendar icon with CSS.
  • date_default_timezone_set(‘America/Chicago’) is present to set the time zone of the date the code will render to central time. That’s important because PHP will use GMT unless you tell it otherwise. For a complete list of php time zone codes, click here.
  • echo date(‘M’) renders the current month in its 3 letter abbreviation. You can also render months in full (like January) or as its numerical equivalent (like 1 or 01). A letter code (like the j used here) tells PHP how you want the date to render. Here is a page that explains the letter codes and what they mean.

Render the Day

  • Again, the div class prayer-calendar-day is important for styling and positioning in the CSS that we’ll do in a moment.
  • Again, the date_default_timezone_set makes the date render in central time.
  • echo date(‘j’) renders the day of the month as a digit.

Render the Link

  • To make management of the Prayer Calendar easier for the office staff, I have set up the link to automatically update to the current month and year. The staff simply uploads a PDF named month-year.pdf (like 06-2012.pdf) to a specific location and the sidebar calendar will automatically link to the correct PDF. Also, this allows the staff to upload calendars months in advance and the link will always give the correct month.
  • The div class prayer-calendar will allow us to make the entire div clickable to the PDF link.
  • style=”cursor: pointer;” makes the mouse pointer change from an arrow to a finger when over the clickable div. Otherwise, the mouse will stay an arrow and users will not know the area is clickable.
  • onclick=”Javascript:window.open makes this div clickable and opens the link in a new window (tab).
  • The link renders as http://world-reach.org/pdf/Prayer-Guide/(month)-(year).pdf. We get the current month and date with the same echo date functions used earlier.

Render the Text

  • Again the div prayer-calendar-text will be used to help position and style the text for the sidebar widget.
  • The text has PHP that echos the current month and year: Download the (Month) (Year) Prayer Calendar. The F and Y are php date letter codes for the full month name and 4 digit year.

Step Three: Style the Output with CSS

The CSS for the date icon is below with explanations of some of the more important parts below. In order to make this work, you’ll need a calendar background icon. I have placed the icon I used for the World Reach site here to the left. Many others can be found with a Google images search like this one.

.prayer-calendar {
	border: 1px #3A5275 solid;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	width: 135px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -60px;
	background-color: #F9F9F9;
	background-image: url(/icons/Calendar2.png);
	background-repeat: no-repeat;
	background-position: 8px 8px;
	padding-left:65px;
	box-shadow: 0 0 4px 2px #DEDEDE;
	height: 65px;
}

.prayer-calendar-month {
	position: relative;
	font-size: .65em;
	font-weight: bold;
	color: #fff;
	top: 12px;
	left: 23px;
	text-transform: uppercase;
	text-align: center;
	width: 50px;
}

.prayer-calendar-day {
	position: relative;
	font-size: 2em;
	font-weight: bold;
	color: #000;
	top: 3px;
	left: 23px;
	text-align: center;
	width: 50px;
	letter-spacing: -2px;
}

.prayer-calendar-text {
	line-height: 1.2em;
	font-size: .75em;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	padding-top: 10px;
}

.prayer-calendar

  • background-image: This places the calendar icon as a background image for the div
  • no-repeat: insures that the calendar icon displays only once and does not repeat across the div
  • background position: pushes the calendar icon 8px down and 8px to the right to give it a little spacing from the border
  • padding-left: pushes the rest of the contents of the div 65 px to the right so that the calendar icon is not covered up

.prayer-calendar-month and .prayer-calendar-day

  • position relative:basically allows us to do the specific positioning top and left we’re going to do below. If you don’t set position to relative, the top and left won’t work.
  • top and left:pushes the month text 12px down and 23px to the left of where it would have been rendered. This places the month text exactly in the blue strip of the calendar icon. I found that position by (lots of) trial and error.
  • width: this sets the width of the div for the month and day to the same width as the icon so we can center the text on the icon itself with text-align center.

.prayer-calendar-text

  • Nothing special here. This just styles the appearance of the “Click here to download…” text.

 

How to Make the WordPress Editor Look Like Your Web Site

Why doesn’t the font match?

I can’t tell you how many times I’ve had clients ask that question when using the WordPress Visual Editor for the first time. They simply can’t understand why they have to enter text in the antiquated “Georgia” font and why it looks different when it actually appears on their site. Answering their question requires a lengthy explanation that delves into the principles of a content management system and why it’s important to separate the content of a web site from it’s style… blah, blah, blah. Then I get the deer in the headlights look and the answer gets simplified to the time-tested response of a frustrated parent to a petulant child: “Because I said so.”

Yeah, but why doesn’t the font match?

WordPress has for years made the decision that the default font for the Tiny MCE Visual Editor would be Georgia. I have no explanation why. It’s not exactly a modern font. After some digging, I found the font for the visual editor is controlled by a css file buried deep in the recesses of WordPress. To be precise: wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. On line two of that file, you’ll find the font settings, which default to Georgia, for whatever reason.

Getting Georgia out of your Visual Editor

The key to liberating your visual editor from the travesty of Georgia is to create a file that defines the styling that’s used. This file is called editor-style.css and it’s not part of the default WordPress installation. It’s theme-based. But just two quick steps will allow you to be rid of this problem once and for all.

Step One: Add Your Own editor-style.css File

What I usually do is create a file in my child theme folder called editor-style.css. Then I copy and paste the typography section of the existing style.css file in my theme into that file and save it. I’ll grab the styling for paragraphs, headings, blockquotes, buttons, etc… anything that would show up in the content area.

Step Two: Tell WordPress to look for the editor-style.css file

Just adding the editor-style.css file to your theme folder will not make the change on its own. You need to add the following code to your functions.php file to tell WordPress to look for changes you just added.

// Styling the visual editor with editor-style.css to match the theme style.
add_editor_style();

Save your changes and reload your editor and you’re done! In two easy steps, your Visual Editor should now be pulling in the styling form the front end of your web site.

Nifty, huh? And now truly WYSIWIG.

The best part? No more having to explain why the font doesn’t look the same!

How to Fix the “Your Cart is Empty” Error in Cart66

Your Cart is Empty

I love Cart66 for its elegant simplicity and the fact that it just works. Cart66 brings usable eCommerce to WordPress. But recently, I ran into a recurring problem on a client’s web site that was breaking the checkout process.

A customer would add a product to cart, but when they went to checkout, Cart66 would return the error “Your Cart is Empty.” After a bit of research, I found the answer on the WordPress Support Forums.

Cart66 is Incompatible with Site Caches like W3 Total Cache

Now, I’m a pretty easy guy to get along with, and it takes a lot for me not to be able to get along with someone. But from time to time I’ve run into a situations where two people I genuinely like can’t stand each other. That has always mystified me. I like you both, why don’t you like each other. It turns out, that’s a bit like what was happening on this site. Two of my favorite plugins, Cart66 and W3 Total Cache, just can’t get along.

According to Cart66’s developer, “If you have a caching plugin running you will run into all sorts of odd problems. So do not run a caching plugin, or at least, don’t cache your shopping cart pages.” The issue seems to happen because the caching plugin is caching the view cart page of a previous visitor. So that when the next visitor tries to check out, the previous visitor’s view cart page is shown to them. This, of course, just won’t work.

But, thankfully, the solution is as simple. Just turn off caching or set your cache not to work on shopping cart pages.

How to Add Easy Social Icons in the WordPress Navigation Menu

Social Media Icons are a must-have for any web site these days. But adding them attractively to a theme can be a challenge. Here’s a very simple way to add clickable Facebook, Twitter, Linked-In and other social icons to the WordPress navigation menu using just your images and CSS.

Important Note: I’ve found that if your theme is already using background images on the menu, you might have issues with the code below.

Another Important Note: The many variations of themes and how they style menus means that you’ll need to take the concepts and CSS in this tutorial and implement them on your site. This will probably take a basic to intermediate understanding of CSS. As always, I’m happy to work with you to implement this concept on your site.

If your icons appear but are not clickable… it’s a theme issue. It can probably be solved, but it’s beyond the scope of this tutorial. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

If the icon disappears when you mouseover it… again, it’s a theme issue. Likely your theme is already using a background image for the menu. In the sample code below, try using “.menu-twitter a” instead. I’ll be happy to work with you if you’d like some assistance. (You might try changing the CSS selector described below to li.menu-twitter and see if that works for you.)

Edit 10/31/2012
There is a new plugin in the WordPress repository that has much of the functionality that I describe below. Have a look here at Nav Menu Images.

Here’s the Video:

Step One: Grab Your Icons

The first thing you’ll need to do is select the social icons you want to use. Iconfinder is my source for icons. Hint: find an icon you like, then click collections to discover coordinating icons for other social sites. Once you have your icons, save them in your theme’s images folder.

Step Two: Add a Custom Link to your Menu

Edit your main menu in the WordPress menu editor. In the Custom link metabox, add the link to your Twitter page and label the link Twitter. Then Add to Menu.

Step Three: Turn on CSS Classes for Menu Items

At the top right, click the Screen Options tab, and check on CSS Classes. This will enable a new field in the menu options called CSS Classes in which you can put a custom CSS class on each particular menu item.

Step Four: Assign a Custom Class to the Twitter Menu Item

Open the menu item for the Twitter link you just created, and add a custom class to that item. For this tutorial, I’ve called it menu-twitter. This will allow us to address that menu item directly in the CSS.

Note: You don’t have to assign a custom class. Each menu item in WordPress already has its own specific ID. But doing it this way allows the code you create to be portable from site to site. Read more on portability below.

Step Five: Adding the Icon to the Menu

At this point, you’ll have a new item on your menu with the text Twitter that is pointing to your Twitter account. What we’ll do now is remove the text and replace it with an icon using CSS.

Use the following code:

.menu-twitter {
	text-indent: -9999px;
	background-image: url(images/twitter.png) !important;
	background-repeat: no-repeat !important;
	margin-left: 100px !important;
	width: 50px;
}

Here’s an explanation of the code:

  • The .menu-twitter class is what we added to the custom menu in step four.
  • Text-indent pushes the menu label off the screen to the left 9999 pixels so it doesn’t display over the top of the Twitter icon.
  • Background-Image puts the Twitter icon as the background of the menu item, which is still clickable.
  • Background-Repeat ensures that the icon only displays once.
  • Margin-left puts 100 pixels of space between the icon and the rest of the menu. You’ll probably only do this for the first social icon.
  • Width restricts the width of the menu item to 50px, which is plenty to display the icon and leave some space for the next one.

Here are the Results

Just repeat this process for each icon you want to add. Your theme might require a bit of tweaking to position the icon up and down, but the above should get you most of the way there. Enjoy!

Making it Portable

The real value of this code is bringing it from site to site with very little effort. Put all your social icons in any web accessible location (like http://yourdomain.com/social) then change the link in the css for the icon to this new location as below:

background-image: url(http://yourdomain.com/social/twitter.png) !important;

The result… You can now paste this code unchanged into the css of every site where you want social icons. Then all you have to do is add the custom menu items to make the icons live.

– – – – – – UPDATE 5/31/2012 – – – – – –

Opening Links in a New Window

To cause your menu icon links to open in a new tab or Window, just click on Screen Options and check on the Link Target option.

Doing this will add a new box to the menu item that will allow you to open the link in a new tab or window. See below:

Easy Random Background Images for WordPress

Here’s a fantastic little solution I found from Dan Benjamin that allows you to drop a simple php script in a folder of images to display them at random. This code is really light and works perfectly in all my tests.

I’m using it to randomize background images on the content module of an iThemes Builder site. You can also use it to display a random image from a folder in a post as well. Yes you can do this with something like NextGen Gallery, but a simple solution like this is better if you don’t need all the features of a full gallery plugin.

Here’s all you have to do…

  1. Save the code below or copy and paste it into your text editor of choice.
  2. Save it as rotate.php (or whatever you want to call it) into a folder of images on  your web site.
  3. Add the script like you would add an image.  <img src=”path-to-your-images/rotate.php”> or for a background in css, add this to the element background-image: url(path-to-your-images/rotate.php);

Here’s an Example:

The picture below is randomly generated from the images in an upload directory of this site. Hit refresh to see it randomize.

Now Here’s the Code…

Note: I’ve removed all the commenting to make the code shorter. If you want to see the comments, view Dan Benjamin’s original article here.

<?php

$folder = '.';

$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';

$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}

if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
	}
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;
		}
	}
	closedir($handle);

	if (count($fileList) > 0) {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];
	}
}

if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
	readfile($img);
} else {
	if ( function_exists('imagecreate') ) {
		header ("Content-type: image/png");
		$im = @imagecreate (100, 100)
		    or die ("Cannot initialize new GD image stream");
		$background_color = imagecolorallocate ($im, 255, 255, 255);
		$text_color = imagecolorallocate ($im, 0,0,0);
		imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
		imagepng ($im);
		imagedestroy($im);
	}
}

?>

Supercharge WordPress with LoopBuddy + Custom Post Types

This is my first shot at a video tutorial. I’m brand new using ScreenFlow and the mic is just the one on my MacBook Pro. Hopefully, I’ll get better over time. Also, if you benefited from the video and do not own LoopBuddy or a WPMU membership, please use my affiliate links below if you plan to purchase. Thanks!

Resources used in the video:

Very Important Note:

When you create your Custom Post Type, be sure that you do not name the slug of your CPT the same as the slug of the page that it will be displayed on with LoopBuddy. If you do, all manner of badness will occur, including a potential breach of the space-time continuum. So, don’t cross the streams, Venkman.

Here is the CSS that was pasted:

/*Book Grid */

.books-grid {
	width: 125px;
	height: 250px;
	float: left !important;
	display: inline !important;
	padding-right: 15px;
	text-align: center;
}

.hentry {
	border-bottom: 0px !important;
    margin-bottom: 0em !important;
}

.books-grid-image {
	margin-left: 5px;
}
.books-grid-title {
	line-height: 1;
	font-size: .8em;
	font-style: normal;
	width: 125px;
}

/*Books Detail Page*/
.books-detail-title {
    color: #A87F10;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.3em;
    text-align: left;
}
.books-detail-author {
	padding: 15px 0px;
}
.books-detail-image img {
	margin: 0px 10px 15px 0px !important;
	float: left;
}
.books-detail-return {
	text-align: center;
	background-color: #DAD8D9;
	padding: 5px;
	display: block;
	margin: 75px auto;
	width: 50%;
	border: 1px #888 solid;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}

Grid Items Not Gridding?

If your posts are not displaying in a grid, try putting the float on the .hentry rather than the .books-grid. I’ll betcha that will work.

Using Custom Post Type UI instead of CustomPress

Custom Post Type UI will not allow you to create custom fields by itself, which makes doing what this video describes impossible. However, a nifty little plugin called More Fields will allow you to add custom fields to Custom Post Types and gives you the kind of control over what they look like (single line text, textarea, etc) that CustomPress does. One day I’ll make a video demonstrating this process. But it’s pretty straight forward:

  1. Create your custom post type using Custom Post Type UI
  2. Add custom fields to your custom post type using More Fields
  3. Put the custom field key you created in step 2 in LoopBuddy’s custom fields item.

Website Portfolio Gallery Screenshot Shortcode for WordPress

The basis for this code was presented by Benjamin Bradley in a WebDesign.com Member’s Only Chat. It will allow you to create quick and simple screenshots using WordPress.com’s screenshot script to add a screenshot to a single page or make a automatically updating portfolio. I tweaked the code a bit from what was presented in class to allow for hyperlinking, and the display of title and description.

First, the Functions.php Code

Add this to your functions.php before the last ?>.

//Screenshot Snap Shortcode

function snap_my_web($atts, $content = null) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://nathaningram.com',
"link" => 'https://nathaningram.com',
"w" => '400',
"h" => '300',
"title" => 'Site Title',
"descr" => 'Site Descrition '
), $atts));
$img = '<div class="snap"><a href="' . $link. '" target="_blank" rel="nofollow">
<img src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '"
alt="' . $title . '" / class="snap-image"</a>
<div class="snap-title">' . $title . '</div>
<div class="snap-descr">' . $descr . ' </div></div>';
return $img;
}
add_shortcode('snap', 'snap_my_web');

Now, let’s walk through the things you need to edit.

  • Do not edit the “snap” URL. This is the location of the WordPress script that will be doing the work for us.
  • “url” is the site for which you want to create a thumbnail. NOTE: if you find the image generated is something screwy, try putting index.php at the end… like http://wordpress.com/index.php. Redirects really mess with the screen capture code, and the index.php seems to help.
  • “link” is the web site where you want the screenshot to link to when clicked (different from the URL in case you want a screenshot of a specific URL or for affiliate sites that do forwarding).
  • “rel=nofollow” is code that will keep Google’s Penguin update from dinging you if you use the code for affiliate links.
  • “w” is the width of the thumbnail you want to create.
  • “h” is, you guessed it,  the height of the thumbnail you want to create.
  • “title” is the title you want to display under the site thumbnail… it also gets put in the image’s alt tag.
  • “descr” is a short description for the site that will appear under the title.

The Shortcode

The code above creates a shortcode called “snap.” Here’s an example of how to use it…

 

The shortcode above automatically creates the image below:

WordPress
WordPress
WordPress is Awesome!

Now try editing a couple of the variables in the shortcode…

Notice the changes in height and width above easily resize your screenshot to half the previous size very easily:

WordPress
WordPress
WordPress is Awesome!

Styling the Output

You may notice in the code you entered in the functions.php that there are classes placed on the image, title, description and on the entire entity. I added those to give you maximum control on what’s being displayed. Below are the styles I use in my styles.css for the snap images. You can, of course, edit these to your preferences.

.snap {
	text-align: center;
}
.snap-image {
	border: 1px solid black;
}

.snap-title {
	font-size: 1.1em;
	font-weight: bold;
}

.snap-descr {
	font-size: .9em;
	font-style: italic;
}

To get the portfolio/gallery effect like I have on my web design and affiliate pages, just add a left float and 25px padding to the bottom and right of the snap class.

Making a Sliding Search Box in WordPress

I’ve had a few people ask for the code to create a sliding search box like the one in the header of this site. It’s quite simple, really, and all done with CSS. The code to accomplish this is below. For those of you using iThemes Builder, which I consider to be the best WordPress theme available, it should work as is. The code should require only minimal modification (if any) for other themes. Just double check the CSS classes on each element to be sure they match what’s below.

In the sample below, the search box expands to the left due to the text-align on the widget area it’s in. That’s how I like it on my site. I just implemented it on a new site in development that has the text-align in the widget area set to center, so the search box expands in both directions at once. It’s a really nice effect. I’ll post the link once that site goes live.

The only thing you’ll need in addition to the code below is the image file for the magnifying class, which should be put in the images folder of your child theme.

← Here is the one I’m using (right click and save-as), or just use your own that’s roughly 20×20 pixels.

This code styles the plain unclicked search box:

.widget_search .search-text-box {
    -moz-transition: 400ms width ease;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width;
    -webkit-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width;
    -o-transition-timing-function: ease;
    background: url("images/search.png") no-repeat scroll 5px 6px #FFFFFF;
    font-size: 0.65em;
    height: 30px;
    padding: 0 10px 0 30px !important;
    width: 55px;
    background-color: #FFFFFF;
    border: 1px solid #cccccc;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
}

This code styles the search box when it’s been clicked:

.widget_search .search-text-box:focus {
    border: 1px solid #777777;
    box-shadow: 0 0 4px 2px #DEDEDE;
    font-size: 0.8em;
    width: 150px;
}