This was the box I was designing:

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:

That did it.

Here is the CSS I used:

div.container {
  width: 100px;
  height: 100px;
  background: #666;
  color: #fff;
  text-align: center;
  line-height: 100px; /* where the magic happens */
}

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.

Include this in your functions.php file between the PHP tags:

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;
}

Then you can use it within the WordPress loop like this:

<?php echo short_title('...', 8); ?>

If you would rather count by characters instead of just words, you can add this function to your functions.php file instead of the one above:

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;
}

The following code will first create a new DOMDocument() into which we will load the WordPress.org RSS feed.

$rss = new DOMDocument();
$rss->load('http://wordpress.org/news/feed/');

Then we will single out certain elements and place them into an array. For this example, I will just fetch the title, description, link and published on date.

$feed = array();
foreach ($rss->getElementsByTagName('item') as $node) {
	$item = array ( 
		'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
		'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
		'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
		'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
		);
	array_push($feed, $item);
}

Finally, we set it to display 5 posts on screen with the titles linking directly to the original post.

$limit = 5;
for($x=0;$x<$limit;$x++) {
	$title = str_replace(' & ', ' &amp; ', $feed[$x]['title']);
	$link = $feed[$x]['link'];
	$description = $feed[$x]['desc'];
	$date = date('l F d, Y', strtotime($feed[$x]['date']));
	echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
	echo '<small><em>Posted on '.$date.'</em></small></p>';
	echo '<p>'.$description.'</p>';
}

Put it all together and this is what you get:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
	$rss = new DOMDocument();
	$rss->load('http://wordpress.org/news/feed/');
	$feed = array();
	foreach ($rss->getElementsByTagName('item') as $node) {
		$item = array ( 
			'title' => $node->getElementsByTagName('title')->item(0)->nodeValue,
			'desc' => $node->getElementsByTagName('description')->item(0)->nodeValue,
			'link' => $node->getElementsByTagName('link')->item(0)->nodeValue,
			'date' => $node->getElementsByTagName('pubDate')->item(0)->nodeValue,
			);
		array_push($feed, $item);
	}
	$limit = 5;
	for($x=0;$x<$limit;$x++) {
		$title = str_replace(' & ', ' &amp; ', $feed[$x]['title']);
		$link = $feed[$x]['link'];
		$description = $feed[$x]['desc'];
		$date = date('l F d, Y', strtotime($feed[$x]['date']));
		echo '<p><strong><a href="'.$link.'" title="'.$title.'">'.$title.'</a></strong><br />';
		echo '<small><em>Posted on '.$date.'</em></small></p>';
		echo '<p>'.$description.'</p>';
	}
?>

Not too complicated. All you need to change is the feed you want to load (line #3) and the number of posts to display (line #14). Of course, you could always play around with the output to get it styled exactly how you want. That is totally up to you.

If something seems out of place to you, or if you have any suggestions, please feel free to drop me a line through the contact link in the menu above or leave a comment below.

The new background editor in WordPress 3.0

Activating the background editor only requires that you add one line of code to your theme’s functions.php file.

if(function_exists('add_custom_background')) add_custom_background();

This will add the “Background” link to your Appearance panel in the wp-admin. Placing it inside the function_exists() function makes it backwards compatible in case someone uses your theme with WordPress 2.9.

113
114
115
116
117
118
119
120
121
122
123
124
125
126

    if ($line)
    {
        $output .= "<table><tr><td class=\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= "</td><td class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</td></tr></table>";
    }
    else
    {
        $output .= "<div class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</div>";
    }

We need to add a table to the second output.

113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

    if ($line)
    {
        $output .= "<table><tr><td class=\"line_numbers\">";
        $output .= wp_syntax_line_numbers($code, $line);
        $output .= "</td><td class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</td></tr></table>";
    }
    else
    {
        $output .= "<table><tr><td>";
        $output .= "<div class=\"code\">";
        $output .= $geshi->parse_code();
        $output .= "</div>";
        $output .= "</td></tr></table>";
    }

Next we need to open up wp-syntax.css to change a few of the styles. Change this:

1
2
3
4
5
6
7

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;
}

to:

1
2
3
4
5
6
7
8

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: hidden;
  width: 590px;
}

I put a fixed width of 590px because I have set that as the maximum width of my single posts.

Now comes the jQuery. Open up your theme’s header.php file and add the following between your <head> tags.:

<?php wp_enqueue_script("jquery"); ?>
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery(".wp_syntax").hover(function() {
	var width = jQuery("table", this).width();
	var pad = width + 5;
	if (width > 590) {
		jQuery(this)
			.stop(true, false)
			.css({
				zIndex: "100",
				position: "relative"
			})
			.animate({
				width: pad + "px"
			});
		}
	}, function() {
			jQuery(this).stop(true, false).animate({
				width: 590
		});
	});
});
</script>

What we are doing above is creating an effect that will only occur when you hover over the code box. It finds the width of the table and animates the expansion to the full width. When you hover out, the box returns to the fixed width of your post. Be sure that you set the two references to 590 to whatever you set your width to in the CSS.

Done and done!

To see this in action check out How to Create a Twitter Feed on Your Web Site.

Resource: Making an Expanding Code Box by Chris Coyier

For security reasons, I suggest removing the generator, and doing so only takes one line of code.

The WordPress generator line looks like this:

<meta name="generator" content="WordPress 2.8" />

To get rid of it, open up your functions.php file. It is located in your theme’s folder. If there is no functions.php file, create one and just add the following code.

remove_action('wp_head', 'wp_generator');

Be sure to place it between <?php><?> tags.

The !Important declaration

Placing the !Important declaration after a style is a way to force that style to be applied even if they may be contradicted further down in your CSS.

Examples:

h1 { color: #ff0000; }
h1 { color: #000000; }

In the above example, your H1 tags will be black.

h1 { color: #ff0000 <span style="color: #ff0000;">!Important</span>; }
h1 { color: #000000; }

By adding the !Important declaration, you force the first style to be applied even though the style below should overwrite it.

Upload the contact.php file and the secureimage folder to your current WordPress theme’s directory and then create a page in you admin panel. Choose “Contact” as your template and save the page as “Contact”. You need to have your permalinks set to Custom Structure or else you would need to change line 15 to something like ?p=123 (change 123 to the ID of your contact page).