Heartbeat API for WordPress

As part of the JavaScript chapter for our upcoming book Building Web Apps with WordPress, I got a chance to research and work with the Heartbeat API that is new to WordPress 3.6.

It’s a cool little piece of functionality that will help out developers building asynchronous apps on top of WordPress.

At first, I didn’t see the need for it. (It’s not too hard for developers to create their own script to poll the server every few seconds.) But I soon realized why an API like this would be useful. If  you have 5 different plugins all with their own server polling, you are going to have 5 different hits to your server every 15 seconds. However, if they all piggyback on the Heartbeat API, those polling requests are going to be bundled so you are only hitting your server 1 time every 15 seconds. There are other benefits, but that’s the big one to me.

For people trying to get started with the Heartbeat API, I put together this nice little minimal example that you can use as a starting point. The script below simply sends the message “marco” from the client and then detects this on the server and sends back “polo”. The messages are logged in the JavaScript console (so if you inspect elements and click on the console tab in Chrome you will see them). You should be able to easily tweak this to send requests like “how many members are logged in?” and send back a number, etc.

Let me know if you have any questions about the API and I’ll try to address them.

was last updated on . Bookmark the .

Tips and Tricks for Stranger Studios-coded Themes

If you’re a Stranger Studios client using one of our custom WordPress themes, these special formatting options may be available to you. If these tricks aren’t working as intended on your theme, contact us and we will troubleshoot!

Controlling Page Menus

  • Main Navigation Menu: The pages that appear in your site’s main menu have a custom field with the name “mainmenu” and the value “true”.
  • Footer Navigation Menu: The pages that appear in your site’s footer menu have a custom field with the name “footermenu” and the value “true”.
  • Mini-Navigation Menu: Some sites we have coded have a third menu, generally floated in the upper right header space. The pages that appear in your site’s mini menu have a custom field with the name “minimenu” and the value “true”.
  • The order in which the pages appear within the menu is controlled by the page’s “Order” attribute (found in the right hand column of the Edit Page screen within the admin).

Changing the Page title on the page vs. within a menu

Add a custom field with the name “longtitle” and the value of the longer page title. The custom field value will show up within the H2 tag on the page, but the shorter WordPress title will be used within navigation menus.

Hiding pages from the site map / sidebar menus

Add a custom field with the name “hide” and the value “true” to exclude it from your site map and other menus/navigation.

Controlling the content of the 404/Page Not Found

Rather than use the WordPress default content for a 404 page error, your theme has special functionality allowing you to control the text shown on this page. The page can be edited as any other WordPress page within the /wp-admin/ panel under Pages -> Edit Page. If you have a site with a lot of pages, do a page search for “404” to help locate this page.

Horizontal/Divider Line

I generally use a lot of thin grey lines to break up content and divide page or post content into meaningful chunks. This is the code for that thin line:

Here’s the HTML code above rendered as it would appear on your site:

Clearing DIVs

If you are preparing a page with a lot of floating images, you may find the content is rendering funky below the image. In order to clear out that floating image and make the new text render within the full page width, you want to insert a clearing div using this code:

Show excerpts from subpages on a Parent Page

We have written a special shortcode allowing you to display excerpts from the children of a parent page. The order in which these subpage excerpts display is controlled by the subpage’s “Order” attribute (found in the right hand column of the Edit Page screen within the admin). The shortcode will show the subpage title (linked), the excerpt (all content before the subpage’s “more” quicktag), and a link to “Continue Reading More About (subpagetitle) ».

The shortcode that will display subpage excerpts is:


To exclude any child pages from showing up in the list, write down a comma-separate list of subpage ids to exclude and use this shortcode:

[subpagelist exclude="1,2,3"]

Same Page As shortcode

Some clients have asked that one page have the same exact content as another page, just navigated to and titled in a different way. This could be useful if you are running landing page campaigns for the same content with a different styling or special meta data. Thus, we have written a special shortcode making one WordPress page dynamically pull in content from another page.

The shortcode that will display the same content as another page is:

[samepageas id="x"]

Where x is the id of the page you wish to pull in the content from.


If your site is equipped with the SS-Downloads plugin, click here for a tutorial on how to use that functionality. The basic jist is that you add a shortcode with the file name and optional title for download link like this:

[download file="http://path_to_file" title="optional title"]

The SS-Downloads plugin allows you to hide a downloadable file behind a required email capture on your site pages or blog posts. This would be useful for a White Paper download or other private content that you are using to generate a mailing list, track downloads, or simply block from mass-distribution.

was last updated on . Bookmark the .

Hidden 404 Errors with WordPress Plugin Pages

