Erik Teichmann

This is something I’ve been waiting for for a long time. It looks like full-on menu management will make it into WordPress 3.0, due to be released sometime in May. WooThemes was asked to contribute their “WooNav” plugin to inclusion in core.

Here’s what it currently looks like:

The Trac page for this functionality is pretty bumping, and you can see other proposed UI styles. I’m excited to see this make it in, I just wish it was being released sooner!

Custom fields are great for adding additional functionality into WordPress sites. I have used them in the past to set up post thumbnails, for music album metadata, such as artists and album year, to set articles to link to their original sources, and many others.

The problem is, the default interface for adding custom fields is very clunky. The user has to either manually type in the field name, or select it from a list.

This doesn’t work too well for an average client. The reason I use WordPress on my sites in the first place is for ease of use. Fortunately, there’s an easy way to use custom input boxes! Simply paste the code below into your theme’s “functions.php” file, adjust the variables, and you’re good to go!

/* add actions to admin menu */

add_action('admin_menu', 'fieldname_add_custom_box');



/* use save_post action to handle data entered */

add_action('save_post', 'fieldname_save_postdata');



/* Adds a custom section to the "side" of the post edit screen */

function fieldname_add_custom_box() {

    if(function_exists('add_meta_box')) {

	add_meta_box('fieldname', 'fieldname', 'fieldname_custom_box', 'page', 'normal', 'high');

    }

}



/* prints the custom field in the new custom post section */

function fieldname_custom_box() {

    //get post meta value

    global $post;

    $fieldname = get_post_meta($post->ID,'fieldname',true);



    // use nonce for verification

    echo '';



    // The actual fields for data entry

    echo '
Label
';

    echo 'Label:';

    echo '';

    echo '
Description of what this field does.
';

}



/* when the post is saved, save the custom data */

function fieldname_save_postdata($post_id) {

    // verify this with nonce because save_post can be triggered at other times

    if (!wp_verify_nonce($_POST['fieldname_noncename'], 'fieldname')) return $post_id;



    // do not save if this is an auto save routine

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;



    $fieldname = $_POST['fieldname'];

    update_post_meta($post_id, 'fieldname', $fieldname);

}

Go in there and replace fieldname with the name of your custom field, and fill in Label and the description and save your file. You can also add multiple fields into one option group. If you want this box to show up on posts instead of pages, change “page” to “post” in the arguments for add_meta_box().

This is what the new field looks like when setup on a site. This box lives just below the main entry area. You can adjust the options in add_meta_box() to change the placement on the page. I hope this helps you improve the usability on your WordPress site!

After searching for at least an hour, this fell into my lap.

With the wide variety of Javascript libraries that are used across the web today, whenever I’m putting together a site, I always wind up using functionality from more than one, usually because Plugin X uses jQuery and Plugin Y uses Prototype.js or Scriptaculous. The problem here is that these file sizes quickly add up. For example, the version of Prototype that ships with WordPress weighs in at 121kb alone.

The solution? Load these libraries from Google. This helps in a few ways. One, it takes a bit of load off your server, which is nice. Secondly, the plugin will automagically use compressed and minified versions of the libraries where available. That cuts down on load time. But the kicker? Many users will already have these versions cached. That means no download time at all!

Download the “Use Google Libraries” plugin from WordPress.org and feel your site speed up and your server sigh in relief.

Yes, the “page fold” does exist in web design, but it doesn’t have as much an impact as many people think.

While it is important to have visually appealing design and attention grabbing content “above the fold,” users are accustomed to scrolling down a page to get to the content they need. In this study, the researchers actually found that less content at the top of the page actually encourages exploration further down the page.

The moral of this story: Let your content breathe. A user is more likely to find what they’re looking for by scrolling down a long page than they are by struggling through densely packed content “above the fold.”

Thankfully we’re on an accelerated system.

Did you know that according to the W3C, 1% of internet users are still running in 256 colors? Let’s hope they’re not running at 320x200 pixels.

It’s tough to accommodate all users on their myriad platforms and display hardware. These days, I design for 1024x768 pixels or larger. Most of my sites are based on the excellent 960 Grid System which helps me rapidly prototype CSS layouts. Also according to the W3C, around 93% of users have a screen resolution of 1024x768 or higher.

It’s going to be exciting to see what changes the widescreen revolution will have on web design!

We’re sitting on the floor around a dead tree eating candy out of our socks.

To speed up work on Windows 7, you can adjust the delay for previews to pop-up in the taskbar. I’ve set mine to 100ms, down from the default of 400ms, which helps me feel like I’m not slowing down to switch windows.

Smashing Magazine has some great tips up for adding custom functionality to WordPress for theme developers. The “Adding a Custom Meta Box” section is particularly good, it’s nice to see that functionality explained clearly. Also detailed are custom taxonomies, customizing the built-in help feature and adding dashboard widgets. A good read!

A List Apart is running their “Survey for People Who Make Websites.” It will be interesting to see the data from this. They need lots of participants, so if you are in fact a person who makes websites, go take the survey!

I’ve been fooling around with Flavors.me, a new social-networking aggregation type site. After creating an account, you can pull in data from a variety of sites like Facebook, Twitter, Tumblr and more, or you can pull in data from an RSS feed. It works pretty well when it works—the developers are still working out some bugs. Definitely a good one-stop-shop for the less technically inclined who need a personal web presence.