After a couple hours, I’ve tracked down and fixed a bug I was having with some of our WordPress plugins. I believe that there are a few people out there having the same problem. I think there may be another solution online, but it is one of those issues that is difficult to pare down to a good search query.

Anyway here is a solution for “404 issues with plugin pages” or “lynx shows a 404, but the page still loads”, or “Google Webtools says there is a 404, but I can get to the page”, or “setting status to 200:OK still results in 404”, or “I get a 404 in IE, but refreshing the page brings it up”, or “I get random 404 errors in IE”, or “I’m getting an HTTP/1.1 404 Not Found error but the page still loads”.

You may skip ahead to the Final Solution code, but it is probably a good idea to read everything below to make sure that you are indeed having the same issue I had… and that this will actually fix your problem.

The Context

I have some WordPress plguins (Stranger Products, Stranger Events) that generate pages outside of the core WordPress system (i.e. they are not “wordpress pages” in the WP DB, they are web pages generated by our plugin script). To serve these pages, I add a bunch of rules to the .htaccess file to redirect stuff like /products/1/ to a product info page.

Some gallery plugins or other plugins that generate new pages may have a similar setup/issue.

The Problem

While the mod rewrite works fine, and the page loads fine, WordPress doesn’t find a WP page or post for the query string and so sends a “HTTP/1.1 404 File Not Found” status in the header. Most web browsers will ignore this and show the content that comes after the header. It seems that IE will sometimes choke on this status, and other times show the page. Funny IE!

Google’s crawler however will not crawl that page and will let you know in a web toolkit report. Also, I noticed that the lynx command line browser for Linux would show the 404 error and then load the page.

The big issue here is that Google is not going to crawl our page.

The Fix

I spent a lot of time tracking down where in the WordPress code the 404 status is set. Ideally, there would be a plugin “hook” near this that we could use to prevent the 404 status from reaching the browser.

The function that makes the 404 decision is handle_404(), which can be found in the /wp-includes/classes.php file. Here is the code (for WordPress 2.8.4, similar for previous versions I looked at too):

function handle_404() {
	global $wp_query;
	if ( (0 == count($wp_query->posts)) && !is_404() && !is_search() && ( $this->did_permalink || (!empty($_SERVER['QUERY_STRING']) && (false === strpos($_SERVER['REQUEST_URI'], '?'))) ) ) {
		// Don't 404 for these queries if they matched an object.
		if ( ( is_tag() || is_category() || is_author() ) && $wp_query->get_queried_object() ) {
			if ( !is_404() )
				status_header( 200 );
		status_header( 404 );
	} elseif ( !is_404() ) {
		status_header( 200 );

This would be the ideal place to say, “Hey, don’t 404 this page”, but there is no hook in here. I tried setting the $wp->did_permalink flag to FALSE, which worked sometimes, but sometimes WordPress would write that back to TRUE after I reset it. And I’m not even sure what that flag is doing; so playing with it might cause some bugs elsewhere.

The next place to check is the status_header() function called by handle_404. This function is found in the /wp-includes/functions.php file. Here is the code:

function status_header( $header ) {
	$text = get_status_header_desc( $header );

	if ( empty( $text ) )
		return false;

	$protocol = $_SERVER["SERVER_PROTOCOL"];
	if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol )
		$protocol = 'HTTP/1.0';
	$status_header = "$protocol $header $text";
	if ( function_exists( 'apply_filters' ) )
		$status_header = apply_filters( 'status_header', $status_header, $header, $text, $protocol );

	return @header( $status_header, true, $header );

Tada! This function uses the “status_header” hook/filter before updating the header. So we can create a function in our plugin to check the status for a 404 and then return false/NULL if we know that there really is a page to load. Here’s how I did it.

The Final Solution

In PHP code for my pages, I created a global variable called $isapage and set it to true. So at the very top of any page that is giving the 404 errors, add this code:

global $isapage;
$isapage = true;

Now I add the following function and filter to my plugin code:

//this function checks if we have set the $isapage variable, and if so prevents WP from sending a 404
function ssp_status_filter($s)
	global $isapage;
	if($isapage && strpos($s, "404"))
		return false;	//don't send the 404
		return $s;
add_filter('status_header', 'ssp_status_filter');

I hope this helps some people out there.

Feel free to critique this solution. Let me know if I missed something or if there are better ways to do this.

Feel free to post related issues. I may have found solutions to those along the way… or maybe a commenter can help you out.

was last updated on . Bookmark the .

Paginate Your Site Like Digg

Some people were interested in seeing the code I used to create the pagination for WineLog, which was based on the style of pagination used on sites like Digg and Flickr. I’ve put together a little demo which should help out anyone who is trying to create the same effect on their site.

(digg-style pagination demo)

was last updated on . Bookmark the .