This is one of my recent web projects. Cross-browser testing is currently underway. The guys from this group really like their new site!

This is a bit of code that will can be used as a page template in WordPress. It first displays the parent page, then enters a loop to display all of the child pages. This is really useful for organization in large WordPress-as-a-CMS sites.

Just make a new PHP file in your theme directory and paste in this code:

<?php
/*
Template Name: Section Listing Page
*/
?>

<?php get_header(); ?>

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
	<div class="post" id="<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2><?php edit_post_link('Edit this Page','<p class="meta">','</p>'); ?>
		<div class="entry">
			<?php the_content(); ?>
		</div>
	</div> <!-- end "post" -->
	<?php $pageid = get_the_ID(); ?>
<?php endwhile; endif; ?>

<?php $subpages = new WP_Query("post_parent=$pageid&post_type='page'&orderby=title&order=ASC");
		if($subpages->have_posts()) : while($subpages->have_posts()) : $subpages->the_post(); ?>
			<div class="post">
					<?php echo '<h3><a name="' . the_slug() . '" href="' . the_permalink() . '">' . get_the_title() . '</a></h3>'; ?>
				<?php edit_post_link('Edit this Page','<p class="meta">','</p>'); ?>
				<div class="entry">
					<?php the_content(); ?>
				</div>
			</div>
		<?php endwhile; endif; ?>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Then all you need to do is select your file under “Page Template” on the edit screen.

Our Christmas card this year.

When I develop for WordPress, I start out on my local machine, then eventually migrate to the production server. This works very well, but takes a bit more work when I get to the migration stage. To make it a little easier, I use this little function to eliminate any hard-coded page IDs in navigation links or conditional statements:

function get_ID_by_slug($page_slug) {
    $page = get_page_by_path($page_slug);
    if ($page) {
        return $page->ID;
    } else {
        return null;
    }
}

Then, whenever we need to call a function that requires a page ID, just pass it our new function.

wp_some_function(get_ID_by_slug('any-page'));

I’ve worked with a number of people who use the NextGen Image Gallery plugin for WordPress. A common problem that folks have with NextGen is that it doesn’t allow for full-size images to be displayed in an RSS feed. The user instead has to click through to the site to see the full images. If you don’t like that, you can use this code to make the full images show up!

Eventually, I’ll be releasing this as a free WP plugin, but for now, by popular demand, I’m posting it here. Simply paste this code into your theme’s functions.php file (before the ?> at the end) and you should be good to go!

//Change Thumbnails to Full Images in RSS feed
function change_thumbs($content) { 
    // See if we're dealing with a feed
    if (is_feed()) {
        // Strip out the parts of img src that lead to thumbnails
        $content = str_replace("thumbs/thumbs_", "", $content);
        $content = str_replace("width=\"208\"", "", $content);
        $content = str_replace("height=\"156\"", "", $content);
    }
    // Send the content on its way
    return $content; 
} 
// Add filters for RSS
add_filter('the_excerpt_rss', 'change_thumbs', 20); 
add_filter('the_content', 'change_thumbs', 20); 

If you don’t feel comfortable mucking around in code, feel free to contact me for a quick quote to set this up on your site.

I recently spent a little time developing a skin for the excellent VLC media player. The skin is designed to match the look of my favorite twitter app, DestroyTwitter. If you use VLC, you can download the skin here.

I recently stumbled across this excellent tutorial for creating a nice mega dropdown menu using jQuery and standard CSS. This is an excellent choice for many sites from a usability standpoint, so I worked up some functionality to add this to a WordPress theme.

Follow the tutorial to create your menu. When you’re finished, you’ll have a nice static menu. Now we can add some magic to link the menu to WordPress pages and sub-pages. Split the code for your menu into a separate PHP file (I called mine navigation.php) and use <?php include(navigation.php); ?> in your header.php file to call it. Then, paste the following function into either your navigation.php or your functions.php file.

function print_subnav($parent_id) {
    $pages = get_pages('child_of=' . $parent_id);

    if(!empty($pages)) {
    	echo '<div class="sub">';

	foreach($pages as $page) {
	    if($page->post_parent==$parent_id) {

		echo '<ul>';
		$before = '<h2>';
		$after = '</h2>';
		echo '<li>' . $before . '<a href="' . get_page_link($page->ID) . '">' . $page->post_title . '</a>' . $after .'</li>';

		$grandchildren = get_pages('child_of=' . $page->ID);
		foreach($grandchildren as $grandchild) {
		    echo '<li><a href="' . get_page_link($page->ID) . '#' . $grandchild->post_name . '">' . $grandchild->post_title . '</a></h2></li>';
		}
	    }
	}
	echo '</div>';
    }
}

Now, you simply have to add a function call under each list item, taking the place of the div.sub block:

print_subnav(121); //Use the page ID

And there you have it, automatic child page navigation!

Kind of ridiculous that I’m having another go at blogging. But, this is a tumbleblog, so things may turn out different. Anyway, I’ll try to document my experiences working as a freelance web developer and graphic designer. Expect to see WordPress snippets, samples of work in progress, and general fun from the web.

Let’s see if this goes anywhere, shall we